<template>
  <div class="app-container">
    <el-tabs v-model="active" :before-leave="checkLeave" @tab-click="clickTab">
      <el-tab-pane :label="$t('system:reviewer:tab:BasicInfo')" name="BasicInfo">
        <basic-info v-if="load.BasicInfo" />
      </el-tab-pane>
      <el-tab-pane :label="$t('system:reviewer:tab:Employment')" name="Employment">
        <Employment v-if="load.Employment" />
      </el-tab-pane>
      <el-tab-pane :label="$t('system:reviewer:tab:Specialty')" name="Specialty">
        <specialty v-if="load.Specialty" />
      </el-tab-pane>
      <!--Education & Training-->
      <el-tab-pane :label="$t('system:reviewer:tab:Education&Training')" name="EducationTraining">
        <education-training v-if="load.EducationTraining" />
      </el-tab-pane>
      <!--Research & Publication-->
      <el-tab-pane :label="$t('system:reviewer:tab:Research&Publication')" name="ResearchPublication">
        <research-publication v-if="load.ResearchPublication" />
      </el-tab-pane>
      <el-tab-pane :label="$t('system:reviewer:tab:TrialExperience')" name="TrialExperience">
        <trial-experience v-if="load.TrialExperience" />
      </el-tab-pane>
      <el-tab-pane :label="$t('system:reviewer:tab:Credentials')" name="Credentials">
        <Credentials v-if="load.Credentials" />
      </el-tab-pane>
      <el-tab-pane :label="$t('system:reviewer:tab:Resumes')" name="Resumes">
        <Resumes v-if="load.Resumes" />
      </el-tab-pane>
      <el-tab-pane :label="$t('system:reviewer:tab:Agreements')" name="Agreements">
        <Agreements v-if="load.Agreements" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
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 Resumes from './components/Resumes'
import Agreements from './components/Agreements'
import Setting from './components/Setting'
import { changeURLStatic, getQueryString } from '@/utils/history.js'
import {  mapMutations } from 'vuex'
export default {
  components: {
    BasicInfo,
    Employment,
    Specialty,
    EducationTraining,
    ResearchPublication,
    TrialExperience,
    Credentials,
    Resumes,
    Agreements,
    Setting
  },
  data() {
    return {
      active: 'BasicInfo',
      load: {
        BasicInfo: true,
        Employment: false,
        Specialty: false,
        EducationTraining: false,
        ResearchPublication: false,
        TrialExperience: false,
        Credentials: false,
        Resumes: false,
        Agreements: false,
        Setting: false
      }
    }
  },
  created(){
    this.$i18n.locale = this.$route.query.lang
    this.setLanguage(this.$route.query.lang)
  },
  mounted() {
    this.active = this.$route.query.tabActive
    if (this.$route.query.Id === '' && this.active !== 'BasicInfo') {
      this.$router.push({ path: '/ReviewersResearch' })
    }
    this.load[this.active] = true
  },
  methods: {
    ...mapMutations({ setLanguage: 'lang/setLanguage' }),
    clickTab(tab, event) {
      if (this.load[tab.name] === false) {
        this.load[tab.name] = true
      }
      changeURLStatic('tabActive', tab.name)
      const id = getQueryString('Id')
      this.$router.push({ path: `/ReviewersResearchForm?Id=${id}&tabActive=${tab.name}&ReviewStatus=${getQueryString('ReviewStatus')}&lang=${this.$i18n.locale}` })
    },
    checkLeave() {
      const id = getQueryString('Id')
      if (!id) {
        this.$message({
          message: 'Please fill in the basic information first',
          type: 'warning'
        })
        return false
      } else { return true }
    },
    getQueryString(name) {
      console.log(window.location.href)
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) {
        return unescape(r[2])
      } else {
        return null
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-tabs{
  height: 100%;
  .el-tabs__content{
    height: calc(100% - 50px);
    overflow-y: auto;
  }
}
</style>
