<template>
    <div>
        <a-cascader class="address-select"
                    :options="areaData"
                    :load-data="loadData"
                    change-on-select
                    v-model:value="innerValue"
                    placeholder="请选择"
                    @change="onChange"
        />
    </div>
</template>

<script>

import {areCodeTrans} from "../utils/common";

export default {
    name: 'DocAddress',
    props: {
        value: String
    },
    data() {
        return {
            innerValue: [],
            areaData: []
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            if (!this.areaData.length) {
                const res = await this.$api.common.fetchAreaByCode('0')
                this.areaData = this.dataField(res.data || [])
            }
            let codeList = areCodeTrans(this.value);
            if (codeList.length > 1) {
                await this.viewHandle(codeList)
            }
        },
        loadData(options) {
            const targetOption = options[options.length - 1]
            targetOption.loading = true
            this.$api.common.fetchAreaByCode(targetOption.value).then(res => {
                targetOption.children = this.dataField(res.data || [], options.length === 4)
                this.areaData = [...this.areaData]
            }).finally(() => {
                targetOption.loading = false
            })
        },
        dataField(data, last = false) {
            return data.map(e => {
                return {
                    label: e.areaName,
                    value: e.areaCode,
                    id: e.id,
                    isLeaf: last
                }
            })
        },
        // 回显处理
        async viewHandle(val = []) {
            try {
                const length = val.length
                let current = this.areaData.find(e => e.value === val[0])
                let index = 1
                while (index < length) {
                    const res = await this.$api.common.fetchAreaByCode(current.value)
                    const result = res.data || []
                    if (!result.length) break
                    current.children = this.dataField(result, index === 4)
                    current = current.children.find(e => e.value === val[index])
                    this.areaData = [...this.areaData]
                    if (!current) break
                    index++
                }
            } catch (err) {
                console.warn(err)
            }

        },
        onChange(val) {
            console.log(val)
            this.$emit('input', val[val.length - 1])
            this.$emit('change', val)
        }
    },
    watch: {
        value: {
            handler(val) {
                if (this.innerValue.length > 0 && val == this.innerValue[this.innerValue.length - 1]) {
                    return
                }
                let codeList = areCodeTrans(val);
                this.innerValue = codeList || []
                if (codeList.length > 1) {
                    this.viewHandle(codeList)
                }
            },
            immediate: true
        },
    }
}
</script>

<style lang="less" scoped>

</style>