<template>
    <top-nav v-if="isApp" :title="entity.productName" :img="firstImage | resize 300 300"></top-nav>
    <show-box :is-first="true">
        <image-carousel :goods="entity.goodsList"></image-carousel>
        <div class="title-box">
            <h1 class="line-clamp-2">{{entity.productName}}</h1>
            <i class="price" v-if="entity.marketPrice > entity.salesPrice"
               :class="{'strike-through': entity.salesPrice > 0}">{{entity.formatMarketPrice}}</i>

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

    <show-box class="brand" v-if="brand">
        <img :src="brand.brandIco | resize 110 68"/>

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

    <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 class="product-detail-desc" :is-last="true">
        <h2>商品详情</h2>
        <i>DETAILS</i>

        <p v-if="brand && brand.brandIntro" v-lazy-html="brand.brandIntro">
        </p>

        <p v-if="brand && intro.productIntroBo" v-lazy-html="intro.productIntroBo.productIntro">
        </p>

    </show-box>

    <div class="control-box" v-if="isApp && isReady">
        <button class="button control-button">
            <span @click="yoho.goShopingCart()" style="position: relative;">
                <i class="icon icon-bag"></i>
                <span v-if="isApp && cartCount > 0" class="badge badge-tr">{{cartCount >= 100 ? '99+': cartCount}}</span>
            </span>
        </button>
        <button class="button control-button" @click="toggleFavorite()">
            <span v-if="entity.isCollect === 'Y' " class="icon icon-focused"></span>
            <span v-else class="icon icon-focus"></span>
        </button>
        <button class="button button-solid add-to-cart"
                @click="showAddToCart()"
                :disabled="isSoldOut">
            <span v-if="isSoldOut">
                已售完
            </span>
            <span v-else="">
                加入购物袋
            </span>
        </button>
    </div>

    <div v-if="!isApp">
        <share-bottom></share-bottom>
    </div>

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

    .show-box.brand {
        overflow: hidden;
        $lh: 68px;

        img {
            height: 68px;
            width: auto;
            max-width: 110px;
            float: left;
        }

        h2 {
            display: inline-block;
            font-size: 28px;
            margin-left: 30px;
            width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: $lh;
        }

        .brand-go {
            float: right;
            font-size: 28px;
            line-height: $lh;
            color: #b0b0b0;
        }

        .icon-right {
            margin-left: 30px;
        }

        a {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    }

    .product-detail-desc {
        /* 覆盖 img width，height 属性 */
        img {
            width: 100% !important;
            height: auto !important;
        }

        table {
            width: 100%;
        }
    }

    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-style: normal;

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

            &.highlight {
                color: #d0021b;
            }
        }
    }

    .control-box {
        position: fixed;
        width: 750px;
        height: 99px;
        bottom: 0;

        .control-button {
            min-width: 100px;
            border: none;
            border-top: 1px solid #eee;
            width: 187.5px;
            float: left;
            display: block;

            .icon {
                font-size: 40px;
            }
        }

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

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

        .add-to-cart {
            width: 375px;
            font-size: 28px;
        }
    }

    .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: -28px;
        margin-left: 6px;
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 18px;
        padding: 0;
    }
</style>
<script>
    /**
     * 商品详情页
     *
     * @author: Aiden Xu<aiden.xu@yoho.cn>
     * @date: 2016/07/19
     */
    const $ = require('jquery');
    const app = $('#app');
    const tip = require('common/tip');
    const yoho = require('yoho');
    const share = require('common/share');
    const bus = require('common/vue-bus');

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

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

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

                        // TODO: 库存不足 后台暂未实现
                        // TODO: 商品已下架 后台暂未实现
                        if (result.code === 200) {
                            this.cartCount = result.data.goods_count;

                            selector.playAnimation();
                        } else {
                            result.message = '添加购物车失败 >_<';
                        }

                        this.showFeatureSelector = false;
                        tip(result.message);
                    });
                },

                //state
                isApp: yoho.isApp,
                isSoldOut: false,
                isReady: false
            };
        },
        computed: {
        },
        components: {
            imageCarousel: require('./image-carousel.vue'),
            featureSelector: require('component/product/feature-selector.vue'),
            showBox: require('./show-box.vue'),
            topNav: require('./top-nav.vue'),
            shareBottom: require('component/tool/share-bottom.vue'),
        },
        methods: {
            /**
             * 添加到购物车
             */
            showAddToCart: function() {
                this.showFeatureSelector = true;
            },

            /**
             * 添加收藏
             */
            toggleFavorite: function() {
                $.post('/product/favorite.json', {
                    operation: this.entity.isCollect === 'Y' ? 'remove' : 'add',
                    id: this.entity.productId
                }).then((result)=> {
                    if (result.code === 200) {
                        tip(this.entity.isCollect === 'Y' ? '取消收藏成功' : '收藏成功');
                        this.entity.isCollect = this.entity.isCollect === 'Y' ? 'N' : 'Y';
                        yoho.store.set('productReload', true);
                    } else if (result.code === 403) {
                        // 未登录
                        yoho.goLogin('', () => {
                            this.toggleFavorite();
                        });
                    }
                });
            },

            /*
                刷新购物车
             */
            refreshCart: function() {
                $.get('/product/cart-count.json').then(result=> {
                    if (result.code === 200) {
                        this.cartCount = result.data.cart_goods_count;
                    }
                });
            }
        },
        created() {
            const self = this;
            const pid = app.data('pid');

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

            // 读取基础数据
            $.get(`/product/product_${pid}.json`).then((result) => {
                if (!result.data) {
                    return;
                }
                this.entity = result.data;
                this.brand = result.data.brandInfo;

                if (this.entity.storage === 0 || this.entity.status === 0) {
                    this.isSoldOut = true;
                }

                const goodsList = this.entity.goodsList || [];

                goodsList.forEach((goods)=> {
                    if (!this.firstImage && goods.colorImage) {
                        this.firstImage = goods.colorImage;
                    }
                });

                share({
                    title: this.entity.productName,
                    link: location.href,
                    desc: '我在BLK发现了一个不错的商品，快来看看吧！',
                    imgUrl: this.firstImage.replace(/(\{width}|\{height}|\{mode})/g, function($0) {
                        const dict = {
                            '{width}': 300,
                            '{height}': 300,
                            '{mode}': 2
                        };

                        return dict[$0];
                    })
                });

                return result.data;
            }).then((data)=> {
                if (data) {
                    // 读取商品详情
                    $.get(`/product/product/intro_${pid}.json`, {skn: data.productSkn}).then(intro => {
                        this.intro = intro;
                    });
                }
            })
            .always(() => {
                this.isReady = true;
            });

            // 读取购物车数量
            if (this.isApp) {
                this.refreshCart();
                bus.$on('app.shoppingcart.refresh', this.refreshCart);
            }
        }
    };
</script>