<template>
    <div class="nus_skubox">
        <div class="nu_sku-item" v-for="(specItem, index) in mySpecList" :key="index">
            <div class="nu_name">{{ specItem.groupName }}</div>
            <nu-checkbtns
                v-model="selectList[index]"
                :list="specItem.groupValues"
                :groupIndex="index"
                :activeGroupIndex.sync="activeGroupIndex"
                :filterItem="filterItem"
                @valueChange="setSelectItem(selectList[activeGroupIndex], activeGroupIndex)">
            </nu-checkbtns>
        </div>
    </div>
</template>

<script>
import {diffData} from 'nimble-lib';
import NuCheckbtns from '../../form/checkbtns';
import VModel from '../../../Mixins/vModel';

export default {
    name: 'NuSkubox',
    props: {
        specList: {},
        skuList: {},
        filterItem: {}
    },
    components: {
        NuCheckbtns
    },
    mixins: [VModel({
        myValueInit(nowVal) {
            let _that = this;
            if (nowVal) {
                let res = nowVal;
                if (!nowVal._skuInfos && nowVal.skuInfos) {
                    let _skuInfos = [];
                    try {
                        _skuInfos = JSON.parse(nowVal.skuInfos);
                    } catch (error) {}
                    res = Object.assign({}, nowVal, {
                        _skuInfos: _skuInfos
                    });
                }
                setTimeout(() => {
                    _that.initSelectList(res);
                }, 0);
                return res;
            } else {
                return nowVal;
            }
        },
        mValueChange(nowVal) {
            let _that = this;
            if (_that.myValue !== nowVal) {
                _that.initSelectList(nowVal);
            }
        }
    })],
    computed: {
        /**
         * sku
         * @returns {Object}
         */
        mySkuList() {
            return (this.skuList || []).map((item) => {
                let _skuInfos = [];
                try {
                    _skuInfos = JSON.parse(item.skuSpecs);
                } catch (error) {}
                return Object.assign({}, item, {
                    _skuInfos: _skuInfos
                });
            });
        }
    },
    data() {
        return {
            activeGroupIndex: -1,
            selectList: [],
            mySpecList: this.specList
        };
    },
    watch: {
        /**
         * 设置myvalue
         * @param {Object} nowVal 当前规格数据
         */
        selectList() {
            let _skuItem = this.getSelectSkuItem();
            if (!diffData(_skuItem, this.myValue)) {
                this.myValue = _skuItem;
            }
        },
        /**
         * 同步规格数据
         * @param {Object} nowVal 当前规格数据
         */
        specList(nowVal) {
            this.mySpecList = nowVal;
        }
    },
    methods: {
        /**
         * 初始化选中项
         * @param {Object} skuItem sku项
         */
        initSelectList(skuItem) {
            let _that = this;
            if (skuItem && skuItem._skuInfos && skuItem._skuInfos.length) {
                let _skuInfos = skuItem._skuInfos;
                let mySpecList = (_that.mySpecList || []);
                let selectList = [];
                mySpecList.every((specItem, groupIndex) => {
                    if (groupIndex > 0 && !selectList[groupIndex - 1]) {
                        return false;
                    }
                    if (specItem) {
                        (specItem.groupValues || []).every((item) => {
                            if ((_skuInfos[groupIndex] || {}).value === (item || {}).value) {
                                selectList.push(item);
                            } else {
                                return true;
                            }
                        });
                    }
                    return true;
                });
                _that.selectList = selectList;
            }
        },
        /**
         * 获取选中的sku项
         * @returns {Object}
         */
        getSelectSkuItem() {
            let _that = this;
            let len = (_that.mySpecList || []).length;
            let _selectList = _that.selectList || [];
            let _suk = this.myValue;
            if (len > 0 && _selectList.length >= len) {
                (_that.mySkuList || []).every((skuItem) => {
                    let _skuInfos = (skuItem || {})._skuInfos || [];
                    let isEqual = true;
                    _selectList.every((specItem, index) => {
                        if ((_skuInfos[index] || {}).value !== (specItem || {}).value) {
                            isEqual = false;
                        } else {
                            return true;
                        }
                    });
                    if (isEqual) {
                        _suk = skuItem;
                    } else {
                        return true;
                    }
                });
            }
            return _suk;
        },
        /**
         * 设置可选项
         *
         * @param {IProItem} selectItem 当前选中项
         * @param {Number} activeIndex 当前选中的索引
         */
        setSelectItem(selectItem, activeIndex) {
            let _that = this;
            if (!selectItem) {
                return;
            }
            let _isDisabled = selectItem._isDisabled;
            let _selectValue = selectItem.value;
            let _selectList = _that.selectList || [];
            (_that.mySpecList || []).forEach((specItem, index) => {
                specItem.groupValues.forEach((proItem) => {
                    if (activeIndex === index) { // 同级
                        if (_isDisabled && proItem._isDisabled) {
                            _that.$set(proItem, '_isDisabled', false);
                        }
                    } else {
                        let _value = proItem && proItem.value;
                        let itemDisabled = true;
                        (_that.mySkuList || []).every((skuItem) => {
                            let _skuInfos = (skuItem || {})._skuInfos || [];
                            if ((_skuInfos[index] || {}).value === _value && (_skuInfos[activeIndex] || {}).value === _selectValue) {
                                itemDisabled = false;
                            } else {
                                return true;
                            }
                        });
                        if (diffData(_selectList[index], proItem)) {
                            if (itemDisabled) { // 如果选中项被禁用则取消选中
                                this.$set(_selectList, index, null);
                            } else {
                                _selectList[index] = proItem;
                            }
                        }
                        if (proItem._isDisabled !== itemDisabled) {
                            _that.$set(proItem, '_isDisabled', itemDisabled);
                        }
                    }
                });
            });
        }
    }
};
</script>
<style lang="scss">
.nus_skubox{
    overflow: hidden;
    .nu_name{
        text-align: left;
    }
    .nu_spec-wrap{
        margin: -6px;
    }
}
</style>
