<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.projectName }}
      </el-descriptions-item>
      <el-descriptions-item label="运输方企业">
        {{ formData?.transOrgInfo?.orgName }}
      </el-descriptions-item>
      <el-descriptions-item label="产废方/购买方企业">
        {{ formData.fringeOrgInfo?.orgName }}
      </el-descriptions-item>
      <el-descriptions-item label="区县">
        {{ formData.areaName }}
      </el-descriptions-item>
      <el-descriptions-item label="乡镇街道">
        {{ formData.townName }}
      </el-descriptions-item>
      <el-descriptions-item label="详细地址">
        {{ formData.address }}
      </el-descriptions-item>
      <el-descriptions-item label="合同有效期">
        {{ formData.contractStartDate }}
      </el-descriptions-item>
      <el-descriptions-item label="合同有效期">
        {{ formData.contractEndDate }}
      </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="合同">
        <img :src="AppApi.fileUrl(formData.contractPicture)" alt="合同" style="width: 4rem; height: 4rem; object-fit: cover; border-radius: 4px" />
      </el-descriptions-item> -->

            <el-descriptions-item label="合同">
        <el-image style="width: 100px;height: 100px;" :src="AppApi.fileUrl(formData.contractPicture)" :preview-src-list="[AppApi.fileUrl(formData.contractPicture)]" show-progress></el-image>
      </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 ProjectApi from '@/pages/cst/project/project-api.ts'
import Strings from '@/common/utils/strings.ts'
// import FormUtil from '@/common/utils/formUtil.ts'
import AppApi from '@/common/app/app-api.ts'
// import {
//   ElMessage,
//   type FormInstance,
// } from 'element-plus'

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

// const projectDetailIns = useTemplateRef<FormInstance>("projectDetail");

const formData = ref<any>({});

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

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

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