<template>
  <ADetailPanel
    ref="detailPanel"
    v-bind="detailPanelProps"
  >
    <template #default="detailData">
      <ElDescriptions :column="3" border>
        <ElDescriptionsItem label="车牌">
          {{ detailData.licensePlate }}
        </ElDescriptionsItem>

        <ElDescriptionsItem label="行驶证图片">
          <ElImage v-for="(item,i) in detailData.truckLicense" :key="i" :preview-src-list="[AppApi.fileUrl(item)]" :src="AppApi.fileUrl(item)" show-progress style="width: 32px; height: 32px"></ElImage>
        </ElDescriptionsItem>

        <ElDescriptionsItem label="行驶证有效期">
          {{ detailData.licenseStartDate }} ~ {{ detailData.licenseEndDate }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="车架号">
          {{ detailData.vnCode }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="合格证图片">
          <ElImage v-for="(item,i) in detailData.qualification" :key="i" :preview-src-list="[AppApi.fileUrl(item)]" :src="AppApi.fileUrl(item)" show-progress style="width: 32px; height: 32px"></ElImage>
        </ElDescriptionsItem>

        <ElDescriptionsItem label="合格证有效期">
          {{ detailData.qualificationStartDate }} ~ {{ detailData.qualificationEndDate }}
        </ElDescriptionsItem>

        <ElDescriptionsItem label="最大载重">
          {{ Number(detailData.carryingCapacity) / 1000 }}吨
        </ElDescriptionsItem>

        <ElDescriptionsItem label="状态">
          {{ detailData.busy ? '运输中' : '空闲' }}
        </ElDescriptionsItem>

        <ElDescriptionsItem label="车辆图片">
          <ElImage :preview-src-list="[AppApi.fileUrl(detailData.picture)]" :src="AppApi.fileUrl(detailData.picture)" show-progress style="width: 32px; height: 32px"></ElImage>
        </ElDescriptionsItem>

        <ElDescriptionsItem label="车辆类型">
          {{ detailData.truckCategory }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="创建时间">
          {{ detailData.createTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="修改时间">
          {{ detailData.modifyTime }}
        </ElDescriptionsItem>
      </ElDescriptions>
    </template>
  </ADetailPanel>
</template>

<script lang="ts" setup>
import TruckApi from '@/pages/cst/truck/truck-api.ts'
import AppApi from '@/common/app/app-api.ts'
import ADetailPanel, {
  type ADetailPanelInstance,
  buildDetailPanelProps,
} from '@/components/a-detail-panel/ADetailPanel.tsx'

const detailPanelIns = useTemplateRef<ADetailPanelInstance<TruckTypes.SearchTruckResult>>('detailPanel')
const detailPanelProps = buildDetailPanelProps<TruckTypes.SearchTruckResult>({
  title: '车辆详情',
  detailsLoader: TruckApi.detail,
})

defineExpose({
  open(data: TruckTypes.SearchTruckResult) {
    detailPanelIns.value?.open(data)
  },
})
</script>
