<template>
  <a-select
    placeholder="请选择项目"
    allowClear
    :value="valueStr"
    :disabled="props.disabled"
    style="width: 200px"
    @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 { getProjectList } from "@/api/projectManagementPage";
import { onMounted, computed } from "vue";

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

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

onMounted(async () => {
  const res = await getProjectList({
    id: props.projectId,
    rootOrgId: -1,
    pageNo: 1,
    pageSize: 100,
  });
  optionList = res.data.content;
});

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) {
  emit("update:value", v);
  const option = optionList.find((item) => item.id === v);
  emit("change", option);
}
</script>
