<template>
  <el-dialog :title="props.title" v-model="isShowDetail" width="1120px" :before-close="closed">
    <div class="config">
      <el-form ref="ruleFormRef" label-width="auto" :model="info" label-suffix="：" :rules="rules"
        :disabled="props.title.includes('详情')" label-position="right"
        style="margin: 10px auto !important; display: flex !important; justify-content: space-between; flex-wrap: wrap">
        <el-form-item v-if="!isAdd" label="企业名称" prop="baOrgName">
          <el-input v-model="info.baOrgName" type="text" style="width: 250px" disabled></el-input>
        </el-form-item>

        <el-form-item v-if="!isAdd" label="统计年度">
          <el-input v-model="props.query.year" type="text" style="width: 250px" disabled></el-input>
        </el-form-item>
        <el-form-item v-else label="统计年度" prop="reportingYear">
          <el-select clearable v-model="info.reportingYear" style="width: 250px">
            <el-option v-for="item in filterYear(5)" :key="item.value" :label="item.label" :value="item.value"
              disabled></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库名称" prop="storehouseName">
          <el-input v-model="info.storehouseName" type="text" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="仓库类型" prop="storehouseTypeCode">
          <!-- <el-input v-model="info.storehouseTypeName" type="text" style="width: 250px"></el-input> -->
          <MOSTY.DictRidioAndSelect :dictData="D_BZ_CKLXX" v-model="info.storehouseTypeCode" selectType="select"
            style="width: 250px" @onChange="storeTypeNameChange" />
        </el-form-item>
        <el-form-item label="物流节点名称" prop="cgtLogtNodeName">
          <el-input v-model="info.cgtLogtNodeName" type="text" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="建筑结构" prop="structureCode">
          <!-- <el-input v-model="info.structureCode" type="text" style="width: 250px"></el-input> -->
          <MOSTY.DictTree :zdbh="'D_BZ_JZJGLX'" :type="'array'" v-model="info.structureCode" placeholder='请选择结构:'
            :disabled='false' style="width: 250px;" @nameChange="structChange" />
        </el-form-item>
        <el-form-item label="占地面积" prop="storehouseUseArea">
          <el-input v-model="info.storehouseUseArea" style="width: 250px"
            @keyup="areaKeyup($event, 'storehouseUseArea')"></el-input>
        </el-form-item>
        <el-form-item label="建筑面积" prop="totalBuildingArea">
          <el-input v-model="info.totalBuildingArea" style="width: 250px"
            @keyup="areaKeyup($event, 'totalBuildingArea')"></el-input>
        </el-form-item>
        <!-- 因为单位要随物资类别变化，所以显示到下面 -->
        <!-- <el-form-item label="库容量" prop="storehouseInventoryCapacity">
          <el-input v-model="info.storehouseInventoryCapacity" type="text" style="width: 250px"></el-input>
        </el-form-item> -->
        <el-form-item label="投产时间" prop="logtWhseCommissioningTime">
          <el-date-picker v-model="info.logtWhseCommissioningTime" style="width: 250px" type="date" format="YYYY-MM"
            value-format="YYYY-MM" placeholder="请选择投产时间" />
        </el-form-item>

        <el-form-item label="火灾危险性等级" prop="fireHazardClassifiesCode">
          <!-- <el-input v-model="info.fireHazardClassifiesCode" type="text" style="width: 250px"></el-input> -->
          <MOSTY.DictRidioAndSelect style="width: 250px;" :dictData="D_BZ_JZWHZWXXLB"
            v-model="info.fireHazardClassifiesCode" selectType="select" :disabled="false"
            @onChange="fireHazardChange" />
        </el-form-item>
        <!-- D_BZ_CKCCWZLB -->
        <el-form-item label="仓储物资类别" prop="storehouseMeterialCatCode">
          <!-- <el-input v-model="info.storehouseMeterialCatCode" type="text" style="width: 250px"></el-input> -->
          <MOSTY.DictTree :zdbh="'D_BZ_CCWZLBSX'" type="array" v-model="info.storehouseMeterialCatCode"
            :placeholder='"请选择仓储物资类别:"' :disabled='false' :disabledItem="storePropertydisItem" style="width: 250px;" @nameChange="storeHouseMeteriaChange" />
          <!-- <MOSTY.DictRidioAndSelect style="width: 250px;" :dictData="D_BZ_CKCCWZLB" v-model="info.storehouseMeterialCatName"
            selectType="select" :disabled="false" /> -->
        </el-form-item>
        <el-form-item label="库容量" prop="storehouseInventoryCapacity">
          <el-input v-model="info.storehouseInventoryCapacity" type="number" style="width: 250px">
            <template #append>
              {{ capacityUnit }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="仓储形式" prop="cgtStoreFormCode">
          <!-- <el-input v-model="info.cgtStoreFormName" type="text" style="width: 250px"></el-input> -->
          <MOSTY.DictRidioAndSelect :dictData="props.sbsslist.D_BZ_JYCCXS" v-model="info.cgtStoreFormCode"
            style="width: 250px" selectType="select" :disabled="false" @onChange="storehouseTypeChange" />
        </el-form-item>
        <el-form-item label="仓储性质" prop="cgtStorehousePropertyCode">
          <!-- <el-input v-model="info.cgtStorehousePropertyName" type="text" style="width: 250px"></el-input> -->
          <MOSTY.DictRidioAndSelect :dictData="props.sbsslist.D_BZ_JYCKXZ" v-model="info.cgtStorehousePropertyCode"
            style="width: 250px" selectType="select" :disabled="false" @onChange="storehousePropertyChange" />
        </el-form-item>

        <el-form-item label="是否配置消火栓系统" prop="conHydrantSysFlag">
          <div style="width: 250px">
            <MOSTY.DictRidioAndSelect :dictData="props.sbsslist.D_BZ_SF" v-model="info.conHydrantSysFlag"
              selectType="select" :disabled="false" />
          </div>
        </el-form-item>
        <el-form-item label="是否配置火灾自动报警系统" prop="conAlarmSysFlag">
          <div style="width: 250px">
            <MOSTY.DictRidioAndSelect :dictData="props.sbsslist.D_BZ_SF" v-model="info.conAlarmSysFlag"
              selectType="select" :disabled="false" />
          </div>
        </el-form-item>
        <el-form-item label="是否配置自动灭火系统" prop="conOutfireSysFlag">
          <div style="width: 250px">
            <MOSTY.DictRidioAndSelect :dictData="props.sbsslist.D_BZ_SF" v-model="info.conOutfireSysFlag"
              selectType="select" :disabled="false" />
          </div>
        </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, computed } 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";
import { numberLimit } from "@/utils/tools.js"

const { proxy } = getCurrentInstance();

const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  detail: {
    type: String,
    default: ""
  },
  sbsslist: {
    type: Object,
    default: {}
  },
  query: Object,
  rowItem: {
    type: Object,
    default: () => ({})
  }
});
const emit = defineEmits(["close"]);
const { D_BZ_CKLXX, D_BZ_JZWHZWXXLB, D_BZ_CKCCWZLB } = proxy.$dict("D_BZ_CKLXX", "D_BZ_JZWHZWXXLB", "D_BZ_CKCCWZLB")

const isShowDetail = ref(true);
const ruleFormRef = ref();
const isAdd = computed(() => {
  return props.title.includes("新增")
})
/** 库容量计量单位 */
const capacityUnit = computed(() => {
  let obj = {
    '10': '担', //原烟
    '11': '箱', //片烟
    '12': '吨', //烟丝
    '02': '万支', //卷烟
    '30': '万支', //滤棒
    '31': '吨', //其他烟用材料
    '04': '吨', //香精香料
  }
  if (!info.value.storehouseMeterialCatCode) return ''

  return obj[info.value.storehouseMeterialCatCode]
})
const rules = reactive({
  storehouseName: [{ required: true, message: "请输入仓库名称", trigger: "blur" }],
  cgtLogtNodeName: [{ required: true, message: "请输入物流节点名称", trigger: "blur" }],
  storehouseTypeCode: [{ required: true, message: "请选择仓库类型", trigger: "blur" }],
  structureCode: [{ required: true, message: "请选择建筑结构", trigger: "blur" }],
  storehouseUseArea: [{ required: true, message: "请输入占地面积", trigger: "blur" }],
  totalBuildingArea: [{ required: true, message: "请输入建筑面积", trigger: "blur" }],
  logtWhseCommissioningTime: [{ required: true, message: "请输入投产时间", trigger: "blur" }],
  fireHazardClassifiesCode: [{ required: true, message: "请选择火灾危险性等级", trigger: "blur" }],
  storehouseMeterialCatCode: [{ required: true, message: "请选择仓储物资类别", trigger: "blur" }],
  storehouseInventoryCapacity: [{ required: true, message: "请输入库容量", trigger: "blur" }],
  cgtStoreFormCode: [{ required: true, message: "请选择仓储形式", trigger: "blur" }],
  cgtStorehousePropertyCode: [{ required: true, message: "请选择仓储性质", trigger: "blur" }],
  conHydrantSysFlag: [{ required: true, message: "请选择是否配置消火栓系统", trigger: "blur" }],
  conAlarmSysFlag: [{ required: true, message: "请选择是否配置火灾自动报警系统", trigger: "blur" }],
  conOutfireSysFlag: [{ 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) {
      const url = isAdd.value ? "/mosty-jcgl/data/StorageEscalation/saveStorageEscalation" : "/mosty-jcgl/data/StorageEscalation/editStorageEscalation"
      let params = {
        ...info.value,
      }
      postApi(params, url)
        .then((res) => {
          proxy.$message.success(`${isAdd.value ? '新增' : '编辑'}成功`);
          emit("close", true);
        })
        .finally(() => {
          // butLoading.value = false
        });
    }
  });
};
const structChange = (val) => {
  info.value.structureName = val
}
const areaKeyup = (e, key) => {
  info.value[key] = numberLimit(e.target.value)
}
/**仓库物资类别 */
const storeHouseMeteriaChange = (val, namePath) => {
  info.value.storehouseMeterialCatName = namePath?.length ? namePath.join('-') : ''
}
const storePropertydisItem = computed(() => {
  const { storehouseTypeCode } = info.value
  if (!storehouseTypeCode) return
  if (storehouseTypeCode == 4 || storehouseTypeCode == 5) return ['12', '02', '30', '31', '04']
})
/**仓库类型 */
const storeTypeNameChange = (val) => {

  info.value.storehouseTypeName = D_BZ_CKLXX.value?.find(v => v.value == val)?.label || ''
  info.value.storehouseMeterialCatCode = '' // 清空仓储物资类别
}
/** 火灾危险等级 -change */
const fireHazardChange = (val) => {
  info.value.fireHazardClassifiesName = D_BZ_JZWHZWXXLB.value.find(v => v.value == val)?.label || ''
}
/**仓储形式 */
const storehouseTypeChange = (val) => {
  info.value.cgtStoreFormName = props.sbsslist.D_BZ_JYCCXS.find(v => v.value == val)?.label || ''
}
/**仓储性质 */
const storehousePropertyChange = (val) => {
  // info.value.cgtStoreFormName = props.sbsslist.D_BZ_JYCKXZ.find(v => v.value == val)?.label || ''
  info.value.cgtStorehousePropertyName = props.sbsslist.D_BZ_JYCKXZ.find(v => v.value == val)?.label || ''
}
onMounted(() => {
  if (isAdd.value) {
    info.value = {
      orgCode: props.rowItem.orgCode && props.rowItem.orgCode.replace('XN', ''),
      orgName: props.rowItem.orgName,
      statId: props.rowItem.id,
      reportingYear: props.rowItem.reportingYear // 默认当年 filterYear(7)[0].value
    }
  } else if (props.detail) {
    info.value = props.detail;
    // getApi({}, `/mosty-jcgl/data/StorageEscalation/selectOne/${props.detail.sourceId}`).then((res) => {
    //   if(!res) return
    //   info.value = res;
    // });
  }
  // else {
  //   info.value = {};
  // }
});
const closed = () => {
  if (!ruleFormRef.value) return
  if (!props.title.includes('详情')) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emit("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    emit("close");
  }

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

.config {
  height: 55vh;
}

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