<!-- @format -->

<template>
  <div class="app-container">
    <div class="content">
      <el-form
        :scroll-to-error="true"
        :scroll-into-view-options="{
          behavior: 'smooth',
          block: 'end',
          inline: 'nearest',
        }"
        ref="personFormRef"
        :model="personDataForm"
        :rules="personDataFormRules"
      >
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: self-end;
          "
        >
          <div class="subheading">个人基本信息</div>
        </div>

        <div class="avater">
          <!-- <el-descriptions
            class="avater"
            style="width: 370px"
            :column="4"
            size="large"
            border
          >
            <el-descriptions-item :span="0" style="width: 100px">
              <template #label>
                <div
                  style="height: 100px; line-height: 100px"
                  class="cell-item"
                >
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  头像
                </div>
                <span class="required">*</span>
              </template>

            </el-descriptions-item>
          </el-descriptions> -->
        </div>

        <div style="display: flex">
          <el-descriptions
            width="200px"
            class="margin-top"
            style="margin-bottom: 30px; margin-top: 0px; width: 90%"
            :column="3"
            size="large"
            border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">中文名</div>
                <span class="required">*</span>
              </template>
              <el-form-item prop="chineseName">
                <el-input
                  placeholder="请输入中文名"
                  v-model="personDataForm.chineseName"
                ></el-input>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">英文名</div>
              </template>
              <el-form-item>
                <el-input
                  placeholder="请输入英文名"
                  v-model="personDataForm.englishName"
                ></el-input>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">性别</div>
                <span class="required">*</span>
              </template>
              <el-form-item prop="gender">
                <el-select
                  style="width: 100%"
                  placeholder="请选择性别"
                  v-model="personDataForm.gender"
                >
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">政治面貌</div>
                <span class="required">*</span>
              </template>
              <el-form-item>
                <el-select
                  style="width: 100%"
                  v-model="personDataForm.politicsStatus"
                  placeholder="请选择您的政治面貌"
                >
                  <el-option
                    v-for="item of politics_status"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">民族</div>
                <span class="required">*</span>
              </template>
              <el-form-item>
                <el-select
                  style="width: 100%"
                  v-model="personDataForm.minZu"
                  placeholder="请选择所属民族"
                >
                  <el-option
                    v-for="item of mz_data"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">出生日期</div>
                <span class="required">*</span>
              </template>
              <el-form-item prop="chuShengDate">
                <el-date-picker
                  style="width: 100%"
                  v-model="personDataForm.chuShengDate"
                  type="date"
                  placeholder="请选择出生日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">国籍/籍贯</div>
              </template>
              <el-form-item>
                <el-input
                  v-model="personDataForm.jiGuan"
                  placeholder="请输入籍贯"
                ></el-input>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">本市居住地</div>
                <span class="required">*</span>
              </template>
              <el-form-item prop="juZhuDi">
                <div style="display: flex; align-items: center; width: 100%">
                  <div style="width: 273px">
                    <el-select
                      style="width: 100%"
                      v-model="personDataForm.juZhuDiQu"
                      placeholder="请选择区县"
                    >
                      <el-option
                        v-for="item in rclk_dzqx"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>

                  <div style="margin-left: 10px; width: 350px">
                    <el-input
                      v-model="personDataForm.juZhuDi"
                      placeholder="请输入本市居住地"
                    ></el-input>
                  </div>
                </div>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
          <el-form-item style="margin-left: 20px" prop="photoPath">
            <el-upload
              :class="{ isUpload: fileList.length }"
              :action="uploadFileUrl"
              v-model:file-list="fileList"
              list-type="picture-card"
              :headers="headers"
              :on-success="handleUploadSuccess"
              :on-remove="handleRemove"
            >
              <el-icon style="font-size: 50px"><Avatar /></el-icon>
            </el-upload>
          </el-form-item>
        </div>

        <el-descriptions
          title="人才类别，证件类别"
          class="margin-top"
          :column="3"
          size="large"
          border
          direction="horizontal"
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">人才类别</div>
              <span class="required">*</span>
            </template>
            <el-form-item prop="renCaiType">
              <el-select
                style="width: 100%"
                @change="handleChangeCardType"
                v-model="personDataForm.renCaiType"
                placeholder="请选择人才类别"
              >
                <el-option
                  v-for="item of listByCardType"
                  :key="item.id"
                  :value="String(item.id)"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">人才称号</div>
              <span class="required">*</span>
            </template>
            <el-form-item>
              <el-select
                style="width: 100%"
                v-model="personDataForm.renCaiChengHao"
                placeholder="请选择人才称号"
              >
                <el-option
                  v-for="item of talentTitle"
                  :key="item.id"
                  :value="String(item.id)"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">取得日期</div>
              <span class="required">*</span>
            </template>
            <el-form-item>
              <el-date-picker
                v-model="personDataForm.getDate"
                style="width: 100%"
                type="date"
                placeholder="请选择取得日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">证件类别</div>
              <span class="required">*</span>
            </template>
            <el-form-item prop="zhengJianType">
              <el-select
                style="width: 100%"
                v-model="personDataForm.zhengJianType"
                placeholder="请选择证件类别"
              >
                <el-option
                  v-for="item of zheng_jian_type"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">证件号码</div>
              <span class="required">*</span>
            </template>
            <el-form-item prop="idNum">
              <el-input
                style="width: 288px"
                v-model="personDataForm.idNum"
                placeholder="请输入证件号码"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title="毕业院校及学历专业"
          class="margin-top"
          :column="3"
          size="large"
          border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">学历学位</div>
              <span class="required">*</span>
            </template>
            <el-form-item>
              <el-select
                style="width: 100%"
                v-model="personDataForm.xueLi"
                placeholder="请输入学历学位"
              >
                <el-option
                  v-for="item of xue_li"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">全日制教育</div>
              <span class="required">*</span>
            </template>
            <el-form-item prop="school">
              <el-input
                v-model="personDataForm.school"
                placeholder="请输入教育经历"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">全日制教育专业</div>
              <span class="required">*</span>
            </template>
            <div style="display: flex">
              <el-form-item prop="specialty">
                <el-input
                  v-model="personDataForm.specialty"
                  placeholder="专业"
                ></el-input>
              </el-form-item>
              <el-form-item style="margin-left: 10px">
                <el-checkbox
                  :true-value="true"
                  :false-value="false"
                  v-model="personDataForm.isHaiwai"
                  label="是否毕业"
                >
                  是否海外
                </el-checkbox>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">毕业证书编号</div>
              <span class="required">*</span>
            </template>
            <el-form-item>
              <el-input
                v-model="personDataForm.zhengShuNum"
                placeholder="请输入毕业证书编号"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">在职教育</div>
            </template>
            <el-form-item>
              <el-input
                v-model="personDataForm.zaiZhiJiaoYu"
                placeholder="学校"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">在职教育专业</div>
            </template>
            <div style="display: flex">
              <el-form-item>
                <el-input
                  style="width: 288px"
                  v-model="personDataForm.zaiZhiZhuanYe"
                  placeholder="专业"
                ></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions
          title="联系方式"
          class="margin-top"
          :column="3"
          size="large"
          border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">固定电话</div>
            </template>
            <el-form-item>
              <el-input
                v-model="personDataForm.phoneNum"
                placeholder="请输入固定电话号码"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">手机号码</div>
              <span class="required">*</span>
            </template>
            <el-form-item prop="shouJiNum">
              <el-input
                v-model.number="personDataForm.shouJiNum"
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">电子邮箱</div>
            </template>
            <el-form-item>
              <el-input
                v-model="personDataForm.eMail"
                placeholder="请输入电子邮箱"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions
          title="引进人才"
          class="margin-top"
          :column="3"
          size="large"
          border
          direction="horizontal"
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">原工作单位职务、职称</div>
            </template>
            <el-form-item>
              <el-input
                v-model="personDataForm.yjrcYuanDanWeiZhiWu"
                placeholder="请输入原工作单位职务、职称"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">现工作单位职务</div>
            </template>
            <el-form-item>
              <el-input
                v-model="personDataForm.yjrcXianDanWeiZhiWu"
                placeholder="请输入现工作单位职务"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">引进类型</div>
              <span class="required">*</span>
            </template>
            <el-form-item prop="yjrcType">
              <el-select
                style="width: 100%"
                @change="handelChangeyjrcTypeRules"
                placeholder="请选择引进人才类型"
                v-model="personDataForm.yjrcType"
              >
                <el-option
                  v-for="item of yjrc_type"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item
            v-if="
              personDataForm.yjrcType != 'gxyj' &&
              personDataForm.yjrcType == 'rxyj'
            "
          >
            <template #label>
              <div class="cell-item">签约期限</div>
              <span v-if="personDataForm.yjrcType == 'rxyj'" class="required"
                >*{{
              }}</span>
            </template>
            <el-form-item prop="yjrcQianyueDate" :rules="qyRules">
              <el-select
                style="width: 288px"
                v-model="personDataForm.yjrcQianyueDate"
                placeholder="请输入签约期限"
              >
                <el-option
                  v-for="item of yjrc_qianyue_date"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item
            :span="1"
            v-if="
              personDataForm.yjrcType != 'gxyj' &&
              personDataForm.yjrcType == 'zzpy'
            "
          >
            <template #label>
              <div class="cell-item">单位职务职称</div>
              <span v-if="personDataForm.yjrcType == 'zzpy'" class="required"
                >*</span
              >
            </template>
            <el-form-item prop="zzpyZhiWu" :rules="zwRules">
              <el-input
                style="width: 288px"
                placeholder="请输入单位职务职称"
                v-model="personDataForm.zzpyZhiWu"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions
          title="用人单位情况"
          class="margin-top"
          :column="3"
          size="large"
          border
          direction="horizontal"
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">全称</div>
              <span class="required">*</span>
            </template>
            <el-form-item prop="yrdwName">
              <el-input
                v-model="personDataForm.yrdwName"
                placeholder="请输入用人单位全称"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">单位性质</div>
              <span class="required">*</span>
            </template>
            <el-form-item prop="yrdwXingZhi">
              <el-select
                style="width: 100%"
                v-model="personDataForm.yrdwXingZhi"
                placeholder="请选择单位性质"
              >
                <el-option
                  v-for="item of rclk_dwxz"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">所属行业</div>
              <span class="required">*</span>
            </template>
            <el-form-item>
              <el-select
                style="width: 100%"
                v-model="personDataForm.yrdwIndustryInvolved"
                placeholder="请输入所属行业"
              >
                <el-option
                  v-for="item of yrdw_industry_involved"
                  :key="item.id"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">法人代表</div>
              <span class="required">*</span>
            </template>
            <el-form-item>
              <el-input
                v-model="personDataForm.yrdwFaRen"
                placeholder="请输入单位法人代表"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">联系人</div>
              <span class="required">*</span>
            </template>
            <el-form-item>
              <el-input
                v-model="personDataForm.yrdwLianxiRen"
                placeholder="请输入单位联系人"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="0">
            <template #label>
              <div class="cell-item">联系电话</div>
              <span class="required">*</span>
            </template>
            <el-form-item>
              <el-input
                v-model="personDataForm.yrdwPhone"
                placeholder="请输入单位联系电话"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">地址</div>
              <span class="required">*</span>
            </template>
            <el-form-item prop="yrdwAddress">
              <div style="display: flex; align-items: center; width: 100%">
                <el-select
                  v-model="personDataForm.yrdwAddressArea"
                  placeholder="请选择区县"
                  style="width: 288px"
                >
                  <el-option
                    v-for="item in rclk_dzqx"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>

                <el-input
                  style="width: 70%; margin-left: 20px"
                  v-model="personDataForm.yrdwAddress"
                  placeholder="请输入用人单位地址"
                ></el-input>
              </div>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>

        <el-form-item label-width="140px" label="国内外学习工作经历">
          <editor v-model="personDataForm.jingLi" :min-height="192" />
        </el-form-item>
        <el-form-item
          style="margin-top: 20px"
          label-width="140px"
          label="成果和奖励情况"
        >
          <editor
            v-model="personDataForm.huojiangCondition"
            :min-height="192"
          />
        </el-form-item>
      </el-form>
      <div></div>
    </div>

    <div v-if="isTableVisilite">
      <el-table v-loading="materialLoading" :data="materialTable" border>
        <el-table-column label="序号" align="center" width="55" type="index" />
        <el-table-column label="材料名称" align="center" prop="materialsName" />
        <el-table-column label="是否必传" align="center" prop="isMust">
          <template #default="scope">
            <el-tag :type="scope.row.isMust == 0 ? 'primary' : 'danger'">
              <dict-tag :options="is_must" :value="scope.row.isMust" />
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="要求"
          align="center"
          prop="remark"
        ></el-table-column>
        <el-table-column label="材料列表" align="center" width="500">
          <template #default="scope">
            <ViewFileUpload
              :isDisabled="isDisabled"
              v-model="scope.row.fileNames"
            ></ViewFileUpload>
          </template>
        </el-table-column>

        <el-table-column v-if="!isDisabled" label="操作" align="center">
          <template #default="scope">
            <ViewFileUpload :isView="false" v-model="scope.row.fileNames">
              <el-button type="text" :icon="Position"> 上传 </el-button>
            </ViewFileUpload>
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex; justify-content: center" v-if="!isDisabled">
        <el-button
          style="width: 100px; height: 40px; font-size: 16px; margin-top: 20px"
          type="primary"
          @click="onSubmit"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { Position } from "@element-plus/icons-vue";
import { saveMaterials, getHistoryList } from "@/api/materialTable/index";
import { listConifg } from "@/api/materialTable/index";
import { getToken } from "@/utils/auth";
import { computed, getCurrentInstance, watch, toValue } from "vue";
import mz_data from "@/mzData";
import {
  getlistByCardType,
  getListByParentId,
  addCG,
  getMaterialsData,
  getMaterialformData,
} from "@/api/matterClass";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const baseImgUrl = import.meta.env.VITE_APP_IMAGURL;

//个人基本信息逻辑
const {
  yjrc_type,
  politics_status,
  zheng_jian_type,
  xue_li,
  yrdw_industry_involved,
  yjrc_qianyue_date,
  rclk_dwxz,
  rclk_dzqx,
} = proxy.useDict(
  "yjrc_type",
  "politics_status",
  "zheng_jian_type",
  "xue_li",
  "yrdw_industry_involved",
  "yjrc_qianyue_date",
  "rclk_dwxz",
  "rclk_dzqx"
);
const personFormLoading = ref(false);
const personFormRef = ref(null);
const listByCardType = ref([]);
const talentTitle = ref([]);
const personDataForm = reactive({
  photoPath: null, //头像
  chineseName: null, //中文名称
  englishName: null, //英文名称
  politicsStatus: null, //政治面貌
  gender: null, //性别
  minZu: null, //民族
  chuShengDate: null, //出生日期
  jiGuan: null, //籍贯
  juZhuDi: null, //本市居住地
  xueLi: null, //学历学位
  school: null, //学校
  zaiZhiJiaoYu: null, //在职教育
  renCaiType: null,
  renCaiChengHao: null, //人才称号
  zhengJianType: null, //证件类型
  idNum: null, //证件号
  phoneNum: null, //固定电话
  shouJiNum: null, //手机号码
  eMail: null, //电子邮箱
  yjrcYuanDanWeiZhiWu: null, //原工作单位职务、职称
  yjrcXianDanWeiZhiWu: null, //现工作单位职务、职称
  yjrcType: null, //引进人才类型
  yjrcQianyueDate: null, //签约期限
  yrdwName: null, //用人单位名称
  yrdwAddress: null, //用人单位地址
  yrdwXingZhi: null, //yrdwXingZhi
  yrdwIndustryInvolved: null, //用人单位所属行业
  yrdwFaRen: null, //用人单位法人
  yrdwLianxiRen: null, //用人单位联系人
  yrdwPhone: null, //用人单位联系电话
  jingLi: null, //国外学习工作经历
  huojiangCondition: null, //工作奖励和成果
  zzpyZhiWu: null, //单位职务职称
  getDate: null, //取得日期
  zhengShuNum: null, //毕业证书编号
  juZhuDiQu: null,
  specialty: null,
  isHaiwai: null,
  zaiZhiZhuanYe: null,
  yrdwAddressArea: null,
});

const props = defineProps({
  materialCalssId: {
    type: String,
    required: true,
  },
  isDisabled: {},
  isTableVisilite: {
    default: true,
  },
  isReviewed: {},
});

const emits = defineEmits("update:materialCalssId", "handleSubmit");

const personDataFormRules = {
  zhengJianType: [
    {
      required: true,
      message: "证件类别不能为空",
      trigger: "blur",
    },
  ],
  renCaiChengHao: [
    {
      required: true,
      message: "人才称号不能为空",
      trigger: "blur",
    },
  ],
  renCaiType: [
    {
      required: true,
      message: "人才类别不能为空",
      trigger: "blur",
    },
  ],
  photoPath: [
    {
      required: true,
      message: "头像不能为空",
      trigger: "blur",
    },
  ],
  xueLi: [
    {
      required: true,
      message: "学历学位不能为空",
      trigger: "blur",
    },
  ],
  politicsStatus: [
    {
      required: true,
      message: "政治面貌不能为空",
      trigger: "blur",
    },
  ],
  minZu: [
    {
      required: true,
      message: "民族不能为空",
      trigger: "blur",
    },
  ],
  renCaiChengHao: [
    {
      required: true,
      message: "人才称号不能为空",
      trigger: "blur",
    },
  ],
  chineseName: [
    {
      required: true,
      message: "中文名不能为空",
      trigger: "blur",
    },
  ],
  gender: [
    {
      required: true,
      message: "性别不能为空",
      trigger: "blur",
    },
  ],
  chuShengDate: [
    {
      required: true,
      message: "出生日期不能为空",
      trigger: "blur",
    },
  ],
  juZhuDi: [
    {
      required: true,
      message: "本市居住地不能为空",
      trigger: "blur",
    },
  ],
  idNum: [
    {
      required: true,
      message: "证件号码不能为空",
      trigger: "blur",
    },
    {
      pattern: /^\d{17}(\d|X)$/,
      message: "请输入正确的身份证号",
      trigger: "blur",
    },
  ],
  shouJiNum: [
    {
      required: true,
      message: "手机号码不能为空",
      trigger: "blur",
    },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  yjrcType: [
    {
      required: true,
      message: "人才类型不能为空",
      trigger: "blur",
    },
  ],
  yrdwName: [
    {
      required: true,
      message: "全称不能为空",
      trigger: "blur",
    },
  ],
  yrdwAddress: [
    {
      required: true,
      message: "地址不能为空",
      trigger: "blur",
    },
  ],
  eMail: [
    {
      pattern: /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/,
      message: "请输入正确的邮箱",
      trigger: "blur",
    },
  ],
  yrdwIndustryInvolved: [
    {
      required: true,
      message: "所属行业不能为空",
      trigger: "blur",
    },
  ],
  yrdwFaRen: [
    {
      required: true,
      message: "单位法人代表不能为空",
      trigger: "blur",
    },
  ],
  yrdwLianxiRen: [
    {
      required: true,
      message: "单位联系人不能为空",
      trigger: "blur",
    },
  ],
  yrdwPhone: [
    {
      required: true,
      message: "单位联系电话不能为空",
      trigger: "blur",
    },
  ],
};
const fileList = ref([]);
const handleUploadSuccess = (file) => {
  personDataForm.photoPath = file.fileNames;
};
const handleRemove = () => {
  personDataForm.photoPath = null;
};
const headers = ref({ Authorization: "Bearer " + getToken() });
const uploadFileUrl = ref(
  import.meta.env.VITE_APP_BASE_API + "/application/form/uploads"
); // 上传文件服务器地址

//签约期限的动态校验
const qyRules = computed(() =>
  personDataForm.yjrcType == "rxyj"
    ? [
        {
          required: true,
          message: "签约类型不能为空",
          trigger: "change",
        },
      ]
    : []
);

//职务职称的动态校验
const zwRules = computed(() =>
  personDataForm.yjrcType == "zzpy"
    ? [
        {
          required: true,
          message: "单位职务职称不能为空",
          trigger: "blur",
        },
      ]
    : []
);

//获取人才类别
const handleGetlistByCardType = () => {
  getlistByCardType({
    cardType: "A",
    matterType: "F",
  }).then((res) => {
    listByCardType.value = res.data;
  });
};
//查询类别称号
const handleChangeCardType = (id) => {
  personDataForm.renCaiChengHao = null;
};

//提交信息
const onSubmit = () => {
  personFormRef.value.validate((vaild) => {
    if (vaild) {
      const noMust = toValue(materialTable)
        .filter((item) => {
          return item.isMust == "1" && !item.fileNames;
        })
        .map((item) => item.materialsName);
      if (noMust.length) {
        ElMessage({
          type: "error",
          message: `${noMust.join(",")}是必要材料`,
        });
        return;
      }

      personFormLoading.value = true;
      addCG(
        {
          ...personDataForm,
          cardType: "A",
          shenqingState: "cg",
          id: props.materialCalssId ?? null,
        },
        route.query.methodType
      )
        .then((res) => {
          const materialData = toValue(materialTable).map((item) => {
            return {
              rclkTalentListId: props.materialCalssId || res.data.id,
              materialsConifgId: item.id,
              fileName: item.fileNames,
            };
          });

          saveMaterials(
            materialData,
            props.materialCalssId || res.data.id
          ).then(() => {
            ElMessage({
              type: "success",
              message: "提交成功",
            });
            router.replace({
              path: "/talentManagement/categoryA",
            });
          });
        })
        .finally((res) => {
          personFormLoading.value = false;
        });
    }
  });
};

//如果id有的话就需要回显提交的材料
if (props.materialCalssId) {
  if (props.isReviewed) {
    getMaterialformData(props.materialCalssId).then(({ data }) => {
      Object.keys(personDataForm).forEach((item) => {
        personDataForm[item] = data[item];
      });
    });
  } else {
    getMaterialsData(props.materialCalssId).then(({ data }) => {
      Object.keys(personDataForm).forEach((item) => {
        personDataForm[item] = data[item];
      });
    });
  }
}

//监听头像地址有变化更新图像列表回显
watch(
  () => personDataForm.photoPath,

  (newVal) => {
    fileList.value = newVal
      ? [
          {
            url: baseImgUrl + newVal,
            name: "newVal",
          },
        ]
      : [];
  }
);

//监听人才类别
watch(
  () => personDataForm.renCaiType,
  (newValue) => {
    getListByParentId({ parentId: newValue }).then((res) => {
      talentTitle.value = res.data;
    });
  }
);

watch(
  () => props.materialCalssId,
  (newValue) => {
    if (props.materialCalssId) {
      if (props.isReviewed) {
        getMaterialformData(props.materialCalssId).then(({ data }) => {
          Object.keys(personDataForm).forEach((item) => {
            personDataForm[item] = data[item];
          });
        });
      } else {
        getMaterialsData(props.materialCalssId).then(({ data }) => {
          Object.keys(personDataForm).forEach((item) => {
            personDataForm[item] = data[item];
          });
        });
      }
    }
  }
);

handleGetlistByCardType();

//材料提交内容逻辑
const { card_type, materials_shape, is_must } = proxy.useDict(
  "card_type",
  "materials_shape",
  "is_must"
);
const materialLoading = ref(false);
const materialTable = ref([]);
const materialDia = ref(false);
const materialTitle = ref("");
const activeMaterial = ref("");

//上传材料
const handleUpdateMaterial = (row) => {
  materialDia.value = true;
  materialTitle.value = row.materialsName;
  activeMaterial.value = row;
};

//获取列表
const getList = () => {
  materialLoading.value = true;
  listConifg({
    // cardType: route.query.type,
    cardType: 'A',
  })
    .then((res) => {
      materialTable.value = res.rows;
    })
    .finally((res) => {
      materialLoading.value = false;
    });
};

//获取历史材料列表
const getHistory = () => {
  materialLoading.value = true;
  let rclkTalentListId = route.query.materialCalssId || props.materialCalssId;
  getHistoryList({
    rclkTalentListId: route.query.materialCalssId || props.materialCalssId,
  })
    .then((res) => {
      materialTable.value = res.data;
    })
    .finally((res) => {
      materialLoading.value = false;
    });
};

if (route.query.materialCalssId != undefined || props.isDisabled) {
  getHistory();
} else {
  getList();
}
</script>
<style lang="scss" scoped>
.subheading {
  color: #303133;
  font-size: 16px;
  font-weight: 700;
  margin: 0px 0 15px 0;
}
::v-deep .el-descriptions__title,
.subheading {
  position: relative;
}
::v-deep .avater .el-descriptions__label {
  width: 135px;
}
::v-deep .el-descriptions__title::before,
.subheading::after {
  content: " ";
  display: inline-block;
  position: absolute;
  height: 100%;
  left: -9px;
  top: 50%;
  transform: translateY(-58%);
  background: #0e62fe;
  height: 16px;
  width: 3px;
}
.required {
  color: red;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15%;
}
::v-deep .el-descriptions__label {
  position: relative;
}
.content {
  width: 1500px;
  margin: 20px auto;
}
::v-deep .isUpload .el-upload--picture-card {
  display: none !important;
}
::v-deep .el-form-item {
  margin-bottom: 0;
}
.margin-top {
  margin: 30px 0;
}
::v-deep .el-descriptions__label {
  width: 130px;
}
::v-deep .el-descriptions__content {
  width: 230px;
}
.avater-bg {
  width: 208px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  * {
    cursor: pointer;
  }
}
::v-deep .avater .el-descriptions__cell {
  width: 133px;
}
</style>
