<!-- Created by henian.xu on 2018/8/3. -->

<template>
    <el-cascader
        filterable
        :disabled="disabled"
        :clearable="clearable"
        class="router-picker"
        :props="props"
        :options="options"
        :allow-create='onAllowCreate'
        v-model="model"
    />
</template>

<script>
import { routes } from 'vmf';
import emitter from 'element-ui/src/mixins/emitter';
import './hijackCascader';

function splitValue(str) {
    return str
        .replace(/(^\/*)|(\/*$)/g, '')
        .split('/')
        .map(item => item.trim());
}
// console.log(routes);
export default {
    name: 'RouterPicker',
    mixins: [emitter],
    data() {
        return {
            props: {
                value: 'path',
                label: 'title',
                children: 'children',
                disabled: 'disabled',
                checkStrictly: true,
            },
            // options: this.buildRouterOptions(routes),
        };
    },
    props: {
        value: {
            type: String,
            required: true,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Array,
            default: null,
        },
        clearable: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        model: {
            get() {
                if (!this.value) return [];
                const val = this.value.replace(/(^\/*)|(\/*$)/g, '');
                return val.split('/');
            },
            set(val) {
                const value = `/${val.join('/')}`;
                this.$emit('input', value);
                this.dispatch('ElFormItem', 'el.form.change', [value]);
            },
        },
        options() {
            const { data } = this;
            return this.buildRouterOptions(data || routes);
        },
    },
    methods: {
        buildRouterOptions(list, res = []) {
            const temMap = {};
            list.forEach(item => {
                const { name, meta } = item;
                const title = meta ? meta.title : '';
                if (name) {
                    const arr = name.split('-');
                    const arrLng = arr.length;
                    let temObj = res;
                    arr.forEach((item2, index) => {
                        const isLast = index === arrLng - 1;
                        const key = [...arr].splice(0, index + 1).join('-');
                        let obj = temMap[key];
                        if (!obj) {
                            obj = {
                                // title: isLast ? title : item,
                                title: item2 + (isLast ? ` (${title})` : ''),
                                path: item2,
                            };
                            temMap[key] = obj;
                            temObj.push(obj);
                        }
                        if (!isLast) {
                            temObj = obj.children || [];
                            obj.children = temObj;
                        }
                    });
                }
                if (item.children && item.children.length) {
                    this.buildRouterOptions(item.children, res);
                }
            });
            return res;
        },
        onAllowCreate(inputValue) {
            return splitValue(inputValue);
        },
    },
    created() {
        // console.log(JSON.stringify(routes));
    },
};
</script>

<style lang="scss">
.router-picker {
    display: block;
}
</style>
