<template>
  <el-dialog :title="props.title" v-model="isShowDetail" width="1200px" :before-close="closed">
    <div class="config">
      <el-form ref="Fromrefs" label-width="auto" :model="info" label-suffix="：" :rules="rules" :disabled="!props.isEdit"
        label-position="right" style="width: 100% !important;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="统计周期">
              <el-select v-model="info.yearStr" clearable placeholder="请选择" disabled>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <MOSTY.Assort title="特种作业人员" />
        <el-row>
          <el-col :span="11">
            <el-form-item label="高压电工（人）" prop="hpElectricianQty">
              <el-input-number v-model="info.hpElectricianQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="低压电工（人）" prop="lpElectricianQty">
              <el-input-number v-model="info.lpElectricianQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="制冷与空调工量（人）" prop="reAcwQty">
              <el-input-number v-model="info.reAcwQty" style="width: 300px;" :max="maxNum" :min="minNum" :step="step"
                step-strictly />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="焊接与热切割工（人）" prop="weHcWorkerQty">
              <el-input-number v-model="info.weHcWorkerQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="高处作业（人）" prop="highAlWorkerQty">
              <el-input-number v-model="info.highAlWorkerQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
        </el-row>
        <MOSTY.Assort title="特种设备管理及操作人员" />
        <el-row>
          <el-col :span="11">
            <el-form-item label="特种设备安全管理员（人）" prop="safetyManagementQty">
              <el-input-number v-model="info.safetyManagementQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="工业锅炉司炉（人）" prop="ibFiremanQty">
              <el-input-number v-model="info.ibFiremanQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="锅炉水处理（人）" prop="waterTreatmentQty">
              <el-input-number v-model="info.waterTreatmentQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="起重机司机（人）" prop="craneDriverQty">
              <el-input-number v-model="info.craneDriverQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="压力容器操作工（人）" prop="pvOperatorQty">
              <el-input-number v-model="info.pvOperatorQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="叉车司机（人）" prop="forkliftDriverQty">
              <el-input-number v-model="info.forkliftDriverQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="观光车司机（人）" prop="sbDriverQty">
              <el-input-number v-model="info.sbDriverQty" style="width: 300px;" :max="maxNum" :min="minNum" :step="step"
                step-strictly />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="特种设备焊接作业（人）" prop="weldingOperationsQty">
              <el-input-number v-model="info.weldingOperationsQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
        </el-row>
        <MOSTY.Assort title="消防控制室值班和操作持证人员" />
        <el-row>
          <el-col :span="12">
            <el-form-item label="技能等级(五级/初级工)(人)" prop="juniorWorkerQty">
              <el-input-number v-model="info.juniorWorkerQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="技能等级(四级/中级工)(人)" prop="intermediateWorkerQty">
              <el-input-number v-model="info.intermediateWorkerQty" style="width: 300px;" :max="maxNum" :min="minNum"
                :step="step" step-strictly />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" :loading="loadingShow" @click="handleSave(Fromrefs)" v-if="props.isEdit"> <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 } from 'vue'
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  detailId: {
    type: String,
    default: ''
  },
  id: {
    type: String,
    default: ''
  },
  isEdit: {
    type: Boolean,
    default: true
  },
})
const emits = defineEmits(["close"]);
const isShowDetail = ref(true)
const maxNum = ref(99999)
const minNum = ref(0)
const step = ref(1)
const loadingShow = ref(false)
const rules = reactive({
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "hpElectricianQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "lpElectricianQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "reAcwQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "weHcWorkerQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "highAlWorkerQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "safetyManagementQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "ibFiremanQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "waterTreatmentQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "craneDriverQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "pvOperatorQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "forkliftDriverQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "sbDriverQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "weldingOperationsQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "juniorWorkerQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "intermediateWorkerQty"),
});
const Fromrefs = ref()
const info = ref({})
const closed = () => {
  if(!Fromrefs.value) return // 内容不存在时不执行
  if (props.isEdit) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        Fromrefs.value.clearValidate();
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    Fromrefs.value.clearValidate();
    emits("close");
  }

};
// 获取详情
const getDetail = () => {
  let _url = props.id ? '/mosty-jcgl/data/certifiedPerson/getLsjlDetail' : '/mosty-jcgl/data/certifiedPerson/getDetailById'
  let id = props.id ? props.id : props.detailId
  getApi({ id }, _url).then((res) => {
    info.value = res || {}
    let _bn = info.value.reportCycleCode == 2 ? '下半年' : '上半年'
    info.value.yearStr = (info.value.reportingYear||'') + '年-' + _bn
  })
}
//保存
const handleSave = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      loadingShow.value = true
      if (info.value.yearStr) {
        delete info.value.yearStr
      }
      postApi(info.value, '/mosty-jcgl/data/certifiedPerson/updateAll').then(res => {
        ElMessage({
          message: '保存成功',
          type: 'success',
        })
        emits("close", true);
      }).finally(() => {
        loadingShow.value = false
      });
    } else {
      ElMessage.warning('请输入必填项！！！')
    }

  })
}


onMounted(() => {
  getDetail()
})
</script>
<style scoped lang="scss">
::v-deep .el-form-item--default {
  margin-left: 10px;
}
</style>
