<template>
	<a-tree-select v-model:value="treecCascaderParentId" style="width: 100%"
		:tree-data="treeData" tree-checkable allow-clear :show-checked-strategy="SHOW_PARENT"
		:placeholder="placeholder" tree-node-filter-prop="label"
		:fieldNames="listFieldNames" :maxTagCount="3" @change="parentChange" :size="size"/>
</template>

<script lang="ts" setup>
	import { ref, onMounted, defineProps, watch, defineEmits } from 'vue';
	import { GetDictTree } from '@/apis/models';
	import { TreeSelect } from 'ant-design-vue';
	const props = defineProps({
		dict: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: ''
		},
		tree_content: {
			type: Array,
			default: []
		},
		size: {
			type: String,
			default: 'large'
		},
	});
	let treeData = ref([]);
	let treecCascaderParentId = ref<number[]>([]);
	const listFieldNames = ref({ label: 'name', value: 'id', children: 'children' });
	let placeholder = ref('请选择');
	placeholder.value = props.placeholder
	const SHOW_PARENT = TreeSelect.SHOW_ALL;
	watch(() => [props.dict, props.tree_content],
		(newVal, oldVal) => {
			GetDictTree({
				code: newVal[0]
			}).then(res => {
				treeData.value = res.data.dicts
			})
			
			treecCascaderParentId.value = newVal[1]
		}, {immediate: true})

	// onMounted(() => {
	// 	GetDictTree({
	// 		code: props.dict
	// 	}).then(res => {
	// 		treeData.value =  res.data.dicts
	// 	})
	// })
	const emit = defineEmits();
	const parentChange = (val) => {
		emit('saveTreeNode', {arr1: val});
	}
</script>

<style>
</style>