#@ucenter_noleft_layout('购物车')

#define css()
<style>
    .page-header {
        margin: 10px 0 20px;
    }

    .input-number {
        width: 120px;
    }

    .input-group-addon {
        cursor: pointer;
    }

    .add, .subtract {

    }


    .bottom-bar {
        left: 0;
        position: fixed;
        bottom: 0;
        width: 100%;

        height: 60px;
        background-color: #fff;
        border-top: 1px solid #F0F0F0;
        box-shadow: 0 -1px 8px rgba(0, 1, 1, .08);
        z-index: 9999;
    }

    .bottom-content {

        width: 100%;
        max-width: 1250px;
        height: 60px;
        margin: 0 auto;
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box;
        z-index: 9999;
    }

    .bottom-content div {
        height: 60px;
        line-height: 60px;
    }

    .bottom-content-action {
        display: flex;
    }

    .jp-operation a, .cart-checkbox label {
        font-size: 14px;
        color: #999;
        margin-right: 5px;
        font-weight: 400;
    }

    .jp-operation a:hover {
        color: #dd4b39;
    }

    .jp-operation .jp-cleaner {
        font-weight: 500;
        color: #666;
    }

    .bottom-content-price {
        display: flex;
        justify-content: flex-end;
    }

    .select-sum, .price-sum {
        color: #999;
        font-size: 14px;
        margin-right: 5px;
        font-weight: 400;
    }

    .select-sum em {
        color: #dd4b39;
        font-weight: 500;
        margin: 0 5px;
    }

    .sumprice em {
        color: #dd4b39;
        font-weight: 500;
        font-size: 18px;
    }

    .table > tbody > tr > td {
        vertical-align: middle;
    }

    @media all and (max-width: 768px){
        .bottom-content{
            padding-left:0;
        }
    }


</style>
#end

#define script()

<script>

    $(".add").on("click", function () {
        var itemId = $(this).attr("data-value");
        var that = $(this);

        ajaxPost('#(CAPTH)/ucenter/cart/addcount', {id: itemId}, function (ret) {
            var input = that.prev();
            var inputVal = input.val();
            if (inputVal && inputVal != "") {
                inputVal = parseInt(inputVal) + 1;
            } else {
                inputVal = 1;
            }
            input.val(inputVal);
            doCompute(inputVal, that, ret.shouldPayPrice);
        });
    });


    $(".subtract").on("click", function () {
        var itemId = $(this).attr("data-value");
        var that = $(this);
        ajaxPost('#(CAPTH)/ucenter/cart/subtractcount', {id: itemId}, function (ret) {
            var input = that.next();
            var inputVal = input.val();
            if (inputVal && inputVal != "") {
                inputVal = parseInt(inputVal) - 1;
                if (inputVal < 1) inputVal = 1;
            } else {
                inputVal = 1;
            }
            input.val(inputVal);
            doCompute(inputVal, that, ret.shouldPayPrice);
        });
    });


    function doCompute(val, btn, shouldPayPrice) {

        var row = btn.parent().parent().parent("tr").prevAll().length + 1;
        var col = btn.parent().parent().prevAll().length;

        // var price = parseFloat(getTableContent(row, col - 1));
        // var totalPrice = price * val;

        setTableContent(row, col + 1, shouldPayPrice);

        querySelectedItemCountAndPrice();
    }


    function getTableContent(row, col) {
        var content = null;
        $('#tab tr').each(function (i) {
            $(this).children('td').each(function (j) {
                if (row == i && col == j) {
                    content = $(this).text();
                    return false;
                }
            });
        });
        return content;
    }


    function setTableContent(row, col, content) {
        $('#tab tr').each(function (i) {
            $(this).children('td').each(function (j) {
                if (row == i && col == j) {
                    content = $(this).text(content);
                    return false;
                }
            });
        });
    }


    function checkAll(checkbox) {
        if (checkbox.checked) {
            $(".dataItem").each(function () {
                $(this).prop('checked', checkbox.checked);
            });
        }

        var itemIds = getSelectedIds();
        if (itemIds == "") {
            alert("当前购物车并没有任何内容。");
            if (checkbox.checked) {
                $(checkbox).prop('checked', false);
            }
            return;
        }


        if (checkbox.checked) {
            ajaxPost('#(CAPTH)/ucenter/cart/select', {id: itemIds}, function () {
                $(".dataItem").each(function () {
                    $(this).parent().parent("tr").prop("style", "background-color: #fff4e8;");
                    querySelectedItemCountAndPrice();
                });
            })
        } else {
            ajaxPost('#(CAPTH)/ucenter/cart/unselect', {id: itemIds}, function () {
                $(".dataItem").each(function () {
                    $(this).prop('checked', false);
                    $(this).parent().parent("tr").prop("style", "");
                    querySelectedItemCountAndPrice();
                });
            })
        }
    }

    function dataItemChange(checkbox) {
        var itemId = $(checkbox).val();
        if (checkbox.checked) {
            ajaxPost('#(CAPTH)/ucenter/cart/select', {id: itemId}, function () {
                $(checkbox).parent().parent("tr").prop("style", "background-color: #fff4e8;");
                querySelectedItemCountAndPrice();
            })
        } else {
            ajaxPost('#(CAPTH)/ucenter/cart/unselect', {id: itemId}, function () {
                $(checkbox).parent().parent("tr").prop("style", "");
                querySelectedItemCountAndPrice();
            })
        }

    }

    function getSelectedIds() {
        var selectedIds = "";
        $(".dataItem").each(function () {
            if ($(this).prop('checked')) {
                selectedIds += $(this).val() + ",";
            }
        });
        return selectedIds == "" ? "" : selectedIds.substring(0, selectedIds.length - 1);
    }


    function doDelCart(id) {
        if (confirm("确定要删除该商品吗？")) {
            ajaxGet('#(CAPTH)/ucenter/cart/doDel?id=' + id, function () {
                location.reload()
            })
        }
    }

    function querySelectedItemCountAndPrice() {
        ajaxGet("#(CAPTH)/ucenter/cart/querySelectedItemCountAndPrice", function (data) {
            $('#selectedItemCount').text(data.count);
            $('#selectedItemPrice').text("¥" + data.price);
        })
    }


    function doDelSelectedItems() {
        ajaxGet("#(CAPTH)/ucenter/cart/querySelectedItemCountAndPrice", function (data) {
            if (data.count > 0) {
                if (confirm("确定要删除所有选中的商品吗？")) {
                    ajaxGet("#(CAPTH)/ucenter/cart/doDelSelectedItems", function () {
                        location.reload();
                    })
                }
            } else {
                alert("您未选择任何商品。")
            }
        })
    }


    function doRemoveSelectedItemsToFavorites() {
        ajaxGet("#(CAPTH)/ucenter/cart/querySelectedItemCountAndPrice", function (data) {
            if (data.count > 0) {
                if (confirm("确定要把所有选中商品移动到收藏夹吗？")) {
                    ajaxGet("#(CAPTH)/ucenter/cart/doRemoveSelectedItemsToFavorites", function () {
                        location.reload();
                    })
                }
            } else {
                alert("您未选择任何商品，无法进行移动到收藏夹。")
            }
        })
    }


    function gotoCheckout() {
        ajaxGet("#(CAPTH)/ucenter/cart/querySelectedItemCountAndPrice", function (data) {
            if (data.count > 0) {
                location.href = "#(CPATH)/ucenter/checkout"
            } else {
                alert("您未选择任何商品，无法进行结算。")
            }
        })
    }

</script>
#end

#define content()
<div class="content-wrapper" style="min-height: 1126px;">
    <!-- Main content -->
    <section class="invoice">
        <div class="row">
            <div class="col-xs-12">
                <h2 class="page-header">
                    <i class="fa fa-globe"></i> 购物车.
                </h2>
            </div>
        </div>


        <!-- Table row -->
        <div class="row">
            <div class="col-xs-12 table-responsive">
                <table class="table table-striped" id="tab">
                    <thead>
                    <tr>
                        <th style="width: 10px">
                            <input name="dataItem" onchange="checkAll(this)" type="checkbox"/>
                        </th>
                        <th style="width: 40%">商品</th>
                        <th>单价 #</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th style="width: 100px">操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    #for(userCart : page.list ??)
                    <tr #(userCart.selected ?
                    'style="background-color: #fff4e8;"' : '') >
                    <td>
                        <input class="dataItem" #checkedIf(userCart.selected) type="checkbox" value="#(userCart.id ??)"
                               onchange="dataItemChange(this)"/>
                    </td>
                    <td>
                        <a href="#(userCart.product_link ?? '#')" target="_blank">
                            #(userCart.product_title ??)
                        </a>

                        <div style="color: #9c9c9c">
                            #for(option : userCart.optionsMap)
                                 #(option.key ??) : #(option.value ??) #if(!(for.last))<br />#end
                            #end
                        </div>
                    </td>
                    <td>
                        #if(userCart.memberPrice ??)
                        <s>#(userCart.product_price ??)</s>
                        会员：#(userCart.memberPrice)
                        #else
                        #(userCart.product_price ??)
                        #end
                    </td>
                    <td>
                        <div class="input-group input-number">
                            <span class="input-group-addon subtract" data-value="#(userCart.id ??)">-</span>
                            <input type="text" class="form-control" value="#(userCart.product_count ??)">
                            <span class="input-group-addon add" data-value="#(userCart.id ??)">+</span>
                        </div>
                    </td>
                    <td>#(userCart.shouldPayPrice ??)</td>
                    <td>
                        <a href="#(CPATH)/ucenter/checkout/#(userCart.id ??)">结算</a>
                        <a href="javascript:;" onclick="doDelCart('#(userCart.id)')">删除</a>
                    </td>
                    </tr>
                    #end

                    </tbody>
                </table>

                <div class="box-footer">
                    <div class="row">
                        <div class="col-sm-12">
                            #@_paginate()
                        </div>
                    </div>
                </div>

            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>

    <div class="clearfix"></div>
</div>

<div class="bottom-bar">
    <div class="row bottom-content">
        <div class="col-lg-4 bottom-content-action hidden-xs">

            <div class="select-all">
                <div class="cart-checkbox">
                    <input type="checkbox" class="jpcheckbox" onchange="checkAll(this)">
                    <label>全选</label>
                </div>
            </div>
            <div class="jp-operation">
                <a href="javascript:;" onclick="doDelSelectedItems()" class="remove-batch">删除选中商品</a>
                <a href="javascript:;" onclick="doRemoveSelectedItemsToFavorites()" class="follow-batch">移到收藏</a>
                <!--                <a href="#" class="jp-cleaner" title="亲，点我可快速清理购物车商品哦！">清理购物车</a>-->
            </div>


        </div>
        <div class="col-lg-7 col-xs-9 bottom-content-price">

            <div class="select-sum">
                已选择<em id="selectedItemCount">#(selectItemCount ?? '0')</em>件商品<b class="up"></b>
            </div>

            <div class="price-sum">
                <div>
                    <span class="txt txt-new">总价：</span>
                    <span class="sumprice">
                        <em id="selectedItemPrice">¥#number(selectItemTotalPrice ?? 0,'0.00')</em>
                    </span>
                    <b class="ml5 price-tips"></b>

                </div>
            </div>


        </div>
        <div class="col-lg-1 col-xs-3 bottom-content-buybtn">
            <a href="javascript:;" class="btn btn-danger " onclick="gotoCheckout()"><i class="fa fa-credit-card"></i>
                去结算
            </a>
        </div>
    </div>
</div>
#end
