<template>
  <el-dialog :title="props.title" width="1200px" v-model="dialogVisible" :before-close="onClose">
    <el-form :model="info" :rules="rules" label-width="140px" 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-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="体检类型" prop="examinationTypeCode">
            <!-- <el-input v-model="info.examinationTypeCode" style="width: 300px;" /> -->
            <el-select v-model="info.examinationTypeCode" placeholder="请选择体检类型" style="width: 300px"
              @change="examTypeChange">
              <el-option v-for="item in D_BZ_ZYJKTJLB" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- <el-form-item label="接触职业危害因素" prop="occupationalHazardCode"> -->
          <el-form-item label="危害因素" prop="occupationalHazardCode" v-if="info.examinationTypeCode == '1'">
            <el-select v-model="info.occupationalHazardCode" placeholder="请选择危害因素" style="width: 300px"
              @change="hazardChange">
              <el-option v-for="item in D_TB_ZYJK_GJJZYWHYS" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="特殊作业类型" prop="specialJobCategorieCode" v-if="info.examinationTypeCode == '2'">
            <el-select v-model="info.specialJobCategorieCode" placeholder="请选择特殊作业类型" style="width: 300px"
              @change="speciaWorkChange">
              <el-option v-for="item in D_BZ_TSZYLX" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人员类别" prop="bbEohPersonnelCategoryCode">
            <!-- <el-input v-model="info.bbEohPersonnelCategoryCode" style="width: 300px;" /> -->
            <MOSTY.DictRidioAndSelect style="width: 300px;" selectType="select" :dictData="D_BZ_ZYWHRYLB"
              v-model="info.bbEohPersonnelCategoryCode" @onChange="personCategoryChange" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人数" prop="personnelQty">
            <el-input-number v-model="info.personnelQty" :precision="0" style="width: 300px;" />
          </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-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 props = defineProps({
  title: String,
  id: String,
  isDetail: {
    type: Boolean,
    default: false
  },
  rowItem: Object,
});
const emits = defineEmits(["closeDetail"]);
const { proxy } = getCurrentInstance();
const { D_BZ_ZYJKTJLB, D_BZ_ZYWHRYLB, D_TB_ZYJK_GJJZYWHYS, D_BZ_TSZYLX } =
  proxy.$dict("D_BZ_ZYJKTJLB", "D_BZ_ZYWHRYLB", "D_TB_ZYJK_GJJZYWHYS", "D_BZ_TSZYLX");

const dialogVisible = ref(true);
const loadingShow = ref(false)
const ruleFormRef = ref()
const info = ref({})
const rules = ref({
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "personnelQty"),
  bbEohPersonnelCategoryName: [{ required: true, message: "请选择", trigger: "change" }],
  // occupationalHazardCode: [{ required: true, message: "请选择危害因素", trigger: "change" }],
  // specialJobCategorieCode: [{ required: true, message: "请选择特殊作业类型", trigger: "change" }],
});
const onClose = () => {
  if(!ruleFormRef.value) return
  if (!props.title.includes('查看')) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits('closeDetail')
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits('closeDetail')
  }

};
const onSave = async () => {
  loadingShow.value = true
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      const url = props.title.includes('新增') ? '/mosty-jcgl/data/Personnel/addPersonnel' : '/mosty-jcgl/data/Personnel/updateAll'
      postApi(info.value, url)
        .then((res) => {
          ElMessage({
            message: "保存成功",
            type: "success"
          });
          emits("closeDetail", true);
        })
        .finally(() => {
          loadingShow.value = false
        });
    } else {
      ElMessage.warning('请输入必填项！！！')
      loadingShow.value = false
    }
  });
}

const personCategoryChange = (val) => {
  info.value.bbEohPersonnelCategoryName = D_BZ_ZYWHRYLB.value.find(v => v.value == val)?.label
}
const examTypeChange = (val) => {
  // examinationTypeName
  info.value.examinationTypeName = D_BZ_ZYJKTJLB.value.find(v => v.value == val)?.label
  // 清空相关类型
  info.value.occupationalHazardCode = ''
  info.value.occupationalHazardName = ''
  info.value.specialJobCategorieCode = ''
  info.value.specialJobCategorieName = ''
}
const hazardChange = (val) => {
  info.value.occupationalHazardName = D_TB_ZYJK_GJJZYWHYS.value.find(v => v.value == val)?.label
}
const speciaWorkChange = (val) => {

  info.value.specialJobCategorieName = D_BZ_TSZYLX.value.find(v => v.value == val)?.label


}


const getDetail = () => {
  let _url = props.isDetail ? "getDetailById" : "getLsjlDetail"
  getApi({ id: props.id }, `/mosty-jcgl/data/Personnel/${_url}`)
    .then((res) => {
      info.value = res
    })
}
onMounted(() => {


  if (props.title.includes('新增')) {
    info.value = {
      orgCode: props.rowItem.orgCode,
      orgName: props.rowItem.orgName,
      baOrgName: props.rowItem.baOrgName || props.rowItem.orgName
    }
  } else if (props.id) {
    getDetail()
  }
});
</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>
