<template>
	<a-cascader v-model:value="cascaderParentId" @change="parentChange" :options="listOptions"
		:fieldNames="listFieldNames" :changeOnSelect="true" :placeholder="placeholder" style="width: 100%"
		change-on-select :size="size" />
</template>

<script lang="ts" setup>
	import { ref, onMounted, defineProps, watch, defineEmits } from 'vue';
	import { GetDictTree } from '@/apis/models';
	const props = defineProps({
		dict: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: ''
		},
		cascader_content: {
			type: Array,
			default: []
		},
		size: {
			type: String,
			default: 'large'
		},
	});
	let listOptions = ref([]);
	let cascaderParentId = ref<Number>([]);
	const listFieldNames = ref({ label: 'name', value: 'id', children: 'children' });
	let placeholder = ref('请选择');
	let size = ref('large');
	watch(() => [props.dict, props.cascader_content, props.placeholder, props.size],
		(newVal, oldVal) => {
			GetDictTree({
				code: newVal[0]
			}).then(res => {
				listOptions.value = res.data.dicts
			})
			cascaderParentId.value = newVal[1]
			placeholder.value = newVal[2]
			size.value = newVal[3]
		},{immediate: true})

	onMounted(() => {
		GetDictTree({
			code: props.dict
		}).then(res => {
			listOptions.value = res.data.dicts
		})
	})
	const emit = defineEmits();
	const parentChange = (val, selectedOptions) => {
		console.log(val)
		emit('saveCascader', { arr1: val, arr2: selectedOptions });
	}
</script>

<style>
</style>