<!-- 标签栏组件 -->
<template>
  <div :class="['mtp-tabbar', 'mtp-tabbar--' + theme]">
    <ul class="list">
      <li :class="['list-item', activeIndex === index && 'active']" v-for="(item,index) in data" :key="index" @click="onChange(item,index)">
        {{item.label}}
      </li>
    </ul>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import { Tabbar } from './type'

export default defineComponent({
  emits: ['update:active', 'change'],
  props: {
    data: {
      type: Array as PropType<Tabbar[]>,
      default: () => ([]),
    },
    dataIndex: {
      type: Number,
      default: 0,
    },
    theme: {
      type: String as PropType<'bar' | 'menu'>,
      default: 'bar',
    }
  },
  setup(props, { emit }) {
    const activeIndex = ref(props.dataIndex);

    const onChange = (item: Tabbar, index: number) => {
      activeIndex.value = index;
      emit('update:active', index);
      emit('change', item, index);
    }

    return {
      activeIndex,
      onChange
    }
  }
})
</script>

<style lang="less">
@import './index.less';
</style>