<template>
  <AFormPanel
    ref="formPanel"
    :details-loader="detailsLoader"
    :do-submit="doSubmit"
    :rules="rules"
    :title="status === 'add' ? '新建司机信息' : '修改司机信息'"
  >
    <template #default="{formData}">
      <div class="form-items">
        <ElFormItem label="Id" prop="id">
          <ElInput
            v-model="formData.id"
            placeholder="Id"/>
        </ElFormItem>
        <ElFormItem label="归属用户 Id；sys_user.id" prop="userId">
          <ElInput
            v-model="formData.userId"
            placeholder="归属用户 Id；sys_user.id"/>
        </ElFormItem>
        <ElFormItem label="归属客户 Id；cst_customer.id" prop="customerId">
          <ElInput
            v-model="formData.customerId"
            placeholder="归属客户 Id；cst_customer.id"/>
        </ElFormItem>
        <ElFormItem label="归属公司 Id；cst_org.id" prop="orgId">
          <ElInput
            v-model="formData.orgId"
            placeholder="归属公司 Id；cst_org.id"/>
        </ElFormItem>
        <ElFormItem label="驾驶证编号" prop="drivingLicenceNo">
          <ElInput
            v-model="formData.drivingLicenceNo"
            placeholder="驾驶证编号"/>
        </ElFormItem>
        <ElFormItem label="司机姓名" prop="driverName">
          <ElInput
            v-model="formData.driverName"
            placeholder="司机姓名"/>
        </ElFormItem>
        <ElFormItem label="手机号" prop="phone">
          <ElInput
            v-model="formData.phone"
            placeholder="手机号"/>
        </ElFormItem>
        <ElFormItem label="驾驶证图片" prop="drivingLicence">
          <ElInput
            v-model="formData.drivingLicence"
            placeholder="驾驶证图片"/>
        </ElFormItem>
        <ElFormItem label="驾驶证有效期" prop="licenceStartTime">
          <ElInput
            v-model="formData.licenceStartTime"
            placeholder="驾驶证有效期"/>
        </ElFormItem>
        <ElFormItem label="驾驶证有效期" prop="licenceEndTime">
          <ElInput
            v-model="formData.licenceEndTime"
            placeholder="驾驶证有效期"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import DriverApi from '@/pages/cst/driver/driver-api.ts'
import Strings from '@/common/utils/strings.ts'
import { type FormRules } from 'element-plus'
import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
import type { ComponentExposed } from 'vue-component-type-helpers'

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const rules = reactive<FormRules<DriverTypes.SearchDriverResult>>({
  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
  userId: [ {required: true, message: '请填写归属用户 Id；sys_user.id', trigger: 'blur'} ],
  customerId: [ {required: true, message: '请填写归属客户 Id；cst_customer.id', trigger: 'blur'} ],
  orgId: [ {required: true, message: '请填写归属公司 Id；cst_org.id', trigger: 'blur'} ],
  drivingLicenceNo: [ {required: true, message: '请填写驾驶证编号', trigger: 'blur'} ],
  driverName: [ {required: true, message: '请填写司机姓名', trigger: 'blur'} ],
  phone: [ {required: true, message: '请填写手机号', trigger: 'blur'} ],
  drivingLicence: [ {required: true, message: '请填写驾驶证图片', trigger: 'blur'} ],
  licenceStartTime: [ {required: true, message: '请填写驾驶证有效期', trigger: 'blur'} ],
  licenceEndTime: [ {required: true, message: '请填写驾驶证有效期', trigger: 'blur'} ],
  busy: [ {required: true, message: '请填写忙碌中', trigger: 'blur'} ],
  creatorId: [ {required: true, message: '请填写创建人 Id；sys_user.id', trigger: 'blur'} ],
  modifierId: [ {required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur'} ],
  createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
  modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
  deleted: [ {required: true, message: '请填写是否删除', trigger: 'blur'} ],
})
const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
const status = ref<'add' | 'modify'>('add')

function detailsLoader(id?: string) {
  if (Strings.isBlank(id)) {
    status.value = 'add'
    return Promise.resolve()
  } else {
    status.value = 'modify'
    return DriverApi
      .detail(id!)
      .then(res => res.data)
  }
}

function doSubmit(data: DriverTypes.SearchDriverResult) {
  if (status.value === 'add') {
    return DriverApi.add(data)
      .then(props.research)
  } else {
    return DriverApi.modify(data)
      .then(props.research)
  }
}

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


<style lang="stylus" scoped>
.form-items {
  grid-template-columns: 1fr 1fr;

  :deep(.el-form-item) {
  }
}
</style>
