<template>
  <el-dialog :title="props.title" width="1200px" v-model="dialogVisible" :before-close="onClose">
    <el-form :model="info" :rules="rules" label-width="210px" label-position="right" label-suffix=":"
      :disabled="props.title.includes('详情')" ref="ruleFormRef" style="width: 100% !important">
      <MOSTY.Assort title="基础信息" />
      <el-row>
        <el-col :span="12">
          <el-form-item label="企业名称">
            <el-input v-model="info.baOrgName" disabled style="width: 300px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="场所（设备）名称" prop="placeEquipmentName">
            <el-input v-model="info.placeEquipmentName" style="width: 300px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="有限空间类别" prop="categoryCode">
            <!-- <el-input v-model="info.hazardOpsLevelName" style="width: 300px" /> -->
            <MOSTY.DictRidioAndSelect :dictData="props.dict.D_BZ_YXKJLB" v-model="info.categoryCode"
              style="width: 300px" selectType="select" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有限空间数量" prop="lsQty">
            <el-input-number v-model="info.lsQty" :precision="0" style="width: 300px;" :min="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="有限空间危害因素" prop="hazardFactor">
            <el-select v-model="info.hazardFactor" style="width: 300px" clearable :multiple="true">
              <el-option v-for="item in D_TB_YHWHYS" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有限空间可能造成的事故类别" prop="accidentCategoryCode">
            <MOSTY.DictRidioAndSelect :dictData="D_BZ_YXKJSGLB" :multiple="true" v-model="info.accidentCategoryCode"
              style="width: 300px" selectType="select" @onChange="onChange3" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" style="margin-right: 16px" v-loading="loadingShow" @click="onSave"
          v-if="!props.title.includes('详情')"> 保存 </el-button>
        <el-button @click="onClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, computed } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { ElMessage } from "element-plus"
import * as rule from "@/utils/rules.js"
// import { query } from "express"
import { Object } from "core-js"
const { proxy } = getCurrentInstance()
const { D_BZ_YXKJSGLB, D_TB_YHWHYS } = proxy.$dict("D_BZ_YXKJSGLB", "D_TB_YHWHYS")
const props = defineProps({
  title: String,
  detail: {
    type: Object,
    default: () => { }
  },

  rowItem: Object,
  query: Object,
  dict: Object
})
const emits = defineEmits(["close"])
const dialogVisible = ref(true)
const loadingShow = ref(false)
const ruleFormRef = ref()
const info = ref({})
const isAdd = computed(() => {
  return props.title.includes('新增')
})
const rules = ref({
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "dsyxkjCount"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "dxyxkjCount"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "lsQty"),
  // ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "hazardFactor"),
  categoryCode: [{ required: true, message: "有限空间类别不能为空", trigger: "change" }],
  accidentCategoryCode: [{ required: true, message: "有限空间可能造成的事故类别不能为空", trigger: "change" }],
  placeEquipmentName: [{ required: true, message: "场所（设备）名称不能为空", trigger: "blur" }],
  // lsQty: [{ required: true, message: "有限空间数量不能为空", trigger: "blur" }],
  hazardFactor: [{ required: true, message: "有限空间危害因素不能为空", trigger: "blur" }]
  // factorName: [{ required: true, message: "请选择", trigger: "change" }]
})
onMounted(() => {

  info.value = props.detail ? props.detail : {}
  if (props.title.includes("新增")) {
    info.value.baOrgName = props.rowItem.orgName
    info.value.baOrgCode = props.rowItem.baOrgCode
    info.value.orgName = props.rowItem.orgName
    info.value.orgCode = props.rowItem.orgCode
  }

})
const onChange3 = (e, val) => {
  info.value.accidentCategoryCode = e
  info.value.accidentCategoryName = val.toString()
}
const onClose = () => {
  if(!ruleFormRef.value) return
  if (!props.title.includes('详情')) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close")
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close")
  }

}

const onSave = async () => {
  loadingShow.value = true
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      info.value.categoryName = props.dict.D_BZ_YXKJLB.find(v => v.value == info.value.categoryCode).label
      info.value.accidentCategoryCode = info.value.accidentCategoryCode ? info.value.accidentCategoryCode.toString() : ''
      info.value.hazardFactor = info.value.hazardFactor.join(',')
      if (props.title.includes("新增")) {
        info.value.orgCode = props.rowItem.orgCode
        info.value.reportingYear = props.query.year
        info.value.reportCycleCode = props.query.jd
        postApi(info.value, "/mosty-jcgl/data/spaceOpsSite/add")
          .then(res => {
            ElMessage({
              message: "新增成功",
              type: "success"
            })
            emits("close", true)
          })
          .finally(() => {
            loadingShow.value = false
          })
      }
      if (props.title.includes("编辑")) {
        postApi(info.value, "/mosty-jcgl/data/spaceOpsSite/edit")
          .then(res => {
            ElMessage({
              message: "保存成功",
              type: "success"
            })
            emits("close", true)
          })
          .finally(() => {
            loadingShow.value = false
          })
      }
    } else {
      ElMessage.warning("请检查表单！")
      loadingShow.value = false
    }
  })
}


</script>

<style lang="scss" scoped>
.content {
  .topper {
    display: flex;

    .sub-le {
      flex: 1;
      padding: 15px 15px 5px 15px;
      border-right: 1px solid #ebeef5;
    }
  }

  .bottom {
    padding: 0 15px 10px 15px;
  }
}
</style>
