<template>
  <div class="app-container reviewer-reading">
    <el-tabs v-model="active" @tab-click="clickTab">

      <el-tab-pane label="Timepoint" name="TP">
        <timePoint v-if="active=='TP'" />
      </el-tab-pane>

      <el-tab-pane label="Global" name="Global">
        <global v-if="active=='Global'" />
      </el-tab-pane>

      <el-tab-pane label="Adjusetment" name="AD">
        <adjustment v-if="active=='AD'" />
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>

import TimePoint from './tp/TP'
import Global from './global/Global'
import Adjustment from './ad/AD'
import { mapGetters } from 'vuex'
import store from '@/store'
export default {
  name: 'Reading',
  components: { TimePoint, Global, Adjustment },
  data() {
    return {
      active: 'TP',
      load: {
        TP: true,
        Global: false,
        AD: false
      }
    }
  },
  computed: {
    ...mapGetters(['reviewerWorkLoadActiveName'])
  },
  created() {
    if (this.$route.query.TrialId) { zzSessionStorage.setItem('trialId', this.$route.query.TrialId) }
  },
  mounted() {
    this.active = this.reviewerWorkLoadActiveName
  },

  methods: {
    clickTab(tab, event) {
      this.active = tab.name

      store.dispatch('reading/setActiveName', tab.name)
    }
  }

}
</script>
<style lang="scss">
.reviewer-reading{
  .el-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-tabs__header {
      margin: 0;
      height: 40px;
    }
    .el-tabs__content{
      flex: 1;
      .el-tab-pane{
        height: 100%;
        overflow-y: auto;
      }
    }
  }

}
</style>
