<template>
    <regions-select
        v-model="city"
        :cascaderProps="cascaderProps"
        :placeholder="placeholder"
        :options="[]"
        @change="handleCityChange"
    />
</template>

<script setup>
    import { ref } from 'vue';
    import RegionsSelect from '@/components/RegionsSelect/index.vue';
    import request from '@/utils/request';

    const emit = defineEmits(['update:modelValue']);
    const props = defineProps({
        modelValue: {
            type: Array,
            default() {
                return [];
            }
        },
        placeholder: {
            type: String,
            default: '请选择省市区'
        },
        number: {
            type: Number,
            default: 2
        }
    });
    const handleCityChange = (value) => {
        console.log(value);
        emit('update:modelValue', value);
    };

    const city = ref([]);
    watch(
        () => props.modelValue,
        (val) => {
            city.value = val;
        },
        { deep: true, immediate: true }
    );

    let cascaderProps = {
        lazy: true,
        lazyLoad: async (node, resolve) => {
            const { level } = node;
            console.log(node, 'dsadsa');
            let { data } = await getProviceList(node.data.value);
            let nodes = data.map((item) => {
                return {
                    value: item.id,
                    label: item.district,
                    leaf: level >= props.number
                };
            });
            console.log(nodes);
            resolve(nodes);
        }
    };

    async function getProviceList(id = 1) {
        let { data } = await request.get(
            `/baseinfo/districtInfo/findInfo/${id}`
        );
        return data;
    }
</script>
