<template>
    <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>
        <div class="brand">
            <img :src="entity.brand.brandIco | resize 110 68" width="55" height="34"/>

            <h2>{{entity.brand.brandName}}</h2>
            <a href="#">
                进入店铺
                <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>
            {{{entity.brand.brandIntro}}}
        </p>

        <p v-if="intro.productIntroBo">
            {{{intro.productIntroBo.productIntro}}}
        </p>
    </show-box>

    <div class="control-box">
        <button class="button control-button" style="flex: 1">
            <a 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 src="./css/index.css"></style>
<script src="./js/index.js"></script>