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

<script>
    import _ from 'lodash';
    import SortService from 'services/product/sort-service';

    export default {
        name: 'select-category',
        props: {
            value: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            let _this = this;

            return {
                categoryList: [],
                handleValue: _this.value.map(i => {
                    return i.value;
                })
            };
        },
        created() {
            this.sortService = new SortService();
            this.getSortInfo(1);
        },
        methods: {
            getSortInfo(level, sortId) {
                const params = {
                    level,
                    sortId
                };

                this.sortService.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) {
                const len = val.length;
                const max = val[0] || '';
                const mid = val[1] || '';
                const min = val[2] || '';
                let maxName = '';
                let midName = '';
                let minName = '';

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

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

                            this.getChildren(2, max)
                                .then(res => {
                                    item.children.splice(0);
                                    _.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.splice(0);
                                        _.each(res, i => {
                                            midItem.children.push({
                                                value: i.value,
                                                label: i.label
                                            });
                                        });
                                    });
                            });
                        });

                        break;

                    default:
                        break;
                }

                let maxItem = _.find(this.categoryList, {value: max});
                let midItem = maxItem && maxItem.children ? _.find(maxItem.children, {value: mid}) : {};
                let minItem = midItem && midItem.children ? _.find(midItem.children, {value: min}) : {};

                maxName = maxItem ? maxItem.label : '';
                midName = midItem ? midItem.label : '';
                minName = minItem ? minItem.label : '';

                this.$emit('select-change', {
                    max,
                    mid,
                    min,
                    maxName,
                    midName,
                    minName
                });

                let newValue = [
                    {value: max, label: maxName},
                    {value: mid, label: midName},
                    {value: min, label: minName}
                ];

                this.$emit('input', newValue);
            },
            getChildren(level, sortId) {
                const params = {
                    level,
                    sortId
                };

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

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

                        return children;
                    });
            }
        },
        watch: {
            value(newValue) {
                this.handleValue = newValue.map(v => v.value);
            }
        }
    };
</script>

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