﻿<template>
	<a-select
		:value="modelValue"
		placeholder="请选择"
		:mode="props.mode"
		style="width: 100%"
		:options="props.options"
		@change="handleChange"
	>
		<template #dropdownRender="{ menuNode: menu }">
			<v-nodes :vnodes="menu" />
			<div style="display: flex; width: 100%;   justify-content: center"    @mousedown.prevent>
				<a-pagination

					v-model:current="currentPage.current"
					v-model:pageSize="currentPage.size"
					size="small"
					:total="props.total"
					:show-size-changer="false"
					:show-less-items="true"
					@change="onChange"
				/>
			</div>


		</template>

	</a-select>
</template>

<script setup>

 import {ref,reactive,defineComponent ,defineProps} from "vue";
 const emit = defineEmits(['update:modelValue','onChange','onInit'])
 const props = defineProps({
	 modelValue: {
		 type: [String],
		 default: null
	 },
	 options: {
		 type: Array,
		 default: []
	 },
	 size: {
		 type: Number,
		 default: 10
	 },
	 total: {
		 type: Number,
		 default: 0
	 },
	 //'multiple' | 'tags' | 'combobox'
	 mode: {
		 type: String,
		 default: ''
	 }
 })

 const VNodes = defineComponent({
	 props: {
		 vnodes: {
			 type: Object,
			 required: true,
		 },
	 },
	 render() {
		 return this.vnodes;
	 },
 });
 // 在 form.vue 中监听值的变化
 watch(() => props.modelValue, (newVal) => {
	 console.log('等眼看着:', newVal);
 }, { deep: true });
 const item = ref(null)

 const currentPage = reactive({
	 current: 1,
	 size: props.size,

 })
 const itemIds = ref(['1935565895337304066'])
let  options = ref(
	[
		// {
		// 	value : 1,
		// label : '大佬'},
		// {
		// 	value : 2,
		// label : '小佬'}

]

)
 const handleChange = (value) => {
	 emit('update:modelValue', value);
 };
 const onChange = (page, pageSize) => {

	 emit('onChange', page, pageSize)
	 // getList()
	 // setTimeout(() => {
		//  paginationRef.value?.focus();
	 // }, 0);
 }
 onMounted(()=>{

	 console.log('什么参水呢',props.modelValue)
	 emit('onInit')
 })
</script>
<style scoped >

</style>
