{template "header.html"}

<section class="main-content-area">
    <div class="container">
        <!-- bradcame start -->
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="greentect_bradcame">
                    <ul>
                        <li><a href="{SITE_URL}">首页</a></li>
                        {dr_catpos($catid, '', true, '<li> <a href="[url]">[name]</a> </li>')}
                        <li>详情</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- bradcame end -->

        <!-- single page product information start -->
        <div class="single-product-page-area">
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                    <div class="single-product-image">
                        <div class="single-pro-main-image">
                            <a href=""><img id="optima_zoom" src="{dr_thumb($thumb[0][file], 500, 500)}" data-zoom-image="{dr_get_file($thumb[0][file])}" alt="商品"/></a>
                        </div>
                        <div class="single-pro-thumb">
                            <ul class="thubm-caro" id="optima_gallery">
                                {loop $thumb $t}
                                <li>
                                    <a href="#" data-image="{dr_thumb($t[file], 500, 500)}" data-zoom-image="{dr_get_file($t[file])}">
                                        <img style="width:100px; height:100px;" src="{dr_thumb($t[file], 100, 100)}" />
                                    </a>
                                </li>
                                {/loop}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <div class="single-product-description">
                        <div class="pro-desc">
                            <h2>{$title}</h2>
                            <div class="review_forum">
                                <div class="rating-box">
                                    {dr_mall_star_level($avgsort)}
                                </div>

                                <p>
                                    <a href="{dr_comment_url($id)}"><i class="fa fa-comments"></i> {$comments}</a>
                                    <a href="javascript:;"><i class="fa fa-eye"></i> {dr_show_hits($id)}</a>
                                </p>
                            </div>

                            <div class="info-orther">
                                <p>销售总量: <span> {$volume} </span></p>
                                <p>商品所在地: <span class="in-stock">{dr_linkagepos('address', $city, ' ', '')}</span></p>
                            </div>
                            <div class="product-desc">
                                {$description}
                            </div>
                            <div class="product-price-group">
                                <span class="price regular-price">￥<span id="dr_sku_price">{if $price_sku}{dr_sku_price($price_sku, 2, ' ~ ')}{else}{number_format($price, 2)}{/if}</span>元</span>
                                {if $promotion}
                                    {if $price_sku}
                                    <span class="promotion" id="dr_promotion_price"></span>
                                    {else}
                                    <span class="promotion">{$promotion[price]}</span>
                                    {/if}
                                {/if}
                                {if !$shipping}<span class="discount">包邮</span>{/if}
                            </div>


                            <div class="form-option">
                                <div class="form-group row">
                                    <label class="col-md-2 control-label fc-sku-group-html">商品编号</label>
                                    <div class="col-md-9 ">
                                        <span id="dr_sku_sn"> {$price_sn} </span>
                                    </div>
                                </div>
                                {if $price_sku}
                                {loop $price_sku['group'] $gid $gname}
                                {if $gname}
                                <div class="form-group row">
                                    <label class="col-md-2 control-label fc-sku-group-html">{$gname}</label>
                                    <div class="col-md-9 fc-sku-select-price">
                                        {php $i=0;}
                                        {loop $price_sku['name'][$gid] $vid $vname}
                                        <button type="button" fvalue="{$gid}_{$vid}" fname="{$vname}" fsn="{$price_sku['value'][$gid.'_'.$vid]['sn']}" class="fc-sku-value btn {if $i==$sku_value[$gid]}red{/if} btn-default btn-xs">{$vname}</button>
                                        {php $i=1;}
                                        {/loop}
                                    </div>
                                </div>
                                {/if}
                                {/loop}
                                <input type="hidden" id="dr_sku_value" value="">
                                {loop $price_sku['value'] $i $v}
                                <input type="hidden" id="dr_sku_sn_{$i}" value="{$v.sn}">
                                <input type="hidden" id="dr_sku_price_{$i}" value="{number_format($v.price,2)}">
                                <input type="hidden" id="dr_sku_quantity_{$i}" value="{$v.quantity}">
                                <input type="hidden" id="dr_sku_promotion_{$i}" value="{$promotion[$i]}">
                                {/loop}
                                {/if}
                                <div class="form-group row">
                                    <label class="col-md-2 control-label fc-sku-group-html">库存剩余</label>
                                    <div class="col-md-9">
                                        <span id="dr_sku_quantity"> {$price_quantity} </span>件
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-2 control-label fc-sku-group-html" >购买数量</label>
                                    <div class="col-md-3">
                                        <input id="dr_buy_num" type="text" value="1">
                                    </div>
                                </div>

                            </div>


                        </div>

                        <div class="form-action">

                            <div class="button-group">
                                <a style="margin-top: 10px;" href="javascript:dr_mall_favorite('{MOD_DIR}', '{$id}');" class="btn blue"> <i class="fa fa-heart-o"></i> 收藏商品 </a>
                                <a style="margin-top: 10px;" href="javascript:add_buy();" class="btn green"> <i class="fa fa-rmb"></i> 立即购买 </a>
                                <a style="margin-top: 10px;" href="javascript:add_cart();" class="btn red"> <i class="fa fa-shopping-cart"></i> 加入购物车 </a>
                            </div>

                        </div>

                    </div>
                </div>

                {if $mall}
                <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">

                    <div class="goods-mall-border">
                        <div class="goods-mall-header">
                            <p><a href="{$mall.url}" target="_blank"><img src="{dr_thumb($mall.thumb, 100, 80)}"></a></p>
                            <p><a href="{$mall.url}" target="_blank">{$mall.title}</a></p>
                        </div>
                        <div class="goods-mall-comments">
                            <div class="rating-box">
                                {dr_mall_star_level($mall.avgsort)}
                            </div>
                        </div>
                        <div class="goods-mall-url">
                            <a href="javascript:dr_mall_favorite('mall', '{$mall.id}');" class="mall-zjs">收藏</a>
                            <a href="{$mall.url}" target="_blank">店铺</a>
                        </div>
                    </div>
                </div>
                {/if}
            </div>
            <!-- product description tab start -->
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="product-more-info-tab">
                        <!-- Nav tabs -->
                        <ul class="more-info-tab nav nav-tabs">
                            <li class="active"><a href="#proDescription" data-toggle="tab">商品详情</a></li>
                            <li><a href="#proReview" data-toggle="tab">商品属性</a></li>
                            <li><a href="#proTag" data-toggle="tab">商品评论（{$comments}）</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="product-tab-content tab-content">
                            <div class="tab-pane active" id="proDescription">
                                {$content}
                            </div>
                            <div class="tab-pane" id="proReview">
                                <table class="table table-bordered">
                                    {loop $spcs $i $c}
                                    <tr>
                                        <td width="200"  class="text-right">{$c.name}</td>
                                        <td>{$c.value}</td>
                                    </tr>
                                    {/loop}

                                </table>
                            </div>
                            <div class="tab-pane" id="proTag">
                                {dr_module_comment(MOD_DIR, $id)}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- product description tab end -->
        </div>


    </div>
</section>


<link href="{THEME_PATH}assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.css" rel="stylesheet" type="text/css" />
<script src="{THEME_PATH}assets/global/plugins/fuelux/js/spinner.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>

<script type="text/javascript" src="{THEME_PATH}assets/js/sku.js"></script>
<script type="text/javascript">
    var thumb_sku_sn = {json_encode($thumb_sku_sn)};
    var thumb_sku_first = {json_encode($thumb_sku_first)};
    $(function () {
        select_sku_price();
        get_sku_price();
        $("#dr_buy_num").TouchSpin({
            step: 1,
            min: 1,
            max: {intval($price_quantity)}
        });
    })
    // 加入购物车
    function add_cart(){
        $.get("/index.php?is_ajax=1&s=cart&c=api&m=add&num="+$('#dr_buy_num').val()+"&id={$id}&fid={$ci->module['field']['price']['id']}&sku="+$('#dr_sku_value').val(), function(data){
            dr_tips(data.code, data.msg);
            if (data.code) {
                $('#dr_cart_nums').html(data.data);
                dr_mall_update_cart();
            }
        }, 'json');
    }
    // 购买地址
    function add_buy() {
        var url = "{dr_url('order/checkout/buy', ['fid' => $ci->module['field']['price']['id'],'id'=>$id])}";
        url+= "&sku="+$('#dr_sku_value').val();
        url+= "&num="+$('#dr_buy_num').val();
        window.location.href = url;
    }
    // 组合价格选择
    function select_sku_price() {
        $('.fc-sku-select-price .fc-sku-value').click(function () {
            $(this).parent('.fc-sku-select-price').find('.fc-sku-value').removeClass('red');
            $(this).addClass('red');
            get_sku_price();
            // 选中对应的图片
            var fsn = $(this).attr('fsn');
            var fname = $(this).attr('fname');
            if (thumb_sku_first.hasOwnProperty(fname) && thumb_sku_first[fname]  != "0") {
                $('#optima_zoom').attr('src', thumb_sku_first[fname] );
                $('#optima_zoom').attr('data-zoom-image', thumb_sku_first[fname] );
            } else if (thumb_sku_sn.hasOwnProperty(fsn) && thumb_sku_sn[fsn]  != "0"){
                $('#optima_zoom').attr('src', thumb_sku_sn[fsn] );
                $('#optima_zoom').attr('data-zoom-image', thumb_sku_sn[fsn] );
            }
        });
    }
    function get_sku_price() {
        var oname = new Array();
        $('.fc-sku-select-price').each(function () {
            oname.push($(this).find('.red').attr('fvalue'));
        });
        var k = oname.join("_");
        $('#dr_sku_value').val(k);
        $('#dr_sku_price').html($('#dr_sku_price_'+k).val());
        $('#dr_sku_quantity').html($('#dr_sku_quantity_'+k).val());
        $('#dr_sku_sn').html($('#dr_sku_sn_'+k).val());
        {if $promotion}
        $('#dr_promotion_price').html($('#dr_sku_promotion_'+k).val());
        {/if}

    }
</script>
{template "footer.html"}