<template>
  <section class="view-menu flex">
    <!--   banner   -->
    <swiper class="view-menu-banner overflow" :autoplay="true" :key="'swiper-'+banner.length">
      <swiper-item
        v-for="(item,index) in banner"
        :key="'view-menu-banner-'+index"
      >
        <v-image mode="cover" @click="triggerOpenBanner(item)" class="view-menu-banner overflow" radius="0.05rem" :src="item.image"></v-image>
      </swiper-item>
    </swiper>
    <!-- 排行榜  -->
    <div class="rowACenter view-ranking cursor-pointer" @click="openRanking">
      <img src="../images/ranking.png" class="ranking-icon" />
      <span class="view-ranking-label">排行榜</span>
      <div class="flex-1"></div>
      <div class="view-ranking-avatar relative"
           v-for="(item,index) in rankingData"
           :key="'view-ranking-'+index"
      >
        <v-image
            class="screen view-ranking-avatar-target"
            radius="50%"
            :border-width="2"
            :border-color="item.color"
            backgroundColor="#fff"
            :src="rankingUseData[index] && rankingUseData[index].head_pic"
        ></v-image>
        <img src="@/assets/images/ranking-1.png" v-if="index===0" class="absolute view-ranking-crown" />
      </div>
      <icon type="more" class="view-ranking-more"></icon>
    </div>
    <!-- 聊天室  -->
    <section class="flex-1">
      <tab
        :data="tabData"
      >

        <template v-slot:header="{data,select,trigger}">
          <header class="rowACenter view-menu-tab-header between">
            <aside
              v-for="(item,index) in data"
              :key="'view-menu-'+index"
              class="view-menu-tab-item row relative"
              :class="{
                'view-menu-tab-item-select': index === select,
                'cursor-pointer': index !== select
              }"
              @click="trigger(index)"
            >
              <span class="relative">{{item.label}}</span>
              <div v-if="index === select" class="view-menu-line absolute"></div>
              <layout-dot v-if="index===1" :value="$store.state.chat.chatCount" class="relative"></layout-dot>
            </aside>
          </header>
        </template>

        <template
          v-for="(item,index) in tabData"
          v-slot:[item.slot]
        >
          <div v-if="item.login && !$store.getters.isLogin" class="screen center">
            <div class="view-menu-login center cursor-pointer" @click="openLogin">登录</div>
          </div>
          <component
            :key="'view-menu-'+index"
            v-else-if="item.component"
            :is="item.component"
            v-bind="item"
          ></component>
        </template>

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

<script>
import mixins from '../mixins';
import {
  swiper,
  swiperItem,
  vImage,
  icon,
  tab
} from '$components';

import tabData from '../data/tab';

import rankingData from "../data/ranking";

import layoutDot from '$layout/layout-dot';

import viewMessage from '../components/view-message';

import viewMenuTab from '../components/view-menu-tab';
import popup,{PopupExportComponent} from "$utils/tool/popup";

export default {
  name: "view-menu",

  mixins,

  data:function () {
    return {
      rankingData,
      tabData
    }
  },

  components:{
    swiper,
    swiperItem,
    vImage,
    icon,
    tab,
    layoutDot,
    viewMenuTab,
    viewMessage
  },

  methods:{
    openRanking(){
      return popup.$open(PopupExportComponent.ranking);
    }
  },

  created() {

    this.$store.dispatch('initializationRoomCatePromise').then(()=>{

      this.tabData[0].data = this.$store.state.cate.roomCate.map((item,index)=>{
        return {
          ...item,
          slot:'room-cate-'+index
        }
      });

    });

  }
}
</script>

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