<template>
  <ADetailPanel
    ref="detailPanel"
    v-bind="detailPanelProps"
  >
    <template #default="detailData">
      <ElDescriptions :column="3" border title="司机详情">
        <ElDescriptionsItem label="司机姓名">
          {{ detailData.driverName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="所属公司">
          {{ detailData.orgName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="证书编号">
          {{ detailData?.drivingLicenceNo }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="手机号">
          {{ detailData.phone }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="创建时间">
          {{ detailData.createTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="修改时间">
          {{ detailData.modifyTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="驾驶证">
          <ElImage :preview-src-list="[AppApi.fileUrl(detailData.drivingLicence)]" :src="AppApi.fileUrl(detailData.drivingLicence)" show-progress style="width: 100px; height: 100px"></ElImage>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="驾驶证有效期"> {{ detailData.licenceStartTime + ' 至 ' + (detailData.licenceEndTime ?? '永久') }}</ElDescriptionsItem>
      </ElDescriptions>
    </template>
  </ADetailPanel>
</template>

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

const detailPanelIns = useTemplateRef<ADetailPanelInstance<DriverTypes.SearchDriverResult>>('detailPanel')
const detailPanelProps = buildDetailPanelProps<DriverTypes.SearchDriverResult>({
  title: '司机详情',
  detailsLoader: DriverApi.detail,
})

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