<template>
  <el-dialog :title="props.title" width="800px" v-model="dialogVisible" :before-close="onClose">
    <div class="config">
      <el-form ref="ruleFormRef" label-width="auto" style="display: flex;width: 100% !important;flex-wrap: wrap;"
        :model="info" :disabled="!props.savebtn" label-position="right" :rules="rules" label-suffix=":" :inline="true">
        <el-form-item label="企业名称" prop="orgName">
          <el-input v-model="info.orgName" disabled style="width: 200px;" />
        </el-form-item>
        <el-form-item label="风险评价类型" prop="riskEvaluateTypeCode">
          <MOSTY.DictRidioAndSelect :dictData="D_BZ_FXLX" v-model="info.riskEvaluateTypeCode" selectType="select"
            :disabled="!props.savebtn" style="width: 200px;" @getselect='onChangepllx' />
        </el-form-item>
        <el-form-item label="风险单元等级" prop="riskUnitLevelCode">
          <MOSTY.DictRidioAndSelect :dictData="D_BZ_FXDJ" v-model="info.riskUnitLevelCode" selectType="select"
            :disabled="!props.savebtn" style="width: 200px;" @getselect='onChangejzjg' />
        </el-form-item>
        <el-form-item label="风险单元数量" prop="riskUnitQty">
          <el-input v-model="info.riskUnitQty" style="width: 200px;" />
        </el-form-item>

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

        <el-button type="primary" style="margin-right: 16px;" v-loading="loadingShow" @click="onSave"
          v-if="props.savebtn"> <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span> </el-button>
        <el-button @click="onClose"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></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";
const { proxy } = getCurrentInstance();
// 数据
const { D_BZ_FXLX, D_BZ_FXDJ } = proxy.$dict(
  "D_BZ_FXLX", "D_BZ_FXDJ"
);
const props = defineProps({
  title: String,
  id: String,
  savebtn: Boolean,
  isDetail: {
    type: Boolean,
    default: false
  },
  rowItem: {
    type: Object,
    default: () => ({})
  }, query: Object
});
const emits = defineEmits(["closeDetail"]);
const dialogVisible = ref(true);
const loadingShow = ref(false)
const ruleFormRef = ref()
const info = ref({})
const rules = ref({
  orgName: [{
    required: true, message: "请输入企业名称", trigger: "blur"
  }],
  riskEvaluateTypeCode: [{ required: true, message: "请选择风险评价类型", trigger: "blur" }],
  riskUnitLevelCode: [{ required: true, message: "请选择风险单元等级", trigger: "blur" }],
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "riskUnitQty")
});
onMounted(() => {
  if (props.id) {
    getDetail()
  }

  info.value.orgName = props.rowItem.orgName
});
const onClose = () => {
  if(!ruleFormRef.value) return
  if (props.savebtn) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits('closeDetail')
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits('closeDetail')
  }

};
function onChangejzjg(val) {

  info.value.riskUnitLevelCode = val.value;
  info.value.riskUnitLevelName = val.label;

}
function onChangepllx(val) {
  info.value.riskEvaluateTypeCode = val.value;
  info.value.riskEvaluateTypeName = val.label;
}
const onSave = async () => {
  loadingShow.value = true
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {

      if (!info.value.sourceId) {
        info.value.orgCode = props.rowItem.orgCode
        info.value.reportingYear = props.query.year
        info.value.reportCycleCode = props.query.jtsj

        postApi(info.value, "/mosty-jcgl/data/riskUnitDist/add")
          .then(res => {
            ElMessage({
              message: "新增成功",
              type: "success"
            })
            emits("closeDetail", true)
          })
          .finally(() => {
            loadingShow.value = false
          })
      } else {
        postApi(info.value, "/mosty-jcgl/data/riskUnitDist/updateAll")
          .then((res) => {
            ElMessage({
              message: "保存成功",
              type: "success"
            });
            emits("closeDetail", true);
          })
          .finally(() => {
            loadingShow.value = false
          });
      }

    } else {
      ElMessage.warning('请输入必填项！！！')
      loadingShow.value = false
    }
  });
}
const getDetail = () => {
  let _url = props.isDetail ? "/data/riskUnitDist/getDetailById" : "/data/riskUnitDist/getLsjlDetail"
  getApi({ id: props.id }, `/mosty-jcgl${_url}`)
    .then((res) => {
      info.value = res
    })
}

</script>

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

.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>
