<template>
  <div>
    <tab v-model="tabIndex" style="height: 80px" :nav-list="navList">
      <div slot-scope="{ activeIndex, nav }">activeIndex:{{activeIndex}} {{nav.label}}</div>
    </tab>
    <tab v-model="tabIndex" type="light" style="height: 80px">
      <iot-tab-item label="年">年1</iot-tab-item>
      <iot-tab-item label="月">月</iot-tab-item>
      <iot-tab-item label="周">周</iot-tab-item>
      <iot-tab-item label="日">日</iot-tab-item>
    </tab>
    <tab v-model="tabIndex" type="dark" style="height: 80px">
      <iot-tab-item label="年">年2</iot-tab-item>
      <iot-tab-item label="月">月</iot-tab-item>
      <iot-tab-item label="周">周</iot-tab-item>
      <iot-tab-item label="日">日</iot-tab-item>
    </tab>
    <tab v-model="tabIndex" @onTabSpill="onTabSpill" nav-bg-color="rgba(0, 130, 255, 1)" nav-border-color="#fff" item-color="red" active-color="#fff" style="height: 80px" >
      <iot-tab-item label="年">年3</iot-tab-item>
      <iot-tab-item label="月">月</iot-tab-item>
      <iot-tab-item label="周">周</iot-tab-item>
      <iot-tab-item label="日">日</iot-tab-item>
    </tab>
    <tab v-model="tabIndex" style="height: 80px" type="light" nav-type="highlight">
      <iot-tab-item label="年">年4</iot-tab-item>
      <iot-tab-item label="月">月</iot-tab-item>
      <iot-tab-item label="周">周</iot-tab-item>
      <iot-tab-item label="日">日</iot-tab-item>
    </tab>
    <tab v-model="tabIndex" style="height: 80px" type="dark" nav-type="highlight" nav-color="red" :nav-width="320">
      <iot-tab-item label="年">年5</iot-tab-item>
      <iot-tab-item label="月">月</iot-tab-item>
      <iot-tab-item label="周">周</iot-tab-item>
      <iot-tab-item label="日">日</iot-tab-item>
    </tab>
    <tab v-model="tabIndex" style="height: 80px">
      <span slot="tab-nav-item" slot-scope="{ label, index, active, navProps }">
        {{label}}<s v-if="navProps.icon">{{navProps.icon}}</s>
        <s v-if="navProps.num">{{navProps.num}}</s>
        <s v-if="active">A</s>
      </span>
      <iot-tab-item label="年" :nav-props="{icon: 'icon-Y'}">年</iot-tab-item>
      <iot-tab-item label="月" :exists="tabExists1">月</iot-tab-item>
      <iot-tab-item label="周" :nav-props="propsWeek">周</iot-tab-item>
      <iot-tab-item label="日">日</iot-tab-item>
    </tab>
    <a @click="propsWeek.num++">周Num++</a>
    <a @click="tabExists1 = !tabExists1">toggle tab</a>
    <div>currentIndex: {{ tabIndex }}</div>
    <a @click="tabIndex++">下一个</a>
    <a @click="tabIndex--">上一个</a>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Tab, TabItem as IotTabItem, SwitchButton } from '../../tunas'



export default Vue.extend({
  components: {
    Tab, IotTabItem
  },
  data () {
    return {
      tabIndex: 0,
      showWeek: true,
      labelWeek: '周',
      tabExists1: true,
      propsWeek: {
        num: '1'
      },
      navList: [ { label: 'title1' }, { label: 'title2' }, { label: 'title3' }, { label: 'title4' } ]
    }
  },
  methods: {
    onChange (v) {
      console.log('change', v)
    },
    onTabSpill (tab, count) {
      if (tab > count) {
        this.tabIndex = 0
      } else {
        this.tabIndex = count
      }
    }
  },
  mounted () {
  }
})
</script>
