<template>
  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
    <el-descriptions class="margin-top" title="司机详情" :column="3" border>
      <el-descriptions-item label="司机姓名">
        {{ formData.driverName }}
      </el-descriptions-item>
      <el-descriptions-item label="所属公司">
        {{ formData.orgName }}
      </el-descriptions-item>
      <el-descriptions-item label="证书编号">
        {{ formData?.drivingLicenceNo }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        {{ formData.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ formData.createTime }}
      </el-descriptions-item>
      <el-descriptions-item label="修改时间">
        {{ formData.modifyTime }}
      </el-descriptions-item>
      <el-descriptions-item label="驾驶证">
        <el-image style="width: 100px; height: 100px" :src="AppApi.fileUrl(formData.drivingLicence)" :preview-src-list="[AppApi.fileUrl(formData.drivingLicence)]" show-progress></el-image>
      </el-descriptions-item>
      <el-descriptions-item label="驾驶证有效期"> {{ formData.licenceStartTime }} ~ {{ formData.licenceEndTime }} </el-descriptions-item>
      <!-- <el-descriptions-item>
        <el-tag size="small">School</el-tag>
      </el-descriptions-item> -->
    </el-descriptions>
    <template #footer>
      <ElButton @click="showDialog = false">关闭</ElButton>
    </template>
  </ElDialog>
</template>

<script lang="ts" setup>
import DriverApi from '@/pages/cst/driver/driver-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'
import AppApi from '@/common/app/app-api.ts'

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

// const driverFormIns = useTemplateRef<FormInstance>("driverForm");

const formData = ref<DriverTypes.SearchDriverResult>({});
// 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: "请填写是否删除； 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(driverFormIns, () => DriverApi.modify(formData.value))
//       .then(() => {
//         ElMessage.success("修改成功");
//         emits("editSucc");
//         showDialog.value = false;
//       })
//       .finally(() => {
//         submiting.value = false;
//       });
//   } else {
//     FormUtil.submit(driverFormIns, () => DriverApi.add(formData.value))
//       .then(() => {
//         ElMessage.success("添加成功");
//         emits("editSucc");
//         showDialog.value = false;
//       })
//       .finally(() => {
//         submiting.value = false;
//       });
//   }
// }

defineExpose({
  open(data: DriverTypes.SearchDriverResult = {}) {
    showDialog.value = true;
    if (!Strings.isBlank(data.id)) {
      status.value = "modify";
      DriverApi.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>
