<template>
  <div class="bbsl-common-page">
    <div class="big-title">
      <span class="title-name"> 年度个人档案信息 </span>
      <el-date-picker
        @change="changeYear"
        placeholder="请选择年度"
        size="small"
        value-format="yyyy"
        v-model="year"
        type="year"
      ></el-date-picker>
    </div>

    <div
      class="person-info"
      v-loading="load"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 1)"
    >
      <el-form
        v-if="!load"
        @submit.prevent="submitForm"
        :model="addForm"
        :rules="rules"
        :show-message="false"
        ref="ruleForm"
      >
        <div class="title">{{ year }}年个人情况</div>
        <div class="person-view">
          <div class="basic-name">档案信息</div>

          <div class="person-form">
            <div class="form-items">
              <div class="items-name">建档单位名称</div>
              <div class="items-value">
                <el-form-item prop="archiveUnitName">
                  <el-input
                    clearable
                    size="small"
                    v-model="addForm.archiveUnitName"
                    placeholder="请输入建档单位名称"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="form-items">
              <div class="items-name">建档年月</div>
              <div class="items-value">
                <el-form-item prop="archiveYear">
                  <el-date-picker
                    style="width: 100%"
                    v-model="addForm.archiveYear"
                    clearable
                    size="small"
                    type="month"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择建档年月"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </div>
            <div class="form-items">
              <div class="items-name">身份证号</div>
              <div class="items-value">
                <el-form-item prop="identCard">
                  <el-input
                    clearable
                    size="small"
                    placeholder="请输入身份证号"
                    v-model="addForm.identCard"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="form-items">
              <div class="items-name">电话号码</div>
              <div class="items-value">
                <el-form-item prop="phoneNum">
                  <el-input
                    clearable
                    size="small"
                    placeholder="请输入电话号码"
                    v-model="addForm.phoneNum"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>

          <div class="basic-name">个人基本信息</div>
          <div class="form-view-content">
            <div class="person-form">
              <div class="form-items">
                <div class="items-name">姓 名</div>
                <div class="items-value">
                  <el-form-item prop="userName">
                    <el-input
                      clearable
                      size="small"
                      v-model="addForm.userName"
                      placeholder="请输入姓名"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="form-items">
                <div class="items-name">性 别</div>
                <div class="items-value">
                  <el-form-item prop="sex">
                    <el-select
                      v-model="addForm.sex"
                      clearable
                      style="width: 100%"
                      size="small"
                      placeholder="请选择性别"
                    >
                      <el-option
                        v-for="item in genderOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <div class="form-items">
                <div class="items-name">民 族</div>
                <div class="items-value">
                  <el-form-item prop="nation">
                    <el-input
                      clearable
                      size="small"
                      placeholder="请输入民族"
                      v-model="addForm.nation"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="form-items">
                <div class="items-name">籍 贯</div>
                <div class="items-value">
                  <el-form-item prop="nativePlace">
                    <el-input
                      clearable
                      size="small"
                      placeholder="请输入籍贯"
                      v-model="addForm.nativePlace"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="form-items">
                <div class="items-name">出生日期</div>
                <div class="items-value">
                  <el-form-item prop="birthDate">
                    <el-date-picker
                      style="width: 100%"
                      clearable
                      size="small"
                      placeholder="请选择出生年月"
                      value-format="yyyy-MM-dd"
                      v-model="addForm.birthDate"
                    ></el-date-picker>
                  </el-form-item>
                </div>
              </div>

              <div class="form-items">
                <div class="items-name">入伍时间</div>
                <div class="items-value">
                  <el-form-item prop="rdDate">
                    <el-date-picker
                      style="width: 100%"
                      clearable
                      size="small"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择入伍时间"
                      v-model="addForm.rdDate"
                    ></el-date-picker>
                  </el-form-item>
                </div>
              </div>
              <div class="form-items">
                <div class="items-name">现军衔及时间</div>
                <div class="items-value">
                  <el-form-item prop="rwDate">
                    <el-date-picker
                      style="width: 100%"
                      clearable
                      size="small"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择现军衔及时间"
                      v-model="addForm.rwDate"
                    ></el-date-picker>
                  </el-form-item>
                </div>
              </div>
              <div class="form-items">
                <div class="items-name">入党（团）时间</div>
                <div class="items-value">
                  <el-form-item prop="xjxDate">
                    <el-input
                      clearable
                      size="small"
                      placeholder="请输入入党（团）时间"
                      v-model="addForm.xjxDate"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="form-items">
                <div class="items-name">学历学位</div>
                <div class="items-value">
                  <el-form-item prop="highEducation">
                    <el-input
                      clearable
                      size="small"
                      placeholder="请输入学历学位"
                      v-model="addForm.highEducation"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="form-items">
                <div class="items-name">血型</div>
                <div class="items-value">
                  <el-form-item prop="bloodType">
                    <el-input
                      clearable
                      size="small"
                      placeholder="请输入血型"
                      v-model="addForm.bloodType"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="form-items">
                <div class="items-name">入伍地</div>
                <div class="items-value">
                  <el-form-item prop="registeredResidence">
                    <el-input
                      clearable
                      size="small"
                      placeholder="请输入入伍地"
                      v-model="addForm.registeredResidence"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="form-items">
                <div class="items-name">人员类别</div>
                <div class="items-value">
                  <el-form-item prop="userClass">
                    <el-input
                      clearable
                      size="small"
                      placeholder="请输入人员类别"
                      v-model="addForm.userClass"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div
              class="up-image"
              v-loading="loadImg"
              element-loading-text="文件上传中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 1)"
            >
              <!-- <span class="text" @click="chengeFile"></span> -->
              <el-upload
                v-if="!addForm.userPhotoUrl"
                accept="image/*"
                action="#"
                ref="uploads"
                :limit="1"
                :show-file-list="false"
                :http-request="fileChange"
              >
                <div>（ 红底照片 ）</div>
              </el-upload>
              <el-image
                v-if="addForm.userPhotoUrl"
                :src="url"
                fit="fill"
                style="width: 100%; height: 100%"
                @mouseenter="showOver = true"
              ></el-image>

              <div
                class="overlay"
                @mouseleave="showOver = false"
                v-if="addForm.userPhotoUrl && showOver"
              >
                <i class="el-icon-delete" @click="delImg"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="person-view">
          <div class="basic-name">入伍后简历</div>
          <div class="basic-list">
            <div class="basic-item">
              <div class="basic-view">起止年月</div>
              <div class="basic-view">在何单位任何职</div>
              <div class="basic-view">操作</div>
            </div>
            <div
              class="basic-item"
              v-for="(item, i) in addForm.bizUserWorkDetailList"
              :key="i"
            >
              <div class="basic-view">
                <el-date-picker
                  v-model="item.startEndDate"
                  size="small"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
              <div class="basic-view">
                <el-input
                  style="width: 100%"
                  placeholder="请输入在何单位任何职"
                  v-model="item.position"
                ></el-input>
              </div>
              <div class="basic-view">
                <el-button
                  type="text"
                  v-if="i == addForm.bizUserWorkDetailList.length - 1"
                  @click="addRow('basic')"
                  >添加行</el-button
                >
                <el-button
                  v-if="addForm.bizUserWorkDetailList.length > 1"
                  type="text"
                  @click="deleteRow('basic')"
                  style="color: #ff390e"
                  >删除</el-button
                >
              </div>
            </div>
          </div>
          <div class="basic-name">参训经历</div>
          <div class="experience-info">
            <div class="experience-item">
              <div class="experience-name">参加重大军事行动</div>
              <div class="experience-value">
                <el-input
                  type="textarea"
                  placeholder="请输入参加重大军事行动"
                  v-model="
                    addForm.personalProfileDto.bizUserThroughDetailList[0]
                      .field1
                  "
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
            <div class="experience-item">
              <div class="experience-name">参加重大演训活动</div>
              <div class="experience-value">
                <el-input
                  type="textarea"
                  placeholder="请输入参加重大演训活动"
                  v-model="
                    addForm.personalProfileDto.bizUserThroughDetailList[0]
                      .field2
                  "
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
            <div class="experience-item">
              <div class="experience-name">参加院校教育培训</div>
              <div class="experience-value">
                <el-input
                  type="textarea"
                  placeholder="请输入参加院校教育培训"
                  v-model="
                    addForm.personalProfileDto.bizUserThroughDetailList[0]
                      .field3
                  "
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
            <div class="experience-item">
              <div class="experience-name">参加重大集训、比武竞赛</div>
              <div class="experience-value">
                <el-input
                  type="textarea"
                  placeholder="请输入参加重大集训、比武竞赛"
                  v-model="
                    addForm.personalProfileDto.bizUserThroughDetailList[0]
                      .field4
                  "
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="basic-name">组训经历</div>
          <div class="experience-info">
            <div class="experience-item">
              <div class="experience-name">参与组织重大演习导调裁评</div>
              <div class="experience-value">
                <el-input
                  type="textarea"
                  placeholder="请输入参与组织重大演习导调裁评"
                  v-model="
                    addForm.personalProfileDto.bizUserThroughDetailList[1]
                      .field1
                  "
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
            <div class="experience-item">
              <div class="experience-name">参与组织重大专项训练任务</div>
              <div class="experience-value">
                <el-input
                  type="textarea"
                  placeholder="请输入参与组织重大专项训练任务"
                  v-model="
                    addForm.personalProfileDto.bizUserThroughDetailList[1]
                      .field2
                  "
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="basic-name">训练资质及成果</div>
          <div class="experience-info">
            <div class="experience-item">
              <div class="experience-name">专业等级评定</div>
              <div class="experience-value">
                <el-input
                  v-model="
                    addForm.personalProfileDto.bizUserAchieveDetailList[0]
                      .professionAssess
                  "
                  type="textarea"
                  placeholder="请输入专业等级评定"
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
            <div class="experience-item">
              <div class="experience-name">教学能力评定</div>
              <div class="experience-value">
                <el-input
                  v-model="
                    addForm.personalProfileDto.bizUserAchieveDetailList[0]
                      .teachAssess
                  "
                  type="textarea"
                  placeholder="请输入教学能力评定"
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
            <div class="experience-item">
              <div class="experience-name">职业技能鉴定</div>
              <div class="experience-value">
                <el-input
                  v-model="
                    addForm.personalProfileDto.bizUserAchieveDetailList[0]
                      .vocationAssess
                  "
                  type="textarea"
                  placeholder="请输入职业技能鉴定"
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
            <div class="experience-item">
              <div class="experience-name">执业资格认证</div>
              <div class="experience-value">
                <el-input
                  v-model="
                    addForm.personalProfileDto.bizUserAchieveDetailList[0]
                      .practiceAssess
                  "
                  type="textarea"
                  placeholder="请输入执业资格认证"
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
            <div class="experience-item">
              <div class="experience-name">训练成果</div>
              <div class="experience-value">
                <el-input
                  v-model="
                    addForm.personalProfileDto.bizUserAchieveDetailList[0]
                      .archivement
                  "
                  type="textarea"
                  placeholder="请输入训练成果"
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="basic-name">训练成绩</div>
          <div class="experience-info">
            <div class="experience-item">
              <div class="experience-name">历年训练成绩评定</div>
              <div class="experience-value">
                <el-input
                  type="textarea"
                  v-model="
                    addForm.personalProfileDto.bizUserGradeList[0].gradeContent
                  "
                  placeholder="请输入历年训练成绩评定"
                  :min-rows="2"
                ></el-input>
              </div>
            </div>

            <div class="experience-item">
              <div class="experience-name">训练奖惩</div>
              <div class="experience-value">
                <el-input
                  type="textarea"
                  v-model="
                    addForm.personalProfileDto.bizUserGradeList[0]
                      .rewardsContent
                  "
                  placeholder="请输入训练奖惩"
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="basic-name">
            专业共同
            <div class="update-value" @click="getScore">更新专业数据</div>
          </div>
          <div class="basic-list">
            <div class="basic-items">
              <div class="basic-view">课目名称</div>
              <div class="basic-view">成绩</div>
              <div class="basic-view">评定</div>
            </div>
            <div
              class="basic-items"
              v-for="(item, i) in addForm.personalProfileDto
                .professionalCommonDetail"
              :key="i"
            >
              <div class="basic-view">
                {{ item.tiYuKaoPingKeMuMingCheng }}
              </div>
              <div class="basic-view">
                {{ item.tiYuKaoPingKeMuChengJi }}
              </div>
              <div class="basic-view">
                {{ dictionaryEscape('dagl-pjdj', item.level) }}
              </div>
            </div>
          </div>
          <div class="basic-name">专业训练</div>
          <div class="basic-list">
            <div class="basic-items">
              <div class="basic-view">课目名称</div>
              <div class="basic-view">成绩</div>
              <div class="basic-view">评定</div>
            </div>
            <div
              class="basic-items"
              v-for="(item, i) in addForm.personalProfileDto
                .professionalXXDetail"
              :key="i"
            >
              <div class="basic-view">
                {{ item.tiYuKaoPingKeMuMingCheng }}
              </div>
              <div class="basic-view">
                {{ item.tiYuKaoPingKeMuChengJi }}
              </div>
              <div class="basic-view">
                {{ dictionaryEscape('dagl-pjdj', item.level) }}
              </div>
            </div>
          </div>
          <div class="basic-name">军人共同</div>
          <div class="basic-list">
            <div class="basic-items">
              <div class="basic-view">课目名称</div>
              <div class="basic-view">成绩</div>
              <div class="basic-view">评定</div>
              <div class="basic-view">操作</div>
            </div>
            <div
              class="basic-items"
              v-for="(item, i) in addForm.personalProfileDto.xxcommonDetail"
              :key="i"
            >
              <div class="basic-view">
                <el-input
                  :disabled="i == 0"
                  style="width: 100%"
                  placeholder="请输入课目名称"
                  v-model="item.tiYuKaoPingKeMuMingCheng"
                ></el-input>
              </div>
              <div class="basic-view">
                <el-input
                  type="number"
                  :disabled="i == 0"
                  style="width: 100%"
                  placeholder="请输入成绩"
                  v-model="item.tiYuKaoPingKeMuChengJi"
                  :precision="1"
                ></el-input>
                <!-- @input="handleScoreInput($event, i)" -->
              </div>
              <div class="basic-view">
                <el-select
                  @change="calculateTheScore"
                  :disabled="i == 0"
                  style="width: 100%"
                  placeholder="请输入评定结果"
                  v-model="item.level"
                >
                  <el-option
                    v-for="item in getDictionaryByCode('dagl-pjdj')"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="basic-view">
                <el-button
                  type="text"
                  v-if="i === 0"
                  @click="addSportsPerformance"
                  >添加体育成绩</el-button
                >
                <el-button
                  type="text"
                  v-if="
                    i === addForm.personalProfileDto.xxcommonDetail.length - 1
                  "
                  @click="addRow('commmt')"
                  >添加行</el-button
                >
                <el-button
                  v-if="i > 0"
                  type="text"
                  @click="deleteRow('commmt', i)"
                  style="color: #ff390e"
                  >删除</el-button
                >
              </div>
            </div>
          </div>
          <div class="basic-name">课目成绩统计</div>
          <div class="notes-list">
            <div class="notes-item four">
              <div class="notes-name">等级区分</div>
              <div class="notes-name">课目数量</div>
              <div class="notes-name">课目总数量</div>
              <div class="notes-name">所占比例</div>
            </div>
            <div
              class="notes-item four"
              v-for="(item, i) in addForm.personalProfileDto.subjectScoreCounts"
              :key="i"
            >
              <div class="notes-name">
                {{ dictionaryEscape('dagl-pjdj', String(item.type)) }}
              </div>

              <div class="notes-name">
                {{ item.subjects || 0 }}
              </div>
              <div class="notes-name">{{ item.subjectsTotal || 0 }}</div>
              <div class="notes-name">{{ item.ratio }}%</div>
            </div>
          </div>
          <div class="basic-name">个人综合评价</div>
          <div class="experience-info">
            <div class="two-class">
              <div class="experience-items">
                <div class="experience-name">职业教育分数</div>
                <div class="experience-value">
                  <el-input
                    v-model="
                      addForm.personalProfileDto.examUserEvaluation
                        .vocationalEducationScore
                    "
                    size="small"
                    placeholder="请输入职业教育分数"
                  ></el-input>
                </div>
              </div>
              <div class="experience-items">
                <div class="experience-name">职业教育评定</div>
                <div class="experience-value">
                  <el-select
                    v-model="
                      addForm.personalProfileDto.examUserEvaluation
                        .vocationalEducationEvaluation
                    "
                    style="width: 100%"
                    size="small"
                    placeholder="请输入职业教育评定"
                  >
                    <el-option
                      v-for="item in getDictionaryByCode('dagl-pjdj')"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option
                  ></el-select>
                </div>
              </div>
              <div class="experience-items">
                <div class="experience-name">个人年度军事训练总体评价时间</div>
                <div class="experience-value">
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="
                      addForm.personalProfileDto.examUserEvaluation
                        .overallEvaluationTime
                    "
                    style="width: 100%"
                    size="small"
                    placeholder="请选择个人年度军事训练总体评价时间"
                  ></el-date-picker>
                </div>
              </div>
              <div class="experience-items">
                <div class="experience-name">个人年度成绩总评定</div>
                <div class="experience-value">
                  <el-select
                    style="width: 100%"
                    v-model="
                      addForm.personalProfileDto.examUserEvaluation.level
                    "
                    size="small"
                    placeholder="请输入个人年度成绩总评定"
                  >
                    <el-option
                      v-for="item in getDictionaryByCode('dagl-pjdj')"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option
                  ></el-select>
                </div>
              </div>
            </div>
            <div class="experience-item-two">
              <div class="experience-name">
                上一级指导员对该同志训练水平综合鉴定
              </div>
              <div class="experience-value">
                <el-input
                  type="textarea"
                  v-model="
                    addForm.personalProfileDto.examUserEvaluation
                      .comprehensiveAppraisalDescription
                  "
                  placeholder="请输入上一级指导员对该同志训练水平综合鉴定"
                  :min-rows="2"
                ></el-input>
              </div>
            </div>

            <div class="experience-item-two">
              <div class="experience-name">年度军事训练总体评价</div>
              <div class="experience-value">
                <el-input
                  type="textarea"
                  v-model="
                    addForm.personalProfileDto.examUserEvaluation
                      .overallEvaluationDescription
                  "
                  placeholder="请输入年度军事训练总体评价"
                  :min-rows="2"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="btns">
      <div class="btns">
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button type="info" @click="$router.push({name: 'userFiles'})"
          >返 回</el-button
        >
      </div>
    </div>
    <grade-table ref="gradeTable" @updateData="updateData"></grade-table>
  </div>
</template>

<script>
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import gradeTable from './sportEdit.vue'

import * as api from '@/api/examDataMenu/archivesManager/userFiles'
import {get} from 'jquery'

export default {
  name: 'editPerson',
  components: {
    gradeTable,
  },
  data() {
    return {
      rules: {
        archiveUnitName: [
          {required: true, message: '请输入建档单位名称', trigger: 'blur'},
        ],
        archiveYear: [
          {required: true, message: '请选择建档年月', trigger: 'change'},
        ],
        identCard: [
          {required: true, message: '请输入身份证号', trigger: 'blur'},
          {validator: this.validateIdCard, trigger: 'blur'},
        ],
        phoneNum: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {validator: this.validatePhoneNumber, trigger: 'blur'},
        ],
        userName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        sex: [{required: true, message: '请选择性别', trigger: 'change'}],
        nation: [{required: true, message: '请输入民族', trigger: 'blur'}],
        nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
        birthDate: [
          {required: true, message: '请选择出生年月', trigger: 'blur'},
        ],
        rdDate: [{required: true, message: '请选择XX时间', trigger: 'change'}],
        rwDate: [{required: true, message: '请选择XX时间', trigger: 'change'}],
        xjxDate: [{required: true, message: '请输入XXX时间', trigger: 'blur'}],
        highEducation: [
          {required: true, message: '请输入学历学位', trigger: 'blur'},
        ],
      },
      showOver: false,
      loadImg: false,
      load: true,
      url: '',
      year: new Date().getFullYear().toString(),
      addForm: {
        bizUserWorkDetailList: [
          {
            startEndDate: [],
            position: '',
          },
        ],
      },
      genderOptions: [
        {label: '男', value: '男'},
        {label: '女', value: '女'},
      ],
      dtoKey: {
        bizUserThroughDetailList: [
          {
            type: 1,
            field1: '',
            field2: '',
            field3: '',
            field4: '',
            tdYear: '',
          },
          {type: 2, field1: '', field2: '', tdYear: ''},
        ], //xxx经历表（按年明细记录表）
        xxcommonDetail: [
          {
            tiYuKaoPingKeMuMingCheng: '军事体育',
            tiYuKaoPingKeMuChengJi: '',
            level: '',
            type: '4',
          },
        ], //xx共同
        bizUserGradeList: [
          {
            rewardsContent: '',
            gradeContent: '',
          },
        ], //xxx成绩与奖惩表（按年成绩明细记录表）

        bizUserAchieveDetailList: [
          {
            archivement: '',
            practiceAssess: '',
            professionAssess: '',
            teachAssess: '',
            vocationAssess: '',
          },
        ], //XXX资质及成果表（按年明细记录表）
        examUserEvaluation: {
          overallEvaluationDescription: '',
          comprehensiveAppraisalDescription: '',
          vocationalEducationEvaluation: '',
          vocationalEducationScore: '',
          overallEvaluationTime: '',
          level: '',
        },
        xxsportsDetail: [
          {
            tiYuKaoPingKeMuMingCheng: '体型',
            tiYuKaoPingKeMuChengJi: '',
            level: '',
          },
        ], //年度考核考生---体育成绩表
        subjectScoreCounts: [
          {
            subjects: 0,
            subjectsTotal: 0,
            ratio: 0,
            type: 1,
            sn: 1,
          },
          {
            subjects: 0,
            subjectsTotal: 0,
            ratio: 0,
            type: 2,
            sn: 2,
          },
          {
            subjects: 0,
            subjectsTotal: 0,
            ratio: 0,
            type: 3,
            sn: 3,
          },
          {
            subjects: 0,
            subjectsTotal: 0,
            ratio: 0,
            type: 4,
            sn: 4,
          },
        ], //年度考核考生---成绩统计
        professionalCommonDetail: [], //年度考核考生---专 业 共 同
        professionalXXDetail: [], //年度考核考生---专 业 xx
      },
    }
  },
  computed: {
    id() {
      return this.$route.query.userId
    },
    positionId() {
      return this.$route.query.orgId
    },
  },
  created() {
    this.initData()
  },

  methods: {
    getDictionaryByCode,
    dictionaryEscape,
    validateIdCard(rule, value, callback) {
      // 身份证号正则表达式
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (value === '') {
        callback(new Error('身份证号不能为空'))
      } else if (!reg.test(value)) {
        callback(new Error('身份证号格式不正确'))
      } else {
        callback()
      }
    },
    validatePhoneNumber(rule, value, callback) {
      // 中国大陆手机号码的正则表达式
      const reg = /^1[3-9]\d{9}$/
      if (value === '') {
        callback(new Error('电话号码不能为空'))
      } else if (!reg.test(value)) {
        callback(new Error('电话号码格式不正确'))
      } else {
        callback()
      }
    },
    // 处理年份变化
    changeYear() {
      this.initData()
    },

    // 删除图片
    delImg() {
      this.showOver = false
      this.addForm.userPhotoUrl = ''
      this.url = ''
    },

    // 处理文件上传
    async fileChange(file) {
      try {
        this.loadImg = true
        const formData = new FormData()
        formData.append('file', file.file)
        formData.append('fileName', file.file.name)

        const {value} = await api.uploadPhoto(formData)
        this.addForm.userPhotoUrl = value
        await this.getMappingField(value)
      } finally {
        this.loadImg = false
      }
    },

    // 获取图片URL
    async getMappingField(value) {
      const url = value.split('/')[1]
      const res = await api.download(url)
      const blob = new Blob([res], {type: 'image/*'})
      this.url = URL.createObjectURL(blob)
    },
    async getScore() {
      let {state, value} = await api.getSubjectScore(this.year, this.id)
      if (state && value?.length) {
        this.addForm.personalProfileDto.professionalCommonDetail = []
        this.addForm.personalProfileDto.professionalXXDetail = []
        value.forEach((item) => {
          item.tiYuKaoPingKeMuMingCheng = item.subjectName
          item.tiYuKaoPingKeMuChengJi = item.score
          if (item.trainType == '2') {
            this.addForm.personalProfileDto.professionalCommonDetail.push(item)
          } else if (item.trainType == '4') {
            this.addForm.personalProfileDto.professionalXXDetail.push(item)
          }
        })
      } else {
        this.addForm.personalProfileDto.professionalCommonDetail = []
        this.addForm.personalProfileDto.professionalXXDetail = []
      }

      this.calculateTheScore()
    },
    // 计算分数
    calculateTheScore() {
      let arr = [
        ...this.addForm.personalProfileDto.professionalCommonDetail,
        ...this.addForm.personalProfileDto.professionalXXDetail,
        ...this.addForm.personalProfileDto.xxcommonDetail,
      ]
      console.log(111, arr)

      this.addForm.personalProfileDto.subjectScoreCounts = [
        {
          subjects: 0,
          subjectsTotal: 0,
          ratio: 0,
          type: 1,
          sn: 1,
        },
        {
          subjects: 0,
          subjectsTotal: 0,
          ratio: 0,
          type: 2,
          sn: 2,
        },
        {
          subjects: 0,
          subjectsTotal: 0,
          ratio: 0,
          type: 3,
          sn: 3,
        },
        {
          subjects: 0,
          subjectsTotal: 0,
          ratio: 0,
          type: 4,
          sn: 4,
        },
      ]
      let updateLevelCount = (level) => {
        switch (level) {
          case '1':
            this.addForm.personalProfileDto.subjectScoreCounts[0].subjects++
            break
          case '2':
            this.addForm.personalProfileDto.subjectScoreCounts[1].subjects++
            break
          case '3':
            this.addForm.personalProfileDto.subjectScoreCounts[2].subjects++
            break
          case '4':
            this.addForm.personalProfileDto.subjectScoreCounts[3].subjects++
            break
        }
      }

      let nums = 0
      arr.forEach((item) => {
        nums++
        if (item.level) updateLevelCount(item.level)
      })

      this.addForm.personalProfileDto.subjectScoreCounts =
        this.addForm.personalProfileDto.subjectScoreCounts.map((item) => {
          item.subjectsTotal = nums
          item.ratio = ((item.subjects / item.subjectsTotal) * 100).toFixed(0)
          return item
        })
    },
    // 初始化数据
    // 修改 initData 方法
    async initData() {
      try {
        const {state, value} = await api.personalProfile(this.year, this.id)

        if (state && value) {
          // 处理工作经历日期
          const workList = value.bizUserWorkDetailList?.map((item) => ({
            ...item,
            startEndDate: [item.startDate, item.endDate],
          })) || [
            {
              startEndDate: [],
              position: '',
            },
          ]

          // 初始化表单数据
          this.addForm = {
            ...value.bizUserBasic,
            bizUserWorkDetailList: workList,
            personalProfileDto: {
              bizUserThroughDetailList: [
                {
                  type: 1,
                  field1: '',
                  field2: '',
                  field3: '',
                  field4: '',
                  tdYear: '',
                },
                {
                  type: 2,
                  field1: '',
                  field2: '',
                  tdYear: '',
                },
              ],
              xxcommonDetail: [
                {
                  tiYuKaoPingKeMuMingCheng: '军事体育',
                  tiYuKaoPingKeMuChengJi: '',
                  level: '',
                  type: '4',
                },
              ],
              bizUserGradeList: [
                {
                  rewardsContent: '',
                  gradeContent: '',
                },
              ],
              bizUserAchieveDetailList: [
                {
                  archivement: '',
                  practiceAssess: '',
                  professionAssess: '',
                  teachAssess: '',
                  vocationAssess: '',
                },
              ],
              examUserEvaluation: {
                overallEvaluationDescription: '',
                comprehensiveAppraisalDescription: '',
                vocationalEducationEvaluation: '',
                vocationalEducationScore: '',
                overallEvaluationTime: '',
                level: '',
              },

              xxsportsDetail: [
                {
                  tiYuKaoPingKeMuMingCheng: '体型',
                  tiYuKaoPingKeMuChengJi: '',
                  level: '',
                },
              ],
              subjectScoreCounts: [
                {
                  subjects: 0,
                  subjectsTotal: 0,
                  ratio: 0,
                  type: 1,
                  sn: 1,
                },
                {
                  subjects: 0,
                  subjectsTotal: 0,
                  ratio: 0,
                  type: 2,
                  sn: 2,
                },
                {
                  subjects: 0,
                  subjectsTotal: 0,
                  ratio: 0,
                  type: 3,
                  sn: 3,
                },
                {
                  subjects: 0,
                  subjectsTotal: 0,
                  ratio: 0,
                  type: 4,
                  sn: 4,
                },
              ],
            },
          }

          if (this.addForm.userPhotoUrl) {
            this.getMappingField(this.addForm.userPhotoUrl)
          }
          // 如果有评估数据，则合并
          if (value.examUserEvaluationVoList?.length > 0) {
            value.examUserEvaluationVoList = value.examUserEvaluationVoList.map(
              (item) => {
                // 使用可选链操作符处理嵌套数组
                item.xxcommonDetail?.forEach((val) => {
                  val.level = String(val.level)
                })

                // 使用可选链操作符处理嵌套对象
                if (item.examUserEvaluation?.level != null) {
                  item.examUserEvaluation.level = String(
                    item.examUserEvaluation.level
                  )
                }

                return item
              }
            )
            this.addForm.personalProfileDto = {
              ...this.addForm.personalProfileDto,
              ...value.examUserEvaluationVoList[0],
            }
          }
          this.calculateTheScore()
          // 确保所有必需的嵌套对象都存在
          this.ensureNestedObjects()
        }
      } finally {
        this.load = false
      }
    },
    // 添加新方法确保嵌套对象存在
    ensureNestedObjects() {
      const dto = this.addForm.personalProfileDto

      // 确保所有必需的数组都存在
      if (!dto.bizUserThroughDetailList) {
        dto.bizUserThroughDetailList = this.dtoKey.bizUserThroughDetailList
      }
      if (!dto.xxcommonDetail) {
        dto.xxcommonDetail = this.dtoKey.xxcommonDetail
      }
      if (!dto.bizUserGradeList) {
        dto.bizUserGradeList = this.dtoKey.bizUserGradeList
      }
      if (!dto.bizUserAchieveDetailList) {
        dto.bizUserAchieveDetailList = this.dtoKey.bizUserAchieveDetailList
      }
      if (!dto.examUserEvaluation) {
        dto.examUserEvaluation = this.dtoKey.examUserEvaluation
      }
      if (!dto.xxsportsDetail) {
        dto.xxsportsDetail = this.dtoKey.xxsportsDetail
      }
      if (!dto.subjectScoreCounts) {
        dto.subjectScoreCounts = this.dtoKey.subjectScoreCounts
      }
      if (!dto.professionalCommonDetail) {
        dto.professionalCommonDetail = this.dtoKey.professionalCommonDetail
      }
      if (!dto.professionalXXDetail) {
        dto.professionalXXDetail = this.dtoKey.professionalXXDetail
      }
    },
    // 处理评估数据
    processEvaluationData(data) {
      const result = {...data}
      Object.keys(this.dtoKey).forEach((key) => {
        if (!result[key]) {
          result[key] = this.dtoKey[key]
        }
      })
      return [result]
    },

    addSportsPerformance() {
      this.$refs.gradeTable.open(this.addForm.personalProfileDto.xxsportsDetail)
    },

    // 提交表单
    async submitForm() {
      this.$refs.ruleForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          try {
            this.addForm.bizUserWorkDetailList =
              this.addForm.bizUserWorkDetailList.map((item) => {
                item.startDate = item.startEndDate[0]
                item.endDate = item.startEndDate[1]
                item.tdYear = this.year
                return item
              })

            for (let key in this.addForm.personalProfileDto) {
              if (key == 'examUserEvaluation') {
                this.addForm.personalProfileDto[key].positionId =
                  this.positionId
              }
            }

            this.addForm.userId = this.id
            this.addForm.personalProfileDto.year = this.year
            // return
            // TODO: 调用API提交数据
            await api.savePersonInfo(this.addForm)
            this.$message.success('保存成功')
            this.$router.push({name: 'userFiles'})
          } finally {
          }
        }
      })
    },
    updateData(value) {
      this.addForm.personalProfileDto.xxcommonDetail[0].tiYuKaoPingKeMuChengJi =
        value.sum
      this.addForm.personalProfileDto.xxcommonDetail[0].level = value.grade

      this.addForm.personalProfileDto.xxsportsDetail = value.list
      this.calculateTheScore()
    },
    // 添加行
    addRow(type) {
      if (type === 'basic') {
        this.addForm.bizUserWorkDetailList.push({
          startEndDate: [],
          position: '',
        })
      } else {
        this.addForm.personalProfileDto.xxcommonDetail.push({
          tiYuKaoPingKeMuMingCheng: '',
          tiYuKaoPingKeMuChengJi: '',
          level: '',
          type: '3',
        })
      }
    },

    // 删除行
    deleteRow(type, index) {
      if (type === 'basic') {
        this.addForm.bizUserWorkDetailList.splice(index, 1)
      } else {
        this.addForm.personalProfileDto.xxcommonDetail.splice(index, 1)
        this.calculateTheScore()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item.is-error .el-input__inner::placeholder {
  color: red; /* 设置 placeholder 颜色为红色 */
}
.notes-list {
  & :first-child.notes-item {
    font-weight: bold;
  }
  .notes-item {
    display: grid;
    grid-template-columns: auto 200px 200px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid rgba($color: #ccc, $alpha: 0.4);

    .notes-name {
      text-align: center;
      border-right: 1px solid rgba($color: #ccc, $alpha: 0.4);
    }
  }
  .four {
    grid-template-columns: 200px 1fr 1fr 1fr;
    & :first-child.notes-name {
      font-weight: bold;
    }
  }
  .two {
    grid-template-columns: 200px auto;
    & :first-child.notes-name {
      font-weight: bold;
    }
  }
}
.bbsl-common-page {
  height: 100%;
  width: 100%;
  background: #fff;
  padding: 16px;
  box-sizing: border-box;
  .big-title {
    font-size: 16px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba($color: #ccc, $alpha: 0.4);
    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 20px;
      background: #41a1fe;
      margin-right: 5px;
    }
    .title-name {
      flex: 1;
    }
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
  }

  .person-info {
    box-sizing: border-box;
    height: 85%;
    overflow: auto;
    ::v-deep .el-form-item__label {
      line-height: 16px;
      padding-bottom: 5px;
    }
    ::v-deep .el-form-item__label {
      line-height: 16px;
      padding-bottom: 5px;
    }
    ::v-deep .el-form-item {
      margin-bottom: 0 !important;
    }
    ::v-deep .el-input--suffix .el-input__inner {
      border: 0 !important;
      border-radius: 0 !important;
      height: 30px !important;
    }
    ::v-deep .el-input__inner {
      border: 0 !important;
      border-radius: 0 !important;
    }
  }
  .person-view {
    box-sizing: border-box;
    width: 65%;
    margin: 0 auto;

    border: 1px solid #ccc;
    &:nth-child(2) {
      border-top: 0px;
    }
    .basic-name {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      padding-left: 10px;
      height: 40px;
      background: rgba($color: #ccc, $alpha: 0.2);
      border-bottom: 1px solid #ccc;
      font-weight: bold;
      position: relative;
      .update-value {
        position: absolute;
        cursor: pointer;
        color: #41a1fe;
        right: 10px;
      }
    }
    .person-form {
      display: grid;

      grid-template-columns: 500px auto;
      grid-template-rows: 40px 40px;
      // 3行
      .form-items {
        display: grid;
        grid-template-columns: 100px auto;

        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;

        .items-name {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          font-size: 14px;

          border-right: 1px solid #ccc;
        }
      }
    }
    .form-view-content {
      display: grid;
      grid-template-columns: auto 130px;
      .person-form {
        display: grid;

        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 25% 25% 25% 25%;
        // 3行
        .form-items {
          display: grid;
          grid-template-columns: 100px auto;

          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;

          &:nth-child(10) {
            border-bottom: 0;
          }
          &:nth-child(11) {
            border-bottom: 0;
          }
          &:nth-child(12) {
            border-bottom: 0;
          }
          .items-name {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            font-size: 14px;

            border-right: 1px solid #ccc;
          }
        }
      }
      .up-image {
        height: 165px;
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .text {
          cursor: pointer;
        }
        .overlay {
          height: 100%;
          width: 100%;
          background: rgba($color: #000000, $alpha: 0.8);
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            cursor: pointer;
            font-size: 18px;
            color: red;
            // &:first-child {
            //   color: #41a1fe;
            //   margin-right: 10px;
            // }
          }
        }
      }
    }
    .basic-item {
      height: 40px;
      border-bottom: 1px solid #ccc;
      display: grid;
      grid-template-columns: 400px auto 150px;
      .basic-view {
        padding-left: 10px;
        height: 40px;
        line-height: 40px;

        border-right: 1px solid #ccc;
        &:last-child {
          border-right: 0;
        }
      }
    }
    .basic-items {
      height: 40px;
      border-bottom: 1px solid #ccc;
      display: grid;
      grid-template-columns: 400px auto 200px 150px;
      .basic-view {
        padding-left: 10px;
        height: 40px;
        line-height: 40px;

        border-right: 1px solid #ccc;
        &:last-child {
          border-right: 0;
        }
      }
    }
    .experience-item {
      display: grid;
      grid-template-columns: 150px auto;
      border-bottom: 1px solid #ccc;
      .experience-name {
        padding-left: 10px;
        display: flex;
        align-items: center;
        border-right: 1px solid#ccc;
      }
      ::v-deep.el-textarea__inner {
        border: 0 !important;
      }
    }
    .experience-item-two {
      display: grid;
      grid-template-columns: 200px auto;
      border-bottom: 1px solid #ccc;
      .experience-name {
        padding-left: 10px;
        display: flex;
        align-items: center;
        border-right: 1px solid#ccc;
      }
      ::v-deep.el-textarea__inner {
        border: 0 !important;
      }
    }
    .two-class {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
    .experience-items {
      display: grid;
      grid-template-columns: 200px auto;
      border-bottom: 1px solid #ccc;
      height: 40px;
      &:nth-child(2n-1) {
        border-right: 1px solid #ccc;
      }
      .experience-name {
        padding-left: 10px;
        display: flex;
        align-items: center;
        border-right: 1px solid#ccc;
      }
      .experience-value {
        display: flex;
        align-items: center;
      }
      ::v-deep.el-textarea__inner {
        border: 0 !important;
      }
    }
  }
  .btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
