<template>
  <view class="tab-screen flex">
    <view class="tab-header"
          :class="['tab-mode-'+headerComponent,compact?'screen_padding_lg':'']"
    >
      <view
          v-for="(item,index) in sTabs"
          :key="index"
          @click="switchTab(index)"
          :class="['tab-mode-item-'+headerComponent,sValue === index?'tab-header-item-select':'',compact?'tab-header-item-compact':'']"
          class="tab-header-item"
          :style="{
            'margin-left': compact && margin && index !== 0 ? margin:0+'rpx',
            'color': sValue === index ? color : ''
          }"
      >
        <text>{{item.label}}</text>
      </view>

      <!-- 底部线 -->
      <view v-if="headerComponent===headerComponents.line" class="tab-header-line jEnd aCenter"
            v-show="offsetLefts[sValue] && width"
            :class="['tab-style-'+headerComponent]"
            :style="{
              'transform': 'translateX('+(offsetLefts[sValue] ?offsetLefts[sValue] :(sValue * avgWidth))+'rpx)',
              'opacity':opacity,
              'width':avgWidth+'rpx'
            }"
      >
        <view class="tab-header-default-line" :style="{'background-color':color}"></view>
      </view>
      <view v-else-if="headerComponent===headerComponents.default"
            class="tab-header-line jEnd aCenter" v-show="offsetLefts[sValue] && width"
            :style="{
              'transform': 'translateX('+(offsetLefts[sValue] ?offsetLefts[sValue] :(sValue * avgWidth))+'rpx)',
              'opacity':opacity,
              'width':avgWidth+'rpx'
            }"
      >
        <view class="tab-header-default-line" :style="{'background-color':color}"></view>
      </view>

    </view>
    <view class="tab-content" :style="{'background-color':backgroundColor}">

      <swiper
          class="tab-swiper"
          :current="sValue"
          @change="change"
          :skip-hidden-item-layout="true"
      >
        <swiper-item
            v-for="(item,index) in sTabs"
            :key="index"
        >
          <slot v-if="item.loading && index === 0" name="tab-0"></slot>
          <slot v-if="item.loading && index === 1" name="tab-1"></slot>
          <slot v-if="item.loading && index === 2" name="tab-2"></slot>
          <slot v-if="item.loading && index === 3" name="tab-3"></slot>
          <slot v-if="item.loading && index === 4" name="tab-4"></slot>
        </swiper-item>
      </swiper>
    </view>

  </view>

</template>

<script>
import props from './props';
import mixins from './mixins/index';
export default {
  name: "tab",
  mixins,
  props
}
</script>

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

</style>