<!--
 * @Description: 
 * @Version: 
 * @Author: 黄先伟
 * @Date: 2024-02-06 09:05:33
-->

<template>
    <el-cascader ref="cascadeRef" class="base-input" v-model="value" :props="propsJson" @change="change" clearable style="width: 100%;" />
</template>

<script setup name="AreaCascader" lang="ts">
import { propTypes } from '@/utils/propTypes';
import type { CascaderProps } from 'element-plus';
import { listChildrenByCode, getAdcdByCode } from '@/api/adcd';
// import { citys } from '@/utils/citys';
const citys = [{ label: '云南省', value: '530000' }];

const emit = defineEmits(['update:modelValue', 'change']);
const cascadeRef = ref();
const props = defineProps({
    modelValue: [String, Array],
    zlevel: propTypes.number.def(3),
    multiple: propTypes.bool.def(false),
    checkStrictly: propTypes.bool.def(false)
});
const value = ref();
const propsJson: CascaderProps = {
    lazy: true,
    multiple: props.multiple,
    checkStrictly: props.checkStrictly,
    lazyLoad(node, resolve) {
        console.log(node);
        const { level, value } = node;
        let nodes = [];
        if (!level) {
            listChildrenByCode({ adcdCode: '000000', leval: 1, pageSize: 1000 }).then((res) => {
                const rows = res.rows;
                nodes = rows.map(({ adcdName, adcdCode }: any) => ({ label: adcdName, value: adcdCode, leaf: level >= props.zlevel }));
                if (nodes.length) {
                    resolve(nodes);
                } else {
                    resolve(citys.map(({ label, value }: any) => ({ label, value, leaf: level >= props.zlevel })));
                }
            });
        } else {
            listChildrenByCode({ adcdCode: value, leval: (level as number) + 1, pageSize: 1000 }).then((res) => {
                const rows = res.rows;
                nodes = rows.map(({ adcdName, adcdCode }: any) => ({ label: adcdName, value: adcdCode, leaf: level >= props.zlevel }));
                resolve(nodes);
            });
        }
    }
};
// 传入code判断该code在那一级
const getLevel = (code: string) => {
    // 去掉code末尾后面的00，再根据长度判断是那一级
    const trimmedCode = code.replace(/00+$/, '');
    const length = trimmedCode.length;
    if (length === 2) {
        return 1; // 省级
    } else if (length === 4) {
        return 2; // 市级
    } else if (length === 6) {
        return 3; // 区县级
    } else if (length === 9) {
        return 4; // 镇级
    }
    return 0; // 未知级别
};
watch(
    () => props.modelValue,
    (val: any) => {
        if (val) {
            if (!props.multiple) {
                const c8 = val.slice(0, 9);
                const c6 = val.slice(0, 6);
                const c4 = val.slice(0, 4);
                const c2 = val.slice(0, 2);
                if (getLevel(val) === 1) {
                    value.value = [c2 + '0000'];
                }
                if (getLevel(val) === 2) {
                    value.value = [c2 + '0000', c4 + '00000000'];
                }
                if (getLevel(val) === 3) {
                    value.value = [c2 + '0000', c4 + '00000000', c6 + '000000'];
                }
                if (getLevel(val) === 4) {
                    value.value = [c2 + '0000', c4 + '00000000', c6 + '000000', c8 + '000'];
                }
            } else {
                if (Array.isArray(val)) {
                    const vl: any = [];
                    val.forEach((e: any) => {
                        vl.push([e.slice(0, 2) + '0000', e.slice(0, 4) + '00000000', e.slice(0, 6) + '000000', e]);
                    });
                    value.value = vl;
                }
            }
        } else {
            value.value = [];
        }
    },
    { immediate: true }
);
const change = (event: any) => {
    const checkedNodes = cascadeRef.value.getCheckedNodes();
    if (props.multiple) {
        if (event && event.length) {
            const vl: any = [];
            const address: any = [];
            event.forEach((e: any) => {
                vl.push(e[e.length - 1]);
            });
            checkedNodes.forEach((e: any) => {
                address.push(e.pathLabels.join(''));
            });
            emit('update:modelValue', vl);
            emit('change', { value, vl, name: address.toString() });
        } else {
            emit('update:modelValue', null);
        }
    } else {
        if (event && event.length) {
            const labels = checkedNodes[0].pathLabels;
            emit('update:modelValue', event[event.length - 1]);
            emit('change', { value: event[event.length - 1], name: labels.join(''), labels });
        } else {
            emit('update:modelValue', null);
        }
    }
};
</script>
