{% load i18n %}

<style>

    .inventory-tt .g{
        color:green;
        margin-right:10px;
    }
    #tb tbody td,#tb thead th{
        background-color:white;
        valign:middle;
        text-align:center;
        vertical-align:middle;   
    }
 
    #tb tbody td.cls_acc_lv:hover{
        cursor:pointer;
        color:blue;
        font-weight:bold;
    }
</style>

<script type="text/javascript" src="/static/js/jquery-table2excel-master/src/jquery.table2excel.js"></script>

<script type="text/javascript">    
    $(document).ready(function(){    
        $('.datepicker').datepicker({dateFormat: 'yy-mm-dd'});       
        setDatePickerZh();
        $('#dt').val('{{dt}}');
        
        //$('#tb tbody .cls_lv').click(function(){   
        $('#tb tbody').on('click','.cls_acc_lv',function(){
            
            $.OpenDlg($(this).attr('murl'),$(this).attr('sal_div')+'-扫码明细',1200,800);
        });

        $('.btn-qry').click(function(){              
            dataRefresh();
        });
        dataRefresh();
        function dataRefresh(){
            var product_id='';
            var pid=$('#sel-product_id').val();
            if(pid==''){
                product_id=''
            }else{
                product_id="&product_id="+pid;
            }
            $.ajax({
                url:'/sales/saldiv/rebate/ajax/?date='+$('#dt').val()+product_id,
                dataType: "json",                    
                success: function(d) {
                    $('#tb .dt_to').text(d.date);
                    $('#tb tbody').html('');
                    var html='',tt1=0,tt2=0,tt3=0,tt4=0,tt5=0,t1=0,t2=0,t3=0,t4=0,t5=0,t6=0;
                    var rws;                    
                    var div;  
                    var cat;   
                    var cls1='',murl1='',cls2='',murl2='',saldiv1='',saldiv2='';
                    var url="/sales/saldiv/rebate/details/ajax/";                     
                    for (var i in d.divisions){
                        rws=d.divisions[i].data.length;  
                        cat=d.divisions[i].category;
                        html='';
                        tt1=0;
                        tt2=0;
                        tt3=0;
                        tt4=0;
                        tt5=0;
                        for (var j in d.divisions[i].data){                            
                            div=d.divisions[i].data[j];  
                            if (div.acc_lv1_boxes>0){
                                saldiv1=' sal_div="'+div.division_name+'： 经销商 "';
                                cls1=' class="cls_acc_lv"';
                                murl1=' murl="'+url+'?division_id='+div.division_id+'&vtype_id=2&date='+$('#dt').val()+product_id+'"';
                            }else{
                                cls1='';
                                murl1='';
                                saldiv1='';
                            };
                            if(div.acc_lv2_boxes>0){
                                saldiv2=' sal_div="'+div.division_name+'： 核心店 "';
                                cls2=' class="cls_acc_lv"';
                                murl2=' murl="'+url+'?division_id='+div.division_id+'&vtype_id=1&date='+$('#dt').val()+product_id+'"';
                            }else{
                                cls2='';
                                murl2='';
                                saldiv2='';
                            };

                            if (i==2){
                                td1='';
                            }else{
                                td1=(j==0?'<td rowspan='+rws+'>'+cat+'</td>':'');
                            }
                            html=html+'<tr>'+
                                td1+
                                '<td'+(i==2?' colspan=2':'')+'>'+div.division_name+'</td>'+
                                '<td>'+div.cur_lv1_boxes+'</td>'+
                                '<td>'+div.cur_lv2_boxes+'</td>'+
                                '<td '+cls1+murl1+saldiv1+'>'+div.acc_lv1_boxes+'</td>'+
                                '<td '+cls2+murl2+saldiv2+'>'+div.acc_lv2_boxes+'</td>'+
                                '<td>'+div.acc_delivery_boxes+'</td>'+
                                '<td>'+div.rate+'</td>'+
                                '</tr>';
                            tt1=tt1+parseInt(div.cur_lv1_boxes);
                            tt2=tt2+parseInt(div.cur_lv2_boxes);
                            tt3=tt3+parseInt(div.acc_lv1_boxes);
                            tt4=tt4+parseInt(div.acc_lv2_boxes);
                            tt5=tt5+parseInt(div.acc_delivery_boxes);   
                        };
                        if(parseInt(tt5)==0){
                            t6='0.00';
                        }else{
                            t6=$.formatNum((tt3+tt4)*100/tt5,2);
                        };   
                        
                        if( rws>0 ){
                            html=html+'<tr style="font-weight:bold;"><td colspan=2>'+'小计</td>'+
                                '<td>'+tt1+'</td>'+
                                '<td>'+tt2+'</td>'+
                                '<td>'+tt3+'</td>'+
                                '<td>'+tt4+'</td>'+
                                '<td>'+tt5+'</td>'+
                                '<td>'+t6+'</td>'+                        
                                '</tr>';
                            $('#tb tbody').append(html);
                            t1=t1+tt1;
                            t2=t2+tt2;
                            t3=t3+tt3;
                            t4=t4+tt4;
                            t5=t5+tt5;   
                            if(parseInt(t5)==0){
                                t6='0.00';
                            }else{
                                t6=$.formatNum((t3+t4)*100/t5,2);
                            };
                        }

                    };
                    html='<tr style="font-weight:bold;color:black;"><td colspan=2>合计</td>'+
                        '<td>'+t1+'</td>'+
                        '<td>'+t2+'</td>'+
                        '<td>'+t3+'</td>'+
                        '<td>'+t4+'</td>'+
                        '<td>'+t5+'</td>'+
                        '<td>'+t6+'</td>'+                        
                        '</tr>';
                    $('#tb tbody').append(html);                        
                }
            });
        };

        $('.btn-excel').click(function (){
            var name = "战区扫码汇总(2020-11-01 至 "+$('.datepicker').val()+').xls'
            $('#tb').table2excel({
                filename:name,
                name:'Excel Name',
             })
        })
    });
</script>

<div class='inventory-tt'>
    <form role="form"  class="form-inline" style="margin-top:0px;">
        <div class="col-sm-2 input-group">
            <span class="input-group-addon">{% trans "日期:"%}</span>
            <input class="datepicker form-control" id="dt" />
        </div>
        <div class="col-sm-2 input-group">
            <span class="input-group-addon">{% trans "产品名称:"%}</span>
            <select class='form-control' id='sel-product_id'>
                <option value=''>全部</option>
                <option value='900'>52度500mL内参酒</option>
                <option value='1109'>54度500ml内参酒</option>
            </select>
        </div>    
  
        <div  class="col-sm-1 input-group">
            <span class='input-group-btn'>
                <a type="button" class='btn btn-primary btn-qry'>
                    <span class='glyphicon glyphicon-search' style='padding-right:5px;'></span>{% trans '查询' %}
                </a>
            </span>        
        </div>
        <div  class="col-sm-1 input-group">
            <span class='input-group-btn'>
                <a type="button" class='btn btn-primary btn-excel'> <span class='glyphicon glyphicon-export' style='padding-right:5px;'></span>{% trans '导出到Excel' %}
                </a>
            </span>        
        </div>
    </form>
</div>
<div class="clearfix"></div>


<div id="inventory-list" class="table-responsive">    

    <table id="tb" class="table table-bordered dt-responsive" width="100%">
        <thead>
            <tr>
                <th rowspan=3 colspan=2>销售战区</th>
                <th colspan=2 class='dt_to'>{{dt}}</th>
                <th colspan=4>{{dt0}} 至 <span class='dt_to'>{{dt}}</span></th>
            </tr>
            <tr>
                <th colspan=2>扫码量</th>
                <th colspan=2>累计扫码量</th>
                <th rowspan=2>内参仓库累计发货量（箱）</th>
                <th rowspan=2>扫码率（%）</th>
            </tr>
            <tr>
                <th>经销商（箱）</th>
                <th>核心店（箱）</th>
                <th>经销商（箱）</th>
                <th>核心店（箱）</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
       
    
    </table>       
</div>



