<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #highFormItem="formData">
      <ElFormItem label="归属用户">
        <ElInput v-model="formData.userId" placeholder="归属用户"/>
      </ElFormItem>
      <ElFormItem label="驾驶证编号">
        <ElInput v-model="formData.drivingLicenceNo" placeholder="驾驶证编号"/>
      </ElFormItem>
      <ElFormItem label="司机姓名">
        <ElInput v-model="formData.driverName" placeholder="司机姓名"/>
      </ElFormItem>
      <ElFormItem label="手机号">
        <ElInput v-model="formData.phone" placeholder="手机号"/>
      </ElFormItem>
      <ElFormItem label="创建时间">
        <ElInput v-model="formData.createTime" placeholder="创建时间"/>
      </ElFormItem>
      <ElFormItem label="修改时间">
        <ElInput v-model="formData.modifyTime" placeholder="修改时间"/>
      </ElFormItem>
    </template>
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput v-model="formData.driverName" placeholder="司机姓名"/>
      </ElFormItem>
      <!-- <ElFormItem>
        <ElInput v-model="formData.phone" placeholder="手机号"/>
      </ElFormItem> -->
    </template>
    <template #columns>
      <ElTableColumn label="司机名称" prop="driverName"/>
      <ElTableColumn label="归属公司" prop="orgName"/>
      <ElTableColumn label="驾驶证编号" prop="drivingLicenceNo"/>
      <ElTableColumn label="手机号" prop="phone"/>
      <ElTableColumn label="驾驶证有效期" prop="licenceStartTime">
        <template #default="{ row }">
          {{ Strings.isBlank(row.licenceStartTime) ? '' : row.licenceStartTime + ' 至 ' + (row.licenceEndTime ?? '永久') }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="状态" prop="busy" width="100">
        <template #default="{ row }">
          <ElTag :type="row.busy ? 'danger' : 'success'">{{ row.busy ? '运输中' : '空闲中' }}</ElTag>
        </template>
      </ElTableColumn>
    </template>
    <DriverForm ref="driverForm" :research="research"/>
  </ATablePage>
</template>

<script lang="ts" setup>
import DriverApi from '@/pages/cst/driver/driver-api.ts'
import DriverForm from '@/pages/cst/driver/DriverForm.vue'
import ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
import Strings from '@/common/utils/strings.ts'

// const driverFormIns = useTemplateRef<InstanceType<typeof DriverForm>>('driverForm')

const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')

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

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


</script>
