<template>
  <div v-loading="loading" class="edit-resume">
    <div class="containter">
      <div class="directory" :class="{ 'is-fixed': isFixed }">
        <div class="directory-list">
          <div class="directory-first">简历目录</div>
          <div
            v-for="(item, index) in resumeList"
            :key="index"
            v-scroll-to="{ el: '#resume' + index, offset: -100 }"
            class="directory-item"
            :class="state.resumeActive === item.name ? 'directory-active' : ''"
            @click="resumeChange(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div ref="scrollRef" class="content">
        <div class="resume-header flx-justify-between">
          <span>我的在线简历</span>
          <span @click="openResume">预览</span>
        </div>
        <div class="resume-main">
          <div id="resume0">
            <div v-show="!state.userInfoShow" class="flx-justify-between">
              <div
                class="user-info"
                @mouseover="mouseover($event, 'user', 0)"
                @mouseleave="mouseleave($event, 'user', 0)"
              >
                <div class="flx-justify-between">
                  <div class="user-name">{{ state.resumeData?.Jbdata?.FName || '姓名' }}</div>
                  <div
                    id="edit-user0"
                    class="flx-align-center"
                    style="color: #177cfa; cursor: pointer; display: none"
                    @click="userInfoClick"
                  >
                    <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                    编辑
                  </div>
                </div>
                <el-row>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume8.png" width="16" />
                    <span>{{ experience }}</span>
                  </el-col>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume.png" width="16" />
                    <span>{{ state.resumeData?.Jbdata?.FEducationBackground }}</span>
                  </el-col>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume1.png" width="16" />
                    <span>{{ selectDepartRemain(state.resumeData?.Jbdata?.FDepartRemain) }}</span>
                  </el-col>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume2.png" width="16" />
                    <span>{{ maskedUserPhone }}</span>
                  </el-col>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume3.png" width="16" />
                    <span>{{ maskedWechat }}</span>
                  </el-col>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume4.png" width="16" />
                    <span>{{
                      state.resumeData?.Jbdata?.FEmail?.replace(/(\d{2})\d+(\d{3}@)/, '$1****$2')
                    }}</span>
                  </el-col>
                </el-row>
              </div>
              <div
                id="show-img0"
                @mouseover="mouseover($event, 'img', 0)"
                @mouseleave="mouseleave($event, 'img', 0)"
              >
                <img :src="baseURL + '/' + state.resumeData?.FPhotosUrl" width="82" height="115" />
                <div id="edit-img0" class="flx-align-center" @click="uploadImgRef?.$el.click()">
                  <el-icon color="#177CFA" style="margin: 4px 4px 0 0"><i-ep-EditPen /></el-icon>
                  选择文件
                </div>
              </div>
            </div>
            <userInfo ref="userInfoRef" v-model:show="state.userInfoShow" @init="init" />
          </div>

          <div v-show="!state.personalAdvantagesShow" id="resume1" class="resume-item">
            <div class="resume-label flx-center">个人优势</div>
            <div class="resume-content">
              <div
                id="show-advantage0"
                class="flx-justify-between"
                style="align-items: start"
                @mouseover="mouseover($event, 'advantage', 0)"
                @mouseleave="mouseleave($event, 'advantage', 0)"
              >
                <pre style="flex: 1">{{
                  state.resumeData?.Jbdata?.FPersonalStrengths.trim()
                    ? state.resumeData?.Jbdata?.FPersonalStrengths
                    : '填写您的个人优势'
                }}</pre>
                <div style="width: 60px">
                  <div
                    id="edit-advantage0"
                    class="flx-align-center"
                    style="color: #177cfa; cursor: pointer; display: none; white-space: nowrap"
                    @click="addvantageClick"
                  >
                    <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                    编辑
                  </div>
                </div>
              </div>
            </div>
          </div>
          <personalAdvantages
            ref="advantagesRef"
            v-model:show="state.personalAdvantagesShow"
            style="margin-top: 16px"
            @init="init"
          />

          <div id="resume2" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">期望职位</div>
              <div
                v-if="!state.resumeData?.Qzdata || state.resumeData?.Qzdata?.length < 3"
                class="flx-align-center"
                style="color: #177cfa; cursor: pointer"
                @click="addExpectedClick"
              >
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <expectedPosition
              v-model:show="state.expectedPositionShow"
              :information-data="state.informationData"
              :cascaderOptions="state.cascaderOptions"
              @init="init"
            />
            <div class="resume-content">
              <div
                v-for="(item, index) in state.resumeData?.Qzdata || []"
                :id="'show-position' + index"
                :key="index"
                @mouseover="mouseover($event, 'position', index, 'Qzdata')"
                @mouseleave="mouseleave($event, 'position', index)"
              >
                <div class="flx-justify-between">
                  <div>
                    <span>{{ item.FDesiredPositionName }}</span>
                    <el-divider direction="vertical" />
                    <span>{{ item.FExpectSalaryMinName }}-{{ item.FExpectSalaryMaxName }}</span>
                    <el-divider direction="vertical" />
                    <span style="color: #666666">{{ item.FExpectTheIndustryName }}</span>
                    <el-divider direction="vertical" />
                    <span style="color: #666666">{{ item.FWorkCity }}</span>
                  </div>
                  <div
                    :id="'edit-position' + index"
                    class="flx-align-center"
                    style="color: #177cfa; cursor: pointer; display: none"
                    @click="expectedClick(index)"
                  >
                    <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                    编辑
                  </div>
                </div>
                <expectedPosition
                  ref="expectedRef"
                  v-model:show="item.show"
                  :information-data="state.informationData"
                  :cascader-options="state.cascaderOptions"
                  style="margin-top: 12px"
                  @init="init"
                />
              </div>
            </div>
          </div>

          <div id="resume3" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">工作经历</div>
              <div
                class="flx-align-center"
                style="color: #177cfa; cursor: pointer"
                @click="addWorkExperienceClick"
              >
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <workExperience
              v-model:show="state.workExperienceShow"
              :information-data="state.informationData"
              @init="init"
            />

            <div class="resume-content">
              <div
                v-for="(item, index) in state.resumeData?.Gzdata || []"
                :id="'show-work' + index"
                :key="index"
                @mouseover="mouseover($event, 'work', index)"
                @mouseleave="mouseleave($event, 'work', index)"
              >
                <div class="flx-justify-between" style="margin-bottom: 24px">
                  <div style="font-size: 18px">
                    <span style="margin-right: 20px">{{ item.FCompanyName }}</span>
                    <span>{{ item.FPosition }}</span>
                  </div>
                  <div>
                    <span :id="'work-date' + index" style="color: #666666"
                      >{{ dayjs(item.FStartDate).format('YYYY.MM') }}-{{
                        dayjs(item.FEndDate).format('YYYY.MM')
                      }}</span
                    >
                    <div
                      :id="'edit-work' + index"
                      class="flx-align-center"
                      style="color: #177cfa; cursor: pointer; display: none"
                      @click="workExperienceClick(index)"
                    >
                      <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                      编辑
                    </div>
                  </div>
                </div>
                <div class="flx-align-center" style="margin-bottom: 24px">
                  <span
                    v-for="tag in item.FPossessSkills !== ' ' ? item.FPossessSkills.split(',') : []"
                    :key="tag"
                    class="tag-label"
                    >{{ tag }}</span
                  >
                </div>
                <div style="margin-bottom: 24px; display: flex">
                  <div style="width: 72px; font-size: 18px">内容：</div>
                  <pre style="flex: 1">{{ item.FJobContent_Tag }}</pre>
                </div>
                <div style="margin-bottom: 24px; display: flex">
                  <div style="width: 72px; font-size: 18px">业绩：</div>
                  <pre style="flex: 1">{{ item.FWorkPerformance_Tag }}</pre>
                </div>
                <workExperience
                  ref="workExperienceRef"
                  v-model:show="item.show"
                  :information-data="state.informationData"
                  @init="init"
                />
              </div>
            </div>
          </div>

          <div id="resume4" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">项目经历</div>
              <div
                class="flx-align-center"
                style="color: #177cfa; cursor: pointer"
                @click="addProjectClick"
              >
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <projectExperience v-model:show="state.projectExperienceShow" @init="init" />
            <div class="resume-content">
              <div
                v-for="(item, index) in state.resumeData?.Xmdata || []"
                :id="'show-project' + index"
                :key="index"
                @mouseover="mouseover($event, 'project', index)"
                @mouseleave="mouseleave($event, 'project', index)"
              >
                <div class="flx-justify-between" style="margin-bottom: 24px">
                  <div style="font-size: 18px">
                    <span style="margin-right: 20px">{{ item.FProjectName }}</span>
                    <span>{{ item.FProjectRole }}</span>
                  </div>
                  <div>
                    <span :id="'project-date' + index" style="color: #666666"
                      >{{ dayjs(item.FProjectStartDate).format('YYYY.MM') }}-{{
                        dayjs(item.FProjectEndDate).format('YYYY.MM')
                      }}</span
                    >
                    <div
                      :id="'edit-project' + index"
                      class="flx-align-center"
                      style="color: #177cfa; cursor: pointer; display: none"
                      @click="projectClick(index)"
                    >
                      <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                      编辑
                    </div>
                  </div>
                </div>
                <div style="margin-bottom: 24px; display: flex">
                  <div style="width: 72px; font-size: 18px">内容：</div>
                  <pre style="flex: 1">{{ item.FProjectDescription_Tag }}</pre>
                </div>
                <projectExperience ref="projectRef" v-model:show="item.show" @init="init" />
              </div>
            </div>
          </div>

          <div id="resume5" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">教育经历</div>
              <div
                class="flx-align-center"
                style="color: #177cfa; cursor: pointer"
                @click="addEducationClick"
              >
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <educationExperience
              v-model:show="state.educationExperienceShow"
              :information-data="state.informationData"
              @init="init"
            />
            <div class="resume-content">
              <div
                v-for="(item, index) in state.resumeData?.Jydata || []"
                :id="'show-education' + index"
                :key="index"
                style="margin-top: 12px"
                @mouseover="mouseover($event, 'education', index)"
                @mouseleave="mouseleave($event, 'education', index)"
              >
                <div class="flx-justify-between" style="align-items: start">
                  <div style="display: flex">
                    <div class="round-img flx-center">
                      <img src="@/assets/img/icon-resume5.png" width="34" height="34" />
                    </div>
                    <div class="education">
                      <div>
                        <span style="font-size: 18px; margin-right: 16px">{{
                          item.FLearningName
                        }}</span>
                        <span style="color: #666666"
                          >{{ dayjs(item.FStartTime).format('YYYY.MM') }}-{{
                            dayjs(item.FEndTime).format('YYYY.MM')
                          }}</span
                        >
                      </div>
                      <div class="flx-justify-between">
                        <span style="margin-right: 16px">{{ item.FSpecialty }}</span>
                        <span>{{ item.FEducationBackgroundName }}</span>
                      </div>
                    </div>
                  </div>
                  <div
                    :id="'edit-education' + index"
                    class="flx-align-center"
                    style="color: #177cfa; cursor: pointer; display: none"
                    @click="educationClick(index)"
                  >
                    <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                    编辑
                  </div>
                </div>
                <educationExperience
                  ref="educationRef"
                  v-model:show="item.show"
                  :information-data="state.informationData"
                  @init="init"
                />
              </div>
            </div>
          </div>

          <div id="resume6" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center" style="width: 170px">自定义添加</div>
              <!-- <div class="flx-align-center" style="color: #177cfa; cursor: pointer">
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div> -->
            </div>
            <div class="resume-content">
              <el-row style="width: 100%">
                <el-col :span="11">
                  <div class="custom-col" @click="openCertificate('FCredentials')">
                    <div class="flx-direction-column">
                      <span>资格证书</span>
                      <span style="color: #666666; font-size: 16px; margin-top: 12px"
                        >尽可能选择有含金量的证书</span
                      >
                    </div>
                    <img src="@/assets/img/icon-resume6.png" style="cursor: pointer" />
                  </div>
                  <div class="certificate-tag">
                    <el-tag
                      v-for="(item, index) in credentialsTag"
                      :key="index"
                      class="tag"
                      type="info"
                      size="large"
                      closable
                      @close="tagClose(index, 'Credentials')"
                      >{{ item }}</el-tag
                    >
                  </div>
                </el-col>
                <el-col :span="11">
                  <div class="custom-col" @click="openCertificate('SkillCertificate')">
                    <div class="flx-direction-column">
                      <span>技能证书</span>
                      <span style="color: #666666; font-size: 16px; margin-top: 12px"
                        >尽可能选择有含金量的证书</span
                      >
                    </div>
                    <img src="@/assets/img/icon-resume6.png" style="cursor: pointer" />
                  </div>
                  <div class="certificate-tag">
                    <el-tag
                      v-for="(item, index) in skillCertificateTag"
                      :key="index"
                      class="tag"
                      type="info"
                      size="large"
                      closable
                      @close="tagClose(index, 'SkillCertificate')"
                      >{{ item }}</el-tag
                    >
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div id="resume7" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">上传简历</div>
              <div
                class="flx-align-center"
                style="color: #177cfa; cursor: pointer"
                @click="uploadFile('JL')"
              >
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <div class="resume-content">
              <!-- <el-empty description="暂无简历" image-size="100" style="padding: 20px 0" /> -->
              <div
                v-for="(item, index) in state.resumeData?.Jldata || []"
                :id="'show-resume' + index"
                :key="index"
                class="flx-justify-between"
                @mouseover="mouseover($event, 'resume', index)"
                @mouseleave="mouseleave($event, 'resume', index)"
              >
                <div style="color: #177cfa" @click="openFile(item)">{{ item.FATTACHMENTNAME }}</div>
                <div
                  :id="'edit-resume' + index"
                  class="flx-align-center"
                  style="color: #177cfa; cursor: pointer; display: none"
                  @click="deleteFile(item.FID)"
                >
                  <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-DeleteFilled /></el-icon>
                  删除
                </div>
              </div>
            </div>
          </div>

          <div id="resume8" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">上传附件</div>
              <div
                class="flx-align-center"
                style="color: #177cfa; cursor: pointer"
                @click="uploadFile('FJ')"
              >
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <div class="resume-content">
              <!-- <el-empty description="暂无附件" image-size="100" /> -->
              <div
                v-for="(item, index) in state.resumeData?.Fjdata || []"
                :id="'show-annex' + index"
                :key="index"
                class="flx-justify-between"
                @mouseover="mouseover($event, 'annex', index)"
                @mouseleave="mouseleave($event, 'annex', index)"
              >
                <div style="color: #177cfa" @click="openFile(item)">{{ item.FATTACHMENTNAME }}</div>
                <div
                  :id="'edit-annex' + index"
                  class="flx-align-center"
                  style="color: #177cfa; cursor: pointer; display: none"
                  @click="deleteFile(item.FID)"
                >
                  <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-DeleteFilled /></el-icon>
                  删除
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-upload
    :action="state.action"
    :show-file-list="false"
    :on-success="updateImgSuccess"
    style="display: none"
  >
    <el-button ref="uploadImgRef" />
  </el-upload>
  <dragUpload
    v-model:show="state.dragShow"
    :message="state.message"
    :data="state.dragData"
    :action="state.dragAction"
    @init="init"
  />
  <previewResume v-model:show="state.previewResumeShow" :data="state.resumeData" />
  <previewFile
    v-model="state.previewFileShow"
    :suffix="state.fileSuffix"
    :url="state.fileUrl"
    :title="state.previewTitle"
  />
  <certificate
    v-model:show="state.certificateShow"
    :title="state.certificateTitle"
    :placeholder="state.certificatePlaceholder"
    :type="state.certificateType"
    :data="state.certificateData"
    @init="init"
  />
</template>

<script setup lang="ts">
import { resumeList, jobStatus } from './config'
import {
  getResume,
  updateResume,
  getPosition,
  deleteResume
} from '@/services/api/recruitmentManagement'
import { getInformation } from '@/services/api/common'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { baseURL } from '@/services'
import { deepCopy } from '@/utils'
import userInfo from './components/userInfo.vue'
import personalAdvantages from './components/personalAdvantages.vue'
import expectedPosition from './components/expectedPosition.vue'
import workExperience from './components/workExperience.vue'
import projectExperience from './components/projectExperience.vue'
import educationExperience from './components/educationExperience.vue'
import dragUpload from '@/components/dragUpload.vue'
import previewResume from './components/previewResume.vue'
import previewFile from '@/components/previewFile.vue'
import certificate from './components/certificate.vue'
import dayjs from 'dayjs'

const route = useRoute()
const userInfoStore = useUserInfoStore()

const state = reactive({
  userInfoShow: false,
  personalAdvantagesShow: false,
  expectedPositionShow: false,
  workExperienceShow: false,
  projectExperienceShow: false,
  educationExperienceShow: false,
  dragShow: false,
  previewResumeShow: false,
  previewFileShow: false,
  // 自定义证书参数
  certificateShow: false,
  certificateTitle: '',
  certificateType: '',
  certificatePlaceholder: '',
  previewTitle: '',
  certificateData: '',

  resumeActive: '个人信息',
  resumeData: {} as any,
  informationData: {} as any,
  cascaderOptions: [] as any,
  fileSuffix: '',
  fileUrl: '',
  action:
    baseURL +
    '/LQKJ.K3.NSJYBSystem.WebApi.WebApiEditService.UploadFile,LQKJ.K3.NSJYBSystem.WebApi.common.kdsvc',
  message: '',
  dragData: {
    Type: ''
  },
  dragAction:
    baseURL +
    '/LQKJ.K3.NSJYBSystem.WebApi.WebApiEditService.UploadAttachment,LQKJ.K3.NSJYBSystem.WebApi.common.kdsvc'
} as any)

const scrollRef = ref()
const userInfoRef = ref()
const advantagesRef = ref()
const expectedRef = ref()
const workExperienceRef = ref()
const projectRef = ref()
const educationRef = ref()
const uploadImgRef = ref()
const loading = ref(true)
const isFixed = ref(false)
const isAddExpected = ref(false)

const experience = computed(() => {
  const { FGoWorkCount } = state.resumeData?.Jbdata || {}
  if (FGoWorkCount) {
    if (FGoWorkCount < 10) {
      return `工作${FGoWorkCount}年`
    } else {
      return '10年以上经验'
    }
  } else {
    return ''
  }
})

const maskedWechat = computed(() => {
  const { FWechat } = state.resumeData?.Jbdata || {}
  if (FWechat && FWechat.trim()) {
    return FWechat.substring(0, 3) + '****'
  } else {
    return ''
  }
})

const maskedUserPhone = computed(() => {
  const { FUserPhone } = state.resumeData?.Jbdata || {}
  if (FUserPhone && FUserPhone.trim()) {
    return FUserPhone.substring(0, 3) + '****' + FUserPhone.substring(7)
  } else {
    return ''
  }
})

const credentialsTag = computed(() => {
  if (!state.resumeData?.Jbdata?.FCredentials.trim()) return []
  let list = state.resumeData?.Jbdata?.FCredentials?.split(',') || []
  return list.length ? list : []
})

const skillCertificateTag = computed(() => {
  if (!state.resumeData?.Jbdata?.FSkillCertificate.trim()) return []
  let list = state.resumeData?.Jbdata?.FSkillCertificate?.split(',') || []
  return list.length ? list : []
})

// 控制侧边菜单的位置
const handleScroll = () => {
  let directoryEl: any = document.querySelector('.directory')
  let footerEl: any = document.querySelector('.footer')
  const rect1 = directoryEl.getBoundingClientRect().bottom
  const rect2 = footerEl.getBoundingClientRect().top
  const rect4 = directoryEl.getBoundingClientRect().top
  const scrollTop = scrollRef.value?.getBoundingClientRect().top
  const distance = rect2 - rect1
  if (scrollTop <= 6) {
    scrollRef.value.style.marginLeft = '194px'
    isFixed.value = true
    if (distance <= 56) {
      directoryEl.classList.add('is-absolute')
    }
    if (rect4 > 20) {
      directoryEl.classList.remove('is-absolute')
    }
  } else {
    scrollRef.value.style.marginLeft = '15px'
    isFixed.value = false
  }
}

const selectDepartRemain = (departRemain: string) => {
  let row = jobStatus.find((item: any) => item.value === departRemain)
  return row ? row.label : jobStatus[3].label
}

const resumeChange = (row: any) => {
  state.resumeActive = row.name
}

const updateImgSuccess = async (response: any) => {
  if (response.code === 200) {
    let data: any = JSON.parse(JSON.stringify(userInfoRef.value.form))
    data.Model = { ...data.Model, ...state.resumeData?.Jbdata }
    data.Model.FPhotos = response.data.FileId
    const res: any = await updateResume({ Parmeter: data })
    if (res.code === 200) {
      userInfoStore.personalInfo.FPHOTOS = response.data.Url
      ElNotification.success({
        title: '更新头像',
        message: '更新成功'
      })
      init()
    }
  }
}

const mouseover = (e: any, type: string, index: number, listType?: string) => {
  const dataEl = document.getElementById(type + '-date' + index)
  if (dataEl) dataEl.style.display = 'none'
  const el: any = document.getElementById('edit-' + type + index)
  el.style.display = 'block'
}

const mouseleave = (e: any, type: string, index?: number) => {
  const dataEl = document.getElementById(type + '-date' + index)
  if (dataEl) dataEl.style.display = 'block'
  const el: any = document.getElementById('edit-' + type + index)
  el.style.display = 'none'
}

// 预览简历
const openResume = () => {
  state.previewResumeShow = true
}

// 预览简历
const openFile = (row: any) => {
  state.fileSuffix = row.FATTACHMENTNAME.split('.')[row.FATTACHMENTNAME.split('.').length - 1]
  state.fileUrl = baseURL + '/' + row.FFILEIDURL
  state.previewTitle = row.FATTACHMENTNAME.split('.')[0]
  state.previewFileShow = true
}

const openCertificate = (type: string) => {
  switch (type) {
    case 'SkillCertificate':
      state.certificateTitle = '添加技能证书'
      state.certificatePlaceholder = '请输入技能证书名称'
      state.certificateType = 'SkillCertificate'
      state.certificateData = state.resumeData?.Jbdata.FSkillCertificate
      break
    default:
      state.certificateTitle = '添加资格证书'
      state.certificatePlaceholder = '请输入资格证书名称'
      state.certificateType = 'FCredentials'
      state.certificateData = state.resumeData?.Jbdata.FCredentials
      break
  }
  state.certificateShow = true
}

const tagClose = async (index: number, type: string) => {
  let params
  if (type === 'Credentials') {
    let list = deepCopy(credentialsTag.value)
    list.splice(index, 1)
    let str = list.join(',')
    params = {
      NeedUpDateFields: ['FCredentials'],
      IsDeleteEntry: 'false',
      Model: {
        FID: 0,
        FCredentials: str //技能证书
      }
    }
  } else {
    let list = deepCopy(skillCertificateTag.value)
    list.splice(index, 1)
    let str = list.join(',')
    params = {
      NeedUpDateFields: ['FSkillCertificate'],
      IsDeleteEntry: 'false',
      Model: {
        FID: 0,
        FSkillCertificate: str //技能证书
      }
    }
  }
  const res: any = await updateResume({ Parmeter: params })
  if (res.code === 200) {
    init()
  }
}

// 修改个人信息
const userInfoClick = () => {
  const { FWechat, FUserPhone, FEmail } = state.resumeData.Jbdata
  userInfoRef.value.form.Model = {
    ...userInfoRef.value.form.Model,
    ...state.resumeData?.Jbdata,
    FEmail: FEmail.replace(/(\d{2})\d+(\d{3}@)/, '$1****$2'),
    FUserPhone: FUserPhone.substring(0, 3) + '****' + FUserPhone.substring(7),
    FWechat: FWechat?.trim() ? FWechat.substring(0, 3) + '****' : ''
  }
  state.userInfoShow = true
}

// 设置点击显示唯一
const setShow = (data: any[], showProp: string, showValue: boolean) => {
  data?.forEach((item: any) => (item[showProp] = showValue))
}

const addvantageClick = () => {
  advantagesRef.value.form.Parmeter.Model.FPersonalStrengths =
    state.resumeData?.Jbdata.FPersonalStrengths
  state.personalAdvantagesShow = true
}

const addExpectedClick = () => {
  setShow(state.resumeData.Qzdata, 'show', false)
  state.expectedPositionShow = true
}

const addWorkExperienceClick = () => {
  setShow(state.resumeData.Gzdata, 'show', false)
  state.workExperienceShow = true
}

const addProjectClick = () => {
  setShow(state.resumeData.Xmdata, 'show', false)
  state.projectExperienceShow = true
}

const addEducationClick = () => {
  setShow(state.resumeData.Jydata, 'show', false)
  state.educationExperienceShow = true
}

// 通用函数，用于处理点击事件的显示逻辑
const handleItemClick = (data: any[], index: number, stateProperty: string, refValue: any) => {
  state[stateProperty] = false // 关闭当前显示状态

  let row = data[index] // 获取对应索引的数据
  if (row && !row.show) {
    data.forEach((item: any, i: number) => {
      if (i === index) {
        item.show = true // 设置当前项为显示状态

        // 更新对应的表单数据
        if (refValue && refValue.value[index]) {
          refValue.value[index].form = { ...refValue.value[index].form, ...item }
          // 其他逻辑处理...
          switch (stateProperty) {
            case 'expectedPositionShow':
              expectedRef.value[index].form.FWorkCity = item.FWorkCity.split('/')
              expectedRef.value[index].salaryChange(item.FExpectSalaryMin)
              break
            case 'workExperienceShow':
              workExperienceRef.value[index].form = {
                ...workExperienceRef.value[index].form,
                FPossessSkills: item.FPossessSkills !== ' ' ? item.FPossessSkills.split(',') : []
              }
              break
          }
        }
      } else {
        item.show = false // 其他项设为不显示
      }
    })
  }
}

// 点击期望职位处理函数
const expectedClick = (index: any) => {
  handleItemClick(state.resumeData?.Qzdata, index, 'expectedPositionShow', expectedRef)
}

// 点击工作经验处理函数
const workExperienceClick = (index: any) => {
  handleItemClick(state.resumeData?.Gzdata, index, 'workExperienceShow', workExperienceRef)
}

// 点击项目处理函数
const projectClick = (index: any) => {
  handleItemClick(state.resumeData?.Xmdata, index, 'projectExperienceShow', projectRef)
}

// 点击教育经验处理函数
const educationClick = (index: any) => {
  handleItemClick(state.resumeData?.Jydata, index, 'educationExperienceShow', educationRef)
}

const uploadFile = (type: string) => {
  if (type === 'JL') {
    state.message = '上传简历'
    state.dragData.Type = 'JL'
  } else {
    state.message = '上传附件'
    state.dragData.Type = 'FJ'
  }
  state.dragShow = true
}

const init = async () => {
  loading.value = true
  const res: any = await getResume()
  if (res.code === 200) {
    if (isAddExpected.value && res.data?.Qzdata?.length < 3) {
      state.resumeActive = '期望职位'
      state.expectedPositionShow = true
      isAddExpected.value = false
    }
    state.resumeData = res.data
    loading.value = false
  }
}

const deleteFile = async (ID: number) => {
  const res: any = await deleteResume({ Type: 'E', ID })
  if (res.code === 200) {
    init()
  }
}

const initInformation = async () => {
  const res: any = await getPosition()
  if (res.code === 200) {
    state.cascaderOptions = res.data.LevelJobS
    const info: any = await getInformation({
      AuxiliaryS: ['Salary', 'LevelJob', 'Degree2']
    })
    if (info.code === 200) {
      state.informationData = info.data
      init()
    }
  }
}

onMounted(() => {
  const { addExpected } = route.query
  if (addExpected) isAddExpected.value = true
  window.addEventListener('scroll', handleScroll, true)
  initInformation()
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped>
@import url(./style/editResume.scss);
</style>
