<template>
    <div class="feature-selector" :class="{ 'slide-in': isVisible }">
        <div class="header">
            <div class="image-box">
                <img :src="selection.thumbnail | resize 45 60"/>
            </div>
            <div class="text-box">
                <h3>{{entity.productName}}</h3>
                <h4>{{entity.productPriceBo.formatSalesPrice}}</h4>
            </div>
        </div>

        <hr>

        <div>
            <section>
                <h4>颜色</h4>
                <feature-options name="color" :options="colors" :selection="selection.color"></feature-options>
            </section>
            <section>
                <h4>尺码</h4>
                <feature-options name="size" :options="sizes" :selection="selection.size"></feature-options>
            </section>
            <button @click="addToCart()"
                    class="button button-solid add-to-cart">加入购物袋
            </button>
        </div>
    </div>
</template>
<style>
    .feature-selector {
        background: #fff;
        width: 100%;
        height: 608px;
        bottom: 0;
        position: fixed;
        padding: 20px 30px;
        z-index: 1001;
        transform: translate3d(0, 100%, 0);
        transition: all 0.1s ease-in-out;

        .header {
            height: 120px;

            h3 {
                margin: 0;
                max-height: 60px;
                font-weight: 300;
            }
            h4 {
                color: #b0b0b0;
                font-weight: 200;
                font-size: 30px;
                margin-top: 32px;
                margin-bottom: 0;
            }
            .image-box {
                width: 90px;
                height: 120px;
                display: inline-block;
            }
            .text-box {
                display: inline-block;
                margin-left: 24px;
                max-width: 512px;
            }
        }

        hr {
            border: none;
            border-top: 1px solid #f0f0f0;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        ul {
            list-style: none;
            border: none;
            margin-left: 18px;
            margin-top: 30px;
            margin-bottom: 0;
            padding: 0;
        }

        li {
            display: inline-block;
        }

        section {
            h4 {
                margin: 0;
                font-size: 25px;
                line-height: 80px;
                display: inline-block;
            }
        }

        .add-to-cart {
            width: 100%;
            margin-top: 50px;
            font-size: 27px;
        }

        &.slide-in {
            transform: translate3d(0, 0, 0);
        }
    }
</style>
<script>
    /**
     * 颜色尺码选择组件
     *
     * @author: Aiden Xu<aiden.xu@yoho.cn>
     * @date: 2016/07/20
     */

    const tip = require('common/tip');
    const Overlay = require('common/overlay');

    /**
     * 颜色尺码选择组件
     **
     * @event feature.close 关闭事件
     * @event feature:color.select 选择颜色
     * @event feature:size.select 选择尺码
     */
    module.exports = {
        init() {
        },
        props: {
            /** 是否可见 */
            isVisible: Boolean,

            /** 实体对象 */
            entity: Object,

            /**
             * 加入购物车回调函数
             *
             * @param result 后端返回的数据
             */
            onAddToCart: Function
        },
        watch: {
            isVisible() {
                const self = this;

                if (this.isVisible) {
                    this.overlay = new Overlay({
                        disableScrolling: false,
                        onClose: function() {
                            self.isVisible = false;
                        }
                    });

                    this.overlay.show();
                } else {
                    this.overlay.hide();
                    this.$parent.$emit('feature.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;

                if (!this.selection.color) {
                    tip('请选择颜色');
                    return;
                }

                if (!this.selection.size) {
                    tip('请选择尺码');
                    return;
                }

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

</script>