<template>
  <div class="statistics">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <el-tab-pane
        label="Workload Statistics"
        name="workLoadStat"
      >
        <workload-stats v-if="activeTab==='workLoadStat'" />
      </el-tab-pane>

      <el-tab-pane
        label="Reviewer Enrollment Statistics"
        name="reviewerEnrollmentsStat"
      >
        <enrollments-stats-by-Reviewer v-if="activeTab==='reviewerEnrollmentsStat'" />
      </el-tab-pane>

      <el-tab-pane
        label="Trial Enrollment Reviewer"
        name="trialEnrollmentsStats"
      >
        <trial-enrollments-stats v-if="activeTab==='trialEnrollmentsStats'" />
      </el-tab-pane>

      <el-tab-pane
        label="Participates Statistics"
        name="participatesStats"
      >
        <participates-stats v-if="activeTab==='participatesStats'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import WorkloadStats from './components/WorkloadStats'
// import EnrollmentsStats from './components/EnrollmentsStats'

import EnrollmentsStatsByReviewer from './components/EnrollmentsStatsByReviewer'

import TrialEnrollmentsStats from './components/TrialEnrollmentsStats'
import ParticipatesStats from './components/ParticipatesStats'
export default {
  name: 'Statistics',
  components: {
    WorkloadStats,
    // EnrollmentsStats,
    EnrollmentsStatsByReviewer,
    TrialEnrollmentsStats,
    ParticipatesStats
  },
  data() {
    return {
      activeTab: 'workLoadStat',
      load: {
        workLoadStat: true,
        reviewerEnrollmentsStat: false,
        trialEnrollmentsStats: false,
        participatesStats: false
      }
    }
  },
  methods: {
    clickTab(tab, event) {
      if (this.load[tab.name] === false) {
        this.load[tab.name] = true
      }
    }
  }
}
</script>
<style lang="scss">
.statistics{
  .el-tabs{
      height: 100%;
      display: flex;
      flex-direction: column;
      flex: 1;
      .el-tabs__header {
        height: 40px;
        margin-bottom:5px;
      }
      .el-tabs__content{
        flex: 1;
        .el-tab-pane{
          height: 100%;
        }
      }
    }
    .stats-wrapper{
      height: 100%;
      .page{
        text-align: right;
        padding-top: 3px;
      }
    }
}
</style>
