<template>
  <el-dialog :title="props.title" v-model="props.isShowSubLevel" width="1000px" :before-close="closed">
    <div class="config">
      <el-form ref="ruleForms" label-width="auto" style="display: flex;width: 100% !important;flex-wrap: wrap;"
        :model="items" :disabled="!props.savebtn" label-position="right" :rules="rules" :inline="true">
        <el-form-item label="建筑名称" prop="bdName">
          <el-input v-model="items.bdName" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="所属部门" prop="ssbmid">
          <!-- <el-input v-model="items.bdName" style="width: 200px;" /> -->
          <MostDept v-model:ids="items.ssbmid" v-model:cName="items.ssbmmc" :deptId="props.rowItem.orgCode"
            :width="200"></MostDept>
        </el-form-item>
        <el-form-item label="建筑类别" prop="bdCategoryCode">
          <MOSTY.DictTree :zdbh="'D_BZ_GJJZWLB'" v-model="items.bdCategoryCode" :placeholder='"请选择类别:"'
            :disabled='false' style="width: 200px;" @nameChange='jzwlbNameChange' />
        </el-form-item>
        <el-form-item label="建筑时间" prop="constructionDate">
          <el-date-picker v-model="items.constructionDate" style="width: 200px" type="date" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="建筑物结构名称" prop="structureCode">
          <MOSTY.DictRidioAndSelect :dictData="jzjglist" v-model="items.structureCode" selectType="select"
            :disabled="!props.savebtn" style="width: 200px;" @getselect='onChangejzjg' />
        </el-form-item>
        <el-form-item label="火灾危险性分类" :prop="items.bdCategoryCode == '3' ? 'fireHazardClassifiesName' : ''">
          <div style="width: 200px;">
            <MOSTY.DictRidioAndSelect :dictData="D_BZ_JZWHZWXXLB" v-model="items.fireHazardClassifiesCode"
              selectType="select" :disabled="!props.savebtn" @getselect='wxxflChange' />
          </div>
        </el-form-item>
        <el-form-item label="占地面积(m2)" prop="totalLandArea">
          <el-input v-model="items.totalLandArea" style="width: 200px;" @keyup="areaKeyup($event, 'totalLandArea')" />
        </el-form-item>
        <el-form-item label="建筑面积(m2)" prop="totalBuildingArea">
          <el-input v-model="items.totalBuildingArea" style="width: 200px;"
            @keyup="areaKeyup($event, 'totalBuildingArea')" />
        </el-form-item>
        <el-form-item label="高度(m)" prop="bdHeight">
          <el-input v-model="items.bdHeight" style="width: 200px;" @keyup="areaKeyup($event, 'bdHeight')" />
        </el-form-item>
        <el-form-item label="地上层数" prop="bdAboveFloor">
          <el-input v-model="items.bdAboveFloor" style="width: 200px;" type="number" />
        </el-form-item>
        <el-form-item label="地下层数" prop="bdUndergroundFloor">
          <el-input v-model="items.bdUndergroundFloor" style="width: 200px;" type="number" />
        </el-form-item>
        <el-form-item label="耐火等级" prop="bdRefractoryRatingCode">
          <div style="width: 200px;">
            <MOSTY.DictRidioAndSelect :dictData="D_TB_NHDJ" v-model="items.bdRefractoryRatingCode" selectType="select"
              :disabled="!props.savebtn" @getselect='nhdjChange' />
          </div>
        </el-form-item>
        <el-form-item label="外墙保温材料性能" prop="wallHeatPreservationCode">
          <div style="width: 200px;">
            <MOSTY.DictRidioAndSelect :dictData="D_BZ_JZWWQBWCLXN" v-model="items.wallHeatPreservationCode"
              selectType="select" :disabled="!props.savebtn" @getselect='bwxnChange' />
          </div>
        </el-form-item>
        <el-form-item label="是否配置消火栓系统" prop="conHydrantSysFlag">
          <el-select v-model="items.conHydrantSysFlag" clearable style="width: 200px;">
            <el-option v-for="item in Issf" :key="item" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否配置火灾自动报警系统" prop="conAlarmSysFlag">
          <el-select v-model="items.conAlarmSysFlag" clearable style="width: 200px;">
            <el-option v-for="item in Issf" :key="item" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否配置自动灭火系统" prop="conOutfireSysFlag">
          <el-select v-model="items.conOutfireSysFlag" clearable style="width: 200px;">
            <el-option v-for="item in Issf" :key="item" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- 出租场所 -->
        <template v-if="items.bdCategoryCode == '3'">
          <el-form-item label="出租面积(m2)" prop="unusedHireFloorArea">
            <el-input v-model="items.unusedHireFloorArea" style="width: 200px;"
              @keyup="areaKeyup($event, 'unusedHireFloorArea')" />
          </el-form-item>
          <el-form-item label="出租用途" prop="rentalPurposesName">
            <div style="width: 200px;">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_JZWCZYT" v-model="items.rentalPurposesCode" selectType="select"
                :disabled="!props.savebtn" @getselect='czytChange' />
            </div>
          </el-form-item>
        </template>
        <!-- 闲置场所 -->
        <template v-else-if="items.bdCategoryCode == '4'">
          <el-form-item label="闲置面积(m2)" prop="unusedHireFloorArea">
            <el-input v-model="items.unusedHireFloorArea" style="width: 200px;"
              @keyup="areaKeyup($event, 'unusedHireFloorArea')" />
          </el-form-item>
        </template>
        <!-- 其他所有的 -->
        <template v-else>
          <el-form-item v-if="['10', '11', '2'].includes(String(items.bdCategoryCode))" label="建筑物体用途名称"
            prop="buildingPurposeName">
            <MOSTY.DictRidioAndSelect v-if="items.bdCategoryCode == '10' || items.bdCategoryCode == '11'"
              :dictData="jzytlist" v-model="items.buildingPurposeCode" selectType="select" :disabled="!props.savebtn"
              style="width: 200px;" @getselect='onChangejzyt' />
            <MOSTY.DictRidioAndSelect v-if="items.bdCategoryCode == '2'" :dictData="jzytlist2"
              v-model="items.buildingPurposeCode" selectType="select" :disabled="!props.savebtn" style="width: 200px;"
              @getselect='onChangejzyt' />

          </el-form-item>
        </template>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">

        <el-button style="margin-right: 10px;" type="primary" v-loading="btnloading" @click="onSave(ruleForms)"
          v-if="props.savebtn">
          <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 * as MOSTY from "@/components/MyComponents/index";
import * as rule from "@/utils/rules.js";
import { ElMessage } from "element-plus";
import { postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
import { getApi } from "@/api/tobAcco_api.js";
import MostDept from "@/views/dataReportWork/jzwjbqktz/com/MostDept.vue"
import { numberLimit } from "../../../../../src/utils/tools.js"
const { D_BZ_SF, D_BZ_JZWHZWXXLB, D_TB_NHDJ, D_BZ_JZWWQBWCLXN, D_TB_JZWGGJG, D_BZ_JZWCZYT }
  = proxy.$dict("D_BZ_SF", "D_BZ_JZWHZWXXLB", 'D_TB_NHDJ', 'D_BZ_JZWWQBWCLXN', 'D_TB_JZWGGJG', 'D_BZ_JZWCZYT');
const rules = {
  bdName: [{ required: true, message: "请输入建筑名称", trigger: "blur" }],
  ssbmid: [{ required: true, message: "请选择部门", trigger: "blur" }],
  bdCategoryCode: [{ required: true, message: "请选择建筑类别", trigger: "blur" }],
  constructionDate: [{ required: true, message: "请选择建筑时间", trigger: "blur" }],
  buildingstype: [{ required: true, message: "请选择建筑物类别", trigger: "blur" }],
  startusetime: [{ required: true, message: "请选择建造时间", trigger: "blur" }],
  structureName: [{ required: true, message: "请选择建筑物结构", trigger: "blur" }],
  bdRefractoryRatingName: [{ required: true, message: "请选择耐火等级", trigger: "blur" }],
  fireHazardClassifiesName: [{ required: true, message: "请选择火灾危险性分类", trigger: "change" }],
  wallHeatPreservationName: [{ required: true, message: "请选择外墙保温材料性能", trigger: "change" }],
  conHydrantSysFlag: [{ required: true, message: "请选择是否配置消火栓系统", trigger: "change" }],
  conAlarmSysFlag: [{ required: true, message: "请选择是否配置火灾自动报警系统", trigger: "change" }],
  conOutfireSysFlag: [{ required: true, message: "请选择是否配置自动灭火系统", trigger: "change" }],
  buildingPurposeName: [{ required: true, message: "请选择建筑物体用途", trigger: "change" }],
  rentalPurposesName: [{ required: true, message: "请选择出租用途", trigger: "change" }],
  ...rule.znumberRule({ validator: true, require: true }, "unusedHireFloorArea"),
  ...rule.znumberRule({ validator: true, require: true }, "totalBuildingArea"),
  ...rule.znumberRule({ validator: true, require: true }, "totalLandArea"),
  ...rule.znumberRule({ validator: true, require: true }, "bdHeight"),
  ...rule.intRule({ validator: true, require: true }, "bdAboveFloor"),
  ...rule.intfsRule({ validator: true, require: true }, "bdUndergroundFloor"),
};
const ruleForms = ref()
const props = defineProps({
  title: {
    type: String,
    default: '未知'
  },
  isShowSubLevel: {
    type: Boolean,
    default: true
  },
  savebtn: {
    type: Boolean,
    default: true
  },
  info: {
    type: Object,
    default: () => { }
  },
  id: String,
  rowItem: Object
})
const btnloading = ref(false)
const Issf = ref([
  { label: '是', value: '1' },
  { label: '否', value: '0' },
])
const jzytlist = ref([
  { label: '办公楼', value: '01' },
  { label: '科研楼', value: '02' },
  { label: '其他', value: '03' }
])
const jzytlist2 = ref([
  { label: '卷烟生产', value: '11' },
  { label: '物流分拣', value: '12' },
  { label: '打叶复烤', value: '13' },
  { label: '其他', value: '14' },
])
const jzjglist = ref([
  { label: '砖木结构', value: '1' },
  { label: '砖混结构', value: '2' },
  { label: '钢筋混凝土结构', value: '3' },
  { label: '钢结构', value: '4' },
  { label: '其他', value: '5' }
])
const items = ref(null)
const emits = defineEmits(["close"]);
onMounted(() => {
  // if(props.id){
  //   getPageDetail()
  // }
  if (props.title.includes('新增')) {
    items.value = {
      orgCode: props.rowItem.orgCode && props.rowItem.orgCode.replace('XN', ''),
      orgName: props.rowItem.orgName,
      statId: props.rowItem.id,
      reportingYear: props.rowItem.reportingYear || new Date().getFullYear()
    }

  } else if (props.info) {
    items.value = props.info
  }
})
const areaKeyup = (e, key) => {
  items.value[key] = e.target.value.match(/\d+\.?\d{0,2}/)?.[0] || ''

}
/** 建筑物修改 */
function jzwlbNameChange(val, pathName) {
  // items.value.bdCategoryCode = val?.dm;
  items.value.bdCategoryName = pathName?.length ? pathName.join(',') : '';

}
function onChangejzjg(val) {
  items.value.structureCode = val.value;
  items.value.structureName = val.label;
}
function wxxflChange(val) {
  items.value.fireHazardClassifiesCode = val.value;
  items.value.fireHazardClassifiesName = val.label;
}
function nhdjChange(val) {
  items.value.bdRefractoryRatingCode = val.value;
  items.value.bdRefractoryRatingName = val.label;
}
function bwxnChange(val) {
  items.value.wallHeatPreservationCode = val.value;
  items.value.wallHeatPreservationName = val.label;
}
function czytChange(val) {
  items.value.rentalPurposesCode = val.value;
  items.value.rentalPurposesName = val.label;
}
function onChangejzyt(val) {
  items.value.buildingPurposeCode = val.value;
  items.value.buildingPurposeName = val.label;
}

const getPageDetail = () => {
  getApi({ id: props.id }, "/mosty-jcgl/data/buildSafe/getJlbDetailById").then((res) => {
    items.value = res
  });
}
const onSave = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      btnloading.value = true
      // add: /data/buildSafe/saveBuildSafeData
      // edit: /data/buildSafe/editBuildSafeData
      const url = props.title.includes('新增') ? "/mosty-jcgl/data/buildSafe/saveBuildSafeData" : "/mosty-jcgl/data/buildSafe/editBuildSafeData"
      postApi(items.value, url)
        .then((res) => {
          ElMessage({
            message: `${props.title.includes('新增') ? '新增' : '修改'}成功`,
            type: "success"
          });
          emits("close", true);
        }).finally(() => {
          btnloading.value = false
        });
    } else {
      ElMessage.warning('请输入必填项！！！')
    }
  })
}
const closed = () => {
  if(!ruleForms.value) return
  if (props.savebtn) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close");
  }

};
</script>
<style scoped lang="scss">
.config {
  width: 940px;
}
</style>
