<template>
  <div class="baseAllBox" v-loading="loading">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      :show-message="false"
      :status-icon="true"
    >
      <table :border="true" cellspacing="0" cellpadding="0" class="tableBox">
        <tbody>
          <tr>
            <td>姓名</td>
            <td>
              <el-form-item prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </td>
            <td>性别</td>
            <td>
              <el-form-item>
                <el-radio-group v-model="form.sex" prop="sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
            <td rowspan="3">照片</td>
            <td rowspan="3">
              <div class="photoBox">
                <div class="leftImgBox">
                  <imgDelivery
                    v-model="form.photoPath"
                    :isShowImgBtn="Boolean(form.photoPath)"
                    @getImgUrl="getImgUrl"
                    urlA="getImgUrl"
                  >
                    <el-button
                      type="primary"
                      size="mini"
                      :disabled="Boolean(form.photoPath)"
                      v-hasPermi="[
                        'inspector:global:profile',
                        'inspector:global:profile:s',
                      ]"
                      >上传图片</el-button
                    >
                  </imgDelivery>
                  <section
                    class="textAllStyle"
                    id="A-1"
                    v-hasPermi="[
                      'inspector:global:profile',
                      'inspector:global:profile:s',
                    ]"
                  >
                    <i class="el-icon-warning-outline"></i>
                    <div>支持jpg、png、 jpeg等格式</div>
                  </section>
                </div>
                <div class="rightImgBox">
                  <el-image
                    style="height: 100%; width: 100%"
                    :src="zp"
                    :preview-src-list="srcList"
                    fit="cover"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <div
                    class="rightImgBoxItem"
                    v-if="form.photoPath"
                    v-hasPermi="[
                      'inspector:global:profile',
                      'inspector:global:profile:s',
                    ]"
                  >
                    <i class="el-icon-close" @click="deleteImg()"></i>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>身份证号</td>
            <td>
              <el-form-item prop="cards">
                <div class="cards">
                  {{ form.idCard }}
                </div>
              </el-form-item>
            </td>
            <td>民族</td>
            <td class="rtBorder">
              <el-form-item prop="nation">
                <el-select v-model="form.nation" placeholder="请选择">
                  <el-option
                    v-for="item in allList.nation"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>政治面貌</td>
            <td>
              <el-form-item prop="politicalOutlook">
                <el-select v-model="form.politicalOutlook" placeholder="请选择">
                  <el-option
                    v-for="item in allList.politicalOutlook"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>工作单位所在市</td>
            <td class="rtBorder">
              <el-form-item prop="workPlace">
                <!-- <el-cascader
                  v-model="form.workPlace"
                  :options="options2"
                  separator="-"
                ></el-cascader> -->
                <el-select v-model="form.workPlace" placeholder="请选择">
                  <el-option
                    v-for="item in allList.workPlace"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>学历</td>
            <td>
              <el-form-item prop="education">
                <el-select v-model="form.education" placeholder="请选择">
                  <el-option
                    v-for="item in allList.education"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td rowspan="2">学位</td>
            <td rowspan="2">
              <div class="degreeBox">
                <div class="littleSonImg">
                  <el-form-item prop="degree">
                    <el-select v-model="form.degree" placeholder="请选择">
                      <el-option
                        v-for="item in allList.degree"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <FileUpload :isShowTip="true" v-model="degreeList">
                    <el-button
                      size="mini"
                      type="primary"
                      v-hasPermi="[
                        'inspector:global:diploma',
                        'inspector:global:diploma:s',
                      ]"
                      >上传学位证书</el-button
                    >
                    <span
                      class="textAllStyle1"
                      style="margin-top: 0"
                      v-hasPermi="[
                        'inspector:global:diploma',
                        'inspector:global:diploma:s',
                      ]"
                    >
                      <i class="el-icon-warning-outline">
                        请上传文件,支持doc/docx/xls/xlsx/ppt/pptx/txt/pdf/jpg/png/jpeg等格式
                      </i>
                    </span>
                  </FileUpload>
                </div>
              </div>
            </td>
            <td rowspan="2">签名</td>
            <td rowspan="2">
              <div class="signature">
                <!-- <div>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="writeOpen()"
                    v-hasPermi="['inspector:global:signature']"
                    >手动签名</el-button
                  >
                  <span
                    class="textAllStyle"
                    style="display: inline; margin-top: 0"
                    v-hasPermi="['inspector:global:signature']"
                  >
                    <i class="el-icon-warning-outline"></i>
                    请完成手动签名
                  </span>
                </div>
                <div class="signatureImg">
                  <el-image
                    style="height: 100%; width: 100%"
                    :src="qm"
                    :preview-src-list="signatureList"
                    fit="cover"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div> -->

                <div>
                  <imgDelivery
                    v-model="form.signaturePath"
                    :isShowImgBtn="Boolean(form.signaturePath)"
                    @getWrite="getWrite"
                    urlA="getWrite"
                  >
                    <el-button
                      type="primary"
                      size="mini"
                      :disabled="Boolean(form.signaturePath)"
                      v-hasPermi="[
                        'inspector:global:signature',
                        'inspector:global:signature:s',
                      ]"
                      >上传签名</el-button
                    >
                    <span
                      class="textAllStyle"
                      style="margin-top: 0"
                      v-hasPermi="[
                        'inspector:global:signature',
                        'inspector:global:signature:s',
                      ]"
                    >
                      <i class="el-icon-warning-outline"></i>
                      请上传图片，支持jpg、png、jpeg等格式
                    </span>
                  </imgDelivery>
                </div>
                <div class="signatureImg">
                  <div style="position: relative; width: 100%; height: 100%">
                    <el-image
                      style="height: 100%; width: 100%"
                      :src="qm"
                      :preview-src-list="signatureList"
                      fit="cover"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                    <div
                      class="qmAbsolute"
                      v-if="form.signaturePath"
                      v-hasPermi="[
                        'inspector:global:signature',
                        'inspector:global:signature:s',
                      ]"
                    >
                      <i class="el-icon-close" @click="deleteWrite()"></i>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>毕业院校</td>
            <td class="rtBorder">
              <el-form-item>
                <el-input v-model="form.graduationSchool" placeholder="请输入">
                </el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>系别</td>
            <td>
              <el-form-item prop="department">
                <el-select v-model="form.department" placeholder="请选择">
                  <el-option
                    v-for="item in allList.department"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>专业</td>
            <td>
              <el-form-item>
                <el-input v-model="form.speciality" placeholder="请选择">
                </el-input>
              </el-form-item>
            </td>
            <td>专业技术职称</td>
            <td>
              <el-form-item prop="technicalTitles">
                <el-select v-model="form.technicalTitles" placeholder="请选择">
                  <el-option
                    v-for="item in allList.technicalTitles"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>单位类型</td>
            <td colspan="3">
              <el-form-item prop="unitType">
                <el-select v-model="form.unitType" placeholder="请选择">
                  <el-option
                    v-for="item in allList.unitType"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>职称级别</td>
            <td>
              <el-form-item prop="professionalLevel">
                <el-select
                  v-model="form.professionalLevel"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in allList.professionalLevel"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>工作单位</td>
            <td colspan="3">
              <el-form-item v-if="selectIf">
                <el-select v-model="form.workUnit" placeholder="请选择">
                  <el-option
                    v-for="item in cascadeDict"
                    :key="item.dictLabel"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-else>
                <el-input v-model="form.workUnit"></el-input>
              </el-form-item>
            </td>
            <td>检查员类别</td>
            <td>
              <el-form-item prop="inspectorType">
                <el-select
                  v-model="form.inspectorType"
                  placeholder="请选择"
                  multiple
                >
                  <el-option
                    v-for="item in allList.inspectorType"
                    :key="item.dictLabel"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>检查员层级</td>
            <td>
              <el-form-item prop="inspectorLevel">
                <el-select v-model="form.inspectorLevel" placeholder="请选择">
                  <el-option
                    v-for="item in allList.inspectorLevel"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>检查员证书编号</td>
            <td>
              <el-form-item>
                <el-input v-model="form.inspectorNumber"></el-input>
              </el-form-item>
            </td>
            <td>检查员级别</td>
            <td>
              <el-form-item prop="inspectorGrade">
                <el-select v-model="form.inspectorGrade" placeholder="请选择">
                  <el-option
                    v-for="item in allList.inspectorGrade"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>部门</td>
            <td colspan="3">
              <el-form-item v-if="selectIf">
                <el-select v-model="form.division" placeholder="请选择">
                  <el-option
                    v-for="item in treeChild"
                    :key="item.dictLabel"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-else>
                <el-input v-model="form.division"></el-input>
              </el-form-item>
            </td>
            <td>职务</td>
            <td>
              <el-form-item prop="duty">
                <el-select v-model="form.duty" placeholder="请选择">
                  <el-option
                    v-for="item in allList.duty"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <!-- <td>组内类别标记</td>
            <td>
              <el-form-item>
                <el-input v-model="form.intragroupMakers"></el-input>
              </el-form-item>
            </td> -->
          </tr>
          <tr>
            <td>分管工作</td>
            <td colspan="6">
              <el-form-item>
                <el-input v-model="form.responsibilities"></el-input>
              </el-form-item>

              <div class="workBox">
                <div>
                  <FileUpload :isShowTip="true" v-model="workList">
                    <el-button
                      size="mini"
                      type="primary"
                      v-hasPermi="[
                        'inspector:global:workCertificat',
                        'inspector:global:workCertificat:s',
                      ]"
                      >上传工作证明证书</el-button
                    >
                    <span
                      class="textAllStyle1"
                      style="margin-top: 0"
                      v-hasPermi="[
                        'inspector:global:workCertificat',
                        'inspector:global:workCertificat:s',
                      ]"
                    >
                      <i class="el-icon-warning-outline el">
                        请上传文件,支持doc/docx/xls/xlsx/ppt/pptx/txt/pdf/jpg/png/jpeg等格式
                      </i>
                    </span>
                  </FileUpload>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>专业擅长领域</td>
            <td colspan="3">
              <el-form-item>
                <el-input v-model="form.expertiseAreas"></el-input>
              </el-form-item>
            </td>
            <td>来源</td>
            <td colspan="2">
              <el-form-item prop="source">
                <el-input v-model="form.source" disabled></el-input>
                <!-- <el-select v-model="form.source" placeholder="请选择" disabled>
                  <el-option
                    v-for="item in allList.source"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue.toString()"
                  >
                  </el-option>
                </el-select> -->
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>开户行</td>
            <td colspan="3">
              <el-form-item>
                <el-input v-model="form.accountBank"></el-input>
              </el-form-item>
            </td>
            <td>银行卡号</td>
            <td colspan="2">
              <el-form-item>
                <el-input v-model="form.cardNumber"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>执法证号</td>
            <td colspan="3">
              <el-form-item>
                <el-input v-model="form.lawNumber"></el-input>
              </el-form-item>
            </td>
            <td>执法证有效期</td>
            <td colspan="1">
              <el-form-item>
                <el-date-picker
                  v-model="form.lawTime"
                  type="date"
                  placeholder="请选择时间"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>通讯地址</td>
            <td colspan="3">
              <el-form-item>
                <el-input v-model="form.mailAddress"></el-input>
              </el-form-item>
            </td>
            <td>职务级别</td>
            <td>
              <el-form-item prop="jobLevel">
                <el-select v-model="form.jobLevel" placeholder="请选择">
                  <el-option
                    v-for="item in allList.jobLevl"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>单位电话</td>
            <td colspan="3">
              <el-form-item>
                <el-input v-model="form.workTel"></el-input>
              </el-form-item>
            </td>
            <!-- <td>家庭电话</td>
            <td>
              <el-form-item>
                <el-input v-model="form.homeTel"></el-input>
              </el-form-item>
            </td> -->
            <td>手机</td>
            <td>
              <el-form-item>
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>传真</td>
            <td>
              <el-form-item>
                <el-input v-model="form.fax"></el-input>
              </el-form-item>
            </td>
            <td>邮编</td>
            <td>
              <el-form-item>
                <el-input v-model="form.zipCode"></el-input>
              </el-form-item>
            </td>
            <td>E-MALL</td>
            <td>
              <el-form-item>
                <el-input v-model="form.email"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>熟悉外语语种</td>
            <td colspan="5">
              <!-- <el-input v-model="form.foreignLanguages"></el-input> -->
              <el-select v-model="manySelect" multiple placeholder="请选择">
                <el-option
                  v-for="item in allList.foreignLanguages"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="englishA">外语阅读水平</td>
            <td colspan="5">
              <el-radio-group v-model="form.readingLeve">
                <el-radio :label="1" text-color="#606266"
                  >顺利专业阅读</el-radio
                >
                <el-radio :label="2" text-color="#606266"
                  >一般专业阅读</el-radio
                >
                <el-radio :label="3" text-color="#606266"
                  >一般报刊阅读</el-radio
                >
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td class="englishA">外语口语能力</td>
            <td colspan="5">
              <el-radio-group v-model="form.speakingLevel">
                <el-radio :label="1">理解外语广播</el-radio>
                <el-radio :label="2">一般听懂外语广播</el-radio>
                <el-radio :label="3">一般听懂外语广播单词</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td class="englishA">外语写作水平</td>
            <td colspan="5">
              <el-radio-group v-model="form.writingLevel">
                <el-radio :label="1">流利的专业交流</el-radio>
                <el-radio :label="2">流利的日常交流</el-radio>
                <el-radio :label="3">一般的日常交流</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td class="englishA">外语听力水平</td>
            <td colspan="5">
              <el-radio-group v-model="form.listeningLevel">
                <el-radio :label="1">理解外语广播</el-radio>
                <el-radio :label="2">一般听懂外语广播</el-radio>
                <el-radio :label="3">一般听懂外语广播</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <!-- <tr>
            <td class="englishA">历史版本</td>
            <td colspan="5">
              <a href="" class="linkStyle">2023-03-07创建</a>
            </td>
          </tr> -->
        </tbody>
      </table>
    </el-form>
    <div class="footerBoxEnd">
      <button
        class="btn"
        @click="print()"
        v-hasPermi="[
          'inspector:global:basicdataPrint',
          'inspector:global:basicdataPrint:s',
        ]"
      >
        <i class="el-icon-printer"></i>
        <span> 打印 </span>
      </button>
      <button
        class="btn activeColorBtn"
        @click="save()"
        v-hasPermi="[
          'inspector:global:basicsdataSava',
          'inspector:global:basicsdataSava:s',
        ]"
      >
        <i style="color: #fff" class="el-icon-document"></i>
        <span style="color: #fff"> 保存 </span>
      </button>
    </div>
    <!-- <write ref="writeBox" @getWrite="getWrite"></write> -->
  </div>
</template>
<script>
import { dictList, getWorkUnit } from "@/api/jcy/index.js";
// import write from "../../userMsgPage/components/write.vue";
export default {
  data() {
    return {
      //级联字典
      cascadeDict: [],
      loading: true,
      //打印保存的变量
      chcolor: 1,
      form: {
        //姓名
        name: "",
        //性别
        sex: "",
        //照片名称
        photo: "",
        //照片路径
        photoPath: "",
        //身份证号
        idCard: "",
        //民族
        nation: "",
        //政治面貌
        politicalOutlook: "",
        //工作单位所在市
        workPlace: "",
        //学历
        education: "",
        //学位
        degree: "",
        //学位证书图片路径
        degreeImage: "",
        //学位证书图片名称
        degreeImagename: "",
        //毕业院校
        graduationSchool: "",
        //签名图片名称
        signaturePathname: "",
        //签名图片路径
        signaturePath: "",
        //系列
        department: 1,
        //专业
        speciality: "",
        //专业技术职称
        technicalTitles: "",
        //单位类型
        unitType: "",
        //职称级别
        professionalLevel: "",
        //工作单位
        workUnit: "",
        //检查员类别
        inspectorType: [],
        //检查员层级
        inspectorLevel: "",
        //检查员证书编号
        inspectorNumber: "",
        //检查员级别
        inspectorGrade: "",
        //部门
        division: "",
        //职务
        duty: "",
        //组内类别标记
        // intragroupMakers: "",
        //分管工作
        responsibilities: "",
        workFilename: "",
        workCertificate: "",
        //通讯地址
        mailAddress: " ",
        //职务级别
        jobLevel: "",
        //单位电话
        workTel: "",
        //家庭电话
        // homeTel: "",
        //手机
        phone: "",
        //传真
        fax: "",
        //邮编
        zipCode: "",
        //e-mail
        email: "",
        //熟悉的外语语种
        foreignLanguages: "",
        //外语阅读水平
        readingLeve: 1,
        //外语口语水平
        speakingLevel: 1,
        //外语写作水平
        writingLevel: 1,
        //外语听力水平
        listeningLevel: 1,

        //执法证号
        lawNumber: "",
        //执法证有效期
        lawTime: "",
        //专业擅长领域
        expertiseAreas: "",
        source: "", //来源
        accountBank: "", //开户行
        cardNumber: "", //银行卡号
      },
      rules: {
        // name: [{ required: true, trigger: "blur" }],
        sex: [
          {
            required: true,
            trigger: "change",
          },
        ],
        // idCard: [{ required: true, trigger: "blur" }],
        // nation: [{ required: true, trigger: "change" }],
        // politicalOutlook: [{ required: true, trigger: "change" }],
        // workPlace: [{ required: true, trigger: "change" }],
        // education: [{ required: true, trigger: "change" }],
        // degree: [{ required: true, trigger: "change" }],
        // graduationSchool: [{ required: true, trigger: "blur" }],
        // department: [{ required: true, trigger: "change" }],
        // technicalTitles: [{ required: true, trigger: "change" }],
        // unitType: [{ required: true, trigger: "change" }],
        // professionalLevel: [{ required: true, trigger: "change" }],

        inspectorGrade: [{ required: true, trigger: "change" }],
        inspectorLevel: [{ required: true, trigger: "change" }],
        inspectorType: [{ required: true, trigger: "change" }],

        // duty: [{ required: true, trigger: "change" }],
        // source: [{ required: true, trigger: "change" }],
        // jobLevel: [{ required: true, trigger: "change" }],
      },
      //照片
      zp: "",
      //照片预览
      srcList: [],
      //签名
      qm: "",
      //签名预览
      signatureList: [],
      //接受学位证书文件的数组
      degreeList: [],
      //接受工作证明证书的数组
      workList: [],
      //字典列表
      allList: [],
      baseURL:
        location.origin +
        process.env.VUE_APP_BASE_API2 +
        "/common/downloadmino/download?filename=",
      //多选框
      manySelect: "",
    };
  },
  components: {
    // write,
  },
  created() {
    this.getdictionary();
  },
  props: {
    inspectorId: {
      type: Number,
      require: true,
      default: 15,
    },
  },
  computed: {
    treeChild() {
      if (!this.form.workUnit) {
        return [];
      } else {
        let list = this.cascadeDict.filter(
          (item) => item.dictLabel == this.form.workUnit
        );
        return list.length > 0 ? list[0].children : [];
      }
    },
    selectIf() {
      //内 => 选 ，外=>输入
      if (this.form.source == "内部人员") {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {},
  methods: {
    //获取字典
    getdictionary() {
      let value =
        "workPlace,source,foreignLanguages,nation,politicalOutlook,degree,department,technicalTitles,unitType,professionalLevel,inspectorType,inspectorLevel,inspectorGrade,duty,education,jobLevl";
      let query = {
        list: value,
      };
      dictList(query).then((res) => {
        this.allList = res.result;
        getWorkUnit().then((resed) => {
          console.log(resed);
          this.cascadeDict = resed.result;
          this.getDetail();
        });
      });
    },
    //获取详情要处理照片,处理签名，处理学位证书，工作证明
    async getDetail() {
      this.loading = true;
      let msg1 = await this.$api.infoMsg.detail(this.inspectorId);
      if (msg1.status == 200) this.loading = false;

      this.form = msg1.result;
      if (this.form.inspectorType) {
        this.form.inspectorType = this.form.inspectorType.split(",");
      } else {
        this.form.inspectorType = [];
      }

      //照片预览
      if (this.form.photoPath) {
        this.zp = this.baseURL + this.form.photoPath;
        this.srcList.push(this.zp);
      }
      //签名预览
      if (this.form.signaturePath) {
        this.qm = this.baseURL + this.form.signaturePath;
        this.signatureList.push(this.qm);
      }
      //处理学位证书
      if (msg1.result.degreeImagename && msg1.result.degreeImage) {
        this.degreeList = this.begin(
          msg1.result.degreeImage,
          msg1.result.degreeImagename
        );
      }
      //处理工作证明
      if (msg1.result.workCertificate && msg1.result.workFilename) {
        this.workList = this.begin(
          msg1.result.workCertificate,
          msg1.result.workFilename
        );
      }
      //处理语种
      if (this.form.foreignLanguages) {
        let languages1 = this.form.foreignLanguages.split("、").map((item) => {
          item = Number(item);
          return item;
        });
        this.manySelect = languages1;
      }
    },

    //进入时的循环函数
    begin(a, b) {
      let arr1 = [];
      let arr2 = [];
      let arr3 = [];
      arr1 = a.split(",");
      arr2 = b.split(",");
      arr1.forEach((value, index) => {
        arr3.push({
          url: value,
          name: arr2[index],
        });
      });
      return arr3;
    },
    //提交时的循环函数
    submit(a) {
      let arr1 = [];
      let arr2 = [];
      a.forEach((value, index) => {
        arr1.push(value.name);
        arr2.push(value.url);
      });
      return [arr1, arr2];
    },

    //修改信息
    async save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //检察院类型
          this.form.inspectorType = this.form.inspectorType.join(",");
          //处理语种
          let languages = this.manySelect.map((item) => {
            return item.toString();
          });
          this.form.foreignLanguages = languages.join("、");
          //处理学位证书
          let newList = this.submit(this.degreeList);
          this.form.degreeImagename = newList[0].join(",");
          this.form.degreeImage = newList[1].join(",");
          //处理工作证明证书
          let newList1 = this.submit(this.workList);
          this.form.workFilename = newList1[0].join(",");
          this.form.workCertificate = newList1[1].join(",");
          this.$confirm("您确定修改吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              let msg1 = await this.$api.infoMsg.update(this.form);
              if (msg1.status == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.getDetail();
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "已取消修改",
              });
            });
        } else {
          this.$modal.msgError("请填写必填项");
          return false;
        }
      });
    },
    // writeOpen() {
    //   this.$refs.writeBox.open();
    // },
    //打印
    async print() {
      this.$confirm("是否导出基本信息进行打印?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let msg1 = await this.$api.infoMsg.exportFile(this.inspectorId);
          this.uploadFile(msg1.result.url, msg1.result.originalFilename);
          if (msg1.status == 200) {
            this.$message({
              type: "success",
              message: "导出成功!",
            });
            this.getDetail();
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "已取消打印",
          });
        });
    },

    //删除照片
    deleteImg() {
      this.srcList = [];
      this.form.photoPath = "";
      this.zp = "";
    },
    //删除签名
    deleteWrite() {
      this.signatureList = [];
      this.form.signaturePath = "";
      this.qm = "";
    },
    getImgUrl(e) {
      this.srcList = [];
      this.form.photoPath = e;
      this.zp = this.baseURL + e;
      this.srcList.push(this.zp);
    },
    getWrite(e) {
      this.signatureList = [];
      this.form.signaturePath = e;
      this.qm = this.baseURL + e;
      this.signatureList.push(this.qm);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-date-editor.el-input {
  width: 100% !important;
}
.cards {
  padding-left: 15px;
}
.qmAbsolute {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid #f5f5f5;
  background: #ffffff;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.textAllStyle1 {
  font-size: 12px;
  color: #8e8e8e;
  font-weight: 400;
  margin-top: 10px;
  padding-left: 5px;
  display: flex;
  align-items: center;
  word-break: break-all;
  position: relative;
}
::v-deep .image-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(245, 247, 250);
  color: #c0c4cc;
  font-size: 24px;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}
::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-cascader--medium {
  width: 100%;
}
::v-deep .el-input__inner {
  color: #292f38;
}
::v-deep .el-radio__label {
  color: #4d5158 !important;
}
.tableBox {
  border: 1px solid #e4e8ee;
  width: 100%;
  & tr {
    border: none;
  }
  & > tbody > tr > td {
    border: none;
  }
  & > tbody > tr > td:nth-child(odd) {
    width: 9%;
    padding-left: 15px;
    font-size: 14px;
    font-weight: 500;
    color: #292f38;
    background: #f6faff;
    border-right: 1px solid #e4e8ee;
    border-bottom: 1px solid #e4e8ee;
  }
  & > tbody > tr > td:nth-of-type(2) {
    // width: 73%;
    width: 17%;
  }
  & > tbody > tr > td:nth-of-type(4) {
    width: 29%;
  }
  & > tbody > tr > td:nth-of-type(6) {
    width: 27%;
  }
  & > tbody > tr > td:nth-child(even) {
    padding: 10px;
    border-right: 1px solid #e4e8ee;
    border-bottom: 1px solid #e4e8ee;
  }
  & > tbody > tr > td:nth-last-child(1) {
    border-right: none;
  }
  & > tbody > tr:nth-last-child(1) > td {
    border-bottom: none;
  }
  //table右线
  .rtBorder {
    border-right: 1px solid #e4e8ee !important;
  }
  .linkStyle {
    color: #1e80eb;
    text-decoration: underline;
    font-weight: 400;
    font-size: 14px;
  }
  .photoBox {
    height: 180px;
    display: flex;
    flex-direction: row;
    .leftImgBox {
      padding-top: 5px;
      width: 35%;
      i {
        position: absolute;
        left: -5px;
        top: 3px;
      }
    }
    .rightImgBox {
      width: 150px;
      position: relative;
      .rightImgBoxItem {
        position: absolute;
        top: 5px;
        right: 5px;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        border: 1px solid #f5f5f5;
        background: #ffffff;
        text-align: center;
        line-height: 15px;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }

  .signature {
    min-height: 140px;
    .signatureImg {
      height: 90px;
      width: 160px;
      margin-top: 10px;
      position: relative;
      // .signatureImgItem {
      //   position: absolute;
      //   top: 5px;
      //   right: 5px;
      //   font-size: 22px;
      //   cursor: pointer;
      // }
    }
  }

  .degreeBox {
    min-height: 140px;
    .littleSonImg {
      padding-bottom: 10px;
    }
  }

  .workBox {
    min-height: 130px;
    padding-top: 10px;
  }
  .englishA {
    padding: 15px 0 15px 15px;
  }
}
//提示样式
.textAllStyle {
  font-size: 12px;
  color: #8e8e8e;
  line-height: 22px;
  font-weight: 400;
  margin-top: 10px;
  padding-left: 5px;
  // display: flex;
  position: relative;
}
#A-1 {
  padding-left: 15px;
}
//下面的按钮
.footerBoxEnd {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  .btn {
    cursor: pointer;
    border: 1px solid #dbe0e8;
    background: #ffffff;
    border-radius: 5px;
    padding: 6px 8px;
    margin-right: 10px;
    span {
      font-size: 12px;
      font-weight: normal;
      margin-left: 4px;
      color: #4d5158;
    }
    i {
      color: #a1abba;
      font-size: 12px;
    }
  }
  .activeColorBtn {
    background: #52cd80;
  }
}
//按钮的样式
::v-deep .el-button--mini {
  border-radius: 5px;
  height: 30px;
  line-height: 30px;
  padding: 0 6px !important;
}
</style>
