<template>
  <div class="inspect-order-detail-page" v-loading="formLoading">
    <header class="page-header">
      <div class="page-header__main">
        <div class="page-header__icon"><Icon icon="ep:document" /></div>
        <div class="page-header__content">
          <h1>{{ formData.inspectOrderTitle || '巡检工单详情' }}</h1>
          <p>查看工单基础信息及设备巡检结果统计</p>
        </div>
      </div>
      <el-button size="default" @click="close">
        <Icon icon="ep:arrow-left" class="mr-5px" />返回
      </el-button>
    </header>

    <section class="detail-section">
      <header class="section-heading"><span></span>工单信息</header>
      <div class="detail-grid">
        <div class="detail-item">
          <span class="detail-item__label">{{ t('main.planCode') }}</span>
          <span class="detail-item__value">{{ formData.planCode || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-item__label">{{ t('bomList.name') }}</span>
          <span class="detail-item__value">{{ formData.inspectOrderTitle || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-item__label">{{ t('bomList.code') }}</span>
          <span class="detail-item__value">{{ formData.inspectOrderCode || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-item__label">{{ t('iotMaintain.PersonInCharge') }}</span>
          <span class="detail-item__value">{{ formData.chargeName || '-' }}</span>
        </div>
        <div class="detail-item detail-item--multiline">
          <span class="detail-item__label">{{ t('inspect.reason') }}</span>
          <span class="detail-item__value">{{ formData.reason || '-' }}</span>
        </div>
        <div class="detail-item detail-item--multiline">
          <span class="detail-item__label">{{ t('iotMaintain.remark') }}</span>
          <span class="detail-item__value">{{ formData.remark || '-' }}</span>
        </div>
      </div>
    </section>

    <section class="detail-section device-section">
      <header class="section-heading section-heading--between">
        <div class="section-heading__title"><span></span>巡检设备</div>
        <div class="device-count">共 {{ list.length }} 台</div>
      </header>
      <div class="table-body">
        <el-auto-resizer class="table-resizer">
          <template #default="{ width, height }">
            <ZmTable
              :loading="loading"
              :data="list"
              :width="width"
              :height="height"
              :max-height="height"
              show-border
              settings-cache-key="pms-inspect-order-detail-device-list">
              <ZmTableColumn :label="t('iotMaintain.deviceCode')" prop="deviceCode" />
              <ZmTableColumn :label="t('iotMaintain.deviceName')" prop="deviceName" />
              <ZmTableColumn :label="t('inspect.itemNeed')" prop="itemNeed">
                <template #default="scope">
                  <el-tag type="info">{{ scope.row.itemNeed }}</el-tag>
                </template>
              </ZmTableColumn>
              <ZmTableColumn :label="t('inspect.itemNormal')" prop="itemNormal">
                <template #default="scope">
                  <el-tag type="success">{{ scope.row.itemNormal }}</el-tag>
                </template>
              </ZmTableColumn>
              <ZmTableColumn :label="t('inspect.itemException')" prop="itemException">
                <template #default="scope">
                  <el-tag type="danger">{{ scope.row.itemException }}</el-tag>
                </template>
              </ZmTableColumn>
              <ZmTableColumn
                :label="t('iotMaintain.operation')"
                :width="160"
                fixed="right"
                hide-in-column-settings
                action>
                <template #default="scope">
                  <el-button link type="primary" @click="viewRoute(scope.row.orderDetails)">
                    <Icon icon="ep:view" class="mr-5px" />{{ t('route.InspectionRoute') }}
                  </el-button>
                </template>
              </ZmTableColumn>
            </ZmTable>
          </template>
        </el-auto-resizer>
      </div>
    </section>

    <footer class="action-bar">
      <el-button size="default" @click="close">
        <Icon icon="ep:arrow-left" class="mr-5px" />返回
      </el-button>
    </footer>

    <RouteInspectItemDrawer
      ref="showDrawer"
      :model-value="drawerVisible"
      @update:model-value="(val) => (drawerVisible = val)" />
  </div>
</template>

<script setup lang="ts">
import { useTagsViewStore } from '@/store/modules/tagsView'
import RouteInspectItemDrawer from '@/views/pms/inspect/plan/RouteInspectItemDrawer.vue'
import { IotInspectOrderApi, IotInspectOrderVO } from '@/api/pms/inspect/order'
import { useTableComponents } from '@/components/ZmTable/useTableComponents'

type InspectOrderDeviceRow = {
  deviceCode: string
  deviceName: string
  itemNeed: number
  itemNormal: number
  itemException: number
  orderDetails: unknown[]
}

type InspectOrderDetail = IotInspectOrderVO & {
  planCode?: string
  chargeName?: string
  reason?: string
}

const { ZmTable, ZmTableColumn } = useTableComponents<InspectOrderDeviceRow>()

defineOptions({ name: 'InspectOrderDetail' })

const { t } = useI18n()
const { delView } = useTagsViewStore()
const { currentRoute, push } = useRouter()
const { params } = useRoute()
const id = params.id

const formLoading = ref(false)
const loading = ref(false)
const drawerVisible = ref(false)
const showDrawer = ref()
const list = ref<InspectOrderDeviceRow[]>([])
const formData = ref<Partial<InspectOrderDetail>>({})

const viewRoute = (orderDetails: unknown[]) => {
  drawerVisible.value = true
  showDrawer.value.openDrawer(orderDetails)
}

const close = () => {
  delView(unref(currentRoute))
  push({ name: 'IotInspectOrder', params: {} })
}

onMounted(async () => {
  if (!id) return

  formLoading.value = true
  loading.value = true
  try {
    const inspectOrder = (await IotInspectOrderApi.getIotInspectOrder(id)) as InspectOrderDetail
    formData.value = inspectOrder
    list.value = (inspectOrder.details || []) as InspectOrderDeviceRow[]
  } finally {
    formLoading.value = false
    loading.value = false
  }
})
</script>

<style scoped>
@media (width <= 1400px) {
  .inspect-order-detail-page .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 768px) {
  .inspect-order-detail-page .page-header {
    align-items: flex-start;
  }

  .inspect-order-detail-page .page-header p {
    display: none;
  }

  .inspect-order-detail-page .detail-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .inspect-order-detail-page .detail-item {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

.inspect-order-detail-page {
  display: flex;
  min-height: calc(
    100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
  );
  flex-direction: column;
  gap: 12px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 12px 16px;
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
}

.page-header__main {
  display: flex;
  align-items: center;
  min-width: 0;
}

.page-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 12px;
  font-size: 18px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary-light-7);
  border-radius: 8px;
}

.page-header__content {
  min-width: 0;
}

.page-header h1 {
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: var(--el-text-color-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-header p {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--el-text-color-secondary);
}

.detail-section {
  overflow: hidden;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-lighter);
}

.section-heading {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  background: var(--el-fill-color-extra-light);
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.section-heading > span,
.section-heading__title > span {
  width: 4px;
  height: 17px;
  margin-right: 9px;
  background: var(--el-color-primary);
  border-radius: 2px;
}

.section-heading--between {
  justify-content: space-between;
}

.section-heading__title {
  display: flex;
  align-items: center;
}

.device-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--el-text-color-secondary);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 16px;
  gap: 12px 24px;
}

.detail-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  min-height: 38px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  align-items: start;
}

.detail-item__label {
  color: var(--el-text-color-secondary);
  white-space: nowrap;
}

.detail-item__value {
  min-width: 0;
  font-weight: 500;
  color: var(--el-text-color-primary);
  overflow-wrap: anywhere;
}

.detail-item--multiline .detail-item__value {
  white-space: pre-wrap;
}

.device-section {
  display: flex;
  min-height: 320px;
  flex: 1;
  flex-direction: column;
}

.table-body {
  position: relative;
  min-width: 0;
  min-height: 260px;
  overflow: hidden;
  box-sizing: border-box;
  flex: 1;
}

.table-resizer {
  position: absolute;
  inset: 12px 12px 18px;
  width: auto !important;
  height: auto !important;
  min-width: 0;
}

.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 56px;
  padding: 10px 16px;
  margin-top: auto;
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color-lighter);
  box-shadow: 0 -4px 12px rgb(0 0 0 / 5%);
}
</style>
