<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue"
import { useVModel } from "@vueuse/core";
import { httpUserList } from '/@/api/user';

const users = ref<any[]>([]);

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


const value = useVModel(props, "modelValue");
const emit = defineEmits(['update:modelValue','change'])

onMounted(async () => {
  const uResult = await httpUserList({ size: 10000, level: 2 });
  if(uResult.code === 1) users.value = uResult.data.list;
})

function handleChange(value) {
  // console.log(value)
  // emit('update:modelValue', value);
  nextTick(() => emit('change', value))
}
</script>

<template>
  <el-select :placeholder="placeholder" v-model="value" filterable @change="handleChange" >
    <el-option 
      v-for="user in users" 
      :key="user.id"
      :value="user.id"
      :label="user.nickname"
      />
  </el-select>
</template>
