<template>
  <tab
    :data="tabData"
  >
    <template v-slot:header="{data,select,trigger}">
      <div class="center">
        <header class="use-ranking-tab row relative">
          <aside
              v-for="(item,index) in data"
              :key="'ranking-tab-'+index"
              class="center relative"
              :class="{
                'use-ranking-tab-active': index === select,
                'cursor-pointer': index !== select
             }"
              @click="trigger(index)"
          >{{item.label}}</aside>
          <div class="use-ranking-tab-line absolute"
            :style="{width:avgWidth+'%',left: select * avgWidth+'%'}"
          ></div>
        </header>
      </div>

    </template>

    <template
      v-for="(item,index) in tabData"
      v-slot:[item.slot]
    >
      <ranking-list
        :key="'use-ranking-tab-'+index"
        :type="type"
        :time="item.time"
      ></ranking-list>
    </template>
  </tab>
</template>

<script>
import {
  tab,
} from '$components';
import props from '../props';
import tabData from '../data/tab';
import rankingList from '../../ranking-list';
export default {
  name: "ranking-tab",
  data(){
    return {
      tabData
    }
  },
  computed:{
    avgWidth(){
      return 100/this.tabData.length;
    }
  },
  props,
  components:{
    tab,
    rankingList
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>