<template>
  <div>
    <tab>
      <tab-item
        :selected="demo1 === '已发货'"
        @click.native="demo1 = '已发货'"
      >
        已发货
      </tab-item>
      <tab-item
        :selected="demo1 === '未发货'"
        @click.native="demo1 = '未发货'"
      >
        未发货
      </tab-item>
      <tab-item
        :selected="demo1 === '全部订单'"
        @click.native="demo1 = '全部订单'"
      >
        全部订单
      </tab-item>
    </tab>
    <br>
    <br>
    <br>
    <divider>different active class</divider>
    <tab :animate="false">
      <tab-item
        active-class="active-6-1"
        :selected="demo6 === '已发货'"
        @click.native="demo6 = '已发货'"
      >
        已发货
      </tab-item>
      <tab-item
        active-class="active-6-2"
        :selected="demo6 === '未发货'"
        @click.native="demo6 = '未发货'"
      >
        未发货
      </tab-item>
      <tab-item
        active-class="active-6-3"
        :selected="demo6 === '全部订单'"
        @click.native="demo6 = '全部订单'"
      >
        全部订单
      </tab-item>
    </tab>
    <br>
    <br>
    <br>
    <divider>no animation</divider>
    <tab :animate="false">
      <tab-item
        :selected="demo5 === '已发货'"
        @click.native="demo5 = '已发货'"
      >
        已发货
      </tab-item>
      <tab-item
        :selected="demo5 === '未发货'"
        @click.native="demo5 = '未发货'"
      >
        未发货
      </tab-item>
      <tab-item
        :selected="demo5 === '全部订单'"
        @click.native="demo5 = '全部订单'"
      >
        全部订单
      </tab-item>
    </tab>
    <br>
    <br>
    <br>
    <divider>disabled</divider>
    <tab>
      <tab-item
        :selected="demoDisabled === 'A'"
        @click.native="demoDisabled = 'A'"
      >
        A
      </tab-item>
      <tab-item
        :selected="demoDisabled === 'B'"
        @click.native="demoDisabled = 'B'"
      >
        B
      </tab-item>
      <tab-item
        :selected="demoDisabled === 'Disabled'"
        disabled
        style="color:#ececec;"
      >
        Disabled
      </tab-item>
    </tab>
    <br>
    <br>
    <br>
    <tab
      :line-width="2"
      active-color="#fc378c"
      :index.sync="index"
    >
      <tab-item
        v-for="item in list2"
        :key="item"
        class="vux-center"
        :selected="demo2 === item"
        @click.native="demo2 = item"
      >
        {{ item }}
      </tab-item>
    </tab>
    <swiper
      :index.sync="index"
      height="100px"
      :show-dots="false"
    >
      <swiper-item
        v-for="item in list2"
        :key="item"
      >
        <div class="tab-swiper vux-center">
          {{ item }} Container
        </div>
      </swiper-item>
    </swiper>
    <br>
    <x-button
      :disabled="list2.length === 5"
      type="primary"
      @click.native="addTab"
    >
      Add tab item
    </x-button>
    <x-button
      :disabled="list2.length <= 2"
      type="primary"
      @click.native="removeTab"
    >
      Remove tab item
    </x-button>
    <x-button
      type="primary"
      @click.native="next"
    >
      Active next current: {{ index }}
    </x-button>
    <x-button
      type="primary"
      @click.native="prev"
    >
      Active prev current: {{ index }}
    </x-button>
    <br>
    <br>
    <tab :line-width="2">
      <tab-item
        v-for="item in list3"
        :key="item"
        :selected="demo3 === item"
        :class="{'vux-1px-r': index===0}"
        @click.native="demo3 = item"
      >
        {{ item }}
      </tab-item>
    </tab>
    <br>
    <br>
    <br>
    <sticky>
      <tab :line-width="1">
        <tab-item
          v-for="item in list4"
          :key="item"
          :selected="demo4 === item"
          @click.native="demo4 = item"
        >
          {{ item }}
        </tab-item>
      </tab>
    </sticky>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
</template>

<script>
import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem } from '../components/_index'
const list = () => ['精选', '美食', '电影', '酒店', '外卖']

export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem
  },
  data () {
    return {
      demo1: '未发货',
      list2: list(),
      demo5: '未发货',
      demo2: '美食',
      list3: ['收到的消息', '发出的消息'],
      demo3: '收到的消息',
      list4: ['正在正映', '即将上映'],
      demo4: '即将上映',
      demo6: '未发货',
      demoDisabled: 'A',
      index: 0
    }
  },
  methods: {
    addTab () {
      if (this.list2.length < 5) {
        this.list2 = list().slice(0, this.list2.length + 1)
      }
    },
    removeTab () {
      if (this.list2.length > 1) {
        this.list2 = list().slice(0, this.list2.length - 1)
      }
    },
    next () {
      if (this.index === this.list2.length - 1) {
        this.index = 0
      } else {
        ++this.index
      }
    },
    prev () {
      if (this.index === 0) {
        this.index = this.list2.length - 1
      } else {
        --this.index
      }
    }
  }
}
</script>

<style lang="less">
@import '../styles/1px.less';
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
</style>
