<script lang="ts" setup>
import { ITabsView } from '@/model/base-interface';
import { computed, PropType } from 'vue';

const props = defineProps({
  list: {
    type: Array as PropType<ITabsView[]>,
    default: () => [],
    required: true,
  },
  currentIdx: {
    type: Number,
    default: 0,
    required: false,
  },
});

// 选中tab选项卡
const activeName = computed(() => {
  return props.list[props.currentIdx].name;
});

// 当tab页被点击时，向父组件发送tab被选中且tab切换事件
const emit = defineEmits(['select']);
function handleClick(tab: any) {
  emit('select', tab);
}
</script>

<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in props.list"
      :key="item.name"
      :label="$t(item.label)"
      :name="item.name"
    ></el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap) {
  padding: 0;
  .el-tabs__item {
    padding: 8px 16px 10px 16px;
  }
}
</style>
