<template>
  <div class="payment-settings">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <el-tab-pane label="Rates" name="Rates" style="overflow-y: auto;">
        <rank-based-rates v-if="load.Rates" />
        <volume-reward v-if="load.Rates" />
      </el-tab-pane>
      <el-tab-pane label="Reviewers Data" name="ReviewersData">
        <reviewers-data v-if="load.ReviewersData" />
      </el-tab-pane>
      <el-tab-pane label="Trials Data" name="TrialsData">
        <trials-data v-if="load.TrialsData" />
      </el-tab-pane>
      <el-tab-pane label="Exchange Rate" name="ExchangeRate">
        <exchange-rate v-if="load.ExchangeRate" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import RankBasedRates from './components/RankBasedRates'
import VolumeReward from './components/VolumeReward'
import ReviewersData from './components/ReviewersData'
import TrialsData from './components/TrialsData'
import ExchangeRate from './components/ExchangeRate'

export default {
  name: 'Payment',
  components: { RankBasedRates, VolumeReward, ReviewersData, TrialsData, ExchangeRate },
  data() {
    return {
      activeTab: 'Rates',
      load: {
        Rates: true,
        ReviewersData: false,
        TrialsData: false,
        ExchangeRate: false
      }
    }
  },
  computed: {},
  created() {
    if (this.$route.query.activeIndex) {
      this.activeTab = this.$route.query.activeIndex
    }
  },

  methods: {
    clickTab(tab, event) {
      if (this.load[tab.name] === false) {
        this.load = {
          Rates: false,
          ReviewersData: false,
          TrialsData: false,
          ExchangeRate: false
        }
        this.load[tab.name] = true
      }
    }
  }
}
</script>
<style lang="scss">
.payment-settings{
  padding: 10px;
  position: relative;
  height: 100%;
  .el-tabs{
      height: 100%;
      display: flex;
      flex-direction: column;
      .el-tabs__header {
        height: 40px;
      }
      .el-tabs__content{
       flex: 1;
        .el-tab-pane{
          height: 100%;
        }
      }
    }
}
</style>
