<template>
  <el-select
    v-model="list"
    placeholder="请选择"
    multiple
    clearable
    :options="options"
    :disabled="disabled"
    @change="(val: any) => changeFun(val)"
  ></el-select>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

interface Props {
  modelValue: string;
  options: any;
  disabled: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  options: [],
  disabled: false,
});

const emit = defineEmits(['update:modelValue', 'change']);
const list = ref<any>([]);

watch(() => props.modelValue, (val: any) => {
  list.value = val ? val.split(',') : [];
}, { deep: true, immediate: true });

const changeFun = (val: any) => {
  emit('update:modelValue', val.join(','));
  emit('change', val.join(','));
};
</script>
