<template>
  <el-select
    v-model="selectedValue"
    :placeholder="placeholder"
    :clearable="clearable"
    :disabled="disabled"
    :multiple="multiple"
    :filterable="filterable"
    :size="size"
    @change="handleChange"
  >
    <el-option
      v-for="item in operatorOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <span :style="{ color: item.color }">{{ item.label }}</span>
    </el-option>
  </el-select>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { OPERATOR_OPTIONS } from '@/config/constants'
  import type { Operator } from '@/types/api'

  interface Props {
    modelValue?: Operator | Operator[]
    placeholder?: string
    clearable?: boolean
    disabled?: boolean
    multiple?: boolean
    filterable?: boolean
    size?: 'large' | 'default' | 'small'
  }

  interface Emits {
    (e: 'update:modelValue', value: Operator | Operator[] | undefined): void
    (e: 'change', value: Operator | Operator[] | undefined): void
  }

  const props = withDefaults(defineProps<Props>(), {
    placeholder: '请选择运营商',
    clearable: true,
    disabled: false,
    multiple: false,
    filterable: true,
    size: 'default'
  })

  const emit = defineEmits<Emits>()

  const operatorOptions = OPERATOR_OPTIONS

  const selectedValue = computed({
    get: () => props.modelValue,
    set: (val) => {
      emit('update:modelValue', val)
    }
  })

  const handleChange = (value: Operator | Operator[] | undefined) => {
    emit('change', value)
  }
</script>
