{{> layout/header}}
<div class="product-detail-page yoho-page">
    {{# detail}}
        {{# banner}}
            <div class="brand-banner" style="background:{{bgColor}}{{#if bgImg}} url({{bgImg}}){{/if}}">
                <div class="center-content clearfix">
                    <a class="pull-left" href="{{homeUrl}}">
                        <img src="{{logo}}">
                    </a>

                    <div class="opt pull-right">
                        <a class="home" href="{{homeUrl}}">
                            <span class="iconfont">&#xe617;</span>
                        </a>
                        <span id="brand-favour" class="brand-fav">
                            <i class="iconfont{{#if coled}} coled{{/if}}">&#xe616;</i>
                        </span>
                    </div>
                </div>
            </div>
        {{/ banner}}

        <div class="center-content">
            {{> layout/path-nav}}
            
            {{# goodInfo}}
                <div class="main clearfix" data-skn="{{skn}}">
                    <div class="pull-left imgs clearfix">
                        <div class="pull-left img">
                            <div class="tags clearfix">
                                {{# tags}}
                                    {{# isNew}}
                                        <span class="good-tag new-tag">NEW</span>
                                    {{/ isNew}}
                                    {{# isReNew}}
                                        <span class="good-tag renew-tag">再到着</span>
                                    {{/ isReNew}}
                                    {{# isSale}}
                                        <span class="good-tag sale-tag">SALE</span>
                                    {{/ isSale}}
                                    {{# isNewFestival}}
                                        <span class="good-tag new-festival-tag">新品节</span>
                                    {{/ isNewFestival}}
                                    {{# isLimit}}
                                        <span class="good-tag limit-tag">限量商品</span>
                                    {{/ isLimit}}
                                    {{# isYearEndPromotion}}
                                        <span class="good-tag yep-tag">年终大促</span>
                                    {{/ isYearEndPromotion}}
                                    {{# isYearMidPromotion}}
                                        <span class="good-tag ymp-tag">年中热促</span>
                                    {{/ isYearMidPromotion}}
                                    {{# isFew}}
                                        <p class="good-tag few-tag">即将售罄</p>
                                    {{/ isFew}}
                                {{/ tags}}
                            </div>
                            <img id="img-show" class="img-show" src="{{img}}">
                        </div>
                        <div id="thumbs" class="pull-right thumbs">
                            {{# colors}}
                                <div class="thumb-wrap{{#unless focus}} hide{{/unless}}">
                                    {{#if focus}}
                                        {{# thumbs}}
                                            <a href="{{url}}">
                                                <img class="thumb" src="{{img}}" data-shower="{{shower}}">
                                            </a>
                                        {{/ thumbs}}
                                    {{^}}
                                        {{# thumbs}}
                                            <a href="{{url}}">
                                                <img class="thumb lazy" data-original="{{img}}" data-shower="{{shower}}">
                                            </a>
                                        {{/ thumbs}}
                                    {{/if}}
                                </div>
                            {{/ colors}}
                        </div>
                    </div>
                    <div class="pull-right infos">
                        <p class="name">
                            {{name}}
                        </p>
                        <a class="brand-name" href="{{brandUrl}}">{{brandName}}</a>
                        <p class="market-price {{#if salePrice}}with-sale{{/unless}}">
                            <span class="title">市场价：</span>
                            <span class="price">￥{{marketPrice}}</span>
                        </p>
                        {{#if salePrice}}
                            <p class="sale-price">
                                <span class="title">促销价：</span>
                                <span class="price">￥{{salePrice}}</span>
                            </p>
                        {{/if}}

                        {{#if activity}}
                            <ul class="activity">
                                {{#each activity}}
                                    <li>
                                        {{#if activityImg}}
                                            <a class="img-link" href="{{url}}">
                                                <img src="{{activityImg}}">
                                            </a>
                                        {{^}}
                                            <span class="ac-type">{{type}}</span>
                                            <span class="ac-des">【{{des}}】</span>
                                        {{/if}}
                                    </li>
                                {{/each}}
                            </ul>
                        {{/if}}

                        <div class="trade-content">
                            <div id="type-chose" class="type-chose">
                                <div class="chose-color row clearfix">
                                    <span class="title pull-left">选颜色：</span>
                                    <ul class="colors pull-left clearfix">
                                        {{#each colors}}
                                            <li class="{{#if focus}}focus{{/if}} {{#if disable}}disable{{/if}} pull-left" title="{{title}}">
                                                <img src="{{src}}">
                                            </li>
                                        {{/each}}
                                    </ul>
                                </div>

                                <div class="chose-size row clearfix">
                                    <span class="title pull-left">选尺码：</span>

                                    <div id="sizes" class="size-wrapper pull-left clearfix">
                                        {{#each colors}}
                                            <ul class="size {{#unless focus}}hide{{/unless}} clearfix">
                                                {{#each size}}
                                                    <li {{#unless num}}class="disable"{{/unless}} data-title="{{title}}" data-sku="{{sku}}" data-num="{{num}}">{{name}}</li>
                                                {{/each}}
                                            </ul>
                                        {{/each}}
                                        <span class="size-ruler"></span>

                                        <span class="size-warn warn-tip hide">
                                            <i class="iconfont">&#xe62c;</i>
                                            请选择尺码
                                        </span>

                                        <p class="color-size-tip hide"></p>
                                    </div>
                                </div>

                                <div class="chose-count row clearfix">
                                    <span class="title pull-left">选数量：</span>
                                    <div class="num-wraper pull-left clearfix">
                                        <span id="num" class="num pull-left">1</span>
                                        <span class="minus-plus pull-left">
                                            <i id="plus-num" class="plus iconfont">&#xe610;</i>
                                            <i id="minus-num" class="minus iconfont">&#xe600;</i>
                                        </span>
                                        <span id="num-warn" class="num-warn warn-tip hide">
                                            <i class="iconfont">&#xe62c;</i>
                                            库存不足
                                        </span>

                                        {{# fashionTopGoods}}
                                            {{#if getLimitedCode}}
                                                <span class="lc-btn get-lc">获取限购码</span>
                                                <div class="lc-container hide">
                                                    <span class="lc-arrow"></span>
                                                    <div class="lc-content">
                                                        <div class="qr-code"></div>
                                                        <p class="title">打开APP扫描二维码获取限购码</p>
                                                        <p class="sub-title">商品开售后即可购买</p>
                                                    </div>
                                                </div>
                                            {{/if}}

                                            {{#if hadLimitedCode}}
                                                <span class="lc-btn had-lc">已获取限购码</span>
                                            {{/if}}

                                            {{#if limitedCodeSoldOut}}
                                                <span class="lc-btn lc-sold-out">限购码已抢光</span>
                                            {{/if}}
                                        {{/ fashionTopGoods}}
                                    </div>
                                </div>

                                <p class="row">
                                    {{# fashionTopGoods}}
                                        {{#if buyNow}}
                                            <span id="buy-now" class="buy-btn item-buy{{#if dis}} dis{{/if}}">立即购买</span>
                                        {{/if}}

                                        {{#if openSoon}}
                                            <span id="open-soon" class="buy-btn item-buy{{#if dis}} dis{{/if}}">即将开售</span>
                                        {{/if}}
                                    {{^}}
                                        <span id="add-to-cart" class="buy-btn item-buy">
                                            <i class="iconfont">&#xe628;</i>
                                            添加到购物车
                                        </span>
                                    {{/ fashionTopGoods}}

                                    <span id="sold-out" class="buy-btn dis hide">
                                        <i class="iconfont">&#xe62d;</i>
                                        已售罄
                                    </span>

                                    <span id="collect-product" class="{{#if coled}}coled {{/if}}collect-product">
                                        <i class="iconfont">&#xe616;</i>
                                        {{#if coled}}
                                            <em>已收藏</em>
                                        {{^}}
                                            <em>收藏商品</em>
                                        {{/if}}
                                    </span>
                                </p>

                                <p class="share-row">
                                    <span class="title pull-left">分享商品：</span>
                                    <span class="share-wrapper pull-left clearfix">
                                        <i class="weibo" data-type="weibo" title="分享到新浪微博"></i>
                                        <i class="weixin" data-type="weixin" title="分享到微信朋友圈"></i>
                                        <i class="qweibo" data-type="qweibo" title="分享到腾讯微博"></i>
                                        <i class="qzone" data-type="qzone" title="分享到QQ空间"></i>
                                        <i class="qq" data-type="qq" title="分享到QQ好友"></i>
                                        <i class="renren" data-type="renren" title="分享到人人"></i>
                                        <i class="douban" data-type="douban" class="分享到豆瓣"></i>
                                    </span>
                                </p>
                            </div>

                            <div id="balance" class="balance">
                                <p class="success-tip">商品已成功添加到购物车！</p>
                                <p class="cart-total">购物车一共有<span id="cart-num">0</span>件商品</p>
                                <p class="balance-btns">
                                    <a class="go-cart buy-btn" href="{{goCartUrl}}">
                                        去购物车结算
                                        <i class="iconfont">&#xe601;</i>
                                    </a>

                                    <span id="keep-shopping" class="keep-shopping">
                                        继续购物
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            {{/ goodInfo}}

            <div class="other-infos">
                <div class="description-material info-block">
                    <p class="block-title">
                        <span class="title cur">商品信息 DESCRIPTION</span>
                        <span class="sep">|</span>
                        <span class="title">材质洗涤 MATERIALS</span>
                    </p>
                    <div class="description-content">
                        {{# description}}
                            <ul class="basic clearfix">
                                {{# basic}}
                                    <li>
                                        {{key}}: {{value}}
                                    </li>
                                {{/ basic}}
                            </ul>
                            {{#if comfort}}
                                <ul class="comfort clearfix">
                                    {{# comfort}}
                                        <li class="pull-left">
                                            <span class="comfort-title">{{name}}：</span>
                                            <span class="min-des">{{minDes}}</span>
                                            {{# blocks}}
                                                <span class="comfort-block {{#if cur}}cur{{/if}}"></span>
                                            {{/ blocks}}
                                            <span class="max-des">{{maxDes}}</span>
                                        </li>
                                    {{/ comfort}}
                                </ul>
                            {{/if}}
                        {{/ description}}
                    </div>
                    <div class="material-content">
                        {{# material}}
                            {{#if detail}}
                                <ul class="material-detail clearfix">
                                    {{# detail}}
                                        <li>
                                            <img src="{{img}}">
                                            <p class="name">{{name}}<br>{{enName}}</p>
                                            <p class="text">{{text}}</p>
                                        </li>
                                    {{/ detail}}
                                </ul>
                            {{/if}}

                            {{#if wash}}
                                <ul class="wash">
                                    {{# wash}}
                                        <li>
                                            <img class="wash-icon" src="{{img}}">
                                            <p class="wash-name">{{name}}</p>
                                        </li>
                                    {{/ wash}}
                                </ul>
                            {{/if}}
                        {{/ material}}
                    </div>
                </div>
                <div class="size-info info-block">
                    <p class="block-title">
                        <span class="title cur">尺码信息 SIZE INFO</span>
                    </p>
                    {{# size}}
                        <table class="size-table">
                            <thead>
                                <tr>
                                    {{# thead}}
                                        <th width="{{width}}">{{name}}</th>
                                    {{/ thead}}
                                </tr>
                            </thead>
                            <tbody>
                                {{# tbody}}
                                    <tr>
                                        {{#each .}}
                                            <td>{{.}}</td>
                                        {{/each}}
                                    </tr>
                                {{/ tbody}}
                            </tbody>
                        </table>
                        <p class="size-tip">
                            ※ 以上尺寸为实物人工测量，因测量方式不同会有1-2CM误差，相关数据仅作参考，以收到实物为准。  单位：CM
                        </p>
                        <p class="size-tip">
                            ※ 参考尺码因衣服版型、剪裁不同会有误差，仅供参考
                        </p>
                        {{#if sizeImg}}
                            <img class="size-img" src="{{sizeImg}}">
                        {{/if}}
                    {{/ size}}
                </div>

                {{#if reference}}
                    <div class="reference info-block">
                        <p class="block-title">
                            <span class="title cur">模特试穿 REFERENCE</span>
                        </p>
                        {{# reference}}
                            <table class="reference-table">
                                <thead>
                                    <tr>
                                        {{# thead}}
                                            <th width="{{width}}">{{name}}</th>
                                        {{/ thead}}
                                    </tr>
                                </thead>
                                <tbody>
                                    {{# tbody}}
                                        <tr>
                                            {{#each .}}
                                                <td>
                                                    {{#if @first}}
                                                        <img class="avatar" src="{{.}}">
                                                    {{^}}
                                                        {{.}}
                                                    {{/if}}
                                                </td>
                                            {{/each}}
                                        </tr>
                                    {{/ tbody}}
                                </tbody>
                            </table>
                        {{/ reference}}
                        <p class="size-tip">
                            ※ 模特试穿中身高单位：CM，体重单位：KG，三围单位：CM
                        </p>
                    </div>
                {{/if}}

                <div class="details info-block">
                    <p class="block-title">
                        <span class="title cur">商品详情 DETAILS</span>
                    </p>
                    <div class="details-html">
                        {{{details}}}
                    </div>
                </div>

                {{# consultComment}}
                    <div class="consult-comment info-block">
                        <p class="block-title">
                            <span class="title">顾客咨询（{{consultNum}}）</span>
                            <span class="sep">|</span>
                            <span class="title cur">购买评价（{{commentNum}}）</span>
                        </p>
                        <div class="comments cc-content">
                            <h2>购买评价（{{commentNum}}）</h2>
                            <ul id="comments-ul">
                                {{# comments}}
                                    <li>
                                        <div class="user-info clearfix">
                                            <img class="user-avatar pull-left" src="{{avatar}}">
                                            <p>
                                                <span class="name">{{userName}}  </span>
                                                购买了{{color}}/{{size}}
                                                <br>
                                                <span class="date">{{date}}</span>
                                            </p>
                                        </div>
                                        <p class="comment">{{comment}}</p>
                                    </li>
                                {{/ comments}}
                            </ul>
                            {{#if hasMoreComments}}
                                <p class="more-wrap">
                                    <span class="load-more-comments load-more">
                                        加载更多
                                        <i class="iconfont">&#xe61d;</i>
                                    </span>
                                </p>
                            {{/if}}
                            <p class="btn-wrap">
                                <a class="btn" href="{{commentUrl}}" target="_blank">
                                    <i class="iconfont">&#xe62a;</i>
                                    我要评论
                                </a>
                            </p>
                        </div>

                        <div class="consults cc-content">
                            <h2>顾客咨询（{{consultNum}}）</h2>
                            <ul id="consults-ul">
                                {{# consults}}
                                    <li>
                                        <div class="user-info clearfix">
                                            <img class="user-avatar" src="{{avatar}}">
                                            <p>
                                                <span class="question">{{question}}</span>
                                                <br>
                                                <span class="date">{{date}}</span>
                                            </p>
                                        </div>
                                        <p class="consult">{{answer}}</p>
                                    </li>
                                {{/ consults}}
                            </ul>
                            {{#if hasMoreConsults}}
                                <p class="more-wrap">
                                    <span class="load-more-consults load-more">
                                        加载更多
                                        <i class="iconfont">&#xe61d;</i>
                                    </span>
                                </p>
                            {{/if}}
                            <p class="btn-wrap">
                                <span id="consults-btn" class="btn">
                                    <i class="iconfont">&#xe62a;</i>
                                    我要咨询
                                </span>
                            </p>
                            <div class="new-consult hide">
                                <textarea class="my-consult"></textarea>
                                <span class="consult-warn warn-tip hide">
                                    <i class="iconfont">&#xe62c;</i>
                                    请输入咨询内容
                                </span>
                                <div class="captcha-row">
                                    <input class="captcha" type="text">
                                    <img class="captcha-img" src="http://www.yohobuy.com/passport/images?g=consult">
                                    <span class="captcha-warn warn-tip hide">
                                        <i class="iconfont">&#xe62c;</i>
                                        <em>请输入验证码</em>
                                    </span>
                                </div>
                                <span id="submit-consult" class="btn submit-consult">提交咨询</span>
                            </div>

                            <div class="consult-success hide">
                                <p>
                                    <span class="iconfont">&#xe61a;</span>
                                    咨询成功，请等待客服回复
                                </p>
                            </div>
                        </div>
                    </div>
                {{/ consultComment}}

                <div class="after-service">
                    <p id="after-service-switch" class="after-service-switch">
                        <span class="iconfont">&#xe62b;</span>
                        售后服务
                        <span class="iconfont triangle">&#xe604;</span>
                    </p>
                    <div class="after-service-content info-block">
                        <div class="block-title">
                            <span class="title cur">售后服务 AFTER SERVICE</span>
                        </div>
                        <div class="img-1"></div>
                        <div class="img-2"></div>
                        <div class="text">
                            <h4>退换货承诺</h4>
                            <p>自您签收商品7日内可以退货，15日内可以换货，在商品不影响二次销售的情况下，YOHO！有货将为您办理退换货服务，请在网站提交"退换货"申请。需要说明的是：非质量问题的退换货，来回运费由您承担。</p>
                            <h4>退换货方式</h4>
                            <p>
                                针对国内大中型城市，YOHO!有货开通了<span class="orange">"上门换货"</span>服务，上门服务区域及费用请联系客服中心；若您所在的区域不在上门换货范围内，请您选择普通快递将商品、内包装、赠品及发货单等一并寄回。质量问题的退换货，目前不支持运费到付款业务，请您先垫付运费寄回。如需退换货，请致电客服电话：400-889-9646。
                            </p>
                            <h4>退换货邮寄地址</h4>
                            <p>
                                南京市江宁区江宁经济技术开发区苏源大道87号YOHO!有货物流中心东一楼 收件人：YOHO！有货 邮编：211106
                                <br>
                                YOHO！有货客服热线：400-889-9646　　客服邮箱：<a href="mailto:service@yoho.cn">service@yoho.cn</a>
                                <br>
                                有疑问请联系我们，我们将为您提供最优质的产品和服务。
                            </p>
                        </div>
                    </div>
                </div>

                <div class="service"></div>
                {{#if latestWalk}}
                    <div class="info-block latest-walk">
                        <input id="latest-walk-count" type="hidden" value="{{latestWalk}}">
                        <p class="block-title">
                            <span class="title cur">最近浏览 RECENT REVIEW</span>
                        </p>
                        <div id="latest-walk-goods" class="goods clearfix"></div>
                        {{> product/latest-walk-tpl}}
                    </div>
                {{/if}}
            </div>
        </div>
    {{/ detail}}
</div>
{{> layout/footer}}