<template>
  <div class="Select-wrap" :style="{ width: width }">
    <el-select
      :disabled="props.disabled"
      v-bind="$attrs"
      v-model="modelValue"
      @change="hanlderSelect"
      :popper-class="selectOption.length > 20 ? 'nation-select' : ''"
      :placeholder="placeholder"
    >
      <el-option
        v-for="item in dictEnum"
        :key="item.value"
        :label="item.zdmc || item.label"
        :value="item.dm || item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script setup>
import { nextTick, onBeforeMount, ref } from "vue";
const emits = defineEmits(["change"]); //子组件向父组件事件传递
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请选择",
    type: String
  },
  disabled: {
    default: false,
    type: Boolean
  },
  modelValue: {
    type: [String, Array], // 允许 String 或 Array
    default: "", // 默认值设为空字符串
    validator: (value) => {
      // 允许：空字符串、非空字符串、数组
      return typeof value === "string" || Array.isArray(value);
    }
  },
  dictEnum: {
    default: [],
    type: Array
  },
  width: {
    default: "100%",
    type: String
  }
});
const selectOption = ref([]);

const hanlderSelect = (data) => {
  emits("change", data);
};
</script>

<style lang="scss" scoped>
.Select-wrap {
  ::v-deep .el-select {
    width: 100%;
  }
}
</style>
