<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.licensePlate }}
      </el-descriptions-item>



      <el-descriptions-item label="行驶证图片">
        <el-image v-for="(item,i) in formData.truckLicense" :key="i" style="width: 100px; height: 100px" :src="AppApi.fileUrl(item)" :preview-src-list="[AppApi.fileUrl(item)]" show-progress></el-image>
      </el-descriptions-item>

      <el-descriptions-item label="行驶证有效期">
        {{ formData.licenseStartDate }} ~ {{ formData.licenseEndDate }}
      </el-descriptions-item>
      <el-descriptions-item label="车架号">
        {{ formData.vnCode }}
      </el-descriptions-item>
      <el-descriptions-item label="合格证图片">
        <el-image v-for="(item,i) in formData.qualification" :key="i" style="width: 100px; height: 100px" :src="AppApi.fileUrl(item)" :preview-src-list="[AppApi.fileUrl(item)]" show-progress></el-image>
      </el-descriptions-item>

      <el-descriptions-item label="合格证有效期">
        {{ formData.qualificationStartDate }} ~ {{ formData.qualificationEndDate }}
      </el-descriptions-item>

      <el-descriptions-item label="最大载重">
        {{ Number(formData.carryingCapacity)/1000 }}吨
      </el-descriptions-item>

      <el-descriptions-item label="状态">
        {{ formData.busy?'运输中':'空闲' }}
      </el-descriptions-item>

      <el-descriptions-item label="车辆图片">
        <el-image style="width: 100px; height: 100px" :src="AppApi.fileUrl(formData.picture)" :preview-src-list="[AppApi.fileUrl(formData.picture)]" show-progress></el-image>
      </el-descriptions-item>

      <el-descriptions-item label="车辆类型">
        {{ formData.truckCategory }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ formData.createTime }}
      </el-descriptions-item>
      <el-descriptions-item label="修改时间">
        {{ formData.modifyTime }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <ElButton @click="showDialog = false">关闭</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'
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 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>
