<template>
  <div>
    <co-header fixed title="Tab-container">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <div class="nav page-content-main">
        <co-button size="small" @click.native.prevent="active = 'tab-container1'">tab 1</co-button>
        <co-button size="small" @click.native.prevent="active = 'tab-container2'">tab 2</co-button>
        <co-button size="small" @click.native.prevent="active = 'tab-container3'">tab 3</co-button>
      </div>
      <div>
        <co-tab-container @tabChange="changeTab" v-model="active" swipeable :cls="'co-buttons-fan'" :parentRows="parentRows">
          <co-tab-container-item id="tab-container1">
            <co-cell v-for="n in 7" title="tab-container 1" :key='n'></co-cell>
          </co-tab-container-item>
          <co-tab-container-item id="tab-container2">
            <co-cell v-for="n in 3" title="tab-container 2" :key='n'></co-cell>
          </co-tab-container-item>
          <co-tab-container-item id="tab-container3">
            <co-cell v-for="n in 5" title="tab-container 3" :key='n'></co-cell>
          </co-tab-container-item>
        </co-tab-container>

        <co-tab-container v-model="activeFlush">
          <co-tab-container-item id="A">
            <co-cell title="没有滑动 A"></co-cell>
          </co-tab-container-item>
          <co-tab-container-item id="B">
            <co-cell title="没有滑动 B"></co-cell>
          </co-tab-container-item>
          <co-tab-container-item id="C">
            <co-cell title="没有滑动 C"></co-cell>
          </co-tab-container-item>
        </co-tab-container>
        <div class="nav">
          <co-button size="small" @click.native.prevent="activeFlush = 'A'">tab A</co-button>
          <co-button size="small" @click.native.prevent="activeFlush = 'B'">tab B</co-button>
          <co-button size="small" @click.native.prevent="activeFlush = 'C'">tab C</co-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="es6">
  export default {
    name: 'page-tab-container',
    data() {
      return {
        active: 'tab-container1',
        activeFlush: 'C',
        parentRows: [{
          label: '热门排行', id: 'tab-container1', cls: ''
        }, {
          label: '应用分类', id: 'tab-container2', cls: ''
        }, {
          label: '我的应用', id: 'tab-container3', cls: ''
        }]
      };
    },
    methods: {
      changeTab: function(index) {
        var self = this;
        console.log(self.parentRows);
      }
    }
  };
</script>

<style lang="css" scoped>
    .item {
        display: inline-block;
    }

    .nav {
        padding: 0.5rem;
    }

    .link {
        color: inherit;
        padding: 1rem;
        display: block;
    }
</style>
