<template>
  <div class="curriculumVitae" v-loading="loading">
    <div class="leftMenu">
      <div class="title">{{ $t('curriculumVitae:menu:title') }}</div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="handleSelect"
        background-color="#eee" active-text-color="#000">
        <el-menu-item index="info">
          {{ $t('curriculumVitae:menu:info') }}
        </el-menu-item>
        <el-menu-item index="summarize">{{
          $t('curriculumVitae:menu:summarize')
        }}</el-menu-item>
        <el-menu-item index="specialty">
          {{ $t('curriculumVitae:menu:specialty') }}
        </el-menu-item>
        <el-menu-item index="educationalExperience">{{
          $t('curriculumVitae:menu:EducationalExperience')
        }}</el-menu-item>
        <el-menu-item index="continuingTraining">{{
          $t('curriculumVitae:menu:ContinuingTraining')
        }}</el-menu-item>
        <el-menu-item index="scientificResearchProject">{{
          $t('curriculumVitae:menu:ScientificResearchProject')
        }}</el-menu-item>
        <el-menu-item index="clinicalTrials">{{
          $t('curriculumVitae:menu:clinicalTrials')
        }}</el-menu-item>
        <el-menu-item index="treatise">{{
          $t('curriculumVitae:menu:treatise')
        }}</el-menu-item>
        <el-menu-item index="other">{{
          $t('curriculumVitae:menu:other')
        }}</el-menu-item>
        <el-menu-item index="pay">{{
          $t('curriculumVitae:menu:pay')
        }}</el-menu-item>
        <el-menu-item index="setting" v-if="isPM">{{
          $t('curriculumVitae:button:seeting')
        }}</el-menu-item>
      </el-menu>
    </div>
    <div class="main" id="main">
      <div class="content">
        <div class="title">
          <div>{{ $t('curriculumVitae:content:title') }}</div>
          <div class="btnBox">
            <!-- <el-button type="text" @click.stop="openSetting" v-if="isPM">
              {{ $t('curriculumVitae:button:seeting') }}
            </el-button> -->
            <el-button type="text" @click.stop="openHoliday">
              {{ $t('curriculumVitae:button:holiday') }}
            </el-button>
            <!-- <el-button type="text">{{
              $t('common:button:downloadTpl')
            }}</el-button>
            <el-button type="text">{{
              $t('curriculumVitae:button:importResume')
            }}</el-button> -->
            <el-button type="text" @click.stop="openPreview">
              {{ $t('curriculumVitae:button:preview') }}
            </el-button>
            <el-button type="text" @click.stop="openPreview(false)">
              {{ $t('common:button:previewBlindState') }}
            </el-button>
          </div>
        </div>
        <!--个人信息-->
        <div class="box" id="info">
          <info :DATA="{
            ...reviewerData.BasicInfoView,
            ...reviewerData.EmploymentView,
          }" :reviewerId.sync="reviewerId" :isEN="isEN" @getInfo="getDetail" />
        </div>
        <!--概述-->
        <div class="box" id="summarize">
          <summarize :DATA="{
            ...reviewerData.SummarizeInfo,
          }" :reviewerId.sync="reviewerId" :trialId="trialId" :isEN="isEN" @getInfo="getDetail" />
        </div>
        <!--专业-->
        <div class="box" id="specialty">
          <specialty :DATA="{
            ...reviewerData.SpecialtyView,
          }" :isEN="isEN" :reviewerId.sync="reviewerId" @getInfo="getDetail" />
        </div>
        <!--教育经历-->
        <div class="box" id="educationalExperience">
          <educationalExperience :DATA="reviewerData.EducationList" :isEN="isEN" :reviewerId.sync="reviewerId"
            @getInfo="getDetail" />
        </div>
        <!--进修培训-->
        <div class="box" id="continuingTraining">
          <continuingTraining :DATA="reviewerData.PostgraduateList" :isEN="isEN" :reviewerId.sync="reviewerId"
            @getInfo="getDetail" />
        </div>
        <!--科研课题-->
        <div class="box" id="scientificResearchProject">
          <scientificResearchProject :DATA="{ ...reviewerData.ResearchPublicationView }" :isEN="isEN"
            :reviewerId.sync="reviewerId" @getInfo="getDetail" />
        </div>
        <!--临床试验-->
        <div class="box" id="clinicalTrials">
          <clinicalTrials :DATA="{ ...reviewerData.TrialExperienceView }" :isEN="isEN" :reviewerId.sync="reviewerId"
            :trialId="trialId" @getInfo="getDetail" />
        </div>
        <!--gcp证书-->
        <div class="box" id="treatise">
          <treatise :DATA="{ ...reviewerData.ResearchPublicationView }" :isEN="isEN" :reviewerId.sync="reviewerId"
            @getInfo="getDetail" />
        </div>
        <!--其他相关经历-->
        <div class="box" id="other">
          <other :DATA="{ ...reviewerData.ResearchPublicationView }" :isEN="isEN" :reviewerId.sync="reviewerId"
            @getInfo="getDetail" />
        </div>
        <div class="box" id="pay">
          <pay :DATA="{ ...reviewerData.PaymentModeInfo }" :isEN="isEN" :reviewerId.sync="reviewerId"
            @getInfo="getDetail" />
        </div>
        <div class="box" id="setting" v-if="isPM">
          <setting :isEN="isEN" :reviewerId.sync="reviewerId" />
        </div>
      </div>
      <div class="rightFile">
        <!--简历附件-->
        <curriculum :isEN="isEN" :reviewerId.sync="reviewerId" />
        <!--资历证书-->
        <certificate :DATA="reviewerData.AttachmentList" :isEN="isEN" :reviewerId.sync="reviewerId"
          @getInfo="getDetail" />
        <!--协议-->
        <agreement :DATA="reviewerData.AttachmentList" :isEN="isEN" :isPM="isPM" :reviewerId.sync="reviewerId"
          @getInfo="getDetail" />
      </div>
    </div>
    <el-dialog :visible.sync="visible" fullscreen append-to-body>
      <div style="height: 100%; overflow: auto">
        <preview :isEN="isEN" :reviewerId.sync="reviewerId" :trialId="trialId" :isAll="isAll" v-if="visible" />
      </div>
    </el-dialog>
    <holiday v-if="holidayVisible" :reviewerId.sync="reviewerId" :visible.sync="holidayVisible" />
    <!-- <setting
      v-if="settingVisible"
      :reviewerId.sync="reviewerId"
      :visible.sync="settingVisible"
    /> -->
  </div>
</template>
<script>
import curriculum from './components/file/curriculum.vue'
import certificate from './components/file/certificate.vue'
import agreement from './components/file/agreement.vue'
import info from './components/info/info.vue'
import summarize from './components/info/summarize.vue'
import specialty from './components/info/specialty.vue'
import educationalExperience from './components/info/educationalExperience.vue'
import continuingTraining from './components/info/continuingTraining.vue'
import scientificResearchProject from './components/info/scientificResearchProject.vue'
import clinicalTrials from './components/info/clinicalTrials.vue'
import treatise from './components/info/treatise.vue'
import other from './components/info/other.vue'
import pay from './components/info/pay.vue'
import holiday from './components/info/holiday.vue'
import setting from './components/info/setting.vue'
import preview from './preview.vue'
import { getDetail } from '@/api/reviewers'
import { mapMutations } from 'vuex'
export default {
  components: {
    curriculum,
    certificate,
    agreement,
    info,
    summarize,
    specialty,
    educationalExperience,
    continuingTraining,
    scientificResearchProject,
    clinicalTrials,
    treatise,
    other,
    pay,
    holiday,
    preview,
    setting,
  },
  data() {
    return {
      activeIndex: 'info',
      isScrollAuto: true,
      visible: false,
      loading: false,
      reviewerId: '',
      trialId: '',
      reviewerData: {
        BasicInfoView: {},
        EmploymentView: {},
        AckSowList: [],
        AttachmentList: [],
        AuditView: {},
        EducationList: [],
        IntoGroupInfo: {},
        PaymentModeInfo: {},
        PostgraduateList: [],
        ResearchPublicationView: {},
        SowList: [],
        SpecialtyView: {},
        SummarizeInfo: {},
        TrialExperienceView: {},
      },
      dom: null,

      holidayVisible: false,
      isAll: true,

      // settingVisible: false,
    }
  },
  computed: {
    isEN() {
      return this.$i18n.locale !== 'zh'
    },
    isPM() {
      // return true
      return this.hasPermi(['role:pm'])
    },
  },
  async created() {
    this.$i18n.locale =
      this.$route.query.lang || zzSessionStorage.getItem('lang')
    this.trialId =
      this.$route.query.trialId || zzSessionStorage.getItem('trialId')
    await this.setLanguage(this.$i18n.locale)
    this.$updateDictionary()
    if (sessionStorage.getItem('reviewerId')) {
      this.reviewerId = sessionStorage.getItem('reviewerId')
      this.getDetail()
    } else if (this.$route.query.Id) {
      this.reviewerId = this.$route.query.Id
      sessionStorage.setItem('reviewerId', this.reviewerId)
      this.getDetail()
    }
  },
  mounted() {
    this.dom = document.getElementById('main')
    // 监听滚动事件
    this.dom.addEventListener('scroll', this.onScroll)
  },
  destroy() {
    // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
    this.dom.removeEventListener('scroll', this.onScroll)
    this.dom = null
  },
  methods: {
    ...mapMutations({ setLanguage: 'lang/setLanguage' }),

    // 获取详情
    async getDetail() {
      try {
        let id = this.reviewerId
        let trialId = this.trialId
        this.loading = true
        let res = await getDetail(id, trialId)
        this.loading = false
        if (res.IsSuccess) {
          this.reviewerData = res.Result
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
    handleSelect(key, keyPath) {
      const navContent = document.getElementById(key)
      if (navContent) {
        const scrollTop = navContent.offsetTop
        document.getElementById('main').scrollTop = scrollTop
        // document.documentElement.scrollTop = scrollTop
      }
    },
    onScroll() {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll('.content .box')
      // 所有锚点元素的 offsetTop
      const offsetTopArr = []
      navContents.forEach((item) => {
        offsetTopArr.push(item.offsetTop)
      })
      // 获取当前文档流的 scrollTop
      const scrollTop = document.getElementById('main').scrollTop
      // 定义当前点亮的导航下标
      let navItem = null
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是 n 了
        if (scrollTop >= offsetTopArr[n]) {
          navItem = navContents[n]
        }
      }
      // 把下标赋值给 vue 的 data
      if (navItem && navItem.id) {
        this.activeIndex = navItem.id
      }
    },
    // 预览简历
    openPreview(isAll = true) {
      this.isAll = isAll
      this.visible = true
    },
    // 假期计划
    openHoliday() {
      this.holidayVisible = true
    },
    // 设置
    // openSetting() {
    //   this.settingVisible = true
    // },
  },
}
</script>
<style lang="scss" scoped>
.curriculumVitae {
  position: relative;
  height: 100%;
}

.title {
  line-height: 50px;
  background-color: #fff;
  text-align: center;
  font-weight: bold;
}

.leftMenu {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 100%;
  background-color: #eee;
  border-right: 1px solid #eee;

  ::v-deep .el-menu {
    padding: 5px 5px 0;
  }

  ::v-deep .is-active {
    background-color: #fff !important;
    position: relative;

    &::before {
      display: block;
      content: '';
      width: 5px;
      height: 15px;
      background-color: #f00;
      position: absolute;
      left: 8px;
      top: calc(50% - 8px);
    }
  }
}

.main {
  width: calc(100% - 300px);
  height: 100%;
  overflow: auto;
  margin-left: 300px;
  display: flex;
  align-items: flex-start;
}

.content {
  width: calc(100% - 300px);
  padding: 0 50px 0 20px;

  .title {
    line-height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.box {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 15px;
  margin-bottom: 20px;
}

::v-deep .noData {
  color: #909399;
  text-align: center;
}

.rightFile {
  width: 300px;
  padding-right: 10px;

  ::v-deep .title {
    line-height: 50px;
    background-color: #fff;
    text-align: left;
    font-weight: bold;
  }

  ::v-deep .fileBox {
    background-color: #eee;
    padding: 10px;
    font-size: 14px;
    border-radius: 3px;
  }

  ::v-deep .file_title {
    line-height: 40px;
    font-weight: bold;
  }

  ::v-deep .btnBox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }

  ::v-deep .file {
    width: 100%;
    display: flex;
    margin-bottom: 10px;

    .name {
      width: 70%;
      white-space: nowrap;
      /* 文本不会换行，会在同一行内继续，直到遇到<br>标签为止 */
      text-overflow: ellipsis;
      /* 当文本溢出包含它的容器时，显示省略号(...)来表示被截断的文本 */
      overflow: hidden;
      /* 隐藏溢出容器的文本 */
    }

    i {
      cursor: pointer;
      margin: 3px;
      color: #409eff;
    }

    .disable {
      cursor: not-allowed;
      color: #909399;
    }
  }
}
</style>