<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :paging="paging">
    <template #searchFormItem="{searchForm}">
      <ElFormItem label="归属用户">
        <ElInput v-model="searchForm.userId" placeholder="归属用户"/>
      </ElFormItem>
      <ElFormItem label="驾驶证编号">
        <ElInput v-model="searchForm.drivingLicenceNo" placeholder="驾驶证编号"/>
      </ElFormItem>
      <ElFormItem label="司机姓名">
        <ElInput v-model="searchForm.driverName" placeholder="司机姓名"/>
      </ElFormItem>
      <ElFormItem label="手机号">
        <ElInput v-model="searchForm.phone" placeholder="手机号"/>
      </ElFormItem>
      <ElFormItem label="创建时间">
        <ElInput v-model="searchForm.createTime" placeholder="创建时间"/>
      </ElFormItem>
      <ElFormItem label="修改时间">
        <ElInput v-model="searchForm.modifyTime" placeholder="修改时间"/>
      </ElFormItem>
    </template>
    <template #simpleSearchFormItem="{searchForm}">
      <ElFormItem>
        <ElInput v-model="searchForm.driverName" placeholder="司机姓名"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="searchForm.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"/>
      <ElTableColumn label="驾驶证有效期" prop="licenceEndTime"/>
      <ElTableColumn label="忙碌中" prop="busy"/>
      <ElTableColumn label="创建时间" prop="createTime"/>
      <ElTableColumn label="修改时间" prop="modifyTime"/>
    </template>
    <DriverForm ref="driverForm" :research="research"/>
    <DriverDetail ref="driverDetail" @edit-succ="research"/>
  </FormPage>
</template>

<script lang="ts" setup>
import DriverApi from '@/pages/cst/driver/driver-api.ts'
import DriverForm from '@/pages/cst/driver/DriverForm.vue'
import DriverDetail from '@/pages/cst/driver/DriverDetail.vue'
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 driverDetailIns = useTemplateRef<InstanceType<typeof DriverDetail>>('driverDetail')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')

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

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

function paging(param: DriverTypes.SearchDriverParam) {
  return DriverApi.paging(param)
}

</script>
