<template>
  <div v-loading="pageLoading" style="height:100%;display:flex;flex-direction: column;">
    <div style="height:50px">
      <div style="text-align:right;">
        <el-switch
          v-model="isEnglish"
          active-text="EN"
          inactive-text="中文"
          style="margin-right:20px;"
        />
      </div>
      <div style="text-align:center;">
        <h3>{{ title }}</h3>
      </div>
    </div>
    <div style="flex:1;margin-top:50px;overflow-y: auto;">
      <el-collapse v-model="activeNames">
        <status-info :basic-info="basicInfo" :status-list="statusList" :doctor-id="doctorId" :holiday="holiday" :is-english="isEnglish" />
        <el-collapse-item :title="$t('resumeInfo:title:BasicInfo')" name="1">
          <basic-info :basic-info="doctorInfo.BasicInfoView" :is-english="isEnglish" />
        </el-collapse-item>
        <el-collapse-item :title="$t('resumeInfo:title:Employment')" name="2">
          <Employment :employment="workInfo" :is-english="isEnglish" />
        </el-collapse-item>
        <el-collapse-item :title="$t('resumeInfo:title:Specialty')" name="3">
          <Specialty :specialty="specialtyList" :is-english="isEnglish" />
        </el-collapse-item>
        <el-collapse-item :title="$t('resumeInfo:title:Education&Training')" name="4">
          <education-training :education-list="doctorInfo.EducationList" :postgraduate-list="doctorInfo.PostgraduateList" :is-english="isEnglish" />
        </el-collapse-item>
        <el-collapse-item :title="$t('resumeInfo:title:Research&Publication')" name="5">
          <research-publication :research-info="doctorInfo.ResearchPublicationView" :is-english="isEnglish" />
        </el-collapse-item>
        <el-collapse-item :title="$t('resumeInfo:title:TrialExperience')" name="6">
          <trial-experience v-if="doctorInfo.TrialExperienceView" :trial-experience="doctorInfo.TrialExperienceView" :is-english="isEnglish" />
        </el-collapse-item>
        <el-collapse-item :title="$t('resumeInfo:title:Credentials')" name="7">
          <Credentials v-if="doctorInfo.AttachmentList" :attachment-list="doctorInfo.AttachmentList" :doctor-id="doctorId" />
        </el-collapse-item>
        <el-collapse-item :title="$t('resumeInfo:title:Resume')" name="8">
          <Resume v-if="doctorInfo.AttachmentList" :resume-list="doctorInfo.AttachmentList" />
        </el-collapse-item>
        <el-collapse-item :title="$t('resumeInfo:title:Agreements')" name="9">
          <Agreements v-if="doctorInfo.AttachmentList" :doctor-info="doctorInfo" />
        </el-collapse-item>
        <el-collapse-item :title="$t('resumeInfo:title:Comment')" name="10">
          <Comment :status-list="statusList" />
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { getDetail } from '@/api/reviewers'
import StatusInfo from './components/StatusInfo'
import BasicInfo from './components/BasicInfo'
import Employment from './components/Employment'
import Specialty from './components/Specialty'
import EducationTraining from './components/EducationTraining'
import ResearchPublication from './components/ResearchPublication'
import TrialExperience from './components/TrialExperience'
import Credentials from './components/Credentials'
import Resume from './components/Resume'
import Agreements from './components/Agreements'
import Comment from './components/Comment'
import {mapMutations} from "vuex";
export default {
  components: { StatusInfo, BasicInfo, Employment, Specialty, EducationTraining, ResearchPublication, TrialExperience, Credentials, Resume, Agreements, Comment },
  data() {
    return {
      isEnglish: true,
      htmlTitle: '',
      title: '',
      holiday: '',
      loading: false,
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
      statusList: {},
      basicInfo: {},
      workInfo: {},
      researchInfo: {},
      certificateTbl: [],
      resumeList: [],
      specialtyList: {
        Speciality: '',
        ReadingType: '',
        Subspeciality: ''
      },
      doctorInfo: {},
      agreementList: [],
      pageLoading: false,
      doctorId: ''
    }
  },
  watch: {
    isEnglish(v) {
      if (v === true) {
        this.$i18n.locale = 'en'
        this.setLanguage('en')
        this.$updateDictionary()
      } else {
        this.$i18n.locale = 'zh'
        this.setLanguage('zh')
        this.$updateDictionary()
      }
      this.title =this.doctorInfo.BasicInfoView?`${this.doctorInfo.BasicInfoView.FirstName} ${this.doctorInfo.BasicInfoView.LastName}${this.$t('resumeInfo:title:Details')}`:''
    }
  },
  mounted() {
    this.isEnglish = !!((this.$route.query.isEnglish === true || this.$route.query.isEnglish === 'true'))
    this.isEnglish = this.$i18n.locale === 'zh' ? false : true
    this.doctorId = this.$route.query.doctorId
    this.initForm()
  },
  methods: {
    ...mapMutations({ setLanguage: 'lang/setLanguage' }),
    initStatus() {
      if (this.doctorInfo.AuditView) {
        const res = this.doctorInfo.AuditView
        this.statusList.ResumeStatus = res.ResumeStatus === 0 ? '' : res.ResumeStatus === 1 ? 'Yes' : 'No'
        this.statusList.CooperateStatus = res.CooperateStatus === 0 ? '' : res.CooperateStatus === 1 ? 'Yes' : 'No'
        this.statusList.ReviewStatus = res.ReviewStatus === 0 ? '' : res.ReviewStatus === 1 ? 'Yes' : 'No'
        this.statusList.AcceptingNewTrial = res.AcceptingNewTrial ? 'Yes' : 'No'
        this.statusList.ActivelyReading = res.ActivelyReading ? 'Yes' : 'No'

        this.statusList.AdminComment = res.AdminComment
        this.statusList.Submitted = this.doctorInfo.IntoGroupInfo ? this.doctorInfo.IntoGroupInfo.Submitted : 0
        this.statusList.Approved = this.doctorInfo.IntoGroupInfo ? this.doctorInfo.IntoGroupInfo.Approved : 0
        this.statusList.Reading = this.doctorInfo.IntoGroupInfo ? this.doctorInfo.IntoGroupInfo.Reading : 0
      }
    },
    initEmploymentInfo() {
      if (this.doctorInfo.EmploymentView) {
        this.workInfo = this.doctorInfo.EmploymentView
        this.workInfo.Department =
          this.workInfo.DepartmentId === 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5' ? (this.workInfo.DepartmentOther ? this.workInfo.DepartmentOther : 'Other') : this.workInfo.Department
        this.workInfo.DepartmentCN = this.workInfo.DepartmentId === 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5' ? this.workInfo.DepartmentOtherCN : this.workInfo.DepartmentCN

        this.workInfo.RankOther = this.workInfo.RankOther ? 'Other - ' + this.workInfo.RankOther : 'Other'
        this.workInfo.Rank = this.workInfo.RankId === 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5' ? this.workInfo.RankOther : this.workInfo.Rank
        this.workInfo.RankCN = this.workInfo.RankId === 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5' ? this.workInfo.RankOtherCN : this.workInfo.RankCN

        if (this.workInfo.PositionId === 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5') {
          this.workInfo.Position = this.workInfo.PositionOther
          this.workInfo.PositionCN = this.workInfo.PositionOtherCN
        } else if (this.workInfo.PositionId === 'f30a074b-2b47-4a92-97ec-e15086d37883') {
          this.workInfo.Position = 'None'
          // this.workInfo.PositionCN = '无'
        } else {
          this.workInfo.Position = this.workInfo.Position
          this.workInfo.PositionCN = this.workInfo.PositionCN
        }
        this.workInfo.PositionOther = this.workInfo.PositionOther ? 'Other - ' + this.workInfo.PositionOther : 'Other'
      }
    },
    initSpecialtyInfo() {
      if (this.doctorInfo.SpecialtyView) {
        const result = this.doctorInfo.SpecialtyView
        this.specialtyList.Department = result.DepartmentName ? result.DepartmentName : 'Other-' + result.DepartmentOther

        if (result.ReadingTypeOther) {
          result.ReadingTypeList.push('Other-' + result.ReadingTypeOther)
        }
        this.specialtyList.ReadingType = result.ReadingTypeList.length > 0 ? result.ReadingTypeList.join(', ') : ''
        if (result.ReadingTypeOtherCN) {
          result.ReadingTypeCNList.push(result.ReadingTypeOtherCN)
        }
        this.specialtyList.ReadingTypeCNList = result.ReadingTypeCNList.length > 0 ? result.ReadingTypeCNList.join(', ') : ''

        if (result.SubspecialityOther) {
          result.SubspecialityList.push('Other-' + result.SubspecialityOther)
        }
        if (result.SubspecialityOtherCN) {
          result.SubspecialityCNList.push(result.SubspecialityOtherCN)
        }

        this.specialtyList.Subspeciality = result.SubspecialityList.length > 0 ? result.SubspecialityList.join(', ') : ''
        this.specialtyList.SubspecialityCNList = result.SubspecialityCNList.length > 0 ? result.SubspecialityCNList.join(', ') : ''

        this.specialtyList.Speciality =
          result.SpecialityId === 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5' ? 'Other-' + result.SpecialityOther : result.Speciality

        this.specialtyList.SpecialityCN = result.SpecialityId === 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5' ? result.SpecialityOtherCN : result.SpecialityCN
      }
    },
    initForm() {
      if (this.doctorId) {
        this.pageLoading = true
        getDetail(this.doctorId).then(res => {
          this.pageLoading = false
          if (res.IsSuccess) {
            if (res.Result) {
              this.doctorInfo = res.Result
              this.holiday = res.Result.InHoliday ? 'Yes' : 'No'
              !this.doctorInfo.ResearchPublicationView ?  this.doctorInfo.ResearchPublicationView = {} : '';
              this.title = `${this.doctorInfo.BasicInfoView.FirstName} ${this.doctorInfo.BasicInfoView.LastName}${this.$t('resumeInfo:title:Details')}`
              this.htmlTitle = this.title
              this.initStatus()
              this.initEmploymentInfo()
              this.initSpecialtyInfo()
            }
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-collapse-item__header{
  background-color: #e9eef1;
  padding: 0 10px;
}

</style>
