<template>
    <mor-breadcrumbs
        :_uiid="uiid"
        :class="[sizeClass]"

        :root-name="rootName"
        :choose-root="chooseRoot"
        :list="list"
        :max-history="maxHistory"
        :separator="separator"
    >

    <ul>

        <template v-if="conf.rootName">
            <li
                class="root"
                :class="{choose : conf.chooseRoot}"
                @click="_chooseRoot([])"
            >{{conf.rootName}}</li>
            <li class="separator"> / </li>
        </template>

        <template v-for="(item, index) in data.lvlist">
            <template v-for="(name, key) in item">
                <li
                    :value="key"
                    :key="index + key"
                    v-if="index < (data.lvlist.length - 1)"
                    @click="toLevel(index)"
                >{{name}}</li>
                <li
                    class="last"
                    :key="index + key"
                    :value="key"
                    v-else
                >{{name}}</li>
            </template>
            <li class="separator" :key="index" v-if="index < (data.lvlist.length - 1)" v-html="separatorHtml"></li>
        </template>
        
    </ul>
        
    </mor-breadcrumbs>
</template>
 
<script>
import extend                       from 'extend';

const maxHistoryNum = 20;

export default {
    origin : 'UI',
    name : 'breadcrumbs',
    props : {
        rootName : {
            type : [String, Boolean],
            default : false
        },
        chooseRoot : {
            type : Boolean,
            default : false
        },
        list : {
            type : Array,
            default : () => ([])
        },
        maxHistory : {
            type : Number,
            default : maxHistoryNum
        },
        separator : {
            type : String,
            default : '/'
        }
    },
    computed : {
        _conf : function () {

            return {
                rootName : this.rootName,
                chooseRoot : this.chooseRoot,
                list : this.list,
                maxHistory : this.maxHistory,
                separator : this.separator
            };

        },
        separatorHtml : function () {

            return ` ${this.conf.separator} `;

        }
    },
    data : function () {

        return {
            data : {
                historys : [],
                lvlist : [],
                currentLevel : {},
                firstEmit : true
            }
        };

    },
    methods : {
        _recordHistory : function () {

            if (JSON.stringify(this.data.historys[this.data.historys.length - 1]) !== JSON.stringify(this.data.lvlist)) {

                if (this.conf.maxHistory <= this.data.historys.length) {

                    this.data.historys.shift();

                }

                this.data.historys.push(extend(true, [], this.data.lvlist));

            }

        },
        _chooseRoot : function () {

            if (this.conf.chooseRoot) {

                this.setLevel([]);

            }

        },
        toLevel : function (index) {

            if ((typeof index === 'number') &&
                (index < (this.data.lvlist.length - 1)) &&
                (index > -1)) {

                this.data.lvlist.splice(index + 1);
                this._recordHistory();

            } else if ((typeof index === 'string') &&
                (this.data.currentLevel.keyList.indexOf(index) !== -1)) {

                index = this.data.currentLevel.keyList.indexOf(index);
                this.data.lvlist.splice(index + 1);
                this._recordHistory();

            }

            return this;

        },
        backLast : function (num = 1) {

            let list = this.data.historys.splice(this.data.historys.length - num - 1)[0];

            this.setLevel(list);

            return this;

        },
        addLevel : function (level) {

            this.data.lvlist.push(level);
            this._recordHistory();

            return this;

        },
        setLevel : function (levelList) {

            if (levelList && levelList.length > 0) {

                this.data.lvlist.splice(0);

                for (let v of levelList) {

                    this.data.lvlist.push(v);

                }

                this._recordHistory();

            } else if (levelList && levelList.length === 0) {

                this.data.lvlist.splice(0, this.data.lvlist.length);

                this._recordHistory();

            }

            return this;

        },
        getLevel : function () {

            return this.data.currentLevel;

        },
        getHistory : function () {

            return extend(true, [], this.data.historys);

        }
    },
    created : function () {},
    mounted : function () {

        this.$watch('data.lvlist', () => {

            let last = {},
                keyList = [],
                nameList = [];

            for (let item of this.data.lvlist) {

                let key = Object.keys(item)[0];

                keyList.push(key);
                nameList.push(item[key]);
                last = {
                    key : key,
                    name : item[key]
                };

            }

            this.data.currentLevel = {
                keyList : keyList,
                nameList : nameList,
                currentKey : last.key,
                currentName : last.name,
                length : keyList.length
            };

            if (!this.data.firstEmit) {

                this.$emit('emit');

            }

            this.data.firstEmit = false;

        });

        this.$watch('conf.list', () => {

            this.setLevel(this.conf.list);

        }, {
            immediate : true,
            deep : true
        });

        this.$watch('conf.maxHistory', () => {

            let diff = this.data.historys.length - this.conf.maxHistory;

            if (diff > 0) {

                while (diff-- > 0) {

                    this.data.historys.shift();

                }

            }

        });

        this._recordHistory();

    }
};
</script>
