<template>
  <div class="aos-tabs">
    <div class="tab-content">
      <div v-for="(tab, key) in tabs" :key="key" class="tab" :class="{ activeTab: key === currentIndex }" @click="handleClick(key, tab)">
        <i class="tabIcon" :class="tab.icon"></i>
        <span>{{ tab.name }}</span>
      </div>
    </div>
    <div class="operate">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AosTabs',
  props: {
    tabs: {
      type: Array,
      required: true,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {
      currentIndex: 0
    };
  },
  methods: {
    handleClick (key, tab) {
      this.currentIndex = key
      this.$emit('currentTab', tab)
    }
  }
};
</script>
