<template>
  <el-select
    v-model="selected"
    filterable
    placeholder="请选择"
    style="width: 200px"
    @change="changeSchool"
    clearable
  >
    <el-option
      v-for="item in schoolList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script setup>
import { ref } from "vue";
import useUserStore from "@/store/modules/user";
const props = defineProps({
  modelValue: { type: String, default: "" },
});
const emits = defineEmits(["update:modelValue", "updateData"]);

const selected = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});
const schoolList = ref([]);

function changeSchool(val) {
  emits("updateData", val);
}
async function fetchSchoolList() {
  let list = useUserStore().schoolList;
  if (!list.length) {
    await useUserStore().getSchoolList();
  }
  schoolList.value = useUserStore().schoolList;
}
setTimeout(() => {
  fetchSchoolList();
}, 200);
</script>
