{% load i18n %}


<style>
    #tb-batchlot tfoot input{
        width:95%;
    }
</style>





<script type="text/javascript">
    $(document).ready(function(){ 
        var tb_stock,tb_batchlot;
        
        $('#sel-period').change(function(){
                refresh_data();
            }
        );
        
        $('#tabs .btn-batchlot').click(function(){
            refresh_batchlot();
        });

        function refresh_batchlot(){     
            tb_batchlot.destroy();
            $('#tb-batchlot').html('<thead></thead><tbody></tbody><tfoot></tfoot></table>');
            var url='',span_name='',span_value='';
            var period_id=$('#sel-period').val();
            span_name=$('#span-name').val();
            span_value=$('#span-value').val();
            if(period_id==''){
                url='/utils/batchlot/data/';
            }else{
                url='/utils/batchlot/data/'+period_id+'/?span_name='+span_name+"&span_value="+span_value;
            };    
            url=url+"&batchlot_only=1";
            $.ajax({
                type: "GET",                
                url: url,
                dataType: "json",
                success: function(data) {    
                    tb_batchlot=$('#tb-batchlot').DataTable({
                        dom: 'Bfrtip',
                        autoWidth: true,
                        destroy: true,
                        //pageLength: page_length,
                        buttons: [{extend:'excelHtml5',text: '导出到Excel'}],   
                        language:lng,
                        columns : data.clmns.batchlot,
                        data:data.data.batchlot
                    });  
                    var flds='';
                    for(var i in data.clmns.batchlot){
                        flds=flds+'<th><input type="text" placeholder="'+data.clmns.batchlot[i].title+'" /></th>';                            
                    };
                    $('#tb-batchlot tfoot').html(flds);
                    tb_batchlot.columns().every( function () {                        
                        var that = this;             
                        $('input', this.footer() ).on( 'keyup change clear', function () {
                            if ( that.search() !== this.value ) {
                                that.search( this.value ).draw();
                            }
                        });
                    });                
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('连接服务器失败');
                    return;
                }                
            });           
        };

        function refresh_data(){
            var url='',span_name='',span_value='',foot='';
            var period_id=$('#sel-period').val();
            span_name=$('#span-name').val();
            span_value=$('#span-value').val();            
            if(period_id==''){
                url='/utils/batchlot/data/';
            }else{
                url='/utils/batchlot/data/'+period_id+'/?span_name='+span_name+"&span_value="+span_value;
            };      
            $.ajax({
                type: "GET",                
                url: url,
                dataType: "json",
                success: function(data) {   
                    $('#period-title').html(data.title);

                    //刷新产品库存报表
                    tb_stock=$('#tb-stock').DataTable({
                        dom: 'Bfrtip',
                        autoWidth: true,
                        destroy: true,
                        //pageLength: page_length,
                        buttons: [{extend:'excelHtml5',text: '导出到Excel'}],   
                        language:lng,          
                        data:data.data.stock
                    });
                    tb_stock.columns().every( function () {                        
                        var that = this;             
                        $('input', this.footer() ).on( 'keyup change clear', function () {
                            if ( that.search() !== this.value ) {
                                that.search( this.value ).draw();
                            }
                        });
                    });         

                                        
                    //刷新产品批准库龄报表
                    $('#tb-batchlot').empty();   
                    var flds='';
                    for(var i in data.clmns.batchlot){
                        flds=flds+'<th><input type="text" placeholder="'+data.clmns.batchlot[i].title+'" /></th>';  
                    };
                    $('#tb-batchlot').append('<tfoot>'+flds+'</tfoot>');  
                    tb_batchlot=$('#tb-batchlot').DataTable({
                        dom: 'Bfrtip',
                        autoWidth: true,
                        destroy: true,
                        //pageLength: page_length,
                        buttons: [{extend:'excelHtml5',text: '导出到Excel'}],   
                        language:lng,
                        columns : data.clmns.batchlot,
                        data:data.data.batchlot
                    });
                    tb_batchlot.columns().every( function () {                        
                        var that = this;             
                        $('input', this.footer() ).on( 'keyup change clear', function () {
                            if ( that.search() !== this.value ) {
                                that.search( this.value ).draw();
                            }
                        });
                    });                        
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('连接服务器失败');
                    return;
                }                
            });        

        };
        refresh_data();    
    });
</script>




<div>
    <ol class="breadcrumb">
        <li>进销存报表</li>
        <li>产品库存明细</li>     
    </ol>
</div>


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

<div class="x_panel" style='min-height:700px;padding-top:0px;'>    
    <div class="col-sm-12 input-group" style='padding-bottom:10px;'>
        <span class="input-group-addon">报表会计期：</span>
        <div class='col-sm-2'>
            <select id='sel-period' class='form-control'>
                {% for p in periods %}
                    <option value='{{p.id}}'>{{p.name}}</option>
                {% endfor %}
                <option value='0'>当前库存</option>
            </select>
        </div>
        <span id='period-title' class='col-sm-3' style='padding-top:8px;'></span>
    </div>
    
    
    <div id="tabs" role="tabpanel" data-example-id="togglable-tabs">

    <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
        <li role="presentation" class="active"><a href="#tab_1" role="tab" data-toggle="tab">产品进销存报表</a></li>
        <li role="presentation" class=""><a href="#tab_2" role="tab"   data-toggle="tab">库存产品生产批次</a></li>       
    </ul>
    
    <div id="myTabContent" class="tab-content">
        <div role="tabpanel" class="tab-pane fade active in" id="tab_1">       
            <div  class="table-responsive">
                <table id='tb-stock'  class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th rowspan=2>产品名称</th>
                        <th rowspan=2>包装规格</th>                        
                        <th colspan=2>上期结存</th>
                        <th colspan=2>成品入库</th>
                        <th colspan=2>销售出库</th>
                        <th colspan=2>销售退库</th>
                        <th colspan=2>本期结存</th>
                    </tr>
                    <tr>
                        <th>箱</th><th>盒</th>
                        <th>箱</th><th>盒</th>
                        <th>箱</th><th>盒</th>
                        <th>箱</th><th>盒</th>
                        <th>箱</th><th>盒</th>                       
                    </tr>    
                </thead>
                <tbody></tbody>
                <tfoot>
                    <th><input type="text" placeholder='产品名称' /></th>
                    <th><input type="text" placeholder='包装规格' /></th>
                    <th><input type="text" placeholder='箱' /></th>
                    <th><input type="text" placeholder='盒' /></th>
                    <th><input type="text" placeholder='箱' /></th>
                    <th><input type="text" placeholder='盒' /></th>
                    <th><input type="text" placeholder='箱' /></th>
                    <th><input type="text" placeholder='盒' /></th>
                    <th><input type="text" placeholder='箱' /></th>
                    <th><input type="text" placeholder='盒' /></th>     
                    <th><input type="text" placeholder='箱' /></th>
                    <th><input type="text" placeholder='盒' /></th>                    
                </tfoot>
                </table>
            </div>
        </div>        
        <div role="tabpanel" class="tab-pane fade" id="tab_2">   
            <div class="col-sm-12 input-group">
                <span class="input-group-addon">库龄分析步长:</span>
                <div class='col-sm-1'>
                    <input id='span-value' value=6 class='form-control col-sm-1' />
                </div>
                <div class='col-sm-1'>
                    <select id='span-name' class='form-control'>
                        <option value='months' selected='selected'>个月</option>
                        <option value='days'>天</option>
                    </select>
                </div>

                <a type="button" class='btn btn-sm btn-primary btn-batchlot' style='margin-top:2px;'>刷新</a>
                <span style='margin-left:50px;'>单位:盒</span>           
            
            </div>
            <div  class="table-responsive">
                <table id='tb-batchlot'  class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                <thead></thead><tbody></tbody><tfoot></tfoot>
                </table>
            </div>
        </div>            

    </div>          
   
</div>
</div>   



