<template>
  <demo-section>
    <demo-block :title="$t('basicUsage')">
      <drip-tabs v-model="active" :color="'red'" :normalColor="'green'">
        <drip-tab-item :title="$t('tab') + index" v-for="index in tabs" :key="index">
          {{ $t('content') }} {{ index }}
        </drip-tab-item>
      </drip-tabs>
    </demo-block>

    <demo-block :title="$t('title2')">
      <drip-tabs @scroll="onScroll">
        <drip-tab-item v-for="index in 8" :title="$t('tab') + index" :key="index">
          {{ $t('content') }} {{ index }}
        </drip-tab-item>
      </drip-tabs>
    </demo-block>

    <demo-block :title="$t('title3')">
      <drip-tabs @disabled="onClickDisabled">
        <drip-tab-item v-for="index in 3" :title="$t('tab') + index" :disabled="index === 2" :key="index">
          {{ $t('content') }} {{ index }}
        </drip-tab-item>
      </drip-tabs>
    </demo-block>

    <demo-block :title="$t('title4')">
      <drip-tabs type="card">
        <drip-tab-item v-for="index in 6" :title="$t('tab') + index" :key="index">
          {{ $t('content') }} {{ index }}
        </drip-tab-item>
      </drip-tabs>
    </demo-block>

     <demo-block :title="$t('title4')">
      <drip-tabs type="square">
        <drip-tab-item v-for="index in 6" :title="$t('tab') + index" :key="index">
          {{ $t('content') }} {{ index }}
        </drip-tab-item>
      </drip-tabs>
    </demo-block>

    <demo-block :title="$t('title5')">
      <drip-tabs @click="onClick">
        <drip-tab-item v-for="index in 2" :title="$t('tab') + index" :key="index">
          {{ $t('content') }} {{ index }}
        </drip-tab-item>
      </drip-tabs>
    </demo-block>

    <demo-block :title="$t('title6')">
      <drip-tabs :active="active" sticky>
        <drip-tab-item :title="$t('tab') + index" v-for="index in tabs" :key="index">
          {{ $t('content') }} {{ index }}
        </drip-tab-item>
      </drip-tabs>
    </demo-block>

    <demo-block :title="$t('title7')">
      <drip-tabs :active="active">
        <drip-tab-item v-for="index in 2" :key="index">
          <div slot="title">
            <drip-icon name="more-o" />{{ $t('tab') }}
          </div>
          {{ $t('content') }} {{ index }}
        </drip-tab-item>
      </drip-tabs>
    </demo-block>

    <demo-block :title="$t('title8')">
      <drip-tabs :active="active" swipeable>
        <drip-tab-item :title="$t('tab') + index" v-for="index in tabs" :key="index">
          {{ $t('content') }} {{ index }}
        </drip-tab-item>
      </drip-tabs>
    </demo-block>
  </demo-section>
</template>

<script>
export default {
  i18n: {
    'zh-CN': {
      tab: '标签 ',
      title2: '横向滚动',
      title3: '禁用标签',
      title4: '样式风格',
      title5: '点击事件',
      title6: '粘性布局',
      title7: '自定义标签',
      title8: '滑动切换',
      disabled: ' 已被禁用'
    },
    'en-US': {
      tab: 'Tab ',
      content: 'content of tab',
      title2: 'Swipe Tabs',
      title3: 'Disabled Tab',
      title4: 'Card Style',
      title5: 'Click Event',
      title6: 'Sticky',
      title7: 'Custom Tab',
      title8: 'Swipeable',
      disabled: ' is disabled'
    }
  },

  data() {
    return {
      active: 2,
      tabs: [1, 2, 3, 4]
    };
  },

  methods: {
    onClickDisabled(index, title) {
      this.$notify({
        content: title + this.$t('disabled'),
        type: 'success'
      });
    },

    onClick(index, title) {
      this.$notify({
        content: title,
        type: 'success'
      });
    },

    onScroll(e) {
      console.log(e);
    }
  }
};
</script>

<style lang="postcss">
.demo-tab {
  margin-bottom: 300px;
  font-size: 24px;
}
</style>
