<template>
	<a-select v-model:value="selectValue" @change="handleChange" :placeholder="placeholder" label-in-value>
		<a-select-option v-for="item in listOptions" :key="item.id" :value="item.id" :label="item.name">{{item.name}}</a-select-option>
	</a-select>
</template>

<script lang="ts" setup>
	import { ref, onMounted, defineProps, watch, defineEmits } from 'vue';
	import { GetDictTree } from '@/apis/models';
	const props = defineProps(['dict', 'placeholder', 'select_content']);
	let listOptions = ref([]);
	let selectValue = ref<Number>(0);
	let placeholder = ref<String>(props.placeholder);
	watch(() => [props.dict, props.select_content],
		(newVal) => {
			GetDictTree({
				code: newVal[0]
			}).then((res:object) => {
				listOptions.value = res.data.dicts
			})
			selectValue.value = newVal[1] == 0 ? props.placeholder : newVal[1];
		}, { immediate: true })

	onMounted(() => {
		GetDictTree({
			code: props.dict
		}).then((res:object) => {
			listOptions.value = res.data.dicts
		})
	})
	const emit = defineEmits();
	const handleChange = (val) => {
		emit('saveSelect', { val: val });
	}
</script>

<style>
</style>