{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预警记录</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <style>
        /* 面包屑导航 */

        .breadcrumbs {
            /* line-height: 38px; */
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

        .layui-breadcrumb>* {
            font-size: 16px;
        }

        /* 内容 */

        .mainContent {
            padding: 30px;
        }

        .widget-title {
            position: relative;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title::after {
            position: absolute;
            content: '';
            left: 0;
            top: 9px;
            height: 15px;
            border-left: 5px solid #23a3ee;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title h2 {
            font-weight: 700;
            line-height: 33px;
        }

        .widget-title h2 span {
            font-size: 13px;
            font-weight: 100;
            margin-left: 20px;
            color: #333;
        }

        .redClolr {
            color: red;
            ;
        }

        #datatable {
            text-align: center;
        }

        .listDiv {
            margin-top: 20px;
        }

        /* 筛选框 */

        .selectModel {
            display: none;
        }
        .selectModel >div{
            width: 90%;
            margin-top: 30px;
        }
        /* select2 */
        .currEquip{
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a href="info_pub" target="BoardRight">首页</a>
                <a>
                    <cite>预警记录</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div class="mainContent">
            <div class="widget-title">
                <!-- <button type="button" class="layui-btn  layui-btn-normal layui-btn-sm fr" onclick="selectModelFun()">筛选</button> -->
                <h2>预警记录</h2>
            </div>
            <div class="currEquip">
                当前设备： 
                {% if equip_list|length %}
                <select class="currEquipSelect" name="state" id="equipSelect">
                    {% for equip in equip_list %}
                    <option value="{{equip.equip_id}}">{{equip.equip_id}}</option>
                    {% endfor %}
                </select>
                {% else %} 当前暂无设备 {% endif %}
            </div>
            <div>
                <div class="listDiv">
                    <table id="datatable" class="table layui-table table-bordered table-hover">
                        <thead>
                            <tr>
                                <td>品种</td>
                                <td>监测指标</td>
                                <td>备注</td>
                                <td>时间</td>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="fenpei-bottom">
                    <div id="page"></div>
                </div>
            </div>
        </div>

    </div>
    <!-- 筛选框 -->
    <div id="selectModel" class="selectModel">
        <!-- <div class="widget-title">
            <h2>条件帅选
                <span id="Uptime"></span>
            </h2>
        </div> -->
        <div>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">园区</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">草莓</option>
                            <option value="1">苹果</option>
                            <option value="2">香蕉</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设备</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">20195221</option>
                            <option value="1">20195222</option>
                            <option value="2">20195223</option>
                            <option value="3">20195224</option>
                            <option value="4">20195225</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">传感类型</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">温度</option>
                            <option value="1">湿度</option>
                            <option value="2">风速</option>
                            <option value="3">雨量</option>
                            <option value="4">二氧化碳</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">复选框</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" autocomplete="off" id="timSelectBox">
                        <input type="text" id="begin" name="begin">
                        <input type="text" id="end" name="end">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script>
        // select2
        $('.currEquipSelect').select2({
            width: 217
        });
            //select2事件
            $(".currEquipSelect").on("change", function () {
            var data = $(this).val();
            // getthreVal(data)
            console.log(data)
        });
        var data = {
            'dat': [{
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '2019/7/31 14:14:48'
            }, {
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '	2019/7/31 12:37:41'
            }, {
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '	2019/7/31 12:26:40'
            }, {
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '	2019/7/31 12:07:17'
            }, {
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '	2019/7/31 11:47:16'
            }, {
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '	2019/7/31 11:27:55'
            }, {
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '	2019/7/31 11:19:11'
            }, {
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '	2019/7/31 11:06:59'
            }, {
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '	2019/7/31 10:57:20'
            }, {
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '	2019/7/31 10:45:40'
            }, {
                'name': '大豆',
                'cause': '空气温度过高',
                'remark': '空气温度：29.9℃，高于阈值：25℃；',
                'uptime': '2019/7/31 10:35:57'
            }],
            'nums': 75
        }
        var element, laydate, laypage, form;
        layui.use(['element', 'layer', 'laydate', 'laypage', 'form'], function () {
            // layer = layui.layer;
            laydate = layui.laydate;
            laypage = layui.laypage;
            form = layui.form;
            //执行一个laydate实例
            laydate.render({
                elem: '#timSelectBox' //指定元素
                , range: true
                , done: function (value, date) {
                    var dateArray = value.split(' - ')
                    $('#tableBegin').val(dateArray[0])
                    $('#tableEnd').val(dateArray[1])
                }
            });
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                // , count: 30
                , count: data.dat.length
                , theme: '#2ca9f9'
                , layout: ['prev', 'page', 'next', 'skip']
                , jump: function (obj, first) {

                }
            });

        })

        Fill_Table('datatable', data.dat, '10086');
        // 填充表格
        function Fill_Table(table_id, data, facId) {
            var table = document.getElementById(table_id).children[1]
            var html = "";
            for (var i = 0; i < data.length; i++) {
                if (data[i].userType == 2) {
                    var userType = '普通用户';
                } else {
                    var userType = '管理员';
                }
                if (data[i].isuse == 0) {
                    var isuse = '不可用';
                } else {
                    var isuse = '可用';
                }
                html += "<tr>";
                html += "<td>" + data[i].name + "</td><td>" + data[i].cause + "</td><td><span class='redClolr'>" + data[i].remark + "</span></td><td>" + data[i].uptime + "</td>";
                html += "</tr>";
                if (i == data.length - 1) {
                    $(table).html(html);
                }
            }
        }
        function Fill_null_Table(table_id) {
            var html = "";
            html += "<thead><tr><th>采集时间</th><th>风速</th><th>温度</th></tr></thead>";
            html += "<tr><td colspan=3 style='line-height:100px'>暂无数据</td></tr>";
            $(document.getElementById(table_id)).html(html);
            scrollBar()
        }

        function selectModelFun() {
            layui.use(['layer'], function () {
                layer = layui.layer;
                var index = layer.open({
                    type: 1,
                    title: '条件筛选',
                    content: $('#selectModel'),
                    area: ['500px', '450px']
                })
            })

        }
    </script>
</body>

</html>