<template>
    <div class="tab">
      <ul class="tab-list flex wt">
        <li @click="toggle(0)" :style="current!=1?activeStyle:''" class="tab-list-item flex_one tc">{{array[0]}}</li>
        <li @click="toggle(1)" :style="current==1?activeStyle:''" class="tab-list-item flex_one tc">{{array[1]}}</li>
      </ul>
      <slot name="common">

      </slot>
      <mt-tab-container class="swiper" v-model="current">
        <mt-tab-container-item id="0">
            <slot name="tabl">

            </slot>
        </mt-tab-container-item>
        <mt-tab-container-item id="1">
            <slot name="tabr">

            </slot>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
</template>
<script>
    export default {
        name: "tab",
        props:['list','active','color'],
        data(){
            return{
              array:this.list?this.list:['菜单1','菜单2'],
              current:this.active?this.active:'0'
            }
        },
        watch:{
          current:function () {
            console.log(this.current)
          }
        },
        computed:{
          activeStyle:function () {
            return {
              'color':'#6590dc',
              'border-bottom':'2px solid #6590dc'
            }
          }
        },
        methods:{
          toggle(idx){
            this.current = idx.toString()
            this.$emit('change',this.current)
            // console.log(this.current)
          },
        }
    }
</script>
<style scoped>
  .tab-list-item{
    padding: .2rem;
    color: #555555;
    font-size: .28rem;
  }
  .tab-list-item.active{
    color: #6590dc;
    border-bottom: 2px solid #6590dc;
  }
</style>
