<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #highFormItem="formData">
      <ElFormItem label="车牌">
        <ElInput v-model="formData.licensePlate" placeholder="车牌"/>
      </ElFormItem>
      <ElFormItem label="车架号">
        <ElInput v-model="formData.vnCode" placeholder="车架号"/>
      </ElFormItem>
      <ElFormItem label="归属客户">
        <ElInput v-model="formData.customerName" placeholder="归属客户"/>
      </ElFormItem>
      <ElFormItem label="归属企业">
        <ElInput v-model="formData.orgName" placeholder="归属企业"/>
      </ElFormItem>
    </template>
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput v-model="formData.licensePlate" placeholder="车牌"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="归属客户" prop="customerName"/>
      <ElTableColumn label="归属企业" prop="orgName"/>
      <ElTableColumn label="车牌号" prop="licensePlate"/>
      <ElTableColumn label="车架号" prop="vnCode"/>
      <ElTableColumn label="车辆类型" prop="truckCategory"/>
      <ElTableColumn label="车辆图片" width="100">
        <template #default="{ row }">
          <ElImage
            :preview-src-list="[AppApi.fileUrl(row.picture)]"
            :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress
            style="width: 23px; height: 23px;display: block;"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="状态" prop="busy" width="100">
        <template #default="{ row }">
          <ElTag :type="row.busy ? 'danger' : 'success'">{{ row.busy ? '运输中' : '空闲中' }}</ElTag>
        </template>
      </ElTableColumn>
    </template>
    <TruckForm ref="truckForm" :research="research"/>
  </ATablePage>
</template>

<script lang="ts" setup>
import TruckApi from '@/pages/cst/truck/truck-api.ts'
import TruckForm from '@/pages/cst/truck/TruckForm.vue'
import AppApi from '@/common/app/app-api.ts'
import ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'

const truckFormIns = useTemplateRef<InstanceType<typeof TruckForm>>('truckForm')
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')

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

const tablePageProps = buildTablePageProps<CustomerTypes.SearchCustomerParam, CustomerTypes.SearchCustomerResult>({
  pageLayout: {
    searchFormHeight: '125px',
    dataListHeight: 1,
  },
  searchForm: {
    highForm: {
      contentWidth: 342,
    },
    paging: TruckApi.paging,
  },
  table: {
    actionColumn: {
      tableActions: [
        /* {
          tooltip: '编辑',
          icon: 'Edit',
         type: 'success',
          action({row}) {
            truckFormIns.value?.open(row)
          },
         }, */
      ],
    },
  },
})

</script>
