<template>
  <el-select v-bind="$attrs"
    v-model="selectedOptions"
    @change="handleChange">
    <el-option v-if="allOption"
      :key="allSelectLabel"
      :label="allSelectLabel"
      :value="allSelectValue"></el-option>
    <slot></slot>
  </el-select>
</template>

<script setup>
const selectedOptions = ref([])

const props = defineProps({
  allOption: { // 开启全选选项
    type: Boolean,
    default: false,
  },
  allSelectLabel: { // 全选文案
    type: String,
    default: '全选',
  },
  allSelectValue: { // 全选绑定值
    type: [String, Number],
    default: 'ALL',
  },
  allSingleValue: { // 全选模式（false：返回 option 组，true：返回 allSelectValue 值）
    type: Boolean,
    default: false,
  },
  modelValue: [String, Object, Array]
});

watch(() => props.modelValue, val => {
  // if (props.allOption) {
  //   // 判断不是数组则转成数组
  //   if (!Array.isArray(val)) {
  //     emits('update:modelValue', [val]);
  //     selectedOptions.value = [val];
  //   }
  // }
}, {
  deep: true,
  immediate: true
})

const handleChange = (val) => {
  if (val.includes(props.allSelectValue)) {
    selectedOptions.value = [props.allSelectValue];
  } else {
    selectedOptions.value = val;
  }
  // emit('update:modelValue', selectedOptions.value);
}

</script>
