{% extends 'obj_form.html' %}
{% load i18n %}
{% load tj_filters %}


{% block js %}
{{ block.super }}
$('.btn-save').click(function(){
$.SubmitForm('#obj_form form','{{request.path}}');
});


{% endblock %}
{% block subtitle-1 %}
{% trans "营销活动" %}
{% endblock %}
{% block subtitle-2 %}
{% trans "步奖" %}
{% endblock %}

<span style="margin-left:10px; color:green; ">
        {% block subtitle-3 %}
            {% if form.instance.id %}
                {% trans "修改" %}
            {% else %}
                {% trans "新建" %}
            {% endif %}
        {% endblock %}
{#        {% if form.instance.id %}#}
{#            {% block subtitle-3 %}#}
{#                {% trans "修改" %}#}
{#            {% endblock %}#}
{#        {% else %}#}
{#            {% block subtitle-3 %}#}
{#                {% trans "新建" %}#}
{#            {% endblock %}#}
{#        {% endif %}#}
    </span>


{% block form_content %}
{{ block.super }}

<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>

<div class="alert alert-info">
    <b>标签对应查询工具</b>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label ">
        对应关系
    </label>
    <div class="col-sm-10">
        <input type="text" placeholder="输入箱码或盒码" id="code">
    </div>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label "></label>
    <div class="col-sm-10">
        <a class="btn btn-primary btn-qry">{% trans '查找标签对应关系' %}</a>
    </div>
</div>


<div id='qry_code'></div>
<div id='lbl_replace'></div>


<div id="label_info" style='display:none'>
    <div class='div_x table-responsive'>
        <table class='table table-bordered table-condensed table-hover'>
            <tbody></tbody>
        </table>
    </div>
    <div class='div_detail table-responsive'>
        <table class='table table-bordered table-condensed table-hover'>
            <tbody></tbody>
        </table>
    </div>
</div>
<div id="stk_dev" class="table-responsive">
    <table class='table table-bordered table-condensed table-hover'>
        <thead></thead>
        <tbody></tbody>
    </table>
</div>
</div>

<hr/>
<h5>开始步奖</h5>
<div class="form-group ">
    <label class="col-sm-2 control-label ">{% get_verbose_field_name form.instance 'label_code' %} </label>
    <div class="col-sm-10"> {{ form.label_code }}</div>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label ">{% get_verbose_field_name form.instance 'award' %} </label>
    <div class="col-sm-10">{{ form.award }}</div>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label ">{% get_verbose_field_name form.instance 'remark' %} </label>
    <div class="col-sm-10">{{ form.remark }}</div>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label ">{% get_verbose_field_name form.instance 'is_active' %}</label>
    <div class="col-sm-1">
        <div>
            {{ form.is_active }}
        </div>
    </div>
</div>
<div>
    <a class="btn btn-primary btn-save" type="submit" style="float:right;">{% trans '保存' %}</a>
</div>


<script>
    $(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.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: '/label/infor/' + code + '/',
                //2020-06-24
                //url:'/inventory/get/label/sys/info/'+code+'/',
                dataType: 'json',
                success: function (d) {
                    AddDataToTable(d);

                }
            });
        }

        function AddDataToTable(d) {


            if (d.e != '') {
                //bootbox.alert (d.e);
                toastr.error(
                    d.e,
                    "错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;
            }
            ;
            $('#qry_code').html('<div class="row">' +
                '<div class="col-md-3"><span>{% trans "标签号码" %}:</span><span class="g">' + d.code + '</span></div>' +
                '<div class="col-md-3"><span>{% trans "标签类型" %}:</span><span class="g">' + d.package + '</span></div>' +
                '<div class="col-md-6"><span>{% trans "产品名称" %}:</span><span class="g">' + d.product + '</span></div>' +
                '</div>'
            );
            var html_x = '', html = '', s = '', t = '';
            t = '<tr class="hd b"><td class="sn">{% trans "箱标" %}</td><td>' + d.boxes.pk + "</td>" + '</tr>';
            t = t + (d.boxes.related.length > 0 ? '<tr><td colspan=2>{% trans "关联箱标:" %}</td></tr>' : '');
            for (var i = 0; i < d.boxes.related.length; i++) {
                html_x = html_x + '<tr><td class="sn">' + (i + 1) + '</td>' +
                    '<td' + (d.boxes.related[i] == code ? ' class="r"' : '') + '>' + d.boxes.related[i] + '</td></tr>';
            }
            ;
            $('#label_info .div_x tbody').html(t + html_x);
            //箱-瓶
            if (d.packets.length == 0) {
                if ($.isEmptyObject(d.bottlecaps)) {
                    for (var i = 0; i < d.bottles.length; i++) {
                        html = html + '<tr><td class="sn-s">' + (i + 1) + '</td>' +
                            '<td' + (d.bottles[i] == code ? ' class="r"' : '') + '>' + d.bottles[i] + '</td></tr>';
                    }
                } else {
                    var caps = d.bottlecaps;

                    for (var i = 0; i < d.bottles.length; i++) {
                        html = html + '<tr><td class="sn-s">' + (i + 1) + '</td>' +
                            '<td' + (d.bottles[i] == code ? ' class="r"' : '') + '><span ' +
                            'title="瓶盖物流码: ' + d.bottlecaps[d.bottles[i]] + '" data-placement="right" data-toggle="tooltip">' +
                            d.bottles[i] + '</span></td></tr>';
                    }
                }
                html = '<tr><td colspan=2 class="b">{% trans "瓶标:" %}</td></tr>' + html;
                //箱-盒-瓶
            } else {
                s = '';
                for (var i = 0; i < d.packets.length; i++) {
                    s = s + '<tr class="b"><td class="sn">' + (i + 1) + '</td>' +
                        '<td colspan=2' + (d.packets[i].code == code ? ' class="r t_h"' : '') + '>' +
                        d.packets[i].code + '{% trans " 盒标" %}</td></tr>';
                    for (var k = 0; k < d.packets[i].bottles.length; k++) {
                        s = s + '<tr><td></td><td class="sn">' + (k + 1) + '</td>' +
                            '<td' + (d.packets[i].bottles[k] == code ? ' class="r"' : '') + '>' +
                            d.packets[i].bottles[k] + '{% trans " 瓶标" %}</td></tr>';
                    }
                }
                html = html + s;
            }
            $('#label_info .div_detail tbody').html(html);

            //进出存信息
            s = '';
            if (d.stock_dev.length > 0) {
                for (var i = 0; i < d.stock_dev.length; i++) {
                    s = s + '<tr><td>' + d.stock_dev[i].time + '</td>' +
                        '<td>' + d.stock_dev[i].voucher_type + '</td>' +
                        '<td>' + d.stock_dev[i].voucher_no + '</td>' +
                        '<td>' + d.stock_dev[i].user + '</td>' +
                        '<td>' + d.stock_dev[i].label_code + '</td>' +
                        '<td>' + d.stock_dev[i].package + '</td>' +
                        '<td class="g">' + d.stock_dev[i].product + '</td>' +
                        '<td>' + d.stock_dev[i].store + '</td>' +
                        '<td>' + d.stock_dev[i].store_fr + '</td>' +
                        '<td class="g">' + d.stock_dev[i].to_company + '</td></tr>';
                }
                ;
                $('#stk_dev table').html(
                    "<tr  class='b'>" +
                    "<td>{% trans '时间' %}</td>" +
                    "<td>{% trans '单据类型' %}</td>" +
                    "<td>{% trans '单据编号' %}</td>" +
                    "<td>{% trans '操作员' %}</td>" +
                    "<td>{% trans '标签号码' %}</td>" +
                    "<td>{% trans '类型' %}</td>" +
                    "<td>{% trans '产品名称' %}</td>" +
                    "<td>{% trans '仓库名称' %}</td>" +
                    "<td>{% trans '转库来源' %}</td>" +
                    "<td>{% trans '客户名称' %}</td>" +
                    "</tr>" + s
                );
            }
            //if(d.replace!=''){
            //    $('').append('<div>'+d.replace+'</div>');

            //};
            $('#lbl_replace').html(d.replace)

            //$('#lbl_replace').text(d.replace);
            $('#label_info,#stk_dev').show();


            //2020-10-17
            $('#data-content [data-toggle="tooltip"]').tooltip('show');
            //2020-10-29  解绑 HOVER, 鼠标移出时，盖码信息保持显示
            $('#data-content [data-toggle="tooltip"]').unbind('mouseenter').unbind('mouseleave');


        }

    });
</script>
{% endblock %}
