<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 { tenantSelect } from "@/api/subPlatform/tenant";
import useDataStore from "@/store/modules/data";
import { ref, toRefs } from "vue";
const props = defineProps({
  modelValue: {
    type: [Number, String],
  },
});

const { modelValue } = toRefs(props);
const dataStore = useDataStore();
const siteList = ref([]);

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

// 获取站点列表
const getSiteList = async () => {
  const { rows } = await tenantSelect();
  siteList.value = rows;
  dataStore.setSiteList(rows);
};

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

getSiteList();
</script>
