<template>
  <el-select
    :model-value="modelValue"
    placeholder="请选择，支持搜索"
    size="default"
    :loading="siteList.length == 0"
    @change="valueChanged"
    filterable
    clearable
  >
    <el-option
      v-for="item in siteList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>
<script setup name="SiteOptions">
import { toRefs } from "vue";
const props = defineProps({
  modelValue: {
    type: [Number, String],
  },
  siteList: {
    type: Array,
    required: true,
  },
});
const { modelValue, siteList } = toRefs(props);

const emit = defineEmits(["update:modelValue"]);

const valueChanged = (val) => {
  console.log("changed");
  emit("update:modelValue", val);
};
</script>
