<template>
    <van-cascader class="address-select"
        v-model="innerValue"
        title="请选择所在地区"
        :options="areaData"
        @change="onChange"
        @close="() => $emit('close')"
    />
</template>

<script>
import { getAreaChild } from '@/api/base.js'
import { fetchDataHandle } from '@/utils/common.js'

export default {
    name: 'DocAddress',
    props: {
        value: [String, Number],
        viewData: Array,
        level: { default: 4 },
    },
    emits: ['update:value', 'change', 'close'],
    data() {
        return {
            innerValue: '',
            areaData: []
        }
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            if (!this.areaData.length) {
                const res = await getAreaChild('0')
                this.areaData = this.dataField(res || [])
            }
            if (this.value) {
                const temp = fetchDataHandle({ value: this.value }, {
                    value: 'addToArr'
                })
                await this.viewHandle(temp.value)
            }
            // console.log(this.areaData)
        },
        loadData(options) {
            const targetOption = options[options.length - 1]
            targetOption.loading = true
            getAreaChild(targetOption.value).then(res => {
                targetOption.children = this.dataField(res || [], options.length === this.level)
                this.areaData = [...this.areaData]
            }).finally(() => {
                targetOption.loading = false
            })
        },
        dataField(data, last = false) {
            return data.map(e => {
                return {
                    text: 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 getAreaChild(current.value)
                    const result = res || []
                    if (!result.length) break
                    current.children = this.dataField(result, index === this.level)
                    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.areaData)
            const tabIndex = val.tabIndex
            const options = val.selectedOptions
            const targetOption = options[options.length - 1]
            if (tabIndex < 4 ) {
                getAreaChild(val.value).then(res => {
                    targetOption.children = this.dataField(res || [], options.length === this.level)
                    this.areaData = [...this.areaData]
                })
            }
            this.$emit('update:value', val.value)
            this.$emit('change', val)
            if (tabIndex === this.level) {
                this.$emit('close')
            }
        }
    },
    watch: {
        value: {
            handler(val) {
                this.innerValue = val
            },
            immediate: true
        },
        // 地址同步使用
        viewData(val) {
            if (val) {
                this.viewHandle(val)
            }
        }
    }
}
</script>

<style lang="less" scoped>

</style>