{extend name="public/base" /}
{block name="body"}
<style>
.clear{clear:both;height:0px;line-height:0px;width:1px;}   
.clear20{clear:both;height:20px;line-height:20px;width:1px;}
.tttr th{text-align: center;}
.tttr td{text-align: center;}
.cids{letter-spacing:1px;font-weight:600;color:#1f283a;}
.th-cid{color:#fff;background:#619dce;}
.th-num{color:#fff;background:#64ccc4;}
.th-m{color: #fff;background:#cc8b6a;}
.th-h{color:#fff;background: #7c98d8;}
.th-q{color:#fff;background:hsl(138, 82%, 35%);}
.inlineCheckbox{width:35px;height:35px;}
.td-num{color: #22353d;}
.td-m{color: red;}
.td-h{color:#1c3a37;}  
.table tbody>tr>td:first-child{letter-spacing:1px;font-weight:600;color:#1f283a;}

.sum-div{
    width:90%;
    height:90px;
    background: #fff;
    position: fixed;
    top:8.6%;
    right: 0;
    box-shadow: 1px 2px 3px #999999;
    display:none;
}
.sum-li{
   width:25%;
   float: left;
}
.sum-li p{
    margin-top:5%;
   font-size:18px;
   text-align: center;
}
.sum-li span{
   font-size:17px;
   text-align: center;
   display: block;
}
.btn-danger{float: right;}
</style>

<div class="main-box clearfix">
    <div class="main-box-body clearfix">
        <div class="clear20"></div>
        <table class="table table-bordered bj" id="table" cellspacing="0" cellpadding="2" border="1">
            <div class="sum-div" id="sum-div">
                  <div class="sum-li">
                      <p>已选</p>
                      <span style="color:brown" id="sum-n">0</span>
                  </div>
                  <div class="sum-li">
                    <p>总数</p>
                    <span style="color:#22353d" id="sum-num">0</span>
                  </div> 
                  <div class="sum-li">
                    <p>充值金额</p>
                    <span style="color:red" id="sum-m">0</span>
                  </div>
                  <div class="sum-li">
                    <p>已回传</p>
                    <span style="color:#22353d" id="sum-h">0</span>
                  </div>  
                  <div class="clear"></div> 
                  <button type="button" class="btn btn-danger" onclick="downSum()">关闭</button>
            </div>
            <thead>
                <tr class="tttr">
                    <th class="th-cid">clickid</th>
                    <th class="th-num">总数</th>
                    <th class="th-m">充值金额</th>
                    <th class="th-h">已回传(包括自动,比例,手动)</th>
                    <th class="th-q">选择求和</th>
                </tr>
            </thead>
            <tbody id="table" cellspacing="0" cellpadding="2" border="1">
                {volist name="list" id="v"}
                 <tr class="tttr">
                     <td class="cids">{$v.cid}</td>
                     <td class="td-num">{$v.num}</td>
                     <td class="td-m">￥{if $v.m==''}0{else}{$v.m}{/if}</td>
                     <td class="td-h">{$v.h}</td>
                     <td>
                        <input type="checkbox" class="inlineCheckbox" onclick="sumdata(this)" data-cid="{$v.cid}" data-num="{$v.num}" data-m="{$v.m}" data-h="{$v.h}">
                     </td>
                 </tr>
                 {/volist} 
            </tbody>
        </table>
    </div>
</div>


{/block}
{block name="script"}
<script src = "/public/js/colResizable-1.6.min.js" ></script>
<script>
$(function(){
	//此处实现表格可拖放属性
	$("#table").colResizable({
	  liveDrag:true,//实现实时拖动，可看见拖动轨迹
	  draggingClass:"dragging", //防止拖动出险虚标线
	  resizeMode: "overflow" //表的宽度可以超过父级宽度
	});
    localStorage.setItem("tnum",0);
});

function sumdata(zz){
    var num = Number($(zz).attr('data-num'));
    var m = $(zz).attr('data-m');
    var h = $(zz).attr('data-h');
    var tnum = Number(localStorage.getItem("tnum"));
    if(zz.checked == true){
         if(Number(tnum)==0){
             $('#sum-div').show();
         }
         tnum = tnum+1;
         localStorage.setItem("tnum",tnum);
         $('#sum-n').html(tnum);
         add(num,m,h); 
    }else{
        if(Number(tnum)<=0){
             $('#sum-div').hide();
             localStorage.setItem("tnum",0);
             del(num,m,h);
             $('#sum-n').html(0);
         }else{
            tnum = tnum-1;
            localStorage.setItem("tnum",tnum);
            $('#sum-n').html(tnum);
            del(num,m,h);
            if(Number(tnum)<=0){
                $('#sum-div').hide();
            }
         }
    }
}

//累加数据
function add(num,m,h){
     var tnum = Number(localStorage.getItem("tnum"));
     if(Number(tnum)==0){
         $('#sum-num').html(num);
         $('#sum-m').html(m);
         $('#sum-h').html(h);
     }else{
         var sumnum = Number(num)+Number($('#sum-num').html());
         $('#sum-num').html(sumnum);
         var summ = Number(m)+Number($('#sum-m').html());
         $('#sum-m').html(summ);
         var sumh = Number(h)+Number($('#sum-h').html());
         $('#sum-h').html(sumh);
     }
}
//递减数据
function del(num,m,h){
    var tnum = Number(localStorage.getItem("tnum"));
    if(Number(tnum)>0){
         var sumnum = Number($('#sum-num').html()) - Number(num);
         $('#sum-num').html(sumnum);
         var summ = Number($('#sum-m').html()) - Number(m);
         $('#sum-m').html(summ);
         var sumh = Number($('#sum-h').html()) - Number(h);
         $('#sum-h').html(sumh);
     }else{
         $('#sum-num').html(0);
         $('#sum-m').html(0);
         $('#sum-h').html(0);
     }
}
//关闭求和框
function downSum(){
    $('#sum-div').hide();
    localStorage.setItem("tnum",0);
    $('#sum-num').html(0);
    $('#sum-m').html(0);
    $('#sum-h').html(0);
    $('#sum-n').html(0);
    $("input[type='checkbox']").prop("checked",false);
}
</script>
{/block}