<template>
  <tab
    :data="data"
    v-if="data && data.length > 0"
  >
    <template v-slot:header="{data,select,trigger}">
      <header class="rowACenter view-tabs-header">
        <swiper
          :swiper-option="swiperOption"
          v-if="swiper"
        >
          <swiper-item
              v-for="(item,index) in data"
              :key="'view-tab-'+index"
              class="view-tabs-item-button center"
              :class="{
                'view-tabs-item-active': index === select,
                'cursor-pointer': index !== select
             }"
              @click="trigger(index)"
          >
            <aside>{{item.label}}</aside>
          </swiper-item>
        </swiper>
        <aside v-else
               v-for="(item,index) in data"
               :key="'view-tab-'+index"
               class="view-tabs-item-button view-tabs-noSwiper-margin center"
               :class="{
                'view-tabs-item-active': index === select,
                'cursor-pointer': index !== select
             }"
               @click="trigger(index)"
        >{{item.label}}</aside>

      </header>
    </template>

    <template
      v-for="(item,index) in data"
      v-slot:[item.slot]
    >
      <component
        :is="item.component || useComponent"
        v-if="item.component || useComponent"
        v-bind="item"
        :key="'view-menu-tab-'+index"
      ></component>
    </template>
  </tab>
</template>

<script>
import {
  tab,
  swiper,
  swiperItem
} from '$components';
import props from '../props';
import viewFriends from '$views/view-friends';
import viewRoom from '$views/view-room';
import unit from "$utils/unit/unit";
export default {
  name: "view-menu-tab",
  props,

  data(){
    return {
      swiperOption: {
        slidesPerView:'auto',
        spaceBetween: unit.unitPx(13),
        threshold:unit.unitPx(4),
        centeredSlides:false
      }
    }
  },

  components:{
    tab,
    viewFriends,
    swiper,
    swiperItem,
    viewRoom
  }
}
</script>

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