<template>
    <top-nav :title="entity.productName"></top-nav>
    <show-box :is-first="true">
        <image-carousel :goods="entity.goodsList"></image-carousel>
        <div class="title-box">
            <h1>{{entity.productName}}</h1>
            <i class="price" v-if="entity.productPriceBo.marketPrice > entity.productPriceBo.salesPrice"
               :class="{'strike-through': entity.productPriceBo.salesPrice > 0}">{{entity.productPriceBo.formatMarketPrice}}</i>

            <i v-if="entity.productPriceBo.salesPrice > 0"
               :class="{price: true, highlight: entity.productPriceBo.marketPrice > entity.productPriceBo.salesPrice}">
                {{entity.productPriceBo.formatSalesPrice}}
            </i>
        </div>
    </show-box>

    <show-box v-if="entity.brand">
        <div class="brand">
            <img :src="entity.brand.brandIco | resize 110 68" width="55" height="34"/>

            <h2>{{entity.brand.brandName}}</h2>
            <a :href="entity.brand.brandDomain | brandUrl">
                进入店铺
                <span class="icon icon-right"></span>
            </a>
        </div>
    </show-box>

    <div class="separator"><span>继续拖动，查看商品信息</span>
        <hr/>
    </div>

    <show-box v-if="intro.productDescBo">
        <h2>商品信息</h2>
        <i>DESCRIPTION</i>
        <hr>

        <ul class="description">
            <li>
                <span class="desc-caption">编号：</span>
                <span>{{intro.productDescBo.erpProductId}}</span>
            </li>
            <li>
                <span class="desc-caption">颜色：</span>
                <span>{{intro.productDescBo.colorName}}</span>
            </li>
            <li>
                <span class="desc-caption">性别：</span>
                <span>{{intro.productDescBo.gender | clothingGenderIdentity}}</span>
            </li>
            <li v-for="item in intro.productDescBo.standardBos">
                <span class="desc-caption">{{item.standardName}}：</span> <span>{{item.standardVal}}</span>
            </li>
        </ul>
    </show-box>


    <show-box v-if="intro.sizeInfoBo">
        <h2>尺码信息</h2>
        <i>SIZE INFO</i>
        <hr>
        <div class="horizon-wrapper">
            <table class="table">
                <thead>
                <th>吊牌尺码</th>
                <th v-for="header in intro.sizeInfoBo.sizeAttributeBos">{{header.attributeName}}</th>
                </thead>
                <tbody>

                <tr v-for="size in intro.sizeInfoBo.sizeBoList">
                    <td>{{size.sizeName}}</td>
                    <td v-for="item in size.sortAttributes">{{item.sizeValue}}</td>
                </tr>
                </tbody>
            </table>
        </div>

        <i class="info">提示：左滑查看完整表格信息</i>
    </show-box>

    <show-box v-if="intro.sizeImage">
        <h2>测量方式</h2>
        <i>MEASUREMENT METHOD</i>
        <hr>
        <img v-if="intro.sizeImage" :src="intro.sizeImage"/>
    </show-box>

    <show-box v-if="intro.modelBos && intro.modelBos.length > 0">
        <h2>模特试穿</h2>
        <i>REFERENCE</i>
        <hr>
        <div class="horizon-wrapper">
            <table class="table">
                <thead>
                <tr>
                    <th>模特</th>
                    <th>身高</th>
                    <th>体重</th>
                    <th>三围</th>
                    <th>吊牌尺码</th>
                    <th>试穿描述</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in intro.modelBos">
                    <td>
                        <img class="model-avatar" :src="item.avatar"/>
                        <span class="model-name">{{item.modelName}}</span>
                    </td>
                    <td>{{item.height}}</td>
                    <td>{{item.weight}}</td>
                    <td>{{item.vitalStatistics}}</td>
                    <td>{{item.fitModelBo.fit_size}}</td>
                    <td>{{item.fitModelBo.feel}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <i class="info">提示：左滑查看完整表格信息</i>
    </show-box>

    <show-box>
        <div v-if="intro.productMaterialList && intro.productMaterialList.length > 0">
            <h2>商品材质</h2>
            <i>MATERIALS</i>
            <hr>
        </div>

        <div v-if="intro.productMaterialList">
            <ul v-for="item in intro.productMaterialList">
                <div>
                    <div class="image-box">
                        <img :src="item.imageUrl" width="86" height="35"/>
                    </div>
                    <div class="text-box">
                        <div>{{item.caption}}</div>
                        <div>{{item.encaption}}</div>
                    </div>
                    <div class="clear-fix"></div>
                </div>
                <p>
                    {{item.remark}}
                </p>

                <hr/>
            </ul>
        </div>

        <ul class="wash-condition">
            <li class="wash-condition-item" v-for="item in intro.washTipsBoList">
                <img :src="item.img" width="25" height="25"/>
                <div>{{item.caption}}</div>
            </li>
        </ul>
    </show-box>

    <show-box :is-last="true">
        <h2>商品详情</h2>
        <i>DETAILS</i>

        <p v-if="entity.brand && entity.brand.brandIntro">
            {{{entity.brand.brandIntro}}}
        </p>

        <p v-if="entity.brand && intro.productIntroBo">
            {{{intro.productIntroBo.productIntro}}}
        </p>

    </show-box>

    <div class="control-box">
        <button class="button control-button" style="flex: 1">
            <a href="javascript:void(0);" @click="yoho.goShopingCart()" style="position: relative;">
                <i class="icon icon-bag"></i>
                <span v-if="cartCount > 0" class="badge badge-tr">{{cartCount}}</span>
            </a>
        </button>
        <button class="button control-button" style="flex: 1" @click="toggleFavorite()">
            <span v-if="entity.isCollect === 'Y' " class="icon icon-love-solid"></span>
            <span v-else class="icon icon-love"></span>
        </button>
        <button class="button button-solid" style="flex: 2"
                @click="showAddToCart()"
                :disabled="isSoldOut">
            <span v-if="isSoldOut">
                已售完
            </span>
            <span v-else="">
                加入购物袋
            </span>
        </button>
    </div>

    <feature-selector :is-visible="showFeatureSelector" :entity="entity"
                      :on-add-to-cart="onAddToCart"></feature-selector>
</template>
<style>
    .product-page {
        background: #f6f6f6;
    }

    .show-box .brand {
        max-height: 108px;
        line-height: 48px;
        overflow: hidden;

        img {
            vertical-align: middle;
        }

        h2 {
            font-size: 28px;
            vertical-align: middle;
            margin-left: 30px;
        }

        a {
            float: right;
            margin-top: 12px;
            font-size: 28px;
            color: #b0b0b0;
        }
    }

    .separator {
        text-align: center;
        color: #c4c4c4;
        height: 110px;
        line-height: 110px;
        margin-bottom: -20px;

        span {
            background: #f6f6f6;
            padding: 0 15px;
        }

        hr {
            max-width: 512px;
            margin-top: -55px;
            border: none;
            border-top: 1px solid #eee;
        }

    }

    i.info {
        font-style: normal;
        color: #b0b0b0;
        margin-top: 24px;
        display: block;
        font-size: 18px;
    }

    .image-box {
        background: #fff;
    }

    .title-box {
        text-align: center;
        margin-bottom: 50px;
        max-height: 195px;

        h1 {
            text-align: center;
            font-size: 30px;
            line-height: 48px;
            font-weight: normal;
            max-width: 580px;
            margin: 30px auto;
        }

        i.price {
            color: #b0b0b0;
            font-size: 32px;
            font-weight: lighter;
            font-style: normal;

            &.strike-through {
                text-decoration: line-through;
            }

            &.highlight {
                color: #d0021b;
            }

        }
    }

    .control-box {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        position: fixed;
        width: 100%;
        height: 99px;
        bottom: 0;

        .control-button {
            min-width: 100px;
            border: none;
            border-top: 1px solid #ccc;

            .icon {
                font-size: 40px;
            }

        }

        .control-button:first-child {
            border-right: 1px solid #ccc;
        }

        .button-solid {
            font-size: 26px;
        }

    }

    .horizon-wrapper {
        overflow-x: scroll;
    }

    .table {
        border-collapse: collapse;

        th {
            background: #f6f6f6;
        }

        th,
        td {
            border: 1px solid #eee;
            min-width: 170px;
            line-height: 66px;
            text-align: center;
        }

    }

    .wash-condition {
        display: flex;
        justify-content: space-around;
    }

    .wash-condition-item {
        flex: 1;
        text-align: center;
    }

    .description {
        font-size: 0;

        li {
            font-size: 24px;
            width: 325px;
            line-height: 40px;
            display: inline-block;
        }

        .desc-caption {
            color: #c7c7c7;
            min-width: 100px;
        }

    }

    .model-avatar {
        vertical-align: middle;
        border-radius: 100%;
    }

    .model-name {
        width: 100px;
        display: inline-block;
    }

    .badge-tr {
        margin-top: -10px;
    }
</style>
<script>
    /**
     * 商品详情页
     *
     * @author: Aiden Xu<aiden.xu@yoho.cn>
     * @date: 2016/07/19
     */
    const $ = require('yoho-jquery');
    const app = $('#app');
    const tip = require('common/tip');
    const yoho = require('yoho');

    require('yoho-vue-swipe/dist/vue-swipe.css');

    module.exports = {
        data() {
            return {
                yoho: yoho,
                intro: {},
                entity: {
                    brand: {
                        brandName: '',
                        brandIco: ''
                    },
                    productPriceBo: {
                        formatMarketPrice: ''
                    }
                },
                showFeatureSelector: false,
                cartCount: 0,

                /**
                 * 加入购物车回调
                 *
                 * @param result
                 */
                onAddToCart: (selection)=> {
                    $.post('/product/cart.json', {
                        productSku: selection.size.value,
                        buyNumber: 1
                    }).then((result)=> {
                        if (yoho.goShopingKey && result.data.shopping_key) {
                            yoho.goShopingKey({shoppingKey: result.data.shopping_key});
                        }

                        // TODO: 库存不足 后台暂未实现
                        // TODO: 商品已下架 后台暂未实现
                        if (result.code === 200) {
                            this.cartCount = result.data.goods_count;
                            this.showFeatureSelector = false;
                        } else {
                            this.showFeatureSelector = false;
                            tip('系统异常,请稍后重试');
                        }
                    });
                }
            };
        },
        computed: {
            isSoldOut: function() {
                return this.entity.storage === 0;
            }
        },
        components: {
            imageCarousel: require('./image-carousel.vue'),
            featureSelector: require('component/product/feature-selector.vue'),
            showBox: require('./show-box.vue'),
            topNav: require('./top-nav.vue'),
        },
        methods: {
            /**
             * 添加到购物车
             */
            showAddToCart: function() {
                this.showFeatureSelector = true;
            },

            /**
             * 添加收藏
             */
            toggleFavorite: function() {
                if (this.entity.isCollect === 'Y') {
                    $.post('/product/favorite.json', {
                        operation: 'remove',
                        id: this.entity.productPriceBo.productId
                    }).then((result)=> {
                        if (result.code === 200) {
                            tip('取消收藏成功');
                            this.entity.isCollect = 'N';
                        } else if (result.code === 403) {
                            // 未登陆
                            yoho.goLogin();
                        }
                    });
                } else {
                    $.post('/product/favorite.json', {
                        operation: 'add',
                        id: this.entity.productPriceBo.productId
                    }).then((result)=> {
                        if (result.code === 200) {
                            tip('收藏成功');
                            this.entity.isCollect = 'Y';
                        }
                    });
                }
            }
        },
        created() {
            const self = this;
            const pid = app.data('pid');
            let loadIntroDeferred;

            // 显示商品特征选择组件
            this.$on('feature.close', function() {
                self.showFeatureSelector = false;
            });

            // 读取基础数据
            $.get(`/product/product_${pid}.json`).then((result) => {
                // TODO: 异常处理
                this.entity = result;
                return result;
            }).then((result)=> {
                loadIntroDeferred = () => {
                    // 读取商品详情
                    $.get(`/product/product/intro_${pid}.json`, {skn: result.productPriceBo.productSkn}).then(intro => {
                        this.intro = intro;
                    });
                };
            });

            $(window).on('scroll', ()=> {
                if ($(window).scrollTop() > 200 && loadIntroDeferred) {
                    loadIntroDeferred();
                    loadIntroDeferred = null;
                }
            });

            // 读取购物车数量
            $.get('/product/cart-count.json').then(result=> {
                if (result.code === 200) {
                    this.cartCount = result.data.cart_goods_count;
                }
            });
        }
    };
</script>