{% extends 'base.html' %}


{% block content %}

<style type="text/css">
    body {
        background-color: #FFF !important;
    }

    .myForm {
        padding-top: 30px;
        padding-right: 50px;
    }
    th,td{
        white-space:nowrap;
    }


</style>

<div class="ibox float-e-margins">

    <form class="form-horizontal myForm" role="form">
          {% if not template_obj %}
        <div class="form-group">
            <div class="col-sm-11 col-sm-offset-1">
                <table id="dataTableModel" class="table table-striped table-bordered table-hover dataTables-example">
                    <thead>
                        <tr>
                            <th>类型ID</th>
                            <th>类型名称</th>
                            <th>EnglishName</th>
                            <th>纯度</th>
                            <th>CAS码</th>
                            <th>生产日期</th>
                            <th>保质期（天）</th>
                            <th>价格（元）</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        {% else %}
          <div class="form-group">
            <div class="col-sm-11 col-sm-offset-1">
                <table id="dataTableModel" class="table table-striped table-bordered table-hover dataTables-example">
                    <thead>
                        <tr>
                            <th>类型ID</th>
                            <th>类型名称</th>
                            <th>EnglishName</th>
                            <th>纯度</th>
                            <th>CAS码</th>
                            <th>生产日期</th>
                            <th>保质期（天）</th>
                            <th>价格（元）</th>
                            <th>状态</th>

                            <th>生产厂商</th>
                            <th>销售商</th>
                            <th>价格（元）</th>
                            <th>规格</th>
                            <th>单位</th>
                            <th>规格单位</th>
                        </tr>

                    </thead>
                    <tbody>
                    {# 加载自定过滤器 #}
                    {% load myfilter %}
                    {% for template_content1 in all_children_template_list %}
                                    <tr class="gradeA">
                                        <td>{% firstof template_content1.VarietyId '' %} </td>
                                        <td>{% firstof template_content1.Name '' %}</td>
                                        <td>{% firstof template_content1.EnglishName '' %}</td>
                                        <td>{% firstof template_content1.Purity '' %}</td>
                                        <td>{% firstof template_content1.CASNumber '' %}</td>
                                        <td style="width:75px;text-align: center">{% firstof template_content1.ProductionDate '' %}</td>
                                        <td>{% firstof template_content1.ShelfLife '' %}</td>
                                        <td>{% firstof template_content1.Price '' %}</td>
                                        <td>未入库</td>

                                        <td>{% firstof template_content1.Manufacturer '' %}</td>
                                        <td>{% firstof template_content1.Distributor '' %}</td>
                                        <td>{% firstof template_content1.Price '' %}</td>
                                        <td>{% firstof template_content1.Speci '' %}</td>
                                        <td>{% firstof template_content1.Unit '' %}</td>
                                        <td>{% firstof template_content1.SpeciUnit '' %}</td>
                                    </tr>
{% endfor %}
                    </tbody>
                </table>
            </div>
        </div>


        {% endif %}


        <div class="form-group" style="position:fixed; left:15px; bottom:20px;width:900px">

            <div class="col-md-1 col-md-offset-11">
                <button class="btn btn-white" type="button" id="closeForm">关闭</button>
            </div>
        </div>
     <!--  隐藏client_id -->
        <input type="hidden" name="" value="{{ client_id }}" id="client_id">
        <input type="hidden" name="" value="{{ CustomerId }}" id="CustomerId">

    </form>

</div>


{% load static %}
                <script src="{% static 'js/warning.js' %}"></script>

<script type="text/javascript">
    // flag_status 用来RFID入库禁止频繁弹窗

    var flag_status = true;
    var socket = new WebSocket("ws:" + window.location.host + "/drug/drug_socket/");

            socket.onopen = function () {

                console.log('WebSocket open');//成功连接上Websocket
                socket.send('adasdasda1。。。。');//发送数据到服务端
                setInterval(function () {
                         if (flag_status){
                    socket.send('adasdasda1。。。。');
                    }
                }, 1000);
            };

            socket.onmessage = function (e) {
                if(e.data){
                    if(flag_status){
                        var index = layer.load(2, {shade: 0.01});

                        flag_status = false;
                           // 引入flavr 弹窗插件

                // 触发ajax  提交绑定表单
                        $.ajax({

                            type: 'POST',
                            url: '{% url 'drugTemplate:bind_template' %}',
                            data: {template_index:template_index,
                                client_id:$('#client_id').val(),
                                CustomerId: $('#CustomerId').val(),
                                RFID: e.data,
                            },
                            success:function (data) {
                                //  改变datatable指定列的值

                            if(data.data.status == 0){
                                flag_status = true;
                                socket.send('23123123');
                                 document.getElementById('dataTableModel').
                                     rows[template_index + 1].cells[7].innerHTML = '预备入库';
                                 layer.close(index);
                            if(template_index == 0){
                                $('.gradeA:first-child').css('color', 'red');
                                $('.gradeA:first-child').css('font-weight', 700);
                                $('.gradeA:first-child').css('background-color', '#DCDCDC');
                            }else{
                                $('.gradeA:nth-child(' + (template_index+1) + ')').css('color', 'red');
                                $('.gradeA:nth-child(' + (template_index+1) + ')').css('font-weight', 700);
                                $('.gradeA:nth-child(' + (template_index+1) + ')').css('background-color', '#DCDCDC');
                            }
                        template_index += 1
                            }else{

                                layer.close(index);
                                new $.flavr({
                                         modal: false,
                                        autoclose: false,
                                        timeout: 2000,
                                        buttons: {OK: {
                                        text: '确认',
                                        style: 'danger',
                                        addClass: null,
                                        action: function (e) {

                                           flag_status = true;
                                            socket.send('123123');
                                        }
                                    },},
                                    content: data.data.message
                                });
                            }
                            },
                            error: function () {
                                alert('数据异常！');
                                flag_status = true;
                                layer.close(index);
                                socket.send('886');
                            }
                        });
              
                    }else{


                    }


                }






            };

            socket.onclose = function (e) {

                 socket.close();
            };
            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

	window.onbeforeunload = confirmExit;

function confirmExit() {
    // 此地可以写你的业务代码
    socket.send('886');

}

    window.focus();   // 当前页面获得焦点用来RFID扫描
    var template_index = 0;

    var index = parent.layer.getFrameIndex(window.name);
    $(function () {
        var tableModel = $('#dataTableModel').DataTable({
            searching: false,
            lengthChange: false,
            select: true,
            "bPaginate": false,
            'scrollX': false,
            'autoWidth': true,
            'scrollY': true,
            "ordering": false,
           columnDefs: [{
                           "targets": [0, 9, 10, 11, 12, 13, 14],
                           "visible": false
            }],
        });


        $("#closeForm").click(function () {
            socket.send('886');
            parent.layer.close(index);
        });

    })

</script>



{% endblock %}