<script setup>
	import { getRegionOptions } from '@/utils/systemUtils'

	const props = defineProps({
		value: {
			type: Array,
			required: true
		},
		readonly: {
			type: Boolean,
			required: false,
			default: false
		}
	})

	const regionOptions = ref([])

	const selected = ref(props.value)

	watch(
		() => props.value,
		(n, o) => {
			selected.value = n
		}
	)

	const loadOptions = async () => {}

	const emit = defineEmits(['on-change', 'update:value'])

	const selectChanged = (val, selectedOptions) => {
		console.log('region select', val, selectedOptions)
		emit('update:value', val)
		emit('on-change', val, selectedOptions)
	}

	onMounted(() => {
		// getFirstLevel()
		// regionOptions.value = clone(root.children)
		regionOptions.value = getRegionOptions()
	})

	defineExpose({ loadOptions })
</script>

<template>
	<a-cascader
		:disabled="readonly"
		class="address-box"
		:options="regionOptions"
		placeholder="请选择"
		v-model:value="selected"
		change-on-select
		@change="selectChanged"
	/>
</template>

<style scoped></style>
