<template>
  <div>
    <MOSTY.FromPage :title="props.title" @closeDialog="handleClose">
      <template #content>
        <MOSTY.Assort :title="'基本信息'" />
        <div class="config">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="205px" :disabled="!isSave">
            <el-form-item label="安全人员姓名：" prop="username" style="width: 33%;">
              <el-input v-model="ruleForm.username" clearable readonly style="width: 100%;" placeholder="请选择"
                :disabled="isUpdate">
                <template #append>
                  <el-button :disabled="isUpdate" @click="ChooesDdld('01')" class='cursor'>选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="安全员类型：" prop="aqrylx" style="width: 33%;">
              <MOSTY.DictRidioAndSelect :dictData="props.dict.D_TB_ZJZLX" v-model="ruleForm.aqrylx" selectType="select"
                placeholder="请选择" />
            </el-form-item>
            <el-form-item label="从事安全工作年限：" :prop="ruleForm.aqrylx == '1' ? '' : 'csaqgznx'" style="width: 33%;">
              <el-input v-model="ruleForm.csaqgznx" clearable type="number" style="width: 100%">
                <template #append>年</template>
              </el-input>
            </el-form-item>
            <el-form-item label="性别：" prop="xb" style="width: 33%;">
              <MOSTY.DictRidioAndSelect :dictData="props.dict.D_BZ_XB" v-model="ruleForm.xb" selectType="select"
                placeholder="请选择" />
            </el-form-item>
            <el-form-item label="出生日期：" prop="csrq" style="width: 33%;">
              <el-date-picker v-model="ruleForm.csrq" type="data" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                style="width: 100%;" placeholder="请选择出生日期" :default-value="getDefaultDates"
                :disabled-date="disabledDate">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="联系方式：" :prop="ruleForm.aqrylx == '1' ? '' : 'telephone'" style="width: 33%;">
              <MOSTY.Phone width="100%" show-word-limit v-model="ruleForm.telephone" maxlength="11" clearable
                @onInput="phoneChange">
              </MOSTY.Phone>
            </el-form-item>
            <el-form-item label="政治面貌：" :prop="ruleForm.aqrylx == '1' ? '' : 'politicalStatus'" style="width: 33%">
              <MOSTY.DictRidioAndSelect :dictData="props.dict.D_BZ_AQRYZZMM" v-model="ruleForm.politicalStatus"
                selectType="select" placeholder="请选择" />
            </el-form-item>

            <el-form-item label="岗位：" :prop="ruleForm.aqrylx == '1' ? '' : 'jobTitle'" style="width: 33%;">
              <el-input v-model="ruleForm.jobTitle" clearable style="width: 100%" readonly placeholder="请选择">
                <template #append>
                  <el-button class='cursor' @click="onClickSelect('gw')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="职务：" :prop="ruleForm.aqrylx == '1' ? '' : 'dutyName'" style="width: 33%;">
              <el-input v-model="ruleForm.dutyName" clearable style="width: 100%" readonly placeholder="请选择">
                <template #append>
                  <el-button class='cursor' @click="onClickSelect('zw')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="擅长领域：" :prop="ruleForm.aqrylx == '1' ? '' : 'expertise'" style="width: 33%;">
              <MOSTY.DictRidioAndSelect :dictData="props.dict.D_BZ_AQRYSCLY" v-model="ruleForm.expertise"
                selectType="select" :multiple='true' placeholder="请选择" />
            </el-form-item>
            <el-form-item label="参加工作年限：" prop="cjgznx" style="width: 33%;">
              <el-input v-model="ruleForm.cjgznx" clearable type="number" style="width: 100%">
                <template #append>年</template>
              </el-input>
            </el-form-item>
            <el-form-item label="累计从事专职安全管理年限：" :prop="ruleForm.aqrylx == '1' ? '' : 'fullTimeYearly'"
              style="width: 49.5%;">
              <el-input v-model.number="ruleForm.fullTimeYearly" type="number" style="width: 100%"
                placeholder="请输入累计从事专职安全管理年限">
                <template #append>年</template>
              </el-input>
            </el-form-item>
            <el-form-item label="最高专业技术资格证书名称：" :prop="ruleForm.aqrylx == '1' ? '' : 'highestTechnical'"
              style="width: 49.5%;">
              <el-input v-model="ruleForm.highestTechnical" style="width: 100%" placeholder="请输入最高专业技术资格证书名称" />
            </el-form-item>
            <el-form-item label="最高全日制学历：" prop="highestFullTimeEducation" style="width: 33%;">
              <MOSTY.DictRidioAndSelect :dictData="props.dict.D_BZ_AQRYWHCD" v-model="ruleForm.highestFullTimeEducation"
                selectType="select" placeholder="请选择最高全日制学历" />
            </el-form-item>
            <el-form-item label="全日制毕(肄)业专业：" prop="fullTimeMajor" style="width: 33%;">
              <el-input v-model="ruleForm.fullTimeMajor" style="width: 100%" placeholder="请输入全日制毕(肄)业专业" />
            </el-form-item>
            <el-form-item label="全日制毕(肄)业学校(单位)：" prop="fullTimeOrg" style="width: 33%;">
              <el-input v-model="ruleForm.fullTimeOrg" clearable style="width: 100%"
                placeholder="请输全日制毕(肄)业学校(单位)"></el-input>
            </el-form-item>
            <el-form-item label="最高在职学历：" prop="highestBeOnTheJobEducation" style="width: 33%;">
              <MOSTY.DictRidioAndSelect :dictData="props.dict.D_BZ_AQRYWHCD"
                v-model="ruleForm.highestBeOnTheJobEducation" selectType="select" placeholder="最高在职学历" />
            </el-form-item>
            <el-form-item label="在职毕(肄)业专业：" prop="beOnTheJobMajor" style="width: 33%;">
              <el-input v-model="ruleForm.beOnTheJobMajor" style="width: 100%" placeholder="请输入在职毕(肄)业专业" />
            </el-form-item>
            <el-form-item label="在职毕(肄)业学校(单位)：" prop="highestBeOnTheJobOrg" style="width: 33%;">
              <el-input v-model="ruleForm.highestBeOnTheJobOrg" clearable style="width: 100%"
                placeholder="请输入在职毕(肄)业学校(单位)"></el-input>
            </el-form-item>

            <el-form-item label="培训经历情况：" prop="pxjlqk" style="width: 100%;">
              <el-input v-model="ruleForm.pxjlqk" type="textarea" autosize clearable style="width: 100%"
                placeholder="请输入培训经历情况" />
            </el-form-item>
            <el-form-item label="取得职业证书情况：" prop="qdzyzsqk" style="width: 100%;">
              <el-input v-model="ruleForm.qdzyzsqk" type="textarea" autosize style="width: 100%"
                placeholder="请输入取得职业证书情况" />
            </el-form-item>
            <el-form-item label="备注：" prop="bz" style="width: 100%;">
              <el-input v-model="ruleForm.bz" type="textarea" autosize style="width: 100%" placeholder="请输入备注" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>

        <el-button type="primary" :loading="loading" @click="handleSave(ruleFormRef)">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button @click="handleClose" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
    </MOSTY.FromPage>

    <Gwxz v-model="showGwxz" @change="changeGwxz" />
    <Zwxz v-model="showZwxz" @change="changeZwxz" />
    <!-- 选择带队领导 -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :deptId="props.rowDeptId"
      :searchType="'04'" :leaderid="leaderid" @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
// 引入
import { ref, onMounted, defineProps, defineEmits, reactive, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import Gwxz from "@/views/systemConfig/user-list/components/Gwxz.vue"
import Zwxz from "@/views/systemConfig/user-list/components/Zwxz.vue"
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
import { postApi } from "@/api/tobAcco_api.js";
import { getDefaultDate, disabledDate, isString } from '@/utils/tools.js'
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
const ruleFormRef = ref();
const { proxy } = getCurrentInstance();
const getDefaultDates = ref(getDefaultDate())
const loading = ref(false); //新增保存按钮截流
// 数据
const showZwxz = ref(false);
const showGwxz = ref(false);
const zzlx = ref(null);
const chooseUserVisible = ref(false); //选择领导弹窗
const singleShow = ref(true); //单选多选
const memberList = ref([]); //成员选择的id回显
const leaderid = ref("");
//表单数据
const ruleForm = ref({});
//规则校验
const rules = reactive({
  username: [{ required: true, message: "安全人员姓名不能为空", trigger: "blur" }],
  expertise: [{ required: true, message: "请选择擅长领域", trigger: "blur" }],
  aqrylx: [{ required: true, message: "安全员类型不能为空", trigger: "blur" }],
  politicalStatus: [{ required: true, message: "请选择政治面貌", trigger: "chanage" }],
  ...rule.phoneRule({ validator: true, require: true }, "telephone"),
  dutyName: [{ required: true, message: "请选择职务", trigger: "chanage" }],
  jobTitle: [{ required: true, message: "请选择岗位", trigger: "chanage" }],
  xb: [{ trigger: "blur", required: true, message: "性别不能为空" }],
  whcd: [{ trigger: "blur", required: true, message: "文化程度不能为空" }],
  csrq: [{ trigger: "blur", required: true, message: "出生日期不能为空" }],
  highestTechnical: [{ trigger: "blur", required: true, message: "最高专业技术资格证书名称不能为空" }],
  ...rule.numberzzsRule({ validator: true, require: false, num: 90 }, "cjgznx"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 90 }, "csaqgznx"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 9999 }, "fullTimeYearly")
});
const emits = defineEmits(["changeAddVi"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: true
  },
  isUpdate: {
    type: Boolean,
    default: false
  },
  isSave: {
    type: Boolean,
    default: true
  },
  title: String,
  xqdata: Object,
  // 查询当前部门下的人员
  deptId: {
    type: String,
    default: null
  },
  dict: Array,
  /** 外面登记行的部门 */
  rowDeptId: {
    type: String,
    default: null
  },
});
onMounted(() => {
  ruleForm.value = props.xqdata
});


//打开 岗位 || 职务弹窗
const onClickSelect = (val) => {
  if (val === "zw") {
    showZwxz.value = true
  } else {
    showGwxz.value = true
  }
}
//选择岗位
const changeGwxz = (val) => {
  ruleForm.value.jobId = val.id
  ruleForm.value.jobTitle = val.name
  showGwxz.value = false
}
//选择职务
const changeZwxz = (val) => {
  ruleForm.value.dutyId = val.dutyCode
  ruleForm.value.dutyName = val.dutyName
  showZwxz.value = false
}
//点击带队领导选择按钮
function ChooesDdld(val) {
  zzlx.value = val;
  leaderid.value = "";
  if (val == "01") {
    leaderid.value = ruleForm.value.userid;
  }
  singleShow.value = true;
  chooseUserVisible.value = true;
}

const getSonValue = (value) => {
  if (zzlx.value == "01") {
    let _val = value.at(-1)
    ruleForm.value.orgId = _val.ssdwid;
    ruleForm.value.username = _val.userName;
    ruleForm.value.csrq = _val.birthday;
    ruleForm.value.userid = _val.id;
    ruleForm.value.highestFullTimeEducation = _val.whcd;
    ruleForm.value.telephone = _val.mobile;
    ruleForm.value.xb = _val.sex;
    ruleForm.value.politicalStatus = _val.politic;
    ruleForm.value.jobTitle = _val.positionName;
    ruleForm.value.jobId = _val.positionId;
    ruleForm.value.dutyName = _val.dutyName;
    ruleForm.value.dutyId = _val.dutyId;
  }
};

// 关闭
const handleClose = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits("changeAddVi", false);
    })
    .catch(() => {
      // catch error
    })

};


// 保存
const handleSave = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      if (ruleForm.value) {
        ruleForm.value.expertise = ruleForm.value.expertise ? ruleForm.value.expertise.toString() : null
        if (ruleForm.value.id) {
          postApi(ruleForm.value, '/mosty-jcgl/aqy/update').then(res => {
            ruleFormRef.value.resetFields()
            ElMessage.success("修改成功");
            emits("changeAddVi", false);
            loading.value = false;
          }).finally(() => {
            loading.value = false;
            ruleForm.value.expertise = ruleForm.value.expertise && isString(ruleForm.value.expertise) ? ruleForm.value.expertise.split(',') : ruleForm.value.expertise
          })
        } else {
          postApi(ruleForm.value, '/mosty-jcgl/aqy/add').then(res => {
            ruleFormRef.value.resetFields()
            ElMessage.success("新增成功");
            emits("changeAddVi", false);
            loading.value = false;
          }).finally(() => {
            loading.value = false;
            ruleForm.value.expertise = ruleForm.value.expertise && isString(ruleForm.value.expertise) ? ruleForm.value.expertise.split(',') : ruleForm.value.expertise
          })
        }
      }
    } else {
      ElMessage.warning("请输入必填项！！！");
    }
  });
};
</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 {
    padding: 10px 40px;
    margin-top: 10px;
    flex-wrap: wrap;
    // justify-content: space-between;
  }

  .txbj {
    display: flex;
    justify-content: space-between;
  }

  .el-form-item {
    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;
}

.el-collapse {
  border-color: var(--el-color-primary);
  height: 460px;
}

::v-deep .el-collapse-item__header {
  border-bottom-color: var(--el-color-primary);
  color: #000 !important;
}

::v-deep .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}
</style>
