{% load i18n %}


<style>
    .g{
        color:green;
        font-weight:bold;
    }
</style>

<ol class="breadcrumb">
    <li>  {% trans "物流查询" %}</li> 
    <li>  {% trans "批次溯源" %}</li> 
</ol>



<script type="text/javascript">
    $(document).ready(function(){ 
        var html='<div>'+
            '<table id="tb_boxes" class="table table-striped table-bordered dt-responsive" width="100%" >'+
                '<thead><tr><th>箱号</th></tr></thead>'+
                '<tbody></tbody>'+
                '<tfoot></tfoot>'+
            '</table>'+
            '</div><div class="clearfix"></div>';
        $('#bgModalLabel').html('箱号明细：'); 
        $("#bg-modal .modal-body").html(html);

        var labels_in=[],labels_out=[];
        var tb_in,tb_out,tb_boxes;        

        $('#batch_label').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/batch/',
                    dataType: "json",
                    data: {
                        term:$("#batch_label").val() ,//搜索栏里的内容
                        vtype_id:1,
                        product_id:$('#product_id').val()
                        //company_id:  $('#id_company').val() ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#batch_no").val(ui.item.value);
                $("#batch_label").val(ui.item.label);
                return false;
            }
        });     

        $('#product_label').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/product/',
                    dataType: "json",
                    data: {
                        term:   $("#product_label").val() ,//搜索栏里的内容
                        vtype_id:1
                        //company_id:  $('#id_company').val() ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#product_id").val(ui.item.value);
                $("#product_label").val(ui.item.label);
                return false;
            }
        });     

        function ShowBoxs(data){   
            tb_boxes=$('#tb_boxes').DataTable({                        
                dom: 'Bfrtip',
                autoWidth: false,
                destroy: true,
                buttons: [{extend:'excelHtml5',text:'导出到Excel'}],           
                language:lng,           
                data:data                        
            });            
            $("#bg-modal .modal-footer").show();   
            $("#bg-modal").modal('show');
        };

        function RefreshData(product_id,batch_no){   
            $.ajax({
                type:'GET',
                processData: false,  
                contentType: 'application/json; charset=utf-8',
                url:'/inventory/production/batch/query/?product_id='+product_id+'&batch_no='+batch_no,
                success:function(data){   
                    $('#stk_qty').text('当前库存数量：'+data.qty_stk+' 箱');
                    $('#query-list').show();

                    var data_in,data_out,d;
                    data_in=data.inbound;
                    data_out=data.outbound;
                    d=[];
                    labels_in=[];
                    for (i in data_in){                        
                        d.push([ data_in[i].code, data_in[i].time, data_in[i].storehouse, data_in[i].user, data_in[i].qty ]);
                        labels_in.push({'id':data_in[i].batch_id,'lbls':data_in[i].labels});
                    };
                    tb_in=$('#tb_inbound').DataTable({                        
                        dom: 'Bfrtip',
                        autoWidth: false,
                        destroy: true,
                        buttons: [{extend:'excelHtml5',text:'导出到Excel'}],           
                        language:lng,           
                        data:d,
                        columns:[
                            {'title':'入库单号'},
                            {'title':'入库时间'},
                            {'title':'仓库名称'},
                            {'title':'操作人'},
                            {'title':'入库数量(箱)'},
                        ]
                    });  
                   
                    $('#tb_inbound a')
                        .unbind('click')
                        .bind('click',function(e){
                            e.preventDefault();  
                            var id=$(this).attr('href');
                            var arr=[];
                            for (var i in labels_in){
                                if (labels_in[i].id==id){
                                    for(var j in labels_in[i].lbls){
                                        arr.push([ labels_in[i].lbls[j] ]);
                                    };
                                    break;
                                }
                            };    
                            ShowBoxs(arr);
                        });
                   
                    d=[];
                    labels_out=[];
                    for (i in data_out){                        
                        d.push([ data_out[i].code, data_out[i].time, data_out[i].customer, data_out[i].user, data_out[i].qty ]);
                        labels_out.push({'id':data_out[i].batch_id,'lbls':data_out[i].labels});
                    };
                    tb_out=$('#tb_outbound').DataTable({                       
                        dom: 'Bfrtip',
                        autoWidth: false,
                        destroy: true,
                        buttons: [{extend:'excelHtml5',text:'导出到Excel'}],           
                        language:lng,           
                        data:d,
                        columns:[
                            {'title':'出库单号'},
                            {'title':'发货时间'},
                            {'title':'经销商名称'},
                            {'title':'操作人'},
                            {'title':'出库数量(箱)'},
                        ]
                    });      
                    
                    
                    $('#tb_outbound a')
                        .unbind('click')
                        .bind('click',function(e){
                            e.preventDefault();  
                            var id=$(this).attr('href');
                            var arr=[];
                            for (var i in labels_out){
                                if (labels_out[i].id==id){
                                    for(var j in labels_out[i].lbls){
                                        arr.push([ labels_out[i].lbls[j] ]);
                                    };
                                    break;
                                }
                            };
                            
                            ShowBoxs(arr);
                        });
                }
            })
        };
        

        $('.btn-qry').click(function(){    
            $('#query-list').hide();

            var batch_no='',product_id='';   
           
            if (!$.isEmpty($('#batch_no').val())){
                batch_no=$('#batch_no').val();
            };       

            if (!$.isEmpty($('#product_id').val())){
                product_id=$('#product_id').val();
            };
            
            var params=[];           
            if(batch_no!=''){
                params.push('batch_no='+batch_no);                
            };        
            if(product_id!=''){
                params.push('product_id='+product_id);                
            };   

            if(params.length!=2){
                 toastr.error('请先输入产品名称和生产批次！',
                    {timeOut: 800, positionClass: "toast-center-center"}                                
                );                      
            }else{
                $('#stk_qty').text('');
                RefreshData(product_id,batch_no);
            }
        });      

    });
</script>

<form role="form"  class="form-inline" style="margin-top:0px;">   
    <div class='col-sm-3'>
        <input type='hidden' id='product_id' />
        <input class='form-control' placeholder='请输入要查询的产品名称' id='product_label' style='width:400px;'/>
    </div>      
    <div class='col-sm-3'>
        <input type='hidden' id='batch_no' />
        <input class='form-control' placeholder='请输入要查询的生产批次号' id='batch_label' style='width:400px;'/>
    </div>    
    <div class='col-sm-2 pull-left'>
        <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-2' id='stk_qty'></div>
    
</form>
<div class="clearfix"></div>
<div id="query-list" class="table-responsive" style="display:none;">
    <div class='x_panel' >    
        <div style="height:200px;margin-top:20px;">
            <div class='g'> 批次入库记录：</div>
            <table id="tb_inbound" class="table table-striped table-bordered dt-responsive" width="100%" >
                <thead></thead><tbody></tbody><tfoot></tfoot>
            </table>
        </div>
        <div style="height:400px;margin-top:20px;">
            <div class='g'> 该批次的产品流向:</div>
            <table id="tb_outbound" class="table table-striped table-bordered dt-responsive" width="100%" >
                <thead></thead><tbody></tbody><tfoot></tfoot>
            </table>
        </div>
    </div>
</div>
