{% extends wide_base %}

{% block head %}
    <script type="text/javascript" src="{{_server_home}}/_static/lib/JsBarcode/JsBarcode.all.min.js"></script>
    <script type="text/javascript" src="{{_server_home}}/_static/lib/utf.js/utf-v1.0.js"></script>
{% end %}

{% block body %}
<div class="card">
    {% set title = "条形码" %}
    {% include "common/title/base_title.html" %}
</div>

{% include tools/encode_tab.html %}

<div class="card">
    <div class="col-md-12">
        <textarea id="input" class="col-md-12" rows=5></textarea>
    </div>
    <div class="row top-offset-1">
        <button class="btn" id="generate">生成</button>
    </div>

    <div id="errorMsg" class="col-md-12 error hide">
    </div>
</div>

<div class="card">
    <h1 class="card-title">结果</h1>
    <div id="barcode" class="top-offset-1">
        <img id="imgcode" /> 
    </div>
</div>

<script>
    $(function () {
        function showBarCode() {
            var key = $("#input").val();
            key = utf16to8(key);
            $("#errorMsg").hide();
            if (key) {
              try {
                JsBarcode("#imgcode", key, {
                  format: "CODE39",//选择要使用的条形码类型
                  width:3,//设置条之间的宽度
                  height:100,//高度
                  displayValue:true,//是否在条形码下方显示文字
                  text: key,//覆盖显示的文本
                  fontOptions:"bold",//使文字加粗体或变斜体
                  font:"Consolas",//设置文本的字体
                  textAlign:"center",//设置文本的水平对齐方式
                  textPosition:"bottom",//设置文本的垂直位置
                  textMargin:5,//设置条形码和文本之间的间距
                  fontSize:15,//设置文本的大小
                  background:"#eee",//设置条形码的背景
                  lineColor:"#000",//设置条和文本的颜色。
                  margin:15//设置条形码周围的空白边距
                });
              } catch (e) {
                $("#errorMsg").text(e).show();
              }
            }    
        }

        $("#generate").click(function () {
            showBarCode();
        });

        var content = getUrlParam("content");
        $("#input").text(content);
        showBarCode();
    });
</script>

{% end %}