<template>
  <popup v-model:value="value" content-animate="scale" @close="$emit('destroy-popup')">
    <section class="popup-ranking-container flex relative">
      <div @click="close" class="ranking-close-wrap cursor-pointer absolute animate-rotate-hover">
        <icon type="close" class="ranking-close"></icon>
      </div>
      <!--  头部   -->
      <header class="popup-ranking-header"></header>
      <!--  标题   -->
      <div class="popup-ranking-title">排行榜</div>
      <!--  剩余的tab   -->
      <section class="flex-1">
        <tab
          :data="tabData"
        >
          <template v-slot:header="{data,select,trigger}">
            <article class="ranking-tab-padding">
              <header class="ranking-tab-header rowACenter relative">
                <aside
                    class="flex-1 center"
                    v-for="(item,index) in data"
                    :key="'ranking-tab-'+index"
                    :class="{
                      'ranking-tab-active': index === select
                    }"
                >
                  <span
                    :class="{
                    'cursor-pointer': index !== select
                    }"
                    @click="trigger(index)"
                  >{{item.label}}</span>
                </aside>
                <div class="absolute tanking-tab-line center"
                  :style="{width:avgWidth+'%',left:select * avgWidth+'%'}"
                >
                  <div></div>
                </div>
              </header>
            </article>

          </template>

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

        </tab>
      </section>
    </section>
  </popup>
</template>

<script>
import {
  Popup,
  icon,
  tab
} from '$components';
import mixins from '../mixins';
import props from '../props';
import rankingTab from '../components/ranking-tab';
export default {
  name: "popup-ranking",
  components:{
    Popup,
    icon,
    tab,
    rankingTab
  },
  mixins,
  props
}
</script>

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