<template>
  <div class="form-item-box zj-packageSelect-wrap" :style="{ width: width }">
    <el-select v-bind="$attrs" :model-value="modelValue" @change="hanlderSelect"
      :popper-class="selectOption.length > 20 ? 'nation-select' : ''" :placeholder="placeholder">
      <el-option v-for="item in selectOption" :key="item.dm" :label="item.zdmc" :value="item.dm">
      </el-option>
    </el-select>
  </div>
</template>
<script setup>
import { COMPONENT_WIDTH } from '@/constant';
import { nextTick, onBeforeMount, ref } from "vue";
import { getDictInfoByDictEnum } from "@/api/sysDict";
const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请选择",
    type: String
  },
  modelValue: {
    default: "",
    type: String
  },
  dictEnum: {
    default: "",
    type: String
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  }
});
const selectOption = ref([]);
onBeforeMount(async () => {
  const res = await getDictInfoByDictEnum({ dictElementEnum: props.dictEnum });
  //正常下拉结构
  if (res.zdlx === 1) {
    selectOption.value = [...res.itemList];
  } else {
    //树形结构数据
  }
});
const hanlderSelect = (data) => {
  emits("handleChange", data);
};
</script>

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