<template>
  <div class="device-ledger-layout">
    <ContentWrap class="device-ledger-left">
      <el-tree
v-loading="typeTreeLoading" :data="typeTreeData" node-key="id" highlight-current :props="typeTreeProps"
        :default-expanded-keys="typeTreeExpandedKeys" :expand-on-click-node="false" @node-click="handleTypeNodeClick" />
    </ContentWrap>

    <div class="device-ledger-right">
      <ContentWrap>
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="60px">
          <el-form-item label="编码" prop="deviceCode">
            <el-input
v-model="queryParams.deviceCode" placeholder="请输入编码" clearable @keyup.enter="handleQuery"
              class="!w-240px" />
          </el-form-item>
          <el-form-item label="名称" prop="deviceName">
            <el-input
v-model="queryParams.deviceName" placeholder="请输入名称" clearable @keyup.enter="handleQuery"
              class="!w-240px" />
          </el-form-item>
          <el-form-item label="状态" prop="deviceStatus">
            <el-select v-model="queryParams.deviceStatus" placeholder="请选择状态" clearable class="!w-240px">
              <el-option v-for="dict in tzStatusOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery">
              <Icon icon="ep:search" class="mr-5px" /> 搜索
            </el-button>
            <el-button @click="resetQuery">
              <Icon icon="ep:refresh" class="mr-5px" /> 重置
            </el-button>
            <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mes:device-ledger:create']">
              <Icon icon="ep:plus" class="mr-5px" /> 新增
            </el-button>
            <el-button type="danger" plain @click="handleBatchDelete" v-hasPermi="['mes:device-ledger:delete']">
              <Icon icon="ep:delete" class="mr-5px" /> 批量删除
            </el-button>
            <el-button
type="success" plain @click="handleExport" :loading="exportLoading"
              v-hasPermi="['mes:device-ledger:export']">
              <Icon icon="ep:download" class="mr-5px" /> 导出
            </el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>

      <ContentWrap>
        <el-table
ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
          row-key="id" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" fixed="left" reserve-selection />
          <el-table-column label="序号" align="center" width="80" fixed="left">
            <template #default="scope">
              {{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="编码" align="center" prop="deviceCode" />
          <el-table-column label="名称" align="center" prop="deviceName" />
          <el-table-column label="类型" align="center" prop="deviceType">
            <template #default="scope">
              <el-tag effect="light">
                {{ getDeviceTypeName(scope.row.deviceTypeName ?? scope.row.deviceType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="deviceStatus">
            <template #default="scope">
              <el-tag
:type="getTzStatusTagType(scope.row.deviceStatus)"
                :color="getTzStatusTagColor(scope.row.deviceStatus)"
                :style="getTzStatusTagStyle(scope.row.deviceStatus)" effect="light" disable-transitions>
                {{ getTzStatusLabel(scope.row.deviceStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="规格" align="center" prop="deviceSpec" />
          <el-table-column label="型号" align="center" prop="deviceModel" />
          <el-table-column label="品牌" align="center" prop="deviceBrand" />
          <el-table-column
label="生产日期" align="center" prop="productionDate" :formatter="dateFormatter2"
            width="140px" />
          <el-table-column
label="入厂日期" align="center" prop="factoryEntryDate" :formatter="dateFormatter2"
            width="140px" />
          <el-table-column label="供应商" align="center" prop="supplier" width="110px" />
          <el-table-column label="所属车间" align="center" prop="workshop" width="110px" />
          <el-table-column label="位置" align="center" prop="deviceLocation" />
          <el-table-column label="使用部门" align="center" prop="systemOrg" width="110px" />
          <el-table-column label="责任人" align="center" prop="deviceManagerName" width="110px" />
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="创建人" align="center" prop="creatorName" width="120px" />
          <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
          <el-table-column label="更新时间" align="center" prop="updateTime" :formatter="dateFormatter" width="180px" />
          <el-table-column label="操作" align="center" min-width="160px" fixed="right">
            <template #default="scope">
              <el-button link @click="handleDetail(scope.row.id)">详情</el-button>
              <el-button
link type="primary" @click="openForm('update', scope.row.id)"
                v-hasPermi="['mes:device-ledger:update']">
                编辑
              </el-button>
              <el-button
link type="danger" @click="handleDelete(scope.row.id)"
                v-hasPermi="['mes:device-ledger:delete']">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
          @pagination="getList" />
      </ContentWrap>

      <ContentWrap v-if="detailVisible" v-loading="detailLoading">
        <div class="device-ledger-detail-header">
          <div class="device-ledger-detail-title">详情</div>
          <el-button link @click="closeDetail">
            <Icon icon="ep:close" />
          </el-button>
        </div>
        <el-descriptions :column="3" class="device-ledger-detail-desc">
          <el-descriptions-item label="设备编号">{{ detailData?.deviceCode ?? '' }}</el-descriptions-item>
          <el-descriptions-item label="设备名称">{{ detailData?.deviceName ?? '' }}</el-descriptions-item>
          <el-descriptions-item label="设备状态">
            <dict-tag type="mes_tz_status" :value="detailData?.deviceStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="设备品牌">{{ detailData?.deviceBrand ?? '' }}</el-descriptions-item>
          <el-descriptions-item label="设备型号">{{ detailData?.deviceModel ?? '' }}</el-descriptions-item>
          <el-descriptions-item label="设备规格">{{ detailData?.deviceSpec ?? '' }}</el-descriptions-item>
          <el-descriptions-item label="设备类型">
            <el-tag effect="light">{{ getDeviceTypeName(detailData?.deviceTypeName ?? detailData?.deviceType)
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="供应商">{{ detailData?.supplier ?? '' }}</el-descriptions-item>
          <el-descriptions-item label="所属车间">{{ detailData?.workshop ?? '' }}</el-descriptions-item>
          <el-descriptions-item label="所属系统组织">{{ detailData?.systemOrg ?? '' }}</el-descriptions-item>
          <el-descriptions-item label="设备位置">{{ detailData?.deviceLocation ?? '' }}</el-descriptions-item>
          <el-descriptions-item label="设备负责人">{{ detailData?.deviceManager ?? '' }}</el-descriptions-item>
          <el-descriptions-item label="设备生产日期">{{ formatDetailDate(detailData?.productionDate) }}</el-descriptions-item>
          <el-descriptions-item label="设备入厂日期">{{ formatDetailDate(detailData?.factoryEntryDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ detailData?.remark ?? detailData?.deviceRemark ?? ''
          }}</el-descriptions-item>
        </el-descriptions>

        <el-tabs v-model="detailActiveTab" class="mt-12px">
          <el-tab-pane label="点检履历" name="check">
            <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">
                <template #title>
                  <div class="device-ledger-history-title">
                    <span class="device-ledger-history-time">[{{ group.time }}]</span>
                    <span class="device-ledger-history-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">点检方式</span>
                          <span class="device-ledger-history-item-value">{{ item.method ?? '-' }}</span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">判定标准</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">点检时间</span>
                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.inspectionTime) }}</span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">创建时间</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">备注</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="保养履历" name="maintain">
            <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">
                <template #title>
                  <div class="device-ledger-history-title">
                    <span class="device-ledger-history-time">[{{ group.time }}]</span>
                    <span class="device-ledger-history-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">保养方式</span>
                          <span class="device-ledger-history-item-value">{{ item.method ?? '-' }}</span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">判定标准</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">保养时间</span>
                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.inspectionTime) }}</span>
                        </div>
                        <div class="device-ledger-history-item-row">
                          <span class="device-ledger-history-item-label">创建时间</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">备注</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="维修履历" name="repair">
            <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">维修单ID</span>
                        <span class="device-ledger-history-item-value">{{ row.repairId ?? '-' }}</span>
                      </div>
                      <div class="device-ledger-history-item-row">
                        <span class="device-ledger-history-item-label">项目内容</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">判定标准</span>
                        <span class="device-ledger-history-item-value">{{ row.subjectStandard ?? '-' }}</span>
                      </div>
                      <div class="device-ledger-history-item-row">
                        <span class="device-ledger-history-item-label">故障描述</span>
                        <span class="device-ledger-history-item-value">{{ row.malfunction ?? '-' }}</span>
                      </div>
                      <div class="device-ledger-history-item-row">
                        <span class="device-ledger-history-item-label">维修描述</span>
                        <span class="device-ledger-history-item-value">{{ row.repairDes ?? '-' }}</span>
                      </div>
                      <div class="device-ledger-history-item-row">
                        <span class="device-ledger-history-item-label">备注</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">创建时间</span>
                        <span class="device-ledger-history-item-value">{{ formatHistoryTime(row.createTime) }}</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-tabs>
      </ContentWrap>
    </div>
  </div>

  <!-- 表单弹窗：添加/修改 -->
  <DeviceLedgerForm ref="formRef" @success="getList" />
</template>

<script setup lang="ts">
import { dateFormatter, dateFormatter2, formatDate } from '@/utils/formatTime'
import download from '@/utils/download'
import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
import { DeviceTypeApi, DeviceTypeTreeVO } from '@/api/mes/devicetype'
import DeviceLedgerForm from './DeviceLedgerForm.vue'
import { getIntDictOptions } from '@/utils/dict'
import { isHexColor } from '@/utils/color'
import { useDictStoreWithOut } from '@/store/modules/dict'

/** 设备类型 列表 */
defineOptions({ name: 'DeviceLedger' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<DeviceLedgerVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  deviceCode: undefined,
  deviceName: undefined,
  deviceStatus: undefined,
  deviceType: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

const tableRef = ref()
const selectedIds = ref<number[]>([])
const handleSelectionChange = (rows: any[]) => {
  selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined) ?? []
}

const dictStore = useDictStoreWithOut()
const dictReady = ref(false)

const inspectionHistory = computed(() => {
  return (detailData.value as any)?.inspectionList ?? []
})

const maintainHistory = computed(() => {
  const list = (detailData.value as any)?.maintainList
  return Array.isArray(list) ? list : []
})

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)}`
  }
  return String(raw)
}

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

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

type HistoryStepItem = {
  key: string
  name: string
  result: any
  method?: any
  criteria?: any
  images?: string[]
  remark?: any
  inspectionTime?: 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?.[options.timeField] ?? row?.createTime)
    const operator = String(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,
      inspectionTime: row?.inspectionTime,
      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 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
  subjectId?: any
  subjectCode?: any
  subjectName?: any
  subjectContent?: any
  subjectStandard?: any
  malfunction?: any
  malfunctionUrl?: any
  repairDes?: any
  remark?: any
  createTime?: any
  malfunctionImages?: string[]
}

type RepairHistoryGroup = { key: string; name: string; items: RepairHistoryRow[] }

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

const repairGroups = computed<RepairHistoryGroup[]>(() => {
  const raw = (detailData.value as any)?.repairList
  if (!raw || typeof raw !== 'object') return []
  const entries = Object.entries(raw as Record<string, any>)
  const groups = entries
    .map(([name, rows]) => {
      const list = Array.isArray(rows) ? rows : []
      return {
        key: String(name),
        name: String(name),
        items: list.map((row: any) => ({
          ...row,
          malfunctionImages: parseImages(row?.malfunctionUrl)
        }))
      } as RepairHistoryGroup
    })
    .filter((g) => g.items.length)

  return groups.sort((a, b) => {
    const at = formatHistoryTime(a.items?.[0]?.createTime)
    const bt = formatHistoryTime(b.items?.[0]?.createTime)
    return String(bt).localeCompare(String(at))
  })
})

const tzStatusOptions = computed(() => {
  if (!dictReady.value) return []
  const options = getIntDictOptions('mes_tz_status')
  return options.filter((o) => o.value !== null && o.value !== undefined && !Number.isNaN(o.value))
})

const detailVisible = ref(false)
const detailLoading = ref(false)
const detailData = ref<DeviceLedgerVO | undefined>()
const detailActiveTab = ref('check')
const selectedDetailId = ref<number | undefined>()

const typeTreeLoading = ref(false)
const typeTreeData = ref<DeviceTypeTreeVO[]>([])
const typeTreeProps = { label: 'name', children: 'children' }
const typeTreeExpandedKeys = ref<number[]>([0])
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 getTypeTree = async () => {
  typeTreeLoading.value = true
  try {
    const data = await DeviceTypeApi.getDeviceTypeTree({ pageNo: 1, pageSize: 10 })
    const treeChildren = JSON.parse(JSON.stringify(data ?? []))
    typeTreeData.value = [{ id: 0, code: '', name: '全部', remark: '', sort: 0, children: treeChildren } as any]
    buildDeviceTypeNameMap(treeChildren)
    typeTreeExpandedKeys.value = [0]
  } finally {
    typeTreeLoading.value = false
  }
}

const handleTypeNodeClick = (node: any) => {
  const id = node?.id
  queryParams.deviceType = id === 0 ? undefined : id
  queryParams.pageNo = 1
  getList()
}

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 getTzStatusLabel = (value: any) => {
  const v = value === '' || value === null || value === undefined ? undefined : Number(value)
  const found = tzStatusOptions.value.find((d) => d.value === v)
  return found?.label ?? ''
}

const getTzStatusTagType = (value: any) => {
  const v = value === '' || value === null || value === undefined ? undefined : Number(value)
  const found = tzStatusOptions.value.find((d) => d.value === v)
  const type = found?.colorType
  if (type + '' === 'primary' || type + '' === 'default') return '' as any
  return (type ?? '') as any
}

const getTzStatusTagColor = (value: any) => {
  const v = value === '' || value === null || value === undefined ? undefined : Number(value)
  const found = tzStatusOptions.value.find((d) => d.value === v)
  if (found?.cssClass && isHexColor(found.cssClass)) return found.cssClass
  return ''
}

const getTzStatusTagStyle = (value: any) => {
  const color = getTzStatusTagColor(value)
  if (!color) return ''
  return 'color: #fff'
}

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

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)
}

const parseFirstImage = (value: any): string => {
  return parseImages(value)[0] || ''
}

const handleDetail = async (id: number) => {
  if (detailVisible.value && selectedDetailId.value === id) {
    closeDetail()
    return
  }
  selectedDetailId.value = id
  detailVisible.value = true
  detailActiveTab.value = 'check'
  detailLoading.value = true
  try {
    detailData.value = await DeviceLedgerApi.getDeviceLedger(id)
    const keys = Object.keys(((detailData.value as any)?.repairList ?? {}) as any)
    repairActiveNames.value = keys.length ? [keys[0]] : []
  } finally {
    detailLoading.value = false
  }
}

const closeDetail = () => {
  detailVisible.value = false
  selectedDetailId.value = undefined
  detailData.value = undefined
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await DeviceLedgerApi.getDeviceLedgerPage({
      pageNo: queryParams.pageNo,
      pageSize: queryParams.pageSize,
      deviceCode: queryParams.deviceCode,
      deviceName: queryParams.deviceName,
      deviceStatus: queryParams.deviceStatus,
      deviceType: queryParams.deviceType
    })
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id, queryParams.deviceType)
}

/** 删除按钮操作 */
const buildIdsParam = (ids: number | number[]) => {
  return Array.isArray(ids) ? ids.join(',') : String(ids)
}

const handleDelete = async (ids: number | number[]) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    const idsParam = buildIdsParam(ids)
    await DeviceLedgerApi.deleteDeviceLedger(idsParam)
    message.success(t('common.delSuccess'))
    selectedIds.value = []
    tableRef.value?.clearSelection?.()
    // 刷新列表
    await getList()
  } catch { }
}

const handleBatchDelete = async () => {
  if (!selectedIds.value.length) {
    message.error('请选择需要删除的数据')
    return
  }
  await handleDelete(selectedIds.value)
}

/** 导出按钮操作 */
const handleExport = async () => {
  if (!selectedIds.value.length) {
    message.error('请选择需要导出的数据')
    return
  }
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await DeviceLedgerApi.exportDeviceLedger({ ids: selectedIds.value.join(',') })
    download.excel(data, '设备台账.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 **/
onMounted(async () => {
  await dictStore.setDictMap()
  dictReady.value = true
  getTypeTree()
  getList()
})
</script>

<style scoped>
.device-ledger-layout {
  display: flex;
  gap: 12px;
}

.device-ledger-left {
  width: 280px;
  flex: 0 0 auto;
}

.device-ledger-right {
  flex: 1;
  min-width: 0;
}

.device-ledger-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.device-ledger-detail-title {
  font-size: 14px;
  font-weight: 600;
}

.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-history-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

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

.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;
  border-radius: 6px;
  overflow: hidden;
}

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

.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 {
  color: var(--el-text-color-secondary);
  font-size: 12px;
}

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