<template>
    <show-box :is-first="true">
        <image-carousel :goods="entity.goodsList"></image-carousel>
        <div class="title-box">
            <h1>{{entity.productName}}</h1>

            <i class="price" :class="{'strike-through': entity.productPriceBo.salesPrice > 0}">{{entity.productPriceBo.formatMarketPrice}}</i>

            <i v-if="entity.productPriceBo.salesPrice > 0" class="price highlight">
                {{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 === 1 ? '男款' : '女款'}}</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>
        <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>
                <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"><span class="icon icon-bag"></span></button>
        <button class="button control-button" style="flex: 1"><span class="icon icon-love"></span></button>
        <button class="button button-solid" style="flex: 2" @click="showAddToCart()">加入购物袋</button>
    </div>

    <feature-selector :is-visible="showFeatureSelector"></feature-selector>
</template>
<style src="./css/detail.css"></style>
<script src="./js/detail.js"></script>