<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="t('EquipmentManagement.EquipmentLedger.deviceCode')" prop="deviceCode">
            <el-input
v-model="queryParams.deviceCode" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceCode')" clearable @keyup.enter="handleQuery"
              class="!w-240px" />
          </el-form-item>
          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')" prop="deviceName">
            <el-input
v-model="queryParams.deviceName" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceName')" clearable @keyup.enter="handleQuery"
              class="!w-240px" />
          </el-form-item>
          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')" prop="deviceStatus">
            <el-select v-model="queryParams.deviceStatus" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceStatus')" 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" /> {{ t('common.query') }}
            </el-button>
            <el-button @click="resetQuery">
              <Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}
            </el-button>
            <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mes:device-ledger:create']">
              <Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
            </el-button>
            <el-button type="danger" plain @click="handleBatchDelete" v-hasPermi="['mes:device-ledger:delete']">
              <Icon icon="ep:delete" class="mr-5px" /> {{ t('EquipmentManagement.EquipmentLedger.batchDelete') }}
            </el-button>
            <el-button
type="success" plain @click="handleExport" :loading="exportLoading"
              v-hasPermi="['mes:device-ledger:export']">
              <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
            </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="t('EquipmentManagement.EquipmentLedger.serialNumber')" 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="t('EquipmentManagement.EquipmentLedger.deviceCode')" align="center" prop="deviceCode" min-width="110px" />
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceName')" align="center" prop="deviceName" min-width="120px" />
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceType')" align="center" prop="deviceType" min-width="110px">
            <template #default="scope">
              <el-tag effect="light">
                {{ getDeviceTypeName(scope.row.deviceTypeName ?? scope.row.deviceType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')" 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="t('EquipmentManagement.EquipmentLedger.deviceSpec')" align="center" prop="deviceSpec" />
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceModel')" align="center" prop="deviceModel" />
          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" align="center" prop="deviceBrand" /> -->
          <el-table-column
:label="t('EquipmentManagement.EquipmentLedger.productionDate')" align="center" prop="productionDate" :formatter="dateFormatter2"
            width="140px" />
          <el-table-column
:label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" align="center" prop="factoryEntryDate" :formatter="dateFormatter2"
            width="140px" />
          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.supplier')" align="center" prop="supplier" width="110px" /> -->
          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.workshop')" align="center" prop="workshop" width="110px" /> -->
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.workshop')" align="center" prop="workshopName" min-width="150px" />
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')" align="center" prop="deviceLocation" min-width="150px" />
          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.systemOrg')" align="center" prop="systemOrg" width="110px" /> -->
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')" align="center" prop="deviceManagerName" width="150px" />
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')" align="center" prop="remark" />
          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.creatorName')" align="center" prop="creatorName" width="150px" />
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" /> -->
          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.updateTime')" align="center" prop="updateTime" :formatter="dateFormatter" width="180px" /> -->
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.operate')" align="center" min-width="160px" fixed="right">
            <template #default="scope">
              <el-button link @click="handleDetail(scope.row.id)">{{ t('EquipmentManagement.EquipmentLedger.detail') }}</el-button>
              <el-button
link type="primary" @click="openForm('update', scope.row.id)"
                v-hasPermi="['mes:device-ledger:update']">
                {{ t('EquipmentManagement.EquipmentLedger.edit') }}
              </el-button>
              <el-button
link type="danger" @click="handleDelete(scope.row.id)"
                v-hasPermi="['mes:device-ledger:delete']">
                {{ t('EquipmentManagement.EquipmentLedger.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">{{ t('EquipmentManagement.EquipmentLedger.detail') }}</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="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.deviceBrand')">{{ detailData?.deviceBrand ?? '' }}</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.supplier')">{{ detailData?.supplier ?? '' }}</el-descriptions-item> -->
          <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.workshop')">{{ detailData?.workshop ?? '' }}</el-descriptions-item> -->
          <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.systemOrg')">{{ detailData?.systemOrg ?? '' }}</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-table-column :label="t('EquipmentManagement.EquipmentLedger.creatorName')" align="center" prop="creatorName" width="150px" />
          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" /> -->
          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.updateTime')" align="center" prop="updateTime" :formatter="dateFormatter" width="180px" /> -->




        </el-descriptions>
        <el-tabs v-model="detailActiveTab" class="mt-12px">
          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.checkHistory')" name="check">
            <div style="margin-bottom: 16px;">
              <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 style="margin-bottom: 16px;">
              <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 style="margin-bottom: 16px;">
              <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="loading" :data="detailData?.componentList" :stripe="true"
              :show-overflow-tooltip="true">
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentCode')" align="center" prop="code" min-width="140" />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentName')" align="center" prop="name" min-width="140" />
              <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" />
            </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="loading" :data="detailData?.beijianList" :stripe="true" :show-overflow-tooltip="true">
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareCode')" align="center" prop="barCode" />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareName')" align="left" prop="name" width="220px" />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.category')" align="center" prop="categoryName" />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.unit')" align="center" prop="unitName" />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="模具" name="mold">
            <el-table v-loading="loading" :data="detailData?.moldList" :stripe="true" :show-overflow-tooltip="true">
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldCode')" align="center" prop="code" min-width="140" />
              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldName')" align="center" prop="name" min-width="140" />
              <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" />
            </el-table>
            <Pagination
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
              @pagination="getList" />
          </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 { CriticalComponentApi } from '@/api/mes/criticalComponent'
import { TicketManagementApi } from '@/api/mes/ticketManagement'
import { DvRepairApi } from '@/api/mes/dvrepair'
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 criticalExportLoading = ref(false)
const spareExportLoading = ref(false)
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 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 = ref<any[]>([])
const maintainHistory = ref<any[]>([])

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

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 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 fetchInspectionHistory = async () => {
  if (!selectedDetailId.value) return
  const params: any = { deviceId: selectedDetailId.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 () => {
  if (!selectedDetailId.value) {
    message.error('请先选择设备')
    return
  }
  await fetchInspectionHistory()
}

const handleResetInspection = async () => {
  if (!selectedDetailId.value) {
    message.error('请先选择设备')
    return
  }
  inspectionDateRange.value = undefined
  await fetchInspectionHistory()
}

const fetchMaintainHistory = async () => {
  if (!selectedDetailId.value) return
  const params: any = { deviceId: selectedDetailId.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 () => {
  if (!selectedDetailId.value) {
    message.error('请先选择设备')
    return
  }
  await fetchMaintainHistory()
}

const handleResetMaintain = async () => {
  if (!selectedDetailId.value) {
    message.error('请先选择设备')
    return
  }
  maintainDateRange.value = undefined
  await fetchMaintainHistory()
}

const fetchRepairHistory = async () => {
  if (!selectedDetailId.value) return
  const params: any = { deviceId: selectedDetailId.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 () => {
  if (!selectedDetailId.value) {
    message.error('请先选择设备')
    return
  }
  await fetchRepairHistory()
}

const handleResetRepair = async () => {
  if (!selectedDetailId.value) {
    message.error('请先选择设备')
    return
  }
  repairDateRange.value = undefined
  await fetchRepairHistory()
}

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)
    await fetchInspectionHistory()
    await fetchMaintainHistory()
    await fetchRepairHistory()
    const keys = repairGroups.value.map((g) => g.key)
    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 () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const params: any = {
      ...queryParams,
      ids: selectedIds.value.length ? selectedIds.value.join(',') : undefined
    }
    const data = await DeviceLedgerApi.exportDeviceLedger(params)
    download.excel(data, '设备台账.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

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

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

const handleExportInspection = async () => {
  if (!selectedDetailId.value) {
    message.error('请先选择设备')
    return
  }
  try {
    await message.exportConfirm()
    inspectionExportLoading.value = true
    const params: any = { deviceId: selectedDetailId.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 (!selectedDetailId.value) {
    message.error('请先选择设备')
    return
  }
  try {
    await message.exportConfirm()
    maintainExportLoading.value = true
    const params: any = { deviceId: selectedDetailId.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 (!selectedDetailId.value) {
    message.error('请先选择设备')
    return
  }
  try {
    await message.exportConfirm()
    repairExportLoading.value = true
    const params: any = { deviceId: selectedDetailId.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
  }
}

/** 初始化 **/
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-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>
