{% 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(){
        //2024-04-25
        $('#div-file .btn-file').click(function(){
            $('#xFile').click();            
        });
        $('#xFile').change(function(){
            //要上传txt文件            
            var data=new FormData();
            data.append("txtfile", document.getElementById('xFile').files[0]);
            refresh(data);
        });

        $('.btn-qry').click(function(){  
            //要查询输入框里的内容
            var codes=$('#codes').val();
            if (codes.length<12){
                toastr.error(
                    "请先输入要查询的瓶盖码",
                    "操作错误：",
                    {timeOut: 1200, positionClass: "toast-center-center"}
                );            
            }else{
                var data=new FormData();
                data.append('codes', codes);
                refresh(data);
            }
        });

        function refresh(data){
            $.ajax({
                url: '/inventory/get/bottle_label_infor/',
                type: 'POST',
                data:data,
                processData: false, //这个必须有，不然会报错
                contentType: false, //这个必须有，不然会报错
                success:function(data){
                    $('#code_tb').DataTable({                        
                        dom: 'Bfrtip',
                        autoWidth: false,
                        destroy:true,
                        buttons: [{extend:'excelHtml5',text:'导出到Excel'}],
                        language:lng,
                        data:data.data,
                        destroy:true
                    });
                }
            });   
        }

    });


</script>



<div style="display: flex">
<div class='input-group col-sm-7'>
        <input id='codes' class='datepicker form-control' placeholder="{% trans '请输入标签号码，点击查询按钮' %}"/>
</div>
<div class="col-sm-1">
        <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 id='div-file' class='col-sm-4'>
    <label class="btn btn-primary btn-file" for="xFile">{% trans "上传txt" %}</label>
    <input type="file" id="xFile" accept="text/plain"  style="position:absolute;clip:rect(0 0 0 0);"/>
</div>
</div>


<div>
    <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>
        </tfoot>
    </table>
</div>

