<template>
  <ContentWrap>
    <div v-loading="detailLoading" class="device-ledger-detail-body">
      <el-descriptions :column="3" class="device-ledger-detail-desc">
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceNo')">
          {{ detailData?.deviceCode ?? '' }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')">
          {{ detailData?.deviceName ?? '' }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')">
          <dict-tag type="mes_tz_status" :value="detailData?.deviceStatus" />
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')">
          {{ detailData?.deviceModel ?? '' }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')">
          {{ detailData?.deviceSpec ?? '' }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')">
          <el-tag effect="light">{{ getDeviceTypeName(detailData?.deviceTypeName ?? detailData?.deviceType) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')">
          {{ detailData?.deviceLocation ?? '' }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')">
          {{ detailData?.deviceManagerName ?? '' }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')">
          {{ formatDetailDate(detailData?.productionDate) }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')">
          {{ formatDetailDate(detailData?.factoryEntryDate) }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.remark')">
          {{ detailData?.remark ?? detailData?.deviceRemark ?? '' }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.creatorName')">
          {{ detailData?.creatorName ?? '' }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.createTime')">
          {{ formatDetailDate(detailData?.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.updateTime')">
          {{ formatDetailDate(detailData?.updateTime) }}
        </el-descriptions-item>
      </el-descriptions>

      <div v-if="detailData?.qrcodeUrl" class="device-ledger-detail-qrcode">
        <QrcodeActionCard
          :image-url="detailData.qrcodeUrl"
          :print-id="detailData.id || detailData.deviceCode"
          :print-title="`${detailData.deviceName || '设备'}码打印预览`"
          :print-paper-width="80"
          :print-paper-height="80"
          :print-max-width="220"
          :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
          :error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
          :template-json="detailTemplateJson"
          :print-data="buildDetailPrintData()"
          :show-refresh="false"
        />
      </div>

      <div class="device-ledger-detail-tabs">
        <el-tabs v-model="detailActiveTab" class="mt-12px">
          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.checkHistory')" name="check">
            <div class="device-ledger-tab-toolbar">
              <el-date-picker
                v-model="inspectionDateRange"
                type="daterange"
                value-format="YYYY-MM-DD HH:mm:ss"
                :start-placeholder="t('common.startTimeText')"
                :end-placeholder="t('common.endTimeText')"
                range-separator="-"
                :unlink-panels="true"
                class="mr-10px"
              />
              <el-button type="primary" plain @click="handleQueryInspection">{{ t('common.query') }}</el-button>
              <el-button @click="handleResetInspection">{{ t('common.reset') }}</el-button>
              <el-button
                type="success"
                plain
                :loading="inspectionExportLoading"
                @click="handleExportInspection"
                v-hasPermi="['mes:device-ledger:export']"
              >
                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
              </el-button>
            </div>
            <el-empty v-if="!inspectionStepGroups.length" />
            <el-steps
              v-else
              direction="vertical"
              :active="inspectionStepGroups.length"
              class="device-ledger-history-steps"
            >
              <el-step v-for="group in inspectionStepGroups" :key="group.key" style="margin-top:8px">
                <template #title>
                  <div class="device-ledger-history-title">
                    <span class="device-ledger-history-time">[{{ group.time }}]</span>
                    <span class="device-ledger-history-operator">{{ t('EquipmentManagement.EquipmentLedger.operator') }}: {{ group.operator }}</span>
                  </div>
                </template>
                <template #description>
                  <div class="device-ledger-history-items">
                    <div v-for="item in group.items" :key="item.key" class="device-ledger-history-item">
                      <div class="device-ledger-history-item-head">
                        <el-tag :type="getResultTagType(item.result)">{{ getResultLabel(item.result) }}</el-tag>
                        <span class="device-ledger-history-item-text">{{ item.name }}</span>
                      </div>
                      <div class="device-ledger-history-item-body">
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.checkMethod') }}</span>
                          <span class="device-ledger-history-item-value">
                            <dict-tag type="Inspection_method" :value="item.method" />
                          </span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.criteria') }}</span>
                          <span class="device-ledger-history-item-value">{{ item.criteria ?? '-' }}</span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.checkTime') }}</span>
                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.taskTime) }}</span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.createTime') }}</span>
                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.createTime) }}</span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.remark') }}</span>
                          <span class="device-ledger-history-item-value">{{ item.remark ?? '-' }}</span>
                        </div>
                        <div v-if="item.images?.length" class="device-ledger-history-item-images">
                          <el-image
                            v-for="img in item.images"
                            :key="img"
                            :src="img"
                            :preview-src-list="item.images"
                            preview-teleported
                            fit="cover"
                            class="device-ledger-history-item-image"
                          >
                            <template #error>
                              <div class="device-ledger-history-image-error">图片加载失败</div>
                            </template>
                          </el-image>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </el-step>
            </el-steps>
          </el-tab-pane>

          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.maintainHistory')" name="maintain">
            <div class="device-ledger-tab-toolbar">
              <el-date-picker
                v-model="maintainDateRange"
                type="daterange"
                value-format="YYYY-MM-DD HH:mm:ss"
                :start-placeholder="t('common.startTimeText')"
                :end-placeholder="t('common.endTimeText')"
                range-separator="-"
                :unlink-panels="true"
                class="mr-10px"
              />
              <el-button type="primary" plain @click="handleQueryMaintain">{{ t('common.query') }}</el-button>
              <el-button @click="handleResetMaintain">{{ t('common.reset') }}</el-button>
              <el-button
                type="success"
                plain
                :loading="maintainExportLoading"
                @click="handleExportMaintain"
                v-hasPermi="['mes:device-ledger:export']"
              >
                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
              </el-button>
            </div>
            <el-empty v-if="!maintainStepGroups.length" />
            <el-steps
              v-else
              direction="vertical"
              class="device-ledger-history-steps"
              :active="maintainStepGroups.length"
            >
              <el-step v-for="group in maintainStepGroups" :key="group.key" style="margin-top:8px">
                <template #title>
                  <div class="device-ledger-history-title">
                    <span class="device-ledger-history-time">[{{ group.time }}]</span>
                    <span class="device-ledger-history-operator">{{ t('EquipmentManagement.EquipmentLedger.operator') }}: {{ group.operator }}</span>
                  </div>
                </template>
                <template #description>
                  <div class="device-ledger-history-items">
                    <div v-for="item in group.items" :key="item.key" class="device-ledger-history-item">
                      <div class="device-ledger-history-item-head">
                        <el-tag :type="getResultTagType(item.result)">{{ getResultLabel(item.result) }}</el-tag>
                        <span class="device-ledger-history-item-text">{{ item.name }}</span>
                      </div>
                      <div class="device-ledger-history-item-body">
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.maintainMethod') }}</span>
                          <span class="device-ledger-history-item-value">
                            <dict-tag type="Inspection_method" :value="item.method" />
                          </span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.criteria') }}</span>
                          <span class="device-ledger-history-item-value">{{ item.criteria ?? '-' }}</span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.maintainTime') }}</span>
                          <span class="device-ledger-history-item-value">{{ String(formatHistoryTime(item.taskTime)) }}</span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.createTime') }}</span>
                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.createTime) }}</span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.remark') }}</span>
                          <span class="device-ledger-history-item-value">{{ item.remark ?? '-' }}</span>
                        </div>
                        <div v-if="item.images?.length" class="device-ledger-history-item-images">
                          <el-image
                            v-for="img in item.images"
                            :key="img"
                            :src="img"
                            :preview-src-list="item.images"
                            preview-teleported
                            fit="cover"
                            class="device-ledger-history-item-image"
                          >
                            <template #error>
                              <div class="device-ledger-history-image-error">图片加载失败</div>
                            </template>
                          </el-image>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </el-step>
            </el-steps>
          </el-tab-pane>

          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.repairHistory')" name="repair">
            <div class="device-ledger-tab-toolbar">
              <el-date-picker
                v-model="repairDateRange"
                type="daterange"
                value-format="YYYY-MM-DD HH:mm:ss"
                :start-placeholder="t('common.startTimeText')"
                :end-placeholder="t('common.endTimeText')"
                range-separator="-"
                :unlink-panels="true"
                class="mr-10px"
              />
              <el-button type="primary" plain @click="handleQueryRepair">{{ t('common.query') }}</el-button>
              <el-button @click="handleResetRepair">{{ t('common.reset') }}</el-button>
              <el-button
                type="success"
                plain
                :loading="repairExportLoading"
                @click="handleExportRepair"
                v-hasPermi="['mes:device-ledger:export']"
              >
                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
              </el-button>
            </div>
            <el-empty v-if="!repairGroups.length" />
            <el-collapse v-else v-model="repairActiveNames" class="device-ledger-repair-collapse">
              <el-collapse-item v-for="group in repairGroups" :key="group.key" :name="group.key">
                <template #title>
                  <div class="device-ledger-repair-title">
                    <span class="device-ledger-repair-name">{{ group.name }}</span>
                    <span class="device-ledger-repair-meta">共{{ group.items.length }}条</span>
                  </div>
                </template>
                <div class="device-ledger-history-items">
                  <div
                    v-for="row in group.items"
                    :key="String(row.id ?? row.subjectId ?? row.subjectCode)"
                    class="device-ledger-history-item"
                  >
                    <div class="device-ledger-history-item-head">
                      <el-tag type="info" effect="light">{{ row.subjectCode ?? '-' }}</el-tag>
                      <span class="device-ledger-history-item-text">{{ row.subjectName ?? '-' }}</span>
                    </div>
                    <div class="device-ledger-history-item-body">
                      <div class="device-ledger-history-item-row">
                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.projectName') }}</span>
                        <span class="device-ledger-history-item-value">{{ row.subjectContent ?? '-' }}</span>
                      </div>
                      <div class="device-ledger-history-item-row">
                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.repairResult') }}</span>
                        <span class="device-ledger-history-item-value">
                          <el-tag :type="getResultTagType(row.result ?? row.repairResult)">
                            {{ getResultLabel(row.repairResult ?? row.result) }}
                          </el-tag>
                        </span>
                      </div>
                      <div class="device-ledger-history-item-row">
                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.remark') }}</span>
                        <span class="device-ledger-history-item-value">{{ row.remark ?? '-' }}</span>
                      </div>
                      <div class="device-ledger-history-item-row">
                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.finishDate') }}</span>
                        <span class="device-ledger-history-item-value">{{ String(formatHistoryTime(row.finishDate)).split(' ')[0] }}</span>
                      </div>
                      <div v-if="row.malfunctionImages?.length" class="device-ledger-history-item-images">
                        <el-image
                          v-for="img in row.malfunctionImages"
                          :key="img"
                          :src="img"
                          :preview-src-list="row.malfunctionImages"
                          preview-teleported
                          fit="cover"
                          class="device-ledger-history-item-image"
                        >
                          <template #error>
                            <div class="device-ledger-history-image-error">图片加载失败</div>
                          </template>
                        </el-image>
                      </div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>

          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" name="criticalComponent">
            <div class="device-ledger-tab-toolbar">
              <el-button
                type="success"
                plain
                :loading="criticalExportLoading"
                @click="handleExportCriticalComponent"
                v-hasPermi="['mes:device-ledger:export']"
              >
                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
              </el-button>
            </div>
            <el-table v-loading="tableLoading" :data="detailData?.componentList" :stripe="true" :show-overflow-tooltip="true">
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentCode')" align="center" prop="code" min-width="140" sortable />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentName')" align="center" prop="name" min-width="140" sortable />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentDesc')" align="center" prop="description" min-width="180" />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')" align="center" prop="remark" min-width="180" />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180" sortable />
            </el-table>
          </el-tab-pane>

          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.sparePart')" name="component">
            <div class="device-ledger-tab-toolbar">
              <el-button
                type="success"
                plain
                :loading="spareExportLoading"
                @click="handleExportSpareBased"
                v-hasPermi="['mes:device-ledger:export']"
              >
                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
              </el-button>
            </div>
            <el-table v-loading="tableLoading" :data="detailData?.beijianList" :stripe="true" :show-overflow-tooltip="true">
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareCode')" align="center" prop="barCode" sortable />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareName')" align="left" prop="name" width="220px" sortable />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.category')" align="center" prop="categoryName" sortable />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.unit')" align="center" prop="unitName" sortable />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable />
            </el-table>
          </el-tab-pane>

          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.mold')" name="mold">
            <el-table v-loading="tableLoading" :data="detailData?.moldList" :stripe="true" :show-overflow-tooltip="true">
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldCode')" align="center" prop="code" min-width="140" sortable />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldName')" align="center" prop="name" min-width="140" sortable />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldRemark')" align="center" prop="remark" min-width="180" />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180" sortable />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { dateFormatter, formatDate } from '@/utils/formatTime'
import download from '@/utils/download'
import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
import { DeviceTypeApi, DeviceTypeTreeVO } from '@/api/mes/devicetype'
import { CriticalComponentApi } from '@/api/mes/criticalComponent'
import { TicketManagementApi } from '@/api/mes/ticketManagement'
import { DvRepairApi } from '@/api/mes/dvrepair'
import QrcodeActionCard from '@/components/QrcodeActionCard/index.vue'
import { useTagsViewStore } from '@/store/modules/tagsView'

defineOptions({ name: 'MesDeviceLedgerDetail' })

const { t } = useI18n()
const message = useMessage()
const route = useRoute()
const { delView } = useTagsViewStore()
const { currentRoute } = useRouter()

const deviceId = computed(() => Number(route.params.id))
const detailLoading = ref(false)
const tableLoading = ref(false)
const detailData = ref<DeviceLedgerVO | undefined>()
const detailActiveTab = ref('check')

const deviceTypeNameMap = ref<Record<number, string>>({})

const buildDeviceTypeNameMap = (nodes: DeviceTypeTreeVO[]) => {
  const map: Record<number, string> = {}
  const stack = [...nodes]
  while (stack.length) {
    const node = stack.pop()!
    if (typeof node.id === 'number') map[node.id] = node.name
    if (Array.isArray(node.children) && node.children.length) stack.push(...node.children)
  }
  deviceTypeNameMap.value = map
}

const getDeviceTypeName = (value: any) => {
  const id = typeof value === 'number' ? value : Number(value)
  if (!Number.isNaN(id) && deviceTypeNameMap.value[id]) return deviceTypeNameMap.value[id]
  return value ?? ''
}

const detailTemplateJson = computed(() => {
  const templateJson = detailData.value?.templateJson
  if (!templateJson) return undefined
  if (typeof templateJson === 'string') {
    try {
      return JSON.parse(templateJson)
    } catch {
      return undefined
    }
  }
  return templateJson
})

const buildDetailPrintData = () => {
  return {
    id: detailData.value?.id,
    deviceCode: detailData.value?.deviceCode,
    deviceName: detailData.value?.deviceName,
    deviceSpec: detailData.value?.deviceSpec,
    deviceBrand: detailData.value?.deviceBrand,
    deviceModel: detailData.value?.deviceModel,
    deviceLocation: detailData.value?.deviceLocation,
    remark: detailData.value?.remark ?? detailData.value?.deviceRemark,
    qrcodeUrl: detailData.value?.qrcodeUrl
  }
}

const formatDetailDate = (value: any) => {
  if (!value) return ''
  return formatDate(new Date(value), 'YYYY-MM-DD')
}

const formatHistoryTime = (value: any) => {
  const raw = value ?? '-'
  if (Array.isArray(raw) && raw.length >= 3) {
    const [y, m, d, hh, mm, ss] = raw
    const pad = (n: any) => String(n).padStart(2, '0')
    if (hh !== undefined) return `${y}-${pad(m)}-${pad(d)} ${pad(hh)}:${pad(mm)}:${pad(ss)}`
    return `${y}-${pad(m)}-${pad(d)}`
  }
  const tryDateFromNumber = (v: any) => {
    const num = Number(v)
    if (!Number.isFinite(num)) return undefined
    const s = String(v).trim()
    const ms = s.length === 10 ? num * 1000 : num
    const d = new Date(ms)
    if (Number.isNaN(d.getTime())) return undefined
    return d
  }
  const tryDateFromString = (v: any) => {
    const s = String(v).trim()
    if (!s) return undefined
    const d = new Date(s)
    if (Number.isNaN(d.getTime())) return undefined
    return d
  }
  const d = typeof raw === 'number' ? tryDateFromNumber(raw) : tryDateFromNumber(raw) ?? tryDateFromString(raw)
  if (d) return formatDate(d, 'YYYY-MM-DD HH:mm:ss')
  return String(raw)
}

const getResultLabel = (value: any) => {
  const v = value === '' || value === null || value === undefined ? undefined : String(value)
  if (!v) return '-'
  const upper = v.toUpperCase()
  if (v === '0') return '待检测'
  if (v === '1' || upper === 'OK') return '通过'
  if (v === '2' || upper === 'NG') return '不通过'
  return v
}

const getResultTagType = (value: any) => {
  const v = value === '' || value === null || value === undefined ? undefined : String(value)
  if (!v) return 'info'
  const upper = v.toUpperCase()
  if (v === '1' || upper === 'OK') return 'success'
  if (v === '2' || upper === 'NG') return 'danger'
  if (v === '0') return 'info'
  return 'info'
}

const parseImages = (value: any): string[] => {
  if (!value) return []
  if (Array.isArray(value)) return value.map(String).filter(Boolean)
  const cleaned = String(value).replace(/[`'"]/g, '').trim()
  return cleaned
    .split(',')
    .map((v) => v.trim())
    .filter(Boolean)
}

type HistoryStepItem = {
  key: string
  name: string
  result: any
  method?: any
  criteria?: any
  images?: string[]
  remark?: any
  taskTime?: any
  createTime?: any
}
type HistoryStepGroup = { key: string; time: string; operator: string; items: HistoryStepItem[] }

const buildStepGroups = (
  rows: any[],
  options: { timeField: string; nameFieldCandidates: string[]; resultFieldCandidates: string[] }
) => {
  const groups = new Map<string, HistoryStepGroup>()
  for (const row of rows ?? []) {
    const time = formatHistoryTime(row?.taskTime ?? row?.[options.timeField] ?? row?.createTime)
    const operator = String(row?.operator ?? row?.creatorName ?? row?.creator ?? '-')
    const groupKey = `${row?.managementId ?? ''}__${time}__${operator}`
    const name =
      options.nameFieldCandidates
        .map((k) => row?.[k])
        .find((v) => v !== undefined && v !== null && String(v).trim() !== '') ?? '-'
    const result =
      options.resultFieldCandidates
        .map((k) => row?.[k])
        .find((v) => v !== undefined && v !== null) ?? undefined
    const item: HistoryStepItem = {
      key: String(row?.id ?? `${groupKey}__${String(name)}`),
      name: String(name),
      result,
      method: row?.inspectionMethod,
      criteria: row?.judgmentCriteria,
      images: parseImages(row?.images),
      remark: row?.remark,
      taskTime: row?.taskTime,
      createTime: row?.createTime
    }
    if (!groups.has(groupKey)) {
      groups.set(groupKey, { key: groupKey, time, operator, items: [item] })
    } else {
      groups.get(groupKey)!.items.push(item)
    }
  }
  return Array.from(groups.values()).sort((a, b) => String(b.time).localeCompare(String(a.time)))
}

const inspectionHistory = ref<any[]>([])
const maintainHistory = ref<any[]>([])

const inspectionStepGroups = computed<HistoryStepGroup[]>(() => {
  return buildStepGroups(inspectionHistory.value, {
    timeField: 'inspectionTime',
    nameFieldCandidates: ['inspectionItemName', 'name'],
    resultFieldCandidates: ['inspectionResult']
  })
})

const maintainStepGroups = computed<HistoryStepGroup[]>(() => {
  return buildStepGroups(maintainHistory.value, {
    timeField: 'inspectionTime',
    nameFieldCandidates: ['maintainItemName', 'inspectionItemName', 'name'],
    resultFieldCandidates: ['maintainResult', 'inspectionResult']
  })
})

type RepairHistoryRow = {
  id?: any
  repairId?: any
  repairCode?: any
  repairName?: any
  subjectId?: any
  subjectCode?: any
  subjectName?: any
  subjectContent?: any
  subjectStandard?: any
  malfunction?: any
  malfunctionUrl?: any
  repairDes?: any
  remark?: any
  createTime?: any
  finishDate?: any
  result?: any
  repairResult?: any
  malfunctionImages?: string[]
}
type RepairHistoryGroup = { key: string; name: string; items: RepairHistoryRow[] }

const repairActiveNames = ref<string[]>([])
const repairList = ref<RepairHistoryRow[]>([])

const repairGroups = computed<RepairHistoryGroup[]>(() => {
  const groupsMap = new Map<string, RepairHistoryGroup>()
  for (const row of repairList.value ?? []) {
    const key = String(row.repairCode ?? row.repairId ?? row.subjectName ?? '-')
    if (!groupsMap.has(key)) {
      groupsMap.set(key, {
        key,
        name: String(row.repairName ?? row.repairCode ?? key),
        items: []
      })
    }
    const group = groupsMap.get(key)!
    group.items.push({
      ...row,
      malfunctionImages: parseImages(row?.malfunctionUrl)
    })
  }
  const groups = Array.from(groupsMap.values()).filter((g) => g.items.length)
  return groups.sort((a, b) => {
    const at = formatHistoryTime(a.items?.[0]?.finishDate ?? a.items?.[0]?.createTime)
    const bt = formatHistoryTime(b.items?.[0]?.finishDate ?? b.items?.[0]?.createTime)
    return String(bt).localeCompare(String(at))
  })
})

const inspectionExportLoading = ref(false)
const inspectionDateRange = ref<string[] | undefined>(undefined)
const maintainExportLoading = ref(false)
const maintainDateRange = ref<string[] | undefined>(undefined)
const repairExportLoading = ref(false)
const repairDateRange = ref<string[] | undefined>(undefined)
const criticalExportLoading = ref(false)
const spareExportLoading = ref(false)

const fetchInspectionHistory = async () => {
  if (!deviceId.value) return
  const params: any = { deviceId: deviceId.value }
  if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
    params.startTime = inspectionDateRange.value[0]
    params.endTime = inspectionDateRange.value[1]
  }
  const data = await TicketManagementApi.getInspectionByDeviceId(params)
  inspectionHistory.value = Array.isArray(data) ? data : []
}

const handleQueryInspection = async () => {
  await fetchInspectionHistory()
}

const handleResetInspection = async () => {
  inspectionDateRange.value = undefined
  await fetchInspectionHistory()
}

const fetchMaintainHistory = async () => {
  if (!deviceId.value) return
  const params: any = { deviceId: deviceId.value }
  if (maintainDateRange.value && maintainDateRange.value.length === 2) {
    params.startTime = maintainDateRange.value[0]
    params.endTime = maintainDateRange.value[1]
  }
  const data = await TicketManagementApi.getMaintenanceByDeviceId(params)
  maintainHistory.value = Array.isArray(data) ? data : []
}

const handleQueryMaintain = async () => {
  await fetchMaintainHistory()
}

const handleResetMaintain = async () => {
  maintainDateRange.value = undefined
  await fetchMaintainHistory()
}

const fetchRepairHistory = async () => {
  if (!deviceId.value) return
  const params: any = { deviceId: deviceId.value }
  if (repairDateRange.value && repairDateRange.value.length === 2) {
    params.startTime = repairDateRange.value[0]
    params.endTime = repairDateRange.value[1]
  }
  const data = await DvRepairApi.getRepairListByDeviceId(params)
  repairList.value = Array.isArray(data) ? data : []
}

const handleQueryRepair = async () => {
  await fetchRepairHistory()
}

const handleResetRepair = async () => {
  repairDateRange.value = undefined
  await fetchRepairHistory()
}

const handleExportInspection = async () => {
  if (!deviceId.value) return
  try {
    await message.exportConfirm()
    inspectionExportLoading.value = true
    const params: any = { deviceId: deviceId.value }
    if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
      params.startTime = inspectionDateRange.value[0]
      params.endTime = inspectionDateRange.value[1]
    }
    const data = await TicketManagementApi.exportInspection(params)
    download.excel(data, '点检履历.xls')
  } catch {
  } finally {
    inspectionExportLoading.value = false
  }
}

const handleExportMaintain = async () => {
  if (!deviceId.value) return
  try {
    await message.exportConfirm()
    maintainExportLoading.value = true
    const params: any = { deviceId: deviceId.value }
    if (maintainDateRange.value && maintainDateRange.value.length === 2) {
      params.startTime = maintainDateRange.value[0]
      params.endTime = maintainDateRange.value[1]
    }
    const data = await TicketManagementApi.exportMaintenance(params)
    download.excel(data, '保养履历.xls')
  } catch {
  } finally {
    maintainExportLoading.value = false
  }
}

const handleExportRepair = async () => {
  if (!deviceId.value) return
  try {
    await message.exportConfirm()
    repairExportLoading.value = true
    const params: any = { deviceId: deviceId.value }
    if (repairDateRange.value && repairDateRange.value.length === 2) {
      params.startTime = repairDateRange.value[0]
      params.endTime = repairDateRange.value[1]
    }
    const data = await DvRepairApi.exportRepairExcel(params)
    download.excel(data, '维修履历.xls')
  } catch {
  } finally {
    repairExportLoading.value = false
  }
}

const handleExportCriticalComponent = async () => {
  if (!deviceId.value) return
  try {
    await message.exportConfirm()
    criticalExportLoading.value = true
    const data = await CriticalComponentApi.exportDeviceComponent({ id: deviceId.value })
    download.excel(data, '关键件.xls')
  } catch {
  } finally {
    criticalExportLoading.value = false
  }
}

const handleExportSpareBased = async () => {
  if (!deviceId.value) return
  try {
    await message.exportConfirm()
    spareExportLoading.value = true
    const data = await DeviceLedgerApi.exportSpareBased({ id: deviceId.value })
    download.excel(data, '备件.xls')
  } catch {
  } finally {
    spareExportLoading.value = false
  }
}

const getTypeTreeForNameMap = async () => {
  const data = await DeviceTypeApi.getDeviceTypeTree({ pageNo: 1, pageSize: 10 })
  const treeChildren = JSON.parse(JSON.stringify(data ?? []))
  buildDeviceTypeNameMap(treeChildren)
}

const getDetail = async () => {
  if (!deviceId.value) {
    message.warning(t('EquipmentManagement.EquipmentLedger.Detail.invalidId'))
    delView(unref(currentRoute))
    return
  }
  detailLoading.value = true
  try {
    detailData.value = await DeviceLedgerApi.getDeviceLedger(deviceId.value)
    await fetchInspectionHistory()
    await fetchMaintainHistory()
    await fetchRepairHistory()
    const keys = repairGroups.value.map((g) => g.key)
    repairActiveNames.value = keys.length ? [keys[0]] : []
  } finally {
    detailLoading.value = false
  }
}

onMounted(async () => {
  await getTypeTreeForNameMap()
  await getDetail()
})
</script>

<style lang="scss" scoped>
.device-ledger-detail-body {
  max-height: 85vh;
}

.device-ledger-detail-desc {
  margin-bottom: 16px;
}

.device-ledger-detail-tabs {
  padding-right: 4px;
}

:deep(.el-tabs__content) {
  max-height: 65vh;
  overflow-y: auto;
}

.device-ledger-detail-qrcode {
  margin-top: 10px;
}

.device-ledger-history-steps {
  padding: 8px 8px 0;
}

.device-ledger-history-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.device-ledger-history-time {
  font-weight: 600;
}

.device-ledger-history-operator {
  color: var(--el-text-color-secondary);
}

.device-ledger-tab-toolbar {
  margin-bottom: 8px;
  text-align: right;
}

.device-ledger-history-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.device-ledger-history-item {
  display: flex;
  padding: 10px;
  background: var(--el-fill-color-blank);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  flex-direction: column;
  gap: 8px;
}

.device-ledger-history-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.device-ledger-history-item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.device-ledger-history-item-row {
  display: flex;
  gap: 10px;
}

.device-ledger-history-item-label {
  width: 70px;
  flex: 0 0 70px;
  color: var(--el-text-color-secondary);
}

.device-ledger-history-item-value {
  flex: 1;
  color: var(--el-text-color-regular);
  word-break: break-word;
}

.device-ledger-history-item-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.device-ledger-history-item-image {
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 6px;
}

.device-ledger-history-image-error {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color);
  align-items: center;
  justify-content: center;
}

.device-ledger-repair-collapse {
  padding: 8px 8px 0;
}

.device-ledger-repair-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.device-ledger-repair-name {
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.device-ledger-repair-meta {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.device-ledger-history-item-text {
  color: var(--el-text-color-regular);
}
</style>
