<template>
  <ElDialog v-model="showDialog"
    :close-on-click-modal="false"
    destroy-on-close
    width="fit-content"
    @close="dialogCloseHandler">
    <ElForm :model="formData"
      :rules="rules"
      ref="truckForm"
      class="form-panel"
      label-width="auto">
       <ElFormItem label="Id" prop="id">
        <ElInput
          v-model="formData.id"
          :disabled="status === 'view'"
          placeholder="Id"/>
      </ElFormItem>
       <ElFormItem label="归属客户 Id；cst_customer.id" prop="customerId">
        <ElInput
          v-model="formData.customerId"
          :disabled="status === 'view'"
          placeholder="归属客户 Id；cst_customer.id"/>
      </ElFormItem>
       <ElFormItem label="归属组织" prop="orgId">
        <ElInput
          v-model="formData.orgId"
          :disabled="status === 'view'"
          placeholder="归属组织"/>
      </ElFormItem>
       <ElFormItem label="车牌" prop="licensePlate">
        <ElInput
          v-model="formData.licensePlate"
          :disabled="status === 'view'"
          placeholder="车牌"/>
      </ElFormItem>
       <ElFormItem label="行驶证图片" prop="truckLicense">
        <ElInput
          v-model="formData.truckLicense"
          :disabled="status === 'view'"
          placeholder="行驶证图片"/>
      </ElFormItem>
       <ElFormItem label="车架号" prop="vnCode">
        <ElInput
          v-model="formData.vnCode"
          :disabled="status === 'view'"
          placeholder="车架号"/>
      </ElFormItem>
       <ElFormItem label="合格证图片" prop="qualification">
        <ElInput
          v-model="formData.qualification"
          :disabled="status === 'view'"
          placeholder="合格证图片"/>
      </ElFormItem>
       <ElFormItem label="最大载重；单位：千克" prop="carryingCapacity">
        <ElInput
          v-model="formData.carryingCapacity"
          :disabled="status === 'view'"
          placeholder="最大载重；单位：千克"/>
      </ElFormItem>
       <ElFormItem label="皮重；单位：千克" prop="tareWeight">
        <ElInput
          v-model="formData.tareWeight"
          :disabled="status === 'view'"
          placeholder="皮重；单位：千克"/>
      </ElFormItem>
       <ElFormItem label="行驶证有效期" prop="licenseStartDate">
        <ElInput
          v-model="formData.licenseStartDate"
          :disabled="status === 'view'"
          placeholder="行驶证有效期"/>
      </ElFormItem>
       <ElFormItem label="行驶证有效期" prop="licenseEndDate">
        <ElInput
          v-model="formData.licenseEndDate"
          :disabled="status === 'view'"
          placeholder="行驶证有效期"/>
      </ElFormItem>
       <ElFormItem label="合格证有效期" prop="qualificationStartDate">
        <ElInput
          v-model="formData.qualificationStartDate"
          :disabled="status === 'view'"
          placeholder="合格证有效期"/>
      </ElFormItem>
       <ElFormItem label="合格证有效期" prop="qualificationEndDate">
        <ElInput
          v-model="formData.qualificationEndDate"
          :disabled="status === 'view'"
          placeholder="合格证有效期"/>
      </ElFormItem>
       <ElFormItem label="车辆类型" prop="truckCategory">
        <ElInput
          v-model="formData.truckCategory"
          :disabled="status === 'view'"
          placeholder="车辆类型"/>
      </ElFormItem>
       <ElFormItem label="车辆图片" prop="picture">
        <ElInput
          v-model="formData.picture"
          :disabled="status === 'view'"
          placeholder="车辆图片"/>
      </ElFormItem>
       <ElFormItem label="忙碌中" prop="busy">
        <ElInput
          v-model="formData.busy"
          :disabled="status === 'view'"
          placeholder="忙碌中"/>
      </ElFormItem>
       <ElFormItem label="创建人 Id； sys_user.id" prop="creatorId">
        <ElInput
          v-model="formData.creatorId"
          :disabled="status === 'view'"
          placeholder="创建人 Id； sys_user.id"/>
      </ElFormItem>
       <ElFormItem label="修改人 Id； sys_user.id" prop="modifierId">
        <ElInput
          v-model="formData.modifierId"
          :disabled="status === 'view'"
          placeholder="修改人 Id； sys_user.id"/>
      </ElFormItem>
       <ElFormItem label="创建时间" prop="createTime">
        <ElInput
          v-model="formData.createTime"
          :disabled="status === 'view'"
          placeholder="创建时间"/>
      </ElFormItem>
       <ElFormItem label="修改时间" prop="modifyTime">
        <ElInput
          v-model="formData.modifyTime"
          :disabled="status === 'view'"
          placeholder="修改时间"/>
      </ElFormItem>
       <ElFormItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
        <ElInput
          v-model="formData.deleted"
          :disabled="status === 'view'"
          placeholder="是否删除； 0-->未删除、1-->已删除"/>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ElDialog>
</template>

<script lang="ts" setup>
import TruckApi from '@/pages/cst/truck/truck-api.ts'
import Strings from '@/common/utils/strings.ts'
import FormUtil from '@/common/utils/formUtil.ts'
import {
  ElMessage,
  type FormInstance,
  type FormRules,
} from 'element-plus'

const emits = defineEmits(['editSucc'])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')

const truckFormIns = useTemplateRef<FormInstance>('truckForm')

const formData = ref<TruckTypes.SearchTruckResult>({})
const rules = reactive<FormRules<TruckTypes.SearchTruckResult>>({
id: [{ required: true, message: '请填写Id', trigger: 'blur' }],
customerId: [{ required: true, message: '请填写归属客户 Id；cst_customer.id', trigger: 'blur' }],
orgId: [{ required: true, message: '请填写归属组织', trigger: 'blur' }],
licensePlate: [{ required: true, message: '请填写车牌', trigger: 'blur' }],
truckLicense: [{ required: true, message: '请填写行驶证图片', trigger: 'blur' }],
vnCode: [{ required: true, message: '请填写车架号', trigger: 'blur' }],
qualification: [{ required: true, message: '请填写合格证图片', trigger: 'blur' }],
carryingCapacity: [{ required: true, message: '请填写最大载重；单位：千克', trigger: 'blur' }],
tareWeight: [{ required: true, message: '请填写皮重；单位：千克', trigger: 'blur' }],
licenseStartDate: [{ required: true, message: '请填写行驶证有效期', trigger: 'blur' }],
licenseEndDate: [{ required: true, message: '请填写行驶证有效期', trigger: 'blur' }],
qualificationStartDate: [{ required: true, message: '请填写合格证有效期', trigger: 'blur' }],
qualificationEndDate: [{ required: true, message: '请填写合格证有效期', trigger: 'blur' }],
truckCategory: [{ required: true, message: '请填写车辆类型', trigger: 'blur' }],
picture: [{ 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: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur' }],
})

function dialogCloseHandler() {
  formData.value = {}
}

function submitHandler() {
  if (status.value === 'view') return
  submiting.value = true
  if (formData.value.id != null) {
  FormUtil.submit(truckFormIns, () => TruckApi.modify(formData.value))
      .then(() => {
        ElMessage.success('修改成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  } else {
  FormUtil.submit(truckFormIns, () => TruckApi.add(formData.value))
      .then(() => {
        ElMessage.success('添加成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  }
}

defineExpose({
  open(data: TruckTypes.SearchTruckResult = {}) {
    showDialog.value = true
    if (!Strings.isBlank(data.id)) {
      status.value = 'modify'
      TruckApi.detail(data.id!)
        .then(res => {
          formData.value = res.data
        })
    } else {
      status.value = 'add'
      formData.value = data
    }
  }
})
</script>

<style lang="stylus" scoped>
.form-panel {
  padding 20px
}
</style>
