<template>
    <div class="w-full flex justify-between py-3 items-center">
        <div class="flex-grow flex flex-row  ">
               <van-tabs v-model="active" class='w-11/12'  swipeable @change="tabChange">
                    <van-tab v-for='(i,index) in listData' :key="index" :title='i.text'>
                    </van-tab>
                </van-tabs> 
        </div>
        <div class="w-30 flex-grow-0">
            <app-icon name="icon-shaixuan"></app-icon>
        </div>
    </div>

</template>

<script lang="ts">
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
Vue.use(Tab)
Vue.use(Tabs)
const listData = [
    {
        text:'剧本'
    },
        {
        text:'花絮视频'
    },
        {
        text:'电影'
    },
        {
        text:'影视原声'
    },
        {
        text:'更多'
    },
        {
        text:'更多'
    },
    {
        text:'更多'
    },
]

export default Vue.extend({
    data(){
        return{
            listData,
            active: 2,
        }
    },
  props: {

  },
  components:{
      'app-icon':()=>import('@/components/common/Icon.vue')
  },
  methods:{
      tabChange(item:any){
          this.$emit('tabChange',listData[item])
      }
  }

});
</script>
