<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  modelValue?: string
  options?: { value: string; label: string; color?: string }[]
  placeholder?: string
}

const props = withDefaults(defineProps<Props>(), {
  options: () => [
    { value: 'ACTIVE', label: '正常', color: 'success' },
    { value: 'LOCKED', label: '锁定', color: 'warning' },
    { value: 'DISABLED', label: '禁用', color: 'error' }
  ],
  placeholder: '请选择状态'
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'change', value: string): void
}>()

const value = computed({
  get: () => props.modelValue || undefined,
  set: (val) => {
    emit('update:modelValue', val!)
    emit('change', val!)
  }
})
</script>

<template>
  <a-select v-model:value="value" :options="options" :placeholder="placeholder" style="width: 120px" allow-clear />
</template>
