<template>
	<a-select v-model:value="value" @change="handleChange" :placeholder="placeholder" show-search :filter-option="false" 
		label-in-value @search="handleSearch" :options="listOptions">
		<a-select-option v-for="item in listOptions" :key="item.id" :value="item.id" :label="item.full_name" label-in-value>{{item.full_name}}</a-select-option>
	</a-select>

</template>

<script lang="ts" setup>
	import { ref, onMounted, defineProps, watch, defineEmits, computed } from 'vue';
	const props = defineProps(['list', 'placeholder']);
	let placeholder = ref<String>(props.placeholder);
	let listOptions = ref<Object[]>(props.list)
	
	watch(() => props.list, (newVal:string, oldVal:string) => {
		newVal.map(item => {
			listOptions.push({id: item})
		})
		listOptions.value = newVal;
	})
	
	
	// 搜索
	let lastKeyWord = ref<String>('');
	const emit = defineEmits();
	const handleSearch = (val : string) => {
		lastKeyWord.value = val;
		emit('searchKey', { keyword: val});
	}
	const handleChange = (val : string) => {
		console.log(val)
		emit('saveSearch', { val: val });
	}
</script>

<style>
</style>