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

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

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

<style>
</style>