{% load i18n %}
<style>
    #data-content .div_x .sn, #data-content .sn-s{
        width:210px;
    }
    #data-content .div_detail .sn{
        width:100px;
    }

    #label_info{
        max-height: 500px;
        overflow-y: auto;
    }
    #qry_code{
        margin: 20px 0px;
    }
    .g{
        color:green;
        font-weight:bold;
    }
    .b{
        color:black;
    }
    .r{
        color:red;
        font-weight:bold;
    }
    #stk_dev thead td{
        color:black;
    }

    #qry_code{
        padding-bottom:0px;
        margin-bottom:0px;    
    }
    #lbl_replace{
        padding-bottom:20px;
        font-style:italic;
        color:red;
    }

</style>


<ol class="breadcrumb">
        <li> {% trans "物流查询" %}</li>
        <li> {% trans "标签查询" %}</li>
</ol>


<script type="text/javascript">
    $(document).ready(function(){

        


        $('#code').keydown(function (event) {
            if (event.keyCode == 13) {
                var code=$.trim($('#code').val());
                if(code.length>=12){
                    refresh(code);
                }
            }
        });
        
       


        $('.btn-qry').click(function(){
            var code=$.trim($('#code').val());            
            if(code.length<12){
                //bootbox.alert("{% trans '请先输入您要查询的标签号码!' %}");
                toastr.error(
                    "{% trans '请先输入您要查询的标签号码!' %}",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );


                return;
            };
            refresh(code);
        });
        function refresh(code){
            //清空数据
            $('#label_info tbody,#stk_dev tbody')
                .html('');
            $('#label_info,#stk_dev').hide();
            $('#qry_code').html('');
            $.ajax({
                type:'GET',
                url:'/label/infor/' + code + '/' ,
                //2020-06-24
                //url:'/inventory/get/label/sys/info/'+code+'/',                
                dataType:'json',
                success: function(d) {                    
                    

                    if(d.e!=''){
                        //bootbox.alert (d.e);
                        toastr.error(
                            d.e,
                            "错误：",
                            {timeOut: 800, positionClass: "toast-center-center"}
                        );
                        return ;
                    };
                    $('#qry_code').html('<div class="row">'+
                            '<div class="col-md-3"><span>{% trans "标签号码" %}:</span><span class="g">'+d.code+'</span></div>'+
                            '<div class="col-md-3"><span>{% trans "标签类型" %}:</span><span class="g">'+d.package+'</span></div>'+
                            '<div class="col-md-6"><span>{% trans "产品名称" %}:</span><span class="g">'+d.product+'</span></div>'+
                        '</div>'
                    );
                    var html_x='',html='',s='',t='';
                    t='<tr class="hd b"><td class="sn">{% trans "箱标" %}</td><td>'+d.boxes.pk+"</td>"+'</tr>';
                    t=t+(d.boxes.related.length>0?'<tr><td colspan=2>{% trans "关联箱标:" %}</td></tr>':'');
                    for (var i = 0; i <d.boxes.related.length; i++){
                        html_x=html_x+'<tr><td class="sn">'+(i+1)+'</td>'+
                            '<td'+(d.boxes.related[i]==code?' class="r"':'')+'>'+d.boxes.related[i]+'</td></tr>';
                    };
                    $('#label_info .div_x tbody').html(t+html_x);
                    //箱-瓶
                    if (d.packets.length==0){
                        if($.isEmptyObject(d.bottlecaps)){
                            for (var i = 0; i <d.bottles.length; i++){
                                html=html+'<tr><td class="sn-s">'+(i+1)+'</td>'+
                                '<td'+(d.bottles[i]==code?' class="r"':'')+'>'+d.bottles[i]+'</td></tr>';
                            }                            
                        }else{
                            var caps=d.bottlecaps;                          
                            var bt=''
                            for (var i = 0; i <d.bottles.length; i++){  
                                if($.isEmptyObject(d.bottlecaps[d.bottles[i]])){
                                    bt='';                
                                }else{                                     
                                    bt='title="瓶盖物流码:'+d.bottlecaps[d.bottles[i]]+'" data-placement="right" data-toggle="tooltip"';    
                                };
                                html=html+'<tr><td class="sn-s">'+(i+1)+'</td>'+
                                    '<td'+(d.bottles[i]==code?' class="r"':'')+'>'+d.bottles[i]+'<span '+bt+'></span></td></tr>';
                            }                            
                        }
                        {% ifequal user.company.ancestor_id 16716 %}
                            html='<tr><td colspan=2 class="b">{% trans "盒标:" %}</td></tr>'+html;
                        {% else %}
                            html='<tr><td colspan=2 class="b">{% trans "瓶标:" %}</td></tr>'+html;
                        {% endifequal %}
                    //箱-盒-瓶
                    }else{
                        s='';
                        for (var i = 0; i <d.packets.length; i++){
                            s=s+'<tr class="b"><td class="sn">'+(i+1)+'</td>'+
                                '<td colspan=2'+(d.packets[i].code==code?' class="r t_h"':'')+'>'+
                                    d.packets[i].code+'{% trans " 盒标" %}</td></tr>';
                            for (var k=0;k<d.packets[i].bottles.length;k++){
                                s=s+'<tr><td></td><td class="sn">'+(k+1)+'</td>'+
                                '<td'+(d.packets[i].bottles[k]==code?' class="r"':'')+'>' +
                                d.packets[i].bottles[k]+'{% trans " 瓶标" %}</td></tr>';
                            }
                        }
                        html=html+s;
                    }
                    $('#label_info .div_detail tbody').html(html);

                    //进出存信息
                    s = '';
                    if (d.stock_dev.length>0){
                        for(var i=0;i<d.stock_dev.length;i++){
                            s=s+'<tr><td>'+d.stock_dev[i].time+'</td>'+
                                '<td>'+d.stock_dev[i].voucher_type+'</td>'+
                                '<td><a href="/inventory/batch/details/'+str(d.stock_dev[i].batch_id)+'/">'+
                                    d.stock_dev[i].voucher_no+'</a></td>'+
                                '<td>'+d.stock_dev[i].user+'</td>'+
                                '<td>'+d.stock_dev[i].label_code+'</td>'+
                                '<td>'+d.stock_dev[i].package+'</td>'+
                                '<td class="g">'+d.stock_dev[i].product+'</td>'+
                                '<td>'+d.stock_dev[i].store+'</td>'+
                                '<td>'+d.stock_dev[i].store_fr+'</td>'+
                                '<td class="g">'+d.stock_dev[i].to_company+'</td></tr>';
                        };
                        console.log(s);
                        $('#stk_dev table').html(
                            "<tr  class='b'>"+
                            "<td>{% trans '时间' %}</td>"+
                            "<td>{% trans '单据类型' %}</td>"+
                            "<td>{% trans '单据编号' %}</td>"+
                            "<td>{% trans '操作员' %}</td>"+
                            "<td>{% trans '标签号码' %}</td>"+
                            "<td>{% trans '类型' %}</td>"+
                            "<td>{% trans '产品名称' %}</td>"+
                            "<td>{% trans '仓库名称' %}</td>"+
                            "<td>{% trans '转库来源' %}</td>"+
                            "<td>{% trans '客户名称' %}</td>"+
                            "</tr>"+ s
                        );
                    }
                    //if(d.replace!=''){
                    //    $('').append('<div>'+d.replace+'</div>');
                    
                    //};
                    $('#lbl_replace').html(d.replace)    

                    //$('#lbl_replace').text(d.replace);
                    $('#label_info,#stk_dev').show();


                    //2020-10-17
                    $('#data-content [data-toggle="tooltip"]').tooltip('show');
                    //2020-10-29  解绑 HOVER, 鼠标移出时，盖码信息保持显示
                    $('#data-content [data-toggle="tooltip"]').unbind('mouseenter').unbind('mouseleave'); 



                }
            });
        }
    });
</script>
 

<div class='x_panel'>
<br/>

<div class='tt'>
    <div class='input-group'>
        <input id='code' class='datepicker form-control' placeholder="{% trans '请输入标签号码，点击查询按钮或按回车键查询' %}"/>
        <span class='input-group-btn'>
            <button  type="button" class='btn btn-primary btn-qry'>
                <span class='glyphicon glyphicon-search' style='padding-right:5px;'></span>{% trans "查询" %}
            </button>
        </span>
    </div>
</div>

<div class='clearfix'></div>
<div id='qry_code'></div>
<div id='lbl_replace'></div>


<div id="label_info" style='display:none' >
    <div class='div_x table-responsive'>
        <table class='table table-bordered table-condensed table-hover'><tbody></tbody></table>
    </div>
     <div class='div_detail table-responsive'>
        <table class='table table-bordered table-condensed table-hover'><tbody></tbody></table>
    </div>
</div>
<div id="stk_dev" class="table-responsive">
    <table class='table table-bordered table-condensed table-hover'>
        <thead></thead>
        <tbody></tbody>
    </table>
</div>
</div>







