{% 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;
    }

    .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;
    }
    #relations td .replace{
        margin-left:10px;
        font-style:italic;
        color:red;
        font-weight:bold;
    }
    #product{
        margin-bottom:20px;
    }

    #div_cartons{
        max-height:400px;
    }

    #div_boxes{
        max-height:400px;
    }


    td.unprocessed .unprocessed div {
        color:gray;
        font-style:italic;

    }


   .tooltip-inner{

        max-width: 600px;
   }

   #bg-modal{
    z-index:10000;
   }




</style>


<ol class="breadcrumb">
        <li> {% trans "查询" %}</li>
        <li> {% trans "盖码查询" %}</li>
</ol>

<script>
    $(document).ready(function(){
       $('#code').keydown(function (event) {
            if (event.keyCode == 13) {
                var code=$.trim($('#code').val());
                if(code.length<12){
                    toastr.error(
                        "{% trans '请先输入您要查询的标签号码!' %}",
                        "操作错误：",
                        {timeOut: 800, positionClass: "toast-center-center"}
                    );
                    return;
                };
                refresh(code);
            }
        });

        $('.btn-qry').click(function(){
            var code=$.trim($('#code').val());
            if(code.length<10){
                toastr.error(
                    "{% trans '请先输入您要查询的标签号码!' %}",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;
            };
            refresh(code);
        });
        function refresh(code){
            //清空数据
            $('#div_cartons tbody,#div_boxes tbody,#stk_dev tbody,#product').html('').hide();
            $('#qry_code').html('');
            var code = $("#code").val();
            $.ajax({
                type:'GET',
                url:'inventory/get/bottle_label_infor/?code='+code,
                dataType:'json',
                success:function (res){
                console.log(res)
                    var batch_tb = $('#code_tb').DataTable({
                        //"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        //"bLengthChange":true,
                        dom: 'Bfrtip',
                        autoWidth: false,
                        destroy:true,
                        buttons: [{extend:'excelHtml5',text:'导出到Excel'}],
                        language:lng,
                        data:res.data
                    });
                    $('#modal2').modal('show')
            }
            });
        }
    });


</script>

<div style="display: flex">
<div class='input-group col-sm-7'>
        <input id='code' class='datepicker form-control' placeholder="{% trans '请输入标签号码，点击查询按钮' %}"/>
    </div>
        <span class='input-group-btn pull-right'>
            <button  type="button" class='btn btn-primary btn-qry'>
                <span class='glyphicon glyphicon-search' style='padding-right:5px;'></span>{% trans "查询" %}
            </button>
        </span>
</div>
<div class="modal-body">
                <table id="code_tb" class="table table-striped table-bordered dt-responsive" width="100%" >
                    <thead>
                        <tr>
                            <th  style='width:10%'>{% trans "箱标" %}</th>
                            <th  style='width:10%'>{% trans "瓶标" %}</th>
                            <th  style='width:10%'>{% trans "加密瓶盖码" %}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <th><input type="text" placeholder="{% trans "箱标" %}"></th>
                        <th><input type="text" placeholder="{% trans "瓶标" %}"></th>
                        <th><input type="text" placeholder="{% trans "加密瓶盖码" %}"></th>
                </table>
            </div>