<template>
    <div>
        <Cascader :value="value" :data="categoryList" change-on-select @on-change="selectChange"></Cascader>
        <slot></slot>
    </div>
</template>

<script>
    import _ from 'lodash';
    import service from 'product-service';

    export default {
        name: 'SelcetCategory',
        props: {
            value: {
                type: Array
            }
        },
        data() {
            return {
                categoryList: []
            }
        },
        created() {
            this.getSortInfo(1);
        },
        methods: {
            getSortInfo(level, sortId) {
                const params = {
                    level,
                    sortId
                };

                service.getAllSort(params)
                    .then((res) => {
                        if(res.code === 200) {
                            _.each(res.data, item => {
                                this.categoryList.push({
                                    value: item.sortId,
                                    label: item.sortName,
                                    children: [{
                                        value: -1,
                                        label: ''
                                    }]
                                });
                            });
                        };
                    });
            },
            selectChange(val, data) {
                const len = val.length;
                const max = val[0] || '';
                const mid = val[1] || '';
                const min = val[2] || '';

                switch(len) {
                    case 1:
                        _.each(this.categoryList, item => {

                            if(item.value !== max) {
                                return;
                            };

                            this.getChildren(2, max)
                                .then(res => {
                                    item.children.shift();
                                    _.each(res, i => {
                                        item.children.push({
                                            value: i.value,
                                            label: i.label,
                                            children: [{
                                                value: -1,
                                                label: ''
                                            }]
                                        });
                                    });

                                });
                        });

                        break;

                    case 2:
                        _.each(this.categoryList, maxItem => {
                            if(maxItem.value !== max) {
                                return;
                            }

                            _.each(maxItem.children, midItem => {
                                if(midItem.value !== mid) {
                                    return;
                                }

                                this.getChildren(3, mid)
                                    .then(res => {
                                        midItem.children.shift();
                                        _.each(res, i => {
                                            midItem.children.push({
                                                value: i.value,
                                                label: i.label
                                            })
                                        })
                                    });
                            });
                        });

                        break;
                }

                this.$emit('select-change', {
                    max,
                    mid,
                    min
                });
            },
            getChildren(level, sortId) {
                const params = {
                    level,
                    sortId
                };

                return service.getAllSort(params)
                    .then((res) => {
                        let children = [];

                        if(res.code === 200) {
                            _.each(res.data, item => {
                                children.push({
                                    value: item.sortId,
                                    label: item.sortName
                                });
                            });
                        };

                        return children;
                    });
            }
        }
    }
</script>

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