#@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;
    }

</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 () {
            var input = that.prev();
            var inputVal = input.val();
            if (inputVal && inputVal != "") {
                inputVal = parseInt(inputVal) + 1;
            } else {
                inputVal = 1;
            }
            input.val(inputVal);
            doCompute(inputVal, that);
        });
    });


    $(".subtract").on("click", function () {
        var itemId = $(this).attr("data-value");
        var that = $(this);
        ajaxPost('#(CAPTH)/ucenter/cart/subtractcount', {id: itemId}, function () {
            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);
        });
    });


    function doCompute(val, btn) {

        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, totalPrice.toFixed(2));

        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 doDel(id) {
        if (confirm('确定要删除该记录吗？删除后不可恢复')) {
            ajaxGet("#(CPATH)/ucenter/address/doDel/" + id)
        }
    }

    $("#batchDel").click(function () {
        var ids = getSelectedIds();
        if (ids == "") {
            alert('您未选择任何内容');
            return
        }

        if (confirm('确定要删除选中的记录吗？删除后不可恢复')) {
            ajaxGet("#(CPATH)/ucenter/address/doDelByIds?ids=" + ids);
        }

    });


    function checkAll(checkbox) {
        if (checkbox.checked) {
            $(".dataItem").each(function () {
                $(this).prop('checked', checkbox.checked);
            });
            var itemIds = getSelectedIds();
            ajaxPost('#(CAPTH)/ucenter/cart/select', {id: itemIds}, function () {
                $(".dataItem").each(function () {
                    $(this).parent().parent("tr").prop("style", "background-color: #fff4e8;");
                    querySelectedItemCountAndPrice();
                });
            })
        } else {
            var itemIds = getSelectedIds();
            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.substring(0, selectedIds.length - 1);
    }


    function del(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 && confirm("确定要删除所有选中的商品吗？")){
                ajaxGet("#(CAPTH)/ucenter/cart/doDelSelectedItems",function () {
                    location.reload();
                })
            }else {
                alert("您未选择任何商品。")
            }
        })
    }


    function doRemoveSelectedItemsToFavorites() {
        ajaxGet("#(CAPTH)/ucenter/cart/querySelectedItemCountAndPrice",function (data) {
            if (data.count > 0 && 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_detail_page ?? '#')" target="_blank">#(userCart.product_title ??)</a>
                    </td>
                    <td>#(userCart.product_new_price ??)</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.product_count * userCart.product_new_price ??)</td>
                    <td>
                        <a href="#(CPATH)/ucenter/checkout/#(userCart.id ??)">结算</a>
                        <a href="javascript:;" onclick="del('#(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">

            <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 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 bottom-content-buybtn">
            <a href="javascript:;" class="btn btn-danger " onclick="gotoCheckout()"><i class="fa fa-credit-card"></i>
                去结算
            </a>
        </div>
    </div>
</div>
#end