{% 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 "B标查询" %}</li>
</ol>

<script src="https://cdn.jsdelivr.net/npm/jquery-qrcode/dist/jquery-qrcode.min.js"></script>

<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.indexOf('http://tj1.me/t=') >= 0) {
        code = code.split('http://tj1.me/t=')[1];
      }
      if (code.indexOf('1_') >= 0 || code.indexOf('2_') >= 0 || code.indexOf('3_') >= 0) {
        code = code.slice(2);
      }
      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: '/ab_code/query/',
        //2020-06-24
        //url:'/inventory/get/label/sys/info/'+code+'/',   
        data: {
          code,
        },
        dataType: 'json',
        success: function (d) {

          console.log('d---------', d);
          if (d.e != '') {
            //bootbox.alert (d.e);
            toastr.error(
              d.e,
              "错误：",
              { timeOut: 800, positionClass: "toast-center-center" }
            );
            return;
          };
          // console.log('d.coded_b---------', d.data.code_b);
          $('#code_b_box').show();
          $('#code_b_val').text(d.data.code_h + '');
          // 在容器中生成二维码
          $('#code_b_qr').attr('src','data:image/png;base64,'+d.data.img);

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


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

  <div class='tt'>
    <div class='input-group'>
      <input id='code' class='datepicker form-control' placeholder="{% trans '请输入A标签号码，点击查询按钮或按回车键查询' %}" />
      <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 id="code_b_box" style="display: none; width: 200px;" >
    <!-- <div id="code_b_qr"></div> -->
    <img src="" alt="" id="code_b_qr" style="width: 200px;height: 200px;">
    <div style="text-align: center;">B标码值 <span id="code_b_val" ></span></div>
  </div>

</div>