<template>
  <div>
    <el-dialog :title="props.title" width="1000px" v-model="props.addDiaShow" :close-on-click-modal="false"
      :before-close="handleClose">
      <div class="config">
        <el-form ref='fromRuls' :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm.value"
          :disabled='!saveBtnShow'>
          <el-form-item label="检测日期：" prop="ckeckDate">
            <el-date-picker v-model="ruleForm.ckeckDate" :disabled-date="disablednowDate" style="width: 100%"
              type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="检测危害因素:" prop="checkHazardousFactors">
            <el-select v-model="ruleForm.checkHazardousFactors" placeholder="请选择危害因素" style="width: 250px">
              <el-option v-for="item in listzywh" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检测点位数量:" prop="checkNumberPoints">
            <el-input v-model.number="ruleForm.checkNumberPoints" type="number" style="width: 250px"
              @blur="handleChange(ruleForm.checkNumberPoints)" />
          </el-form-item>
          <el-form-item label="标准值:" prop="standardValue">
            <el-input v-model.number="ruleForm.standardValue" type="number" style="width: 250px" />
          </el-form-item>
          <el-form-item label="超标点位数量:" prop="exceedingNumberPoints">
            <el-input v-model.number="ruleForm.exceedingNumberPoints" type="number" style="width: 250px" />
          </el-form-item>
          <el-form-item label="涉及人数:" prop="numberPeopleInvolved">
            <el-input v-model.number="ruleForm.numberPeopleInvolved" placeholder="请输入涉及人数"
              style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="检测周期:" prop="inspectionCycle">
            <el-select v-model="ruleForm.inspectionCycle" placeholder="请选择检查周期" style="width: 250px">
              <el-option v-for="item in props.zdlist.D_TB_JCZQ" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注:" prop="bz" style="width: 100%;">
            <el-input v-model="ruleForm.bz" type="textarea" autosize show-word-limit style="width: 730px"
              maxlength="200" />
          </el-form-item>
          <el-form-item label="检测报告附件:" style="width: 100%;">
            <MOSTY.Upload :widthNumber="730" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
              :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="ruleForm.file" :showinput="true"
              :delrow="delrow"></MOSTY.Upload>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="loadingshow" @click="handleSave(fromRuls)" v-if="saveBtnShow">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance
} from "vue";
import { postApi, getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { disablednowDate } from '@/utils/tools.js'
import * as rule from "@/utils/rules.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
//表单数据
const fromRuls = ref()
const loadingshow = ref(false);
const listzywh = ref([])
const ruleForm = ref({
});
//规则校验
const rules = reactive({
  ckeckDate: [{ required: true, message: "检测日期不能为空", trigger: "blur" }],
  inspectionCycle: [{ required: true, message: "检测周期不能为空", trigger: "blur" }],
  checkHazardousFactors: [{ required: true, message: "检测危害因素不能为空", trigger: "blur" }],
  ...rule.numberzzsRule({ validator: true, require: true, num: 9999999 }, "numberPeopleInvolved"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 9999999 }, "checkNumberPoints"),
  standardValue: [{
    validator: (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入标准值'));
      } else if (value < 0 || !/^[0-9]{0,9}(\.[0-9]{0,2})?$/.test(value)) {
        callback(new Error(`最多输入9位整数，2位小数`));
      } else { callback(); }
    }, trigger: 'blur', required: true
  }],
  exceedingNumberPoints: [
    {
      validator: (rule, value, callback) => {
        if (!value && value != 0) {
          callback(new Error('超标点位数量不能为空'));
        } else if (value > ruleForm.value.checkNumberPoints) {
          callback(new Error('超标点位数量必须小于检测点位数量'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
      required: true,
    }
  ]
});
const props = defineProps({
  addDiaShow: {
    type: Boolean,
    default: false
  },
  rowId: {
    type: String,
    default: () => ''
  },
  zywhid: {
    type: Array,
    default: () => []
  },
  zdlist: {
    type: Object,
    default: () => { }
  },
  title: String,
  occupationalHazardId: String,
  saveBtnShow: {
    default: true,
    type: Boolean
  }
});

watchEffect(() => {

});
const emits = defineEmits(["changeclose"]);
function handleChange(val) {
  if (Number(val) < Number(ruleForm.value.exceedingNumberPoints)) {
    ruleForm.value.exceedingNumberPoints = ''
  }
}

onMounted(() => {
  props.zdlist.D_TB_ZYJK_WHYS.forEach(item => {
    props.zywhid.forEach(it => {
      if (item.value == it) {
        listzywh.value.push(item)
      }
    })

  })
  if (props.rowId) {
    getxqObj(props.rowId)
  } else {

    ruleForm.value = {}
    ruleForm.value.occupationalHazardId = props.occupationalHazardId ? props.occupationalHazardId : null
  }
});

//获取详情
function getxqObj(id) {
  getApi({}, `/mosty-jcgl/OccupationalHazardCheckRecords/getTbOccupationalHazardCheckRecordsById/${id}`).then(res => {
    if (res) {
      ruleForm.value = res
    }
  })
}
// 关闭
const handleClose = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("changeclose", false);
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("changeclose", false);
  }

};

// 关闭×
const closeDialog = () => {
  emits("changeclose", false);
};
// 保存
const handleSave = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loadingshow.value = true
      ruleForm.value.file = ruleForm.value.file ? ruleForm.value.file.toString() : null;
      if (ruleForm.value.id) {
        postApi(ruleForm.value, '/mosty-jcgl/OccupationalHazardCheckRecords/editTbOccupationalHazardCheckRecords').then(res => {
          emits("changeclose", false);
          loadingshow.value = false
        }).catch(err => {
          loadingshow.value = false
        })
      } else {
        postApi(ruleForm.value, '/mosty-jcgl/OccupationalHazardCheckRecords/saveTbOccupationalHazardCheckRecords').then(res => {
          emits("changeclose", false);
          loadingshow.value = false
        }).catch(err => {
          loadingshow.value = false
        })
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.fj {
  .el-form {
    padding: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    // width: 1170px;
    justify-content: flex-end;
  }

  .from_fix {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin-top: 10px;

    // .el-form-item--default .el-form-item__content {
    //   flex-wrap: nowrap !important;
    // }

    .el-input {
      width: 100%;
    }
  }
}

::v-deep .el-form-item__content {
  flex-wrap: nowrap !important;
}

.config {
  .el-form {
    width: 100% !important;
    padding: 10px 40px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .el-form-item {
    width: 46%;
    text-align: center;
  }
}

.pxdx_box {
  width: 500px;
}

.titleBox {
  align-items: center;
  margin: 0;
  padding: 0;
  height: 60px;
  border: 1px solid rgb(32, 75, 54);
  padding: 20px;
}

.form>div {
  position: relative;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    align-items: center;

    .el-select {
      width: 65%;
    }
  }
}

.el-input {
  width: 75%;
}

.two .el-input {
  width: 65%;
}

.three {
  justify-content: flex-start !important;

  .el-select {
    width: 15%;
  }
}

.four {
  display: flex;
  align-items: center;

  span {
    width: 5%;
  }

  .el-textarea__inner {
    width: 95%;
  }
}

.group {
  margin-top: 50px;
  // background-color: red;
  position: relative;
}

.fj {
  margin-top: 50px;
  width: 100%;

  .content {
    width: 100%;
    display: flex;
    padding: 20px;

    div {
      display: flex;
      width: 85%;
      align-items: center;
    }

    justify-content: space-between;
  }
}

.jc {
  margin-top: 50px;
}

.tabBox {
  height: 300px !important;
}

.el-table {
  height: 300px !important;
  border: 1px solid var(--el-color-primary);
}

.el-form-item__content {
  flex-wrap: nowrap;
}
</style>