<template>
  <section class="room-ranking-container flex">
    <tab
      :data="tabData"
      :auto-height-fixed="true"
      class="room-ranking-auto-height"
      ref="tab"
    >
      <template v-slot:header="{data,trigger,select}">
        <header class="room-ranking-header-tab rowACenter relative">
          <aside
              v-for="(item,index) in data"
              :key="'room-ranking-item-'+index"
              class="room-ranking-item flex-1 center"
              :class="{
                'room-ranking-item-line':index!==0,
                'room-ranking-item-select': select === index,
                'cursor-pointer': select !== index
              }"
              @click="trigger(index)"
          >
            {{item.label}}
          </aside>
          <div class="room-ranking-line absolute center"
               :style="{width: avgWidth+'%',left: select * avgWidth + '%'}"
          >
            <div></div>
          </div>
        </header>
      </template>

      <template
        v-for="(item,index) in tabData"
        v-slot:[item.slot]
      >
        <room-ranking-list
          :key="'room-ranking-list-'+index"
          :type="item.type"
          v-model:value="rankingShowStatus"
        ></room-ranking-list>
      </template>

    </tab>
    <div class="flex-1">
      <room-chat></room-chat>
    </div>
  </section>
</template>

<script>
import {
  tab
} from '$components';
import tabData from '../data/tab';
import roomRankingList from '../components/room-ranking-list';
import roomChat from '../components/room-chat';
export default {
  name: "room-ranking",
  data(){
    return {
      tabData,
      rankingShowStatus:false
    }
  },

  computed:{
    avgWidth(){
      return 100 / tabData.length;
    }
  },

  components:{
    tab,
    roomRankingList,
    roomChat
  }
}
</script>

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