module.exports = {
    init() {
    },
    props: {
        isVisible: Boolean,
        entity: Object,
        onAddToCart: Function
    },
    watch: {
        isVisible() {
            const self = this;

            if (this.isVisible) {
                this.overlay = $.overlay({
                    onClose: function() {
                        self.isVisible = false;
                    }
                });

                this.overlay.show();
            } else {
                this.overlay.hide();
                this.$parent.$emit('featureselector.close');
            }
        },
        entity() {
            const thumbnails = {};
            const selection = {};
            const colorSizes = {};
            const stocks = {};

            // 更新颜色
            this.colors = this.entity.goodsList.filter((goods)=> {
                // 确保商品启用
                return goods.status !== 0;
            }).map((goods)=> {
                // 缩略图
                thumbnails[goods.colorId] = goods.colorImage;

                // 更新颜色对应尺码
                colorSizes[goods.colorId] = goods.goodsSizeBoList.map((size)=> {
                    if (!stocks[goods.colorId]) {
                        stocks[goods.colorId] = 0;
                    }

                    // 默认选中有库存的第一个颜色尺码
                    if (size.goodsSizeStorageNum > 0) {
                        if (!selection.color) {
                            selection.color = goods.colorId;
                        }

                        if (!selection.size && size.goodsSizeStorageNum > 0) {
                            selection.size = size.goodsSizeSkuId;
                        }

                        // 计算所有尺码的库存
                        stocks[goods.colorId] += size.goodsSizeStorageNum;
                    }

                    return {
                        text: size.sizeName,
                        value: size.goodsSizeSkuId,
                        disabled: size.goodsSizeStorageNum === 0
                    };
                });

                return {
                    text: goods.colorName,
                    value: goods.colorId,
                    disabled: stocks[goods.colorId] === 0 // 是否售完
                };
            });

            this.sizes = colorSizes[selection.color];
            this.colorSizes = colorSizes;
            this.thumbnails = thumbnails;

            // 选择默认值
            this.$emit('feature:color.select', selection.color);
            this.$emit('feature:size.select', selection.size);
        }
    },
    data() {
        return {
            colors: [],
            sizes: [],
            colorSizes: {},
            thumbnails: {},
            selection: {
                color: null,
                size: null,
                thumbnail: ''
            }
        };
    },
    components: {
        featureOptions: require('../feature-options.vue')
    },
    created() {
        // 选择颜色
        this.$on('feature:color.select', (opt)=> {
            const selection = {
                color: opt,
                size: ((color, size)=> {
                    // 切换颜色后选择匹配的尺码
                    const sizes = this.colorSizes[color];

                    if (sizes && sizes.length > 0) {
                        const oldSizes = sizes.filter((item) => {
                            return item.value === size;
                        });

                        if (oldSizes && oldSizes.length > 0) {
                            const newSizes = this.colorSizes[opt];

                            const matchedSize = newSizes.filter((item)=> {
                                return !item.disabled && item.text === oldSizes[0].text;
                            });

                            if (matchedSize && matchedSize.length > 0) {
                                return matchedSize[0].value;
                            }
                        }
                    }

                    return null;
                })(this.selection.color, this.selection.size),
                thumbnail: this.thumbnails[opt]
            };

            this.sizes = this.colorSizes[opt];
            Object.assign(this.selection, selection);
        });

        // 选择尺码
        this.$on('feature:size.select', (opt)=> {
            const selection = {
                size: opt
            };

            Object.assign(this.selection, selection);
        });
    },
    methods: {
        /**
         * 将当前选择添加到购物车
         */
        addToCart() {
            // console.log(`${this.selection.color}:${this.selection.size}`);
            const sku = this.selection.size;

            $.post('/product/cart.json', {
                productSku: sku,
                buyNumber: 1
            }).then((result)=> {
                this.onAddToCart(result);
            });
        }
    }
};