<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :paging="paging">
    <template #searchFormItem="{ searchForm }">
      <ElFormItem label="车牌">
        <ElInput v-model="searchForm.licensePlate" placeholder="车牌"/>
      </ElFormItem>
      <ElFormItem label="车架号">
        <ElInput v-model="searchForm.vnCode" placeholder="车架号"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="车牌" prop="licensePlate" width="100px"/>
      <!-- <ElTableColumn label="行驶证图片" prop="truckLicense" /> -->
      <ElTableColumn label="行驶证图片" width="100px">
        <template #default="{ row }">
          <el-image :preview-src-list="[AppApi.fileUrl(row.truckLicense[0])]"
            :src="AppApi.fileUrl(row.truckLicense[0])"
            preview-teleported
            show-progress style="width: 60px; height: 60px"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="车架号" prop="vnCode"/>
      <!-- <ElTableColumn label="合格证图片" prop="qualification" /> -->
      <ElTableColumn label="合格证图片" width="100px">
        <template #default="{ row }">
          <el-image :preview-src-list="[AppApi.fileUrl(row.qualification[0])]" :src="AppApi.fileUrl(row.qualification[0])" preview-teleported show-progress style="width: 60px; height: 60px"></el-image>
        </template>
      </ElTableColumn>
      <!-- <ElTableColumn label="最大载重（千克）" prop="carryingCapacity" /> -->

      <ElTableColumn label="行驶证有效期" width="120px">
        <template #default="{ row }"> {{ row.licenseStartDate }} ~ {{ row.licenseEndDate }}</template>
      </ElTableColumn>
      <ElTableColumn label="合格证有效期" width="120px">
        <template #default="{ row }"> {{ row.qualificationStartDate }} ~ {{ row.qualificationEndDate }}</template>
      </ElTableColumn>
      <ElTableColumn label="车辆类型" prop="truckCategory"/>
      <ElTableColumn label="车辆图片" width="100px">
        <template #default="{ row }">
          <el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 60px; height: 60px"></el-image>
        </template>
      </ElTableColumn>
      <ElTableColumn label="状态" prop="busy">
        <template #default="{ row }">
          {{ row.busy ? '运输中' : '空闲' }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="创建时间" prop="createTime" width="100px"/>
    </template>
    <TruckForm ref="truckForm" :research="research"/>
    <TruckDetail ref="truckDetail"/>
  </FormPage>
</template>

<script lang="ts" setup>
import TruckApi from '@/pages/cst/truck/truck-api.ts'
import TruckForm from '@/pages/cst/truck/TruckForm.vue'
import TruckDetail from '@/pages/cst/truck/TruckDetail.vue'
import AppApi from '@/common/app/app-api.ts'
import FormPage from '@/components/page/FormPage.vue'
import type { ActionColumnType } from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'

const truckDetailIns = useTemplateRef<InstanceType<typeof TruckDetail>>('truckDetail')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')

const actionColumn = reactive<ActionColumnType<TruckTypes.SearchTruckResult>>({
  tableActions: [
    {
      tooltip: '详情',
      icon: 'Postcard',
      action({row}) {
        truckDetailIns.value?.open(row)
      },
    },
    {
      icon: 'Delete',
      loading: false,
      type: 'danger',
      tooltip: '删除',
      confirm: {
        title: '是否删除当前数据',
      },
      action({row}) {
        return TruckApi.del([ row.id! ])
          .then(() => {
            ElMessage.success('删除成功')
            return true
          })
      },
    },
  ],
})

function research() {
  formPageIns.value?.doSearch()
}

function paging(params: TruckTypes.SearchTruckParam) {
  return TruckApi.paging(params)
}
</script>
