<template>
	<a-select v-model:value="selectValue" @change="handleChange" :placeholder="placeholder">
		<a-select-option v-for="item in listOptions" :key="item.id" :value="item.id">{{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';
	let listOptions = ref([]);
	let selectValue = ref('');
	let placeholder = ref('请选择');
	const props = defineProps(['dict', 'placeholder', 'select_content']);
	placeholder.value = props.placeholder
	watch(() => [props.dict, props.select_content],
		(newVal:string, oldVal:string) => {
			GetDictTree({
				code: newVal[0]
			}).then((res:object) => {
				listOptions.value = res.data.dicts
			})
			selectValue.value = newVal[1]
		})

	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>