<template>
  <BaseDialog
    width="800px"
    :isShow.sync="isEditCertDialog"
    :title="dialogTitle"
    @close="close"
    @submit="submitForm"
    :appendToBody="true"
    :confirmStatus="false"
    style="height: 800px; overflow-y: auto"
  >
    <div style="overflow-y: auto; max-height: 550px;">
      <div class="title" style="border: 0; padding: 0px; margin: 0">
        基本信息
      </div>
      <div class="content">
        <div class="left-box">
          <el-form
            label-position="right"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm1"
            label-width="100px"
          >
            <el-form-item label="姓名" prop="staffName">
              <el-input
                v-model="ruleForm.staffName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input
                v-model="ruleForm.idCard"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="telephone">
              <el-input
                v-model="ruleForm.telephone"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="ruleForm.email"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="ruleForm.sex" placeholder="请选择">
                <el-option
                  v-for="item in [
                    { value: 1, label: '男' },
                    { value: 2, label: '女' },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            width: 1px;
            height: 200px;
            background: #dddddd;
            align-self: center;
          "
        ></div>
        <div class="right-box">
          <el-form
            label-position="right"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                v-model="ruleForm.birthday"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="民族" prop="nation">
              <el-input
                v-model="ruleForm.nation"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="政治面貌" prop="politicsFace">
              <el-input
                v-model="ruleForm.politicsFace"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="户口所在地" prop="hkLocation">
              <el-input
                v-model="ruleForm.hkLocation"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="居住地址" prop="homeAddress">
              <el-input
                v-model="ruleForm.homeAddress"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="title">工作信息</div>
      <div class="content">
        <div class="left-box">
          <el-form
            label-position="right"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm2"
            label-width="100px"
          >
            <el-form-item label="员工编号" prop="staffNumber">
              <el-input
                v-model="ruleForm.staffNumber"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属企业" prop="companyId">
              <el-select v-model="ruleForm.companyId" placeholder="请选择">
                <el-option
                  v-for="item in getCompanyList"
                  :key="item.companyId"
                  :label="item.companyName"
                  :value="item.companyId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所在部门" prop="departmentId">
              <el-select v-model="ruleForm.departmentId" placeholder="请选择">
                <el-option
                  v-for="item in companyDepartmentList"
                  :key="item.departmentId"
                  :label="item.departmentName"
                  :value="item.departmentId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="岗位名称" prop="position">
              <el-input
                v-model="ruleForm.position"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="岗位状态" prop="positionStatus">
              <el-select v-model="ruleForm.positionStatus" placeholder="请选择">
                <el-option
                  v-for="item in [
                    { value: 1, label: '全职' },
                    { value: 2, label: '离职' },
                    { value: 3, label: '编外' },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            width: 1px;
            height: 200px;
            background: #dddddd;
            align-self: center;
          "
        ></div>
        <div class="right-box">
          <el-form
            label-position="right"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <el-form-item label="招聘渠道" prop="recruitmentChannel">
              <el-input
                v-model="ruleForm.recruitmentChannel"
                placeholder="请输入"
                style="width: 120px"
                :disabled="ruleForm.recommendFlag == 1"
              ></el-input>
              <el-checkbox
                style="margin-left: 10px"
                v-model="ruleForm.recommendFlag"
                :true-label="1"
                :false-label="0"
              >
                内荐
              </el-checkbox>
            </el-form-item>
            <el-form-item label="参与工作时间" prop="workDate">
              <el-date-picker
                v-model="ruleForm.workDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="入职时间" prop="entryDate">
              <el-date-picker
                v-model="ruleForm.entryDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="离职时间" prop="leaveDate">
              <el-date-picker
                v-model="ruleForm.leaveDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="title">身份证</div>
      <div class="content">
        <div class="left-box">
          <el-form
            label-position="right"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <el-form-item label="正面上传" props="frontCard">
              <div
                style="
                  width: 230px;
                  height: 130px;
                  border: 2px dashed #999;
                  border-radius: 15px;
                  line-height: 130px;
                  text-align: center;
                "
                v-if="!ruleForm.frontCard"
              >
                <label
                  for="businessImg"
                  @click="uploadImg(ruleForm, 'frontCard')"
                >
                  <i class="el-icon-circle-plus-outline iconStsz"></i>
                </label>
              </div>

              <div v-else class="img1">
                <el-image
                  style="width: 230px; height: 130px; object-fit: contain"
                  :src="$methodsTools.splitImgHost(ruleForm.frontCard)"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(ruleForm.frontCard),
                  ]"
                >
                </el-image>
                <div class="sign1" @click="clearImgs(ruleForm, 'frontCard')">
                  X
                </div>
              </div>
            </el-form-item>
            <el-form-item label="反面上传" props="oppositeCard">
              <div
                style="
                  width: 230px;
                  height: 130px;
                  border: 2px dashed #999;
                  border-radius: 15px;
                  line-height: 130px;
                  text-align: center;
                "
                v-if="!ruleForm.oppositeCard"
              >
                <label
                  for="oppositeCard"
                  @click="uploadImg(ruleForm, 'oppositeCard')"
                >
                  <i class="el-icon-circle-plus-outline iconStsz"></i>
                </label>
              </div>

              <div v-else class="img1">
                <el-image
                  style="width: 230px; height: 130px; object-fit: contain"
                  :src="$methodsTools.splitImgHost(ruleForm.oppositeCard)"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(ruleForm.oppositeCard),
                  ]"
                >
                </el-image>
                <div class="sign1" @click="clearImgs(ruleForm, 'oppositeCard')">
                  X
                </div>
              </div>
              <div style="color: #999">（支持格式：jpg、jpeg、png、gif）</div>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            width: 1px;
            height: 200px;
            background: #dddddd;
            align-self: center;
          "
        ></div>
        <div class="right-box">
          <el-form
            label-position="right"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <el-form-item label="签发机关" prop="issuingOrganization">
              <el-input
                type="text"
                v-model="ruleForm.issuingOrganization"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="开始期限" prop="startDate">
              <el-date-picker
                v-model="ruleForm.startDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束期限" prop="endDate">
              <el-date-picker
                style="width: 155px"
                v-model="ruleForm.endDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                :disabled="ruleForm.longFlag == 1"
              >
              </el-date-picker>
              <el-checkbox
                style="margin-left: 10px"
                v-model="ruleForm.longFlag"
                :true-label="1"
                :false-label="0"
              >
                长期
              </el-checkbox>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="title">教育背景</div>
      <div class="table">
        <el-table
          :data="staffEduBgList"
          style="width: 100%"
          fit
          :header-cell-style="{
            color: '#333',
            fontSize: '14px',
            'text-align': 'center',
            border: '0',
          }"
          :cell-style="{
            'text-align': 'center',
            border: '0',
          }"
        >
          <el-table-column width="220" prop="startDate" label="开始日期">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.startDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                style="width: 95%"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column width="220" prop="endDate" label="结束日期">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.endDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                style="width: 95%"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            min-width="150px"
            prop="graduationSchool"
            label="毕业学校"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.graduationSchool"
                placeholder="请输入"
              />
            </template>
          </el-table-column>
          <el-table-column min-width="150px" prop="major" label="专业">
            <template slot-scope="scope">
              <el-input v-model="scope.row.major" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column
            min-width="150px"
            prop="learningType"
            label="学习类型"
          >
            <template slot-scope="scope">
              <el-select v-model="scope.row.learningType" placeholder="请选择">
                <el-option
                  v-for="item in [
                    { value: 1, label: '全日制' },
                    { value: 2, label: '非全日制' },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column min-width="150px" prop="degree" label="学历/学位">
            <template slot-scope="scope">
              <el-select v-model="scope.row.degree" placeholder="请选择">
                <el-option
                  v-for="item in degreeTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            min-width="150px"
            prop="graduationCertificate"
            label="毕业证书"
          >
            <template slot-scope="scope">
              <div
                style="text-align: center"
                v-if="!scope.row.graduationCertificate"
              >
                <label for="graduationCertificate">
                  <div
                    class="upload"
                    @click="uploadImg(scope.row, 'graduationCertificate')"
                  >
                    上传
                  </div>
                </label>
              </div>
              <div v-else class="img">
                <el-image
                  style="width: 80px; height: 45px; object-fit: contain"
                  :src="
                    $methodsTools.splitImgHost(scope.row.graduationCertificate)
                  "
                  :preview-src-list="[
                    $methodsTools.splitImgHost(scope.row.graduationCertificate),
                  ]"
                >
                </el-image>
                <div
                  class="sign"
                  @click="clearImgs(scope.row, 'graduationCertificate')"
                >
                  X
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="150px" prop="validate" label="学信网验证">
            <template slot="header">
              <span> 学信网验证 </span>
              <el-popover placement="bottom-end" width="245" trigger="hover">
                <span style="font-size: 12px">
                  “毕业证书”与“学信网验证”上传支持格式：jpg、jpeg、png、gif、pdf。
                </span>
                <i
                  slot="reference"
                  class="el-icon-warning"
                  style="color: #aaaaaa"
                ></i>
              </el-popover>
            </template>
            <template slot-scope="scope">
              <div style="text-align: center" v-if="!scope.row.validate">
                <label for="validate">
                  <div class="upload" @click="uploadImg(scope.row, 'validate')">
                    上传
                  </div>
                </label>
              </div>
              <div v-else class="img">
                <el-image
                  style="width: 80px; height: 45px; object-fit: contain"
                  :src="$methodsTools.splitImgHost(scope.row.validate)"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(scope.row.validate),
                  ]"
                >
                </el-image>
                <div class="sign" @click="clearImgs(scope.row, 'validate')">
                  X
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="btn" width="80px">
            <template slot-scope="scope">
              <i
                class="el-icon-remove"
                style="cursor: pointer"
                @click="handleRow(scope.$index, '教育背景del')"
              ></i>
            </template>
          </el-table-column>
        </el-table>
        <div
          style="font-size: 14px; cursor: pointer; margin: 10px"
          @click="handleRow(null, '教育背景add')"
        >
          <i
            class="el-icon-circle-plus"
            style="color: #1890ff; margin-right: 2px"
          ></i>
          <span>新增</span>
        </div>
      </div>

      <div class="title">紧急联系人</div>
      <div class="table">
        <el-table
          :data="staffEmergencyContactList"
          style="width: 100%"
          fit
          :header-cell-style="{
            color: '#333',
            fontSize: '14px',
            'text-align': 'center',
            border: '0',
          }"
          :cell-style="{
            'text-align': 'center',
            border: '0',
          }"
        >
          <el-table-column min-width="150px" prop="relation" label="关系">
            <template slot-scope="scope">
              <el-input v-model="scope.row.relation" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column min-width="150px" prop="contactName" label="姓名">
            <template slot-scope="scope">
              <el-input v-model="scope.row.contactName" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column
            min-width="150px"
            prop="contactTelephone"
            label="联系电话"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.contactTelephone"
                placeholder="请输入"
              />
            </template>
          </el-table-column>
          <el-table-column prop="btn" width="80px">
            <template slot-scope="scope">
              <i
                class="el-icon-remove"
                style="cursor: pointer"
                @click="handleRow(scope.$index, '紧急联系人del')"
              ></i>
            </template>
          </el-table-column>
        </el-table>
        <div
          style="font-size: 14px; cursor: pointer; margin: 10px"
          @click="handleRow(null, '紧急联系人add')"
        >
          <i
            class="el-icon-circle-plus"
            style="color: #1890ff; margin-right: 2px"
          ></i>
          <span>新增</span>
        </div>
      </div>

      <div class="title">银行信息</div>
      <div class="table">
        <el-table
          :data="staffBankInfoList"
          style="width: 100%"
          fit
          :header-cell-style="{
            color: '#333',
            fontSize: '14px',
            'text-align': 'center',
            border: '0',
          }"
          :cell-style="{
            'text-align': 'center',
            border: '0',
          }"
        >
          <el-table-column min-width="150px" prop="openName" label="开户名">
            <template slot-scope="scope">
              <el-input v-model="scope.row.openName" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column min-width="150px" prop="openBank" label="开户行">
            <template slot-scope="scope">
              <el-input v-model="scope.row.openBank" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column min-width="150px" prop="bankNumber" label="卡号">
            <template slot-scope="scope">
              <el-input v-model="scope.row.bankNumber" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="btn" width="80px">
            <template slot-scope="scope">
              <i
                class="el-icon-remove"
                style="cursor: pointer"
                @click="handleRow(scope.$index, '银行信息del')"
              ></i>
            </template>
          </el-table-column>
        </el-table>
        <div
          style="font-size: 14px; cursor: pointer; margin: 10px"
          @click="handleRow(null, '银行信息add')"
        >
          <i
            class="el-icon-circle-plus"
            style="color: #1890ff; margin-right: 2px"
          ></i>
          <span>新增</span>
        </div>
      </div>

      <div class="title">合同档案</div>
      <div class="table">
        <el-table
          :data="staffContractArchivesList"
          style="width: 100%"
          fit
          :header-cell-style="{
            color: '#333',
            fontSize: '14px',
            'text-align': 'center',
            border: '0',
          }"
          :cell-style="{
            'text-align': 'center',
            border: '0',
          }"
        >
          <el-table-column min-width="150px" prop="archivesNumber" label="编号">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.archivesNumber"
                placeholder="请输入"
              />
            </template>
          </el-table-column>
          <el-table-column min-width="150px" prop="archivesName" label="名称">
            <template slot-scope="scope">
              <el-input v-model="scope.row.archivesName" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column min-width="150px" prop="archivesType" label="类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.archivesType" placeholder="请选择">
                <el-option
                  v-for="item in [
                    { value: 1, label: '劳动合同' },
                    { value: 2, label: '编外合同' },
                    { value: 3, label: '其他合同' },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="signingDate" label="签署时间" width="220">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.signingDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                style="width: 95%"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column prop="effectiveDate" label="生效时间" width="220">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.effectiveDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                style="width: 95%"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column width="220" prop="endDate" label="终止时间">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.endDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                style="width: 95%"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            min-width="150px"
            prop="electronicArchives"
            label="学信网验证"
          >
            <template slot="header">
              <span> 电子档案 </span>
              <el-popover placement="bottom-end" width="245" trigger="hover">
                <span style="font-size: 12px">
                  “电子档案”上传支持格式：单文件格式：jpg、jpeg、png、gif、pdf；多文件打包zip格式上传。
                </span>
                <i
                  slot="reference"
                  class="el-icon-warning"
                  style="color: #aaaaaa"
                ></i>
              </el-popover>
            </template>
            <template slot-scope="scope">
              <div
                style="text-align: center"
                v-if="!scope.row.electronicArchives"
              >
                <label for="electronicArchives">
                  <div
                    class="upload"
                    @click="uploadImg(scope.row, 'electronicArchives')"
                  >
                    上传
                  </div>
                </label>
              </div>
              <div v-else class="img">
                <el-image
                  style="width: 80px; height: 45px; object-fit: contain"
                  :src="
                    $methodsTools.splitImgHost(scope.row.electronicArchives)
                  "
                  :preview-src-list="[
                    $methodsTools.splitImgHost(scope.row.electronicArchives),
                  ]"
                >
                </el-image>
                <div
                  class="sign"
                  @click="clearImgs(scope.row, 'electronicArchives')"
                >
                  X
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="btn" width="80px">
            <template slot-scope="scope">
              <i
                class="el-icon-remove"
                style="cursor: pointer"
                @click="handleRow(scope.$index, '合同档案del')"
              ></i>
            </template>
          </el-table-column>
        </el-table>
        <div
          style="font-size: 14px; cursor: pointer; margin: 10px"
          @click="handleRow(null, '合同档案add')"
        >
          <i
            class="el-icon-circle-plus"
            style="color: #1890ff; margin-right: 2px"
          ></i>
          <span>新增</span>
        </div>
      </div>
    </div>
  </BaseDialog>
</template>
  
  <script>
import { mapGetters } from "vuex";
import { getDegreeTypeList } from "@/views/companyManagement/component/typeList";
import { updateStaff } from "@/api/staff";
export default {
  data() {
    return {
      rules: {
        staffName: [{ required: true, message: "请输入", trigger: "blur" }],
        idCard: [{ required: true, message: "请输入", trigger: "blur" }],
        telephone: [{ required: true, message: "请输入", trigger: "blur" }],
        companyId: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      ruleForm: {},
      degreeTypeList: getDegreeTypeList(), // 获取学历类型列表
      companyDepartmentList: [],
      tableData: [],
      staffEduBgList: [], // 教育背景
      staffEmergencyContactList: [], // 紧急联系人
      staffBankInfoList: [], // 银行信息
      staffContractArchivesList: [], // 合同档案
      isEditCertDialog: false,
      dialogTitle: "新增",
      isDepartmentId: true,
    };
  },
  computed: {
    ...mapGetters(["getCompanyList"]),
  },
  watch: {
    // 获取公司部门
    "ruleForm.companyId": {
      handler: function () {
        if (this.isDepartmentId) this.$set(this.ruleForm, "departmentId", "");
        this.companyDepartmentList = this.getCompanyList.find(
          (item) => item.companyId == this.ruleForm.companyId
        )?.companyDepartmentList;
        this.isDepartmentId = true;
      },
    },
  },
  mounted() {},

  methods: {
    openBoxs(row, type) {
      this.isEditCertDialog = true;
      this.ruleForm = {
        companyId: "",
        sex: null,
        departmentId: null,
      };
      if (type === "add") {
        this.dialogTitle = "新增";
        this.staffEduBgList = [];
        this.staffEmergencyContactList = [];
        this.staffBankInfoList = [];
        this.staffContractArchivesList = [];
        return;
      }
      this.dialogTitle = "修改";
      this.isDepartmentId = false;
      this.ruleForm = this.getTimestampTo(13, JSON.parse(JSON.stringify(row)));
      this.staffEduBgList = this.ruleForm.staffEduBgList;
      this.staffEmergencyContactList = this.ruleForm.staffEmergencyContactList;
      this.staffBankInfoList = this.ruleForm.staffBankInfoList;
      this.staffContractArchivesList = this.ruleForm.staffContractArchivesList;
    },

    close() {},
    submitForm() {
      let flag = false;
      this.$refs["ruleForm1"].validate((valid) => (flag = valid));
      this.$refs["ruleForm2"].validate((valid) => (flag = valid));
      console.log(flag, "flag");
      if (!flag) return;
      this.ruleForm.staffEduBgList = this.staffEduBgList;
      this.ruleForm.staffEmergencyContactList = this.staffEmergencyContactList;
      this.ruleForm.staffBankInfoList = this.staffBankInfoList;
      this.ruleForm.staffContractArchivesList = this.staffContractArchivesList;
      this.ruleForm = this.getTimestampTo(10, this.ruleForm);
      updateStaff(this.ruleForm)
        .then((res) => {
          this.$message.success("操作成功");
        })
        .finally(() => {
          this.isEditCertDialog = false;
          this.$emit("refresh");
          console.log("end");
        });
    },
    /**
     *
     * @param {Number} type 13: 10位转13位回显使用 10: 13位转10位提交
     */
    getTimestampTo(type, obj) {
      // const _obj = JSON.parse(JSON.stringify(obj));
      obj.birthday = this.timestampTo(type, obj.birthday);
      obj.workDate = this.timestampTo(type, obj.workDate);
      obj.entryDate = this.timestampTo(type, obj.entryDate);
      obj.leaveDate = this.timestampTo(type, obj.leaveDate);
      obj.startDate = this.timestampTo(type, obj.startDate);
      obj.endDate = this.timestampTo(type, obj.endDate);
      obj.staffEduBgList.forEach((i) => {
        i.startDate = this.timestampTo(type, i.startDate);
        console.log(i.startDate, "i.startDate ");
        i.endDate = this.timestampTo(type, i.endDate);
      });
      obj.staffContractArchivesList.forEach((i) => {
        i.signingDate = this.timestampTo(type, i.signingDate);
        i.effectiveDate = this.timestampTo(type, i.effectiveDate);
        i.endDate = this.timestampTo(type, i.endDate);
      });
      return obj;
    },
    timestampTo(type, time) {
      if (!time) {
        return " ";
      }
      return type == 13 ? parseInt(time * 1000) : parseInt(time / 1000);
    },
    handleRow(index, type) {
      switch (type) {
        case "教育背景add":
          this.staffEduBgList.push({});
          break;
        case "紧急联系人add":
          this.staffEmergencyContactList.push({});
          break;
        case "银行信息add":
          this.staffBankInfoList.push({});
          break;
        case "合同档案add":
          this.staffContractArchivesList.push({});
          break;
        case "教育背景del":
          this.staffEduBgList.splice(index, 1);
        case "紧急联系人del":
          this.staffEmergencyContactList.splice(index, 1);
        case "银行信息del":
          this.staffBankInfoList.splice(index, 1);
        case "合同档案del":
          this.staffContractArchivesList.splice(index, 1);
        default:
          break;
      }
    },
    // 上传主图操作
    async uploadImg(data, value) {
      console.log(value);
      this.$set(
        data,
        value,
        await this.$methodsTools.submitUpload(1).then((res) => res)
      );
    },
    // 清除上传图片
    clearImgs(data, value) {
      this.$set(data, value, "");
    },
  },
};
</script>
  
<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin-bottom: 25px;
}
.table {
  border: 1px solid #e6ebf5;
  .el-table::before {
    display: none;
  }
}
.title {
  font-size: 14px;
  font-weight: bold;
  color: #2f4378;
  margin-bottom: 20px;
  border-top: 1px solid #ddd;
  padding-top: 15px;
  margin-top: 18px;
}
.upload {
  color: #1890ff;
  cursor: pointer;
  background: #f2f2f2;
  padding: 3px 12px;
  display: inline-block;
  border-radius: 5px;
  font-size: 12px;
  &:hover {
    border: 1px dashed #1890ff;
  }
}
.mark {
  background: rgba($color: #000000, $alpha: 0.1);
  position: absolute;
  z-index: 9;
  top: 0;
  left: 25px;
  right: 25px;
  bottom: 0;
  border-radius: 5px;
  color: white;
  font-size: 12px;
  line-height: 45px;
  // pointer-events: none;
  &:hover {
    font-weight: bold;
    background: rgba($color: #000000, $alpha: 0.3);
  }
}
.img {
  text-align: center;
  position: relative;
  margin-top: 5px;

  .sign {
    z-index: 9;
    top: -8px;
    right: 13px;
    position: absolute;
    border-radius: 50%;
    font-size: 12px;
    transform: scale(0.6);
    color: red;
    background: #fafafa;
    padding: 0 7px;
    cursor: pointer;
    &:hover {
      background: red;
      color: #fafafa;
    }
  }
}
.upload-border {
  width: 230px;
  height: 80px;
  border: 2px dashed #999;
  border-radius: 5px;
  line-height: 80px;
  text-align: center;
}

.img1 {
  text-align: center;
  position: relative;
  margin-top: 5px;

  .sign1 {
    z-index: 999;
    top: -8px;
    right: -12px;
    position: absolute;
    border-radius: 50%;
    font-size: 14px;
    transform: scale(0.7);
    color: red;
    background: #fafafa;
    font-weight: bold;
    padding: 0 14px;
    cursor: pointer;
    &:hover {
      background: red;
      color: #fafafa;
    }
  }
}
</style>
  