<template>
  <el-dialog :title="props.title" v-model="isShowDetail" width="1200px" :before-close="closed">
    <div class="config">
      <el-form ref="formRef" label-width="auto" :model="info" label-suffix="：" :rules="rules"
        :disabled="!props.isEdit && !props.isAdd" label-position="right">
        <el-row>
          <el-col :span="11">
            <!-- <el-form-item v-if="!props.isAdd" label="姓名" prop="employeeName">
              <el-input placeholder="请选择输入姓名" v-model="info.employeeName" disabled />
            </el-form-item> -->
            <el-form-item label="姓名" prop="employeeName">
              <el-input placeholder="请输入姓名" v-model="info.employeeName">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="所属部门" prop="deptCode">
              <MostDept v-model:ids="info.deptCode" v-model:cName="info.deptName" :deptId="props.rowItem.orgCode"
                :width="318"></MostDept>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="统计年度" prop="reportingYear">
              <el-select clearable v-model="info.reportingYear" disabled>
                <el-option v-for="item in filterYear(5)" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="上报季度" prop="reportCycleCode">
              <el-select clearable placeholder="请选择季度" v-model="info.reportCycleCode" :disabled="!props.isAdd">
                <el-option v-for="item in D_BZ_QUARTER" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="政治面貌" prop="politicalAffiliationCode">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_AQRYZZMM" v-model="info.politicalAffiliationCode"
                selectType="select" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="性别" prop="sexCode">
              <el-select clearable placeholder="请选择性别" v-model="info.sexCode" @change="sexChange">
                <el-option v-for="item in D_BZ_XB" :key="item" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="岗位名称" prop="postName">
              <el-input placeholder="请输入岗位名称" v-model="info.postName" :disabled="!props.isAdd" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="出生年月" prop="birthDate">
              <el-date-picker v-model="info.birthDate" style="width: 100%" type="date" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" placeholder="请选择出生年月" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="是否评聘为安全工程师" prop="seFlag">
              <el-radio-group v-model="info.seFlag">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="最高专业技术资格名称" prop="proQualifiedName">
              <el-input placeholder="请输入最高专业技术资格名称" v-model="info.proQualifiedName" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="11">
            <el-form-item label="职务" prop="dutiesName">
              <el-input placeholder="请输入职务" v-model="info.dutiesName" disabled />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="全日制毕(肄)业学校(单位)" prop="graduationSchoolName">
              <el-input placeholder="请输入毕业学校" v-model="info.graduationSchoolName" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="在职毕(肄)业学校(单位)" prop="jobGraduationSchoolName">
              <el-input placeholder="请输入在职单位" v-model="info.jobGraduationSchoolName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="最高全日制学历" prop="maximumDegreeName">
              <el-input placeholder="请输入最高全日制学历" v-model="info.maximumDegreeName" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="最高在职学历" prop="jobEducationName">
              <el-input placeholder="请输入最高全日制学历" v-model="info.jobEducationName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="全日制毕(肄)业专业" prop="graduatedMajorName">
              <el-input placeholder="请输入全日制毕(肄)业专业" v-model="info.graduatedMajorName" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="在职毕(肄)业专业" prop="jobGraduatedSchoolName">
              <el-input placeholder="请输入在职毕(肄)业专业" v-model="info.jobGraduatedSchoolName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="联系方式" prop="contact">
              <MOSTY.Phone style="width: 100%" show-word-limit maxlength="11" clearable v-model="info.contact">
              </MOSTY.Phone>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="擅长领域" prop="areasExpertiseCode">
              <!-- <MOSTY.DictRidioAndSelect v-model="info.areasExpertiseCode" :dictData="D_BZ_AQRYSCLY" selectType="select" :multiple="true" placeholder="请选择" /> -->
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_AQRYSCLY" v-model="info.areasExpertiseCode"
                @onChange="handleScly" selectType="select" :multiple="true" placeholder="请选择" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="累计从事专职安全管理年限" prop="safetyManageYear">
              <el-input-number style="width: 100%" v-model="info.safetyManageYear" :precision="1" :max="999.9"
                :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="注册安全工程师级别" prop="cseLevelName">
              <el-select clearable placeholder="请选择" v-model="info.cseLevelName" @change="handleChange($event, 'aq')">
                <el-option v-for="item in zcaqgcsjb" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="注册消防工程师级别" prop="fireEngineerLevelName">
              <el-select clearable v-model="info.fireEngineerLevelName" placeholder="请选择"
                @change="handleChange($event, 'xf')">
                <el-option v-for="item in zcxfgcsjb" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否为安技委成员" prop="safetyMemberFlag">
              <el-radio-group v-model="info.safetyMemberFlag">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="职务" prop="dutiesName">
              <el-input placeholder="请输入职务" v-model="info.dutiesName" :disabled="!props.isAdd" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="11">
            <el-form-item label="是否评聘为安全工程师" prop="seFlag">
              <el-radio-group v-model="info.seFlag">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <!-- <ChooseUser v-model="chooseUserVisible" :deptId="userDeptId" :Single="true" @choosedUsers="userChange"></ChooseUser> -->
    </div>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" @click="handleSave" v-if="props.isEdit || props.isAdd"> <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, computed } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import * as MOSTY from "@/components/MyComponents/index"
import MostDept from "@/views/dataReportWork/jzwjbqktz/com/MostDept.vue"
import { filterYear } from "@/utils/auth.js"
import { isString } from '@/utils/tools.js';
import { ElMessage } from "element-plus";
// import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";

const { proxy } = getCurrentInstance()
const { D_BZ_SF, D_BZ_QUARTER, D_BZ_AQRYZZMM, D_BZ_XB, D_BZ_AQRYSCLY } = proxy.$dict("D_BZ_SF", "D_BZ_QUARTER", "D_BZ_AQRYZZMM", "D_BZ_XB", "D_BZ_AQRYSCLY")
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  detailId: {
    type: String,
    default: ""
  },
  isEdit: {
    type: Boolean,
    default: true
  },
  isAdd: {
    type: Boolean,
    default: false
  },
  rowItem: {
    type: Object,
    default: {}
  }
})
const emits = defineEmits(["close"])
const userDeptId = computed(() => {
  return props.rowItem.orgCode && props.rowItem.orgCode.replace('XN', '')
})
const isShowDetail = ref(true)
const chooseUserVisible = ref(false)
const formRef = ref()
const zcaqgcsjb = [
  { label: "初级", id: "1" },
  { label: "中级", id: "2" },
  { label: "高级", id: "3" },
  { label: "无", id: "4" }
]
const zcxfgcsjb = [
  { label: "一级", id: "1" },
  { label: "二级", id: "2" },
  { label: "高级", id: "3" },
  { label: "无", id: "4" }
]
const rules = reactive({
  employeeName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  deptCode: [{ required: true, message: "请选择所属部门", trigger: "blur" }],
  reportingYear: [{ required: true, message: "请选择统计年度", trigger: "blur" }],
  reportCycleCode: [{ required: true, message: "请选择上报季度", trigger: "blur" }],
  politicalAffiliationCode: [{ required: true, message: "请输入政治面貌名称", trigger: "blur" }],
  sexCode: [{ required: true, message: "请输入性别", trigger: "blur" }],
  postName: [{ required: true, message: "请输入岗位名称", trigger: "blur" }],
  birthDate: [{ required: true, message: "请选择出生年月", trigger: "blur" }],
  proQualifiedName: [{ required: true, message: "请输入最高专业技术资格名称", trigger: "blur" }],
  dutiesName: [{ required: true, message: "请输入职务", trigger: "blur" }],
  contact: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
  areasExpertiseCode: [{ required: true, message: "请选择擅长领域", trigger: "blur" }],
  safetyManageYear: [{ required: true, message: "请输入累计从事专职安全管理年限", trigger: "blur" }],
  cseLevelName: [{ required: true, message: "请选择注册安全工程师级别", trigger: "blur" }],
  fireEngineerLevelName: [{ required: true, message: "请选择注册消防工程师级别", trigger: "blur" }],
  safetyMemberFlag: [{ required: true, message: "是否为安技委成员", trigger: "blur" }],
  seFlag: [{ required: true, message: "是否评聘为安全工程师", trigger: "blur" }]
})
const info = ref({})
const closed = () => {
  if(!formRef.value) return;
  if (props.isEdit || props.isAdd) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close")
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close")
  }

}
// 获取下拉选择的数据
const handleChange = (val, type) => {
  if (type == "aq") {
    let item = zcaqgcsjb.find(v => v.id == val)
    info.value.cseLevelCode = item.id
    info.value.cseLevelName = item.label
  } else if (type == "xf") {
    let item = zcxfgcsjb.find(v => v.id == val)
    info.value.fireEngineerLevelCode = item.id
    info.value.fireEngineerLevelName = item.label
  }
}
// 获取详情
const getDetail = () => {
  getApi({}, `/mosty-jcgl/data/safeManageTeam/selectOne/${props.detailId}`).then(res => {
    info.value = res
    info.value.reportCycleCode = String(res.reportCycleCode || '')
    info.value.areasExpertiseCode = info.value.areasExpertiseCode ? info.value.areasExpertiseCode.split(',') : null
  })
}
const handleScly = (e, lab) => {
  info.value.areasExpertiseCode = e
  info.value.areasExpertiseName = lab ? lab.toString() : ''
}
const userChooseClick = () => {
  chooseUserVisible.value = true
}
const userChange = val => {
  val = val[0]
  info.value.employeeName = val.userName
  info.value.deptCode = val.deptCode
  info.value.deptName = val.deptName
}
const sexChange = val => {
  info.value.sexName = D_BZ_XB.value.find(item => item.value == val)?.label || ''
}
/** 替换 "XN" 为 空字符串 */
const replaceXn = val => {
  if (!val) return ''
  return val.replace('XN', '')
}
//保存
const handleSave = async () => {
  formRef.value.validate(valid => {
    if (valid) {
      info.value.areasExpertiseCode = info.value.areasExpertiseCode ? info.value.areasExpertiseCode.toString() : ''

      const url = props.isAdd ? "/mosty-jcgl/data/safeManageTeam/saveSafeManageTeam" : "/mosty-jcgl/data/safeManageTeam/editSafeManageTeam"
      let params = {
        ...info.value,
      }
      if (props.isAdd) {
        params = {
          ...params,
          orgCode: replaceXn(props.rowItem.orgCode),
          orgName: props.rowItem.orgName,
          statId: props.rowItem.id,
          politicalAffiliation: D_BZ_AQRYZZMM.value.find(item => item.value == info.value.politicalAffiliationCode)?.label || ''
        }
        delete params.id
      }
      postApi(params, url).then(res => {
        ElMessage({
          message: `${props.isAdd ? "新增" : "编辑"}成功`,
          type: "success"
        })
        emits("close", true)
      }).finally(() => {
        info.areasExpertiseCode = info.areasExpertiseCode && isString(info.areasExpertiseCode) ? info.areasExpertiseCode.split(',') : info.areasExpertiseCode
      })

    }
  })
}
onMounted(() => {
  if (props.isAdd) {
    info.value.reportingYear = props.rowItem.reportingYear
    info.value.reportCycleCode = String(props.rowItem.reportCycleCode || '')
  } else {
    getDetail()
  }
})
</script>
<style scoped lang="scss">
::v-deep .el-form-item--default {
  margin-left: 10px;
}
</style>
