<script setup>
import { Select } from 'ant-design-vue'
import { computed } from 'vue'

const props = defineProps({
  value: [String, Array],
  mode: String,
  separator: {
    type: String,
    default: ','
  }
})

const emit = defineEmits(['update:value', 'change'])

// 处理值的双向转换
const internalValue = computed({
  get() {
    if (['multiple', 'tags'].includes(props.mode)) {
      if (typeof props.value === 'string') {
        return props.value ? props.value.split(props.separator) : []
      }
      return props.value || []
    }
    return props.value
  },
  set(newVal) {
    if (['multiple', 'tags'].includes(props.mode)) {
      const strValue = Array.isArray(newVal) 
        ? newVal.join(props.separator)
        : ''
      emit('update:value', strValue)
      emit('change', strValue)
    } else {
      emit('update:value', newVal)
      emit('change', newVal)
    }
  }
})
</script>

<template>
  <Select
    v-model:value="internalValue"
    :mode="mode"
    v-bind="$attrs"
  >
    <slot></slot>
  </Select>
</template>