<template>
  <ContentWrap>
    <div v-loading="detailLoading" class="mold-detail-body">
      <el-descriptions :column="3" class="mold-detail-desc">
        <el-descriptions-item label="模具编码">{{ detailData?.code ?? '' }}</el-descriptions-item>
        <el-descriptions-item label="模具名称">{{ detailData?.name ?? '' }}</el-descriptions-item>
        <el-descriptions-item label="模具状态">
          <dict-tag :type="DICT_TYPE.ERP_MOLD_STATUS" :value="detailData?.status" />
        </el-descriptions-item>
        <el-descriptions-item label="模具型号">{{ detailData?.brandName ?? '' }}</el-descriptions-item>
        <el-descriptions-item label="模具规格">{{ detailData?.moldType ?? '' }}</el-descriptions-item>
        <el-descriptions-item label="工序">
          <dict-tag :type="DICT_TYPE.MES_ORG_TYPE" :value="detailData?.orgType" />
        </el-descriptions-item>
        <el-descriptions-item label="模穴数">{{ detailData?.moldSize ?? '' }}</el-descriptions-item>
        <el-descriptions-item label="使用次数/次">{{ detailData?.useTime ?? '' }}</el-descriptions-item>
        <el-descriptions-item label="使用设备">{{ detailData?.machineName ?? detailData?.machineId ?? ''
          }}</el-descriptions-item>
        <el-descriptions-item label="入库日期">{{ formatDetailDate(detailData?.inTime) }}</el-descriptions-item>
        <el-descriptions-item label="是否启用">
          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData?.isEnable" />
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ detailData?.remark ?? '' }}</el-descriptions-item>
      </el-descriptions>

      <div class="mold-detail-tabs">
        <el-tabs v-model="detailActiveTab" class="mt-12px">
          <el-tab-pane label="点检履历" 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="开始时间"
                end-placeholder="结束时间"
                range-separator="至"
                :unlink-panels="true"
                class="mr-10px"
              />
              <el-button type="primary" plain @click="handleQueryInspection">查询</el-button>
              <el-button @click="handleResetInspection">重置</el-button>
              <el-button
                type="success"
                plain
                :loading="inspectionExportLoading"
                @click="handleExportInspection"
              >
                <Icon icon="ep:download" class="mr-5px" /> 导出
              </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">
                <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">
                            <dict-tag type="Inspection_method" :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.taskTime) }}
                          </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">
            <div class="device-ledger-tab-toolbar">
              <el-date-picker
                v-model="maintainDateRange"
                type="daterange"
                value-format="YYYY-MM-DD HH:mm:ss"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="至"
                :unlink-panels="true"
                class="mr-10px"
              />
              <el-button type="primary" plain @click="handleQueryMaintain">查询</el-button>
              <el-button @click="handleResetMaintain">重置</el-button>
              <el-button
                type="success"
                plain
                :loading="maintainExportLoading"
                @click="handleExportMaintain"
              >
                <Icon icon="ep:download" class="mr-5px" /> 导出
              </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">
                <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">
                            <dict-tag type="Inspection_method" :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">
                            {{ String(formatHistoryTime(item.taskTime)).split(' ')[0] }}
                          </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">
            <div class="device-ledger-tab-toolbar">
              <el-date-picker
                v-model="repairDateRange"
                type="daterange"
                value-format="YYYY-MM-DD HH:mm:ss"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="至"
                :unlink-panels="true"
                class="mr-10px"
              />
              <el-button type="primary" plain @click="handleQueryRepair">查询</el-button>
              <el-button @click="handleResetRepair">重置</el-button>
              <el-button
                type="success"
                plain
                :loading="repairExportLoading"
                @click="handleExportRepair"
              >
                <Icon icon="ep:download" class="mr-5px" /> 导出
              </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">项目内容</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">
                          <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">备注</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">
                          {{ 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-tabs>
      </div>
    </div>
  </ContentWrap>
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { MoldBrandApi, type MoldVO } from '@/api/erp/mold'
import { TicketManagementApi } from '@/api/mold/ticketManagement'
import { MoldRepairApi } from '@/api/mold/moldrepair'
import download from '@/utils/download'
import { useTagsViewStore } from '@/store/modules/tagsView'

defineOptions({ name: 'ErpMoldDetail' })

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

const detailLoading = ref(false)
const detailData = ref<(MoldVO & Record<string, any>) | null>(null)
const detailActiveTab = ref('check')
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 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 inspectionHistory = ref<any[]>([])

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

type HistoryStepItem = {
  key: string
  name: string
  result: any
  method?: any
  criteria?: any
  images?: string[]
  remark?: any
  taskTime?: any
  inspectionTime?: any
  createTime?: any
}

type HistoryStepGroup = { key: string; time: string; operator: string; items: HistoryStepItem[] }

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 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,
      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
  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 fetchRepairHistory = async () => {
  const id = Number(route.params.id)
  if (!id) return
  const params: any = { moldId: id }
  if (repairDateRange.value && repairDateRange.value.length === 2) {
    params.startTime = repairDateRange.value[0]
    params.endTime = repairDateRange.value[1]
  }
  const data = await MoldRepairApi.getRepairListByMoldId(params)
  repairList.value = Array.isArray(data) ? data : []
}

const handleQueryRepair = async () => {
  const id = Number(route.params.id)
  if (!id) {
    message.error('参数错误，模具不能为空')
    return
  }
  await fetchRepairHistory()
}

const handleResetRepair = async () => {
  const id = Number(route.params.id)
  if (!id) {
    message.error('参数错误，模具不能为空')
    return
  }
  repairDateRange.value = undefined
  await fetchRepairHistory()
}

const handleExportRepair = async () => {
  const id = Number(route.params.id)
  if (!id) {
    message.error('参数错误，模具不能为空')
    return
  }
  try {
    repairExportLoading.value = true
    const params: any = { moldId: id }
    if (repairDateRange.value && repairDateRange.value.length === 2) {
      params.startTime = repairDateRange.value[0]
      params.endTime = repairDateRange.value[1]
    }
    const data = await MoldRepairApi.exportRepairExcel(params)
    download.excel(data, '模具维修履历.xls')
  } finally {
    repairExportLoading.value = false
  }
}

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

const handleQueryMaintain = async () => {
  const id = Number(route.params.id)
  if (!id) {
    message.error('参数错误，模具不能为空')
    return
  }
  await fetchMaintainHistory()
}

const handleResetMaintain = async () => {
  const id = Number(route.params.id)
  if (!id) {
    message.error('参数错误，模具不能为空')
    return
  }
  maintainDateRange.value = undefined
  await fetchMaintainHistory()
}

const handleExportMaintain = async () => {
  const id = Number(route.params.id)
  if (!id) {
    message.error('参数错误，模具不能为空')
    return
  }
  try {
    maintainExportLoading.value = true
    const params: any = { moldId: id }
    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')
  } finally {
    maintainExportLoading.value = false
  }
}

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

const handleQueryInspection = async () => {
  const id = Number(route.params.id)
  if (!id) {
    message.error('参数错误，模具不能为空')
    return
  }
  await fetchInspectionHistory()
}

const handleResetInspection = async () => {
  const id = Number(route.params.id)
  if (!id) {
    message.error('参数错误，模具不能为空')
    return
  }
  inspectionDateRange.value = undefined
  await fetchInspectionHistory()
}

const handleExportInspection = async () => {
  const id = Number(route.params.id)
  if (!id) {
    message.error('参数错误，模具不能为空')
    return
  }
  try {
    inspectionExportLoading.value = true
    const params: any = { moldId: id }
    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')
  } finally {
    inspectionExportLoading.value = false
  }
}

const close = () => {
  delView(unref(currentRoute))
}

const getDetail = async () => {
  const id = Number(route.params.id)
  if (!id) {
    message.error('参数错误，模具不能为空')
    close()
    return
  }
  detailActiveTab.value = 'check'
  detailLoading.value = true
  try {
    detailData.value = await MoldBrandApi.getMold(id)
    await fetchInspectionHistory()
    await fetchMaintainHistory()
    await fetchRepairHistory()
  } finally {
    detailLoading.value = false
  }
}

onMounted(async () => {
  await getDetail()
})

</script>

<style scoped>
.mold-detail-desc {
  margin-bottom: 16px;
}

.mold-history-table {
  margin-top: 8px;
}

.mold-detail-body {
  max-height: 85vh;
}

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

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

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

.device-ledger-tab-toolbar {
  margin-bottom: 16px;
}

.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;
  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>
