<template>
  <el-tabs v-model="innerTabValue" class="user-tabs" @tab-change="handleTabChange"
    :class="hideTab ? 'hide-active' : ''">
    <el-tab-pane v-for="item in tabList" :key="item.name" :label="item.label" :name="item.name">
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>

defineOptions({
  name: 'Tabs'
})
import type { TabPaneName } from 'element-plus'

// 1. TabItem 类型定义
export interface TabItem {
  label: string;
  name: TabPaneName;
}
// 2. props 定义
const props = defineProps<{
  tabList: TabItem[]; // 自定义选项卡列表
  modelValue: TabPaneName; // 父组件传递的选中值（必传）
  hideTab?: boolean; // 是否隐藏密码和验证码选项卡
}>()

// 3. 定义 Emits
const emit = defineEmits<{
  (e: 'update:modelValue', value: TabPaneName): void;
  (e: 'tab-change', value: TabPaneName): void;
}>()

// 4. 内部响应式值 + 监听父组件值变化
const innerTabValue = ref<TabPaneName>(props.modelValue)
watch(
  () => props.modelValue,
  (newVal) => {
    innerTabValue.value = newVal
  },
  { immediate: true }
)

// 5. Tab 切换通知父组件
const handleTabChange = (newVal: TabPaneName) => {
  emit('update:modelValue', newVal)
  emit('tab-change', newVal)
}
</script>

<style scoped lang="scss">
.user-tabs {
  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }
}
.hide-active {
  display: none;
}
</style>