<template>
  <section class="tab-container flex"

  >

    <!--   头部组件   -->
    <slot name="header" :data="vTabData" :trigger="triggerTo" :select="vTabSelect">
      <header class="rowACenter tab-header">
        <slot
          name="header-item"
          v-for="(item,index) in vTabData"
          :item="item"
          :index="index"
          :trigger="triggerTo"
        >
          <aside
              :key="'scroll-index-'+index"
              :class="{'tab-header-margin':index!==0,'tab-header-select': index === vTabSelect}"
              class="cursor-pointer relative"
              @click="triggerTo(index)"
          >
            <span class="relative">{{item.label}}</span>
            <div class="absolute tab-header-line" v-if="index === vTabSelect"></div>
          </aside>
        </slot>

      </header>
    </slot>
    <!--   内容组件   -->
    <article class="overflow"
      :class="{'flex-1': !autoHeight && !autoHeightFixed,'auto-height-fixed':autoHeightFixed}"
    >
      <swiper v-if="swipeOption" ref="swiper" :swiperOption="swipeOption">
        <swiper-item
          v-for="item in vTabData"
          :key="item.slot"
        >
          <slot v-if="item.loading" :name="item.slot">{{item.slot}}--{{item.label}}</slot>
        </swiper-item>
      </swiper>
    </article>
  </section>
</template>

<script>
import props from '../props';
import mixins from '../mixins';
import swiper from '$components/swiper';
import swiperItem from '$components/swiper-item';
export default {
  name: "tab",
  props,
  mixins,
  components:{
    swiper,
    swiperItem
  }
}
</script>

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