<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useVModel } from "@vueuse/core";
import { httpPlatforms } from "/@/api/netOrderEnter/netOrderEntry";

const props = defineProps<{
  modelValue?: string;
  disabled?: boolean;
}>();

const emit = defineEmits(['change']);

const value = useVModel(props, "modelValue");
const list = ref<any[]>([])

onMounted(async () => {
  const { data } = await httpPlatforms({ size: 10000 })
  list.value = data.list
});

function handleChange(value: string){
  const item = list.value.find(({id}) => id == value)
  emit('change',value, item)
}
</script>

<template>
  <ElSelect style="width: 100%" v-model="value" :disabled="disabled" @change="handleChange" clearable>
    <ElOption 
      v-for="opt in list" 
      :key="opt.id"
      :value="opt.id"
      :label="opt.platform_name"
      :disabled="String(opt.status) === '0'"
   />
  </ElSelect>
</template>
