<template>
    <Cascader
        :data="data"
        :value="current"
        placeholder="请选择省市县"
        filterable
        clearable
        @on-change="onChange"
    ></Cascader>
</template>

<script>
import pca from './pca-code.json'
const format = (list, withCode) => {
    if (list && list.length > 0) {
        return list.map(item => {
            return {
                value: withCode ? { name: item.name, code: item.code } : item.name,
                label: `${item.name}${withCode ? `(${item.code})` : ''}`,
                children: format(item.children, withCode)
            };
        })
    } else {
        return []
    }
}
export default {
    name: 'Location',
    props: {
        value: {
            type: Array,
            default: () => {
                return []
            }
        },
        code: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    data() {
        return {
            current: []
        }
    },
    computed: {
        data() {
            return format(pca, this.code)
        }
    },
    watch: {
        value(to) {
            this.current = to;
        }
    },
    mounted() {
        this.current = this.value
    },
    methods: {
        onChange(value, selectedData) {
            this.$emit('input', value);
            this.$emit('on-change', value, selectedData);
        }
    }
}
</script>

<style lang="less" scoped>
</style>