<!-- src/components/LanguageSelect.vue -->
<template>
  <!-- 独立的语言选择器 -->
  <el-select v-model="innerValue" placeholder="Select" @change="handleChange">
    <el-option v-for="item in languageOptions" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script setup lang="ts">
// 1. 定义语言类型
type LanguageType = 'zh-CN' | 'zh-HK' | 'en-US'

// 2. 定义Props：接收父组件传入的选中值（支持v-model）
const props = defineProps<{
  modelValue: LanguageType // v-model 绑定的核心prop
}>()

// 3. 定义Emits：触发父组件更新值（实现v-model双向绑定）
const emit = defineEmits<{
  (e: 'update:modelValue', value: LanguageType): void // v-model 必备emit
  (e: 'change', value: LanguageType): void // 可选：暴露change事件给父组件
}>()

// 4. 内部响应式值（关联父组件的modelValue）
const innerValue = ref<LanguageType>(props.modelValue)

// 5. 监听父组件值变化，同步到内部（避免单向数据流问题）
watch(
  () => props.modelValue,
  (newVal) => {
    innerValue.value = newVal
  },
  { immediate: true }
)

// 6. 语言选项（组件内封装，也可通过props传入增强灵活性）
const languageOptions = [
  { value: 'zh-CN' as LanguageType, label: '简体中文' },
  { value: 'zh-HK' as LanguageType, label: '繁体中文' },
  { value: 'en-US' as LanguageType, label: 'English' }
]

// 7. 选择变化时触发emit，同步给父组件
const handleChange = (value: LanguageType) => {
  emit('update:modelValue', value) // 实现v-model双向绑定
  emit('change', value) // 可选：额外暴露change事件
}
</script>
<style scoped lang="scss">
.el-select {
  width: 100px;

  :deep(.el-select__wrapper) {
    box-shadow: none;
  }
}
</style>
