<template>
  <el-dialog :title="props.title" v-model="isShowDetail" width="1400px" :before-close="closed">
    <div class="config">
      <el-form ref="ruleFormRef" label-width="17.5em" :model="info" label-suffix="：" :rules="rules"
        :disabled="props.title.includes('详情')" label-position="right"
        style="margin: 10px auto !important; display: flex !important; flex-wrap: wrap">
        <el-form-item label="项目名称" prop="uimsProName">
          <el-input v-model="info.uimsProName" type="text" style="width: 374px"></el-input>
        </el-form-item>

        <el-form-item label="所属单位" prpo="orgName">
          <el-input v-model="info.orgName" type="text" style="width: 374px" disabled></el-input>
        </el-form-item>

        <el-form-item label="施工状态" prop="ecpBuildStatusCode">
          <div style="width: 374px">
            <MOSTY.DictRidioAndSelect :dictData="D_BZ_XMSGZT" v-model="info.ecpBuildStatusCode" selectType="select" />
          </div>
        </el-form-item>
        <el-form-item label="占地面积（平方米）" prop="totalLandArea">
          <el-input v-model="info.totalLandArea" type="text" style="width: 374px" @keyup="landAreaKeyup"></el-input>
        </el-form-item>
        <el-form-item label="建筑面积（平方米）" prop="totalBuildingArea">
          <el-input v-model="info.totalBuildingArea" type="text" style="width: 374px" @keyup="buildingKeyup"></el-input>
        </el-form-item>
        <el-form-item label="总投资（万元）" prop="proActualInvestmentAmount">
          <el-input v-model="info.proActualInvestmentAmount" type="text" style="width: 374px"
            @keyup="investmentKeyup"></el-input>
        </el-form-item>
        <el-form-item label="可研阶段报告时间" prop="ecpFsCsaSpeDate">
          <el-date-picker v-model="info.ecpFsCsaSpeDate" style="width: 374px" type="date" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" placeholder="请选择时间" />
        </el-form-item>
        <el-form-item label="可研阶段综合分析和预评价报告" prop="studyFileId">
          <div>
            <MOSTY.Upload :widthNumber="374" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
              v-model="info.studyFileId" :showinput="true"></MOSTY.Upload>
          </div>
        </el-form-item>
        <el-form-item label="设计阶段审查时间" prop="ecpSfDesignCkDate">
          <el-date-picker v-model="info.ecpSfDesignCkDate" style="width: 374px" type="date" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" placeholder="请选择时间" />
        </el-form-item>
        <el-form-item label="设计阶段审计报告" prop="designFileId">
          <MOSTY.Upload :widthNumber="374" :limit="10" :nopicer="true" :isImg="false" :ShowfileList="true"
            v-model="info.designFileId" :showinput="true"></MOSTY.Upload>
        </el-form-item>
        <el-form-item label="安全验收阶段时间" prop="ecpCkAcceptDate">
          <el-date-picker v-model="info.ecpCkAcceptDate" style="width: 374px" type="date" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" placeholder="请选择时间" />
        </el-form-item>
        <el-form-item label="安全验收阶段报告" prop="checkFileId">
          <MOSTY.Upload :widthNumber="374" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
            v-model="info.checkFileId" :showinput="true"></MOSTY.Upload>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onSave" v-if="!props.title.includes('详情')" style="margin-right: 10px">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>确定</span></el-button>
        <el-button @click="closed"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance()
const { D_BZ_XMSGZT } = proxy.$dict("D_BZ_XMSGZT")
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  detail: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: ""
  },
  rowItem: {
    type: Object,
    default: () => ({})
  }
});
const emit = defineEmits(["close"]);
const isShowDetail = ref(true);
const ruleFormRef = ref();
const rules = reactive({
  ecpBuildStatusCode: [{ required: true, message: "施工状态", trigger: "blur" }],
  totalLandArea: [{ required: true, message: "占地面积（平方米）", trigger: "blur" }],
  totalBuildingArea: [{ required: true, message: "建筑面积（平方米）", trigger: "blur" }],
  proActualInvestmentAmount: [{ required: true, message: "总投资（元）", trigger: "blur" }]
});
const cklbList = ref([
  { label: "露天货场", value: "1" },
  { label: "洞库", value: "2" },
  { label: "单层仓库", value: "3" },
  { label: "多层仓库", value: "4" },
  { label: "立体仓库", value: "5" },
  { label: "停车场中转", value: "6" }
]);
const info = ref({});

const onSave = async () => {
  // /
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      if (Array.isArray(info.value.checkFileId) && info.value.checkFileId.length) {
        info.value.checkFileId = info.value.checkFileId.join(",")
      }
      if (Array.isArray(info.value.designFileId) && info.value.designFileId.length) {
        info.value.designFileId = info.value.designFileId.join(",")
      }
      if (Array.isArray(info.value.studyFileId) && info.value.studyFileId.length) {
        info.value.studyFileId = info.value.studyFileId.join(",")
      }
      if (props.title.includes('新增')) {

      }
      //       postApi(info.value, "/mosty-jcgl/data/StsFileEscalation/delStsFileEscalation")
      const url = props.title.includes('新增') ? '/mosty-jcgl/data/StsFileEscalation/saveStsFileEscalation' : '/mosty-jcgl/data/StsFileEscalation/editStsFileEscalation'
      info.value.ecProjBuildStatusName = D_BZ_XMSGZT.value && D_BZ_XMSGZT.value.find(item => item.value == info.value.ecpBuildStatusCode)?.label
      postApi(info.value, url)
        .then((res) => {
          proxy.$message.success(`${props.title.includes('新增') ? '新增' : '编辑'}成功`);
          emit("close", true);
        })
        .finally(() => {
          // butLoading.value = false
        });
    } else {
      ElMessage.warning('请输入必填项！！！')
    }
  });
};
/** 限制只能输入两位小数 */
const landAreaKeyup = (e) => {
  info.value.totalLandArea = e.target.value.match(/\d+\.?\d{0,2}/)?.[0] || ''
}
const buildingKeyup = (e) => {
  info.value.totalBuildingArea = e.target.value.match(/\d+\.?\d{0,2}/)?.[0] || ''
}
// 限制4位小数
const investmentKeyup = (e) => {
  info.value.proActualInvestmentAmount = e.target.value.match(/\d+\.?\d{0,4}/)?.[0] || ''
}
/** 替换 "XN" 为 空字符串 */
const replaceXn = val => {
  if (!val) return ''
  return val.replace('XN', '')
}
onMounted(() => {
  if (props.title.includes('新增')) {
    info.value = {
      orgCode: replaceXn(props.rowItem.orgCode),
      orgName: props.rowItem.orgName,
      statId: props.rowItem.id,
    }
  } else if (props.type == 'report') {
    info.value = props.detail
  } else {
    getApi({}, `/mosty-jcgl/data/StsFileEscalation/selectOne/${props.detail.id}`).then((res) => {
      info.value = res;
    });
  }
});
const closed = () => {
  if(!ruleFormRef.value) return
  if (!props.title.includes('详情')) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emit("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    emit("close");
  }

};
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: 100% !important;
}

.config {
  height: 55vh;
  padding: 20px 30px;
  // border: 1px solid red;
}

::v-deep .el-form-item--default {
  // margin-left: 10px;
}
</style>
