<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 in list' :key="i.id" :title='i.categoryName' :id='i.id'>
                    </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,{ PropType } from 'vue';
import { Tab, Tabs } from 'vant';
interface Category{
    categoryName:string
    createDate:string
    englishName:string
    id:number
    updatedDate:string
}
Vue.use(Tab)
Vue.use(Tabs)

export default Vue.extend({
      props: {
      list:{
          type:Array as PropType<Category[]>,
          required: true
      }
    },
    data(){
        return{
            active: 0,
            listData:this.list 
        }
    },

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

});
</script>
