<template>
  <a-select
    placeholder="请选择学校"
    allowClear
    :value="valueStr"
    style="width: 140px"
    @change="handleChange"
  >
    <a-select-option
      v-for="(item, index) in optionList"
      :key="index"
      :value="item.id"
    >
      {{ item.name }}
    </a-select-option>
  </a-select>
</template>

<script setup lang="ts">
import { getRootOrgList } from "@/api/rootOrgPage";
import { onMounted, computed } from "vue";

const props = defineProps<{
  value?: null | number | string;
  selectFirst?: boolean;
}>();
const emit = defineEmits(["update:value"]);

let optionList = $ref<{ id: number; name: string }[]>([]);

onMounted(async () => {
  const res = await getRootOrgList({});
  optionList = res.data.content;

  if (optionList.length && props.selectFirst) {
    handleChange(optionList[0].id);
  }
});

const valueStr = computed(() => {
  let res: undefined | number | string = props.value ?? undefined;
  // if (typeof res === "number") res = props.value + "";
  return res as undefined | string;
});

function handleChange(v: number) {
  // console.log(v);
  emit("update:value", v);
}
</script>
