{% load i18n %}

<style>
    .box1{
        display: flex;
        flex-wrap: wrap;
        height:600px;
        text-align:center;
        margin:auto;
    }
    .item{
        width: 20%;

        
        margin-top:0px;
        margin-bottom:20px;
    }
    .box1 .item .title{
        font-size:2.0em;
        color:black;
    }
    .box1 .item img{
        width:200px;        
    }
</style>


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

        $('#obj_form .btn-qrcode').click(function(){
            var codes=$('#codes').val();
            
            if(codes.length<12){
                toastr.error(
                    "请先输入破损标签物流码！",
                    "操作错误：",
                    {timeOut: 1000, positionClass: "toast-center-center"}
                );
                return;                
            }else{                
                $.ajax({
                    type:'GET',    
                    url:'/inventory/label/tjqrcode/?codes='+codes,
                    success:function(data){   
                        if(data.e==''){
                            var html='';
                            for (var i in data.images){
                                html=html+
                                    '<div class="item">'+
                                        '<div class="title">'+data.images[i].code+'</div>'+                                        
                                            '<img src="data:image/jpeg;base64,'+data.images[i].image+'" ></img>'+                                        
                                    '</div>';                               
                            };
                            $('#images').html(html);   
                            if(data.msg==''){
                                toastr.success(
                                    "二维码图像已生成！",
                                    "操作成功：",
                                    {timeOut: 1200, positionClass: "toast-center-center"}
                                );
                            }else{
                                toastr.warning(
                                    data.msg,
                                    "提示：",
                                    {timeOut: 5000, positionClass: "toast-center-center"}
                                );                                
                            }
                            
                        }else{
                            toastr.error(
                                data.e,
                                "系统提示：",
                                {timeOut: 5000, positionClass: "toast-center-center"}
                            );    
                        };                          
                        
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {                
                        $('#data-content .btn').show();
                        toastr.error(
                            "连接服务器失败！",
                            "网络错误：",
                            {timeOut: 1000, positionClass: "toast-center-center"}
                        );                        
                    }
                }); 
            };                 
        });    
    });    
</script>



    <ol class="breadcrumb">
        <li>{% trans "物流工具" %}</li>
        <li>{% trans "破损标二维码生成" %}</li>
    </ol>




<div class='x_panel'>
<br/>
<div class="x_content">
<div id="obj_form"  >   
    <div class='input-group'>
        <input type="text" class="form-control" id="codes" placeholder='{% trans "请输入破损标签物流码，一次最多10个中间用逗号分隔" %}'/>     
        <span class='input-group-btn'>
            <button  type="button" class='btn btn-primary btn-qrcode'>
                <span class='glyphicon glyphicon-print' style='padding-right:5px;'></span>{% trans "生成二维码" %}
            </button>
        </span>
    </div>  
    <div class="box1 " id='images'></div>
</div>



</div>
</div>











