<!-- eslint-disable vue/no-mutating-props -->
<!--
 * @Author: Devin
 * @Date: 2023-02-15 16:58:54
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:50:21
 * @Description: 标签页
-->
<template>
  <el-tabs v-model="activeTab" @tab-click="handleClick">
    <template v-for="(tab, index) in tabs" :key="index">
      <el-tab-pane :label="tab?.['label']" :name="tab?.['name']">
        <slot></slot>
      </el-tab-pane>
    </template>
  </el-tabs>

  <div v-if="Object.keys(components)?.length" class="__common-tabs-content">
    <keep-alive>
      <component
        :is="components[activeTab]"
        :key="activeTab"
        :params="comParams"
      ></component>
    </keep-alive>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, ref } from 'vue';

const emits = defineEmits(['handleClick']);
const props = defineProps({
  tabs: {
    type: Array,
    default: () => []
  },
  activeTab: {
    type: String,
    default: () => ''
  },
  components: {
    type: Array,
    default: () => []
  },
  comParams: {
    type: Object,
    default: () => {}
  }
});

const activeTab = ref<any>(props.activeTab || '');
function handleClick(tab: any) {
  emits('handleClick', tab);
}
</script>

<script lang="ts">
export default {
  name: 'CommonTabs'
};
</script>

<style scoped lang="scss">
.__common-tabs-content {
  min-height: 300px;
  width: 100%;
}
</style>