{% 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>Document</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
    <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;
        }

        /* 内容 */

        .uploadContent {
            padding: 25px;
        }

        input {
            color: #858585;
            background-color: #FFF;
            border: 1px solid #D5D5D5;
            padding: 5px 4px 6px;
            width: 200px;
        }

        /* 主体 */

        .clearfix::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a target="BoardRight">首页</a>
                <a>
                    <cite>农场列表</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div>
            <div class="">
                <div class="uploadContent ">
                    <div>
                        <div class="searchCover tablesearchCover">
                            时间段搜索：
                            <input type="text" id="timSelectBox" placeholder="请选择时间段 ">
                            <input type="hidden" id="tableBegin" name="begin">
                            <input type="hidden" id="tableEnd" name="end">
                            <button type="button" onclick="table_filter()" class="layui-btn layui-btn-normal">筛选</button>
                            <button type="button" class="layui-btn" onclick="decideExport()">导出</button>
                        </div>
                        <div>
                            <div>
                                <table id="datatable" class="table layui-table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <td>农场名称</td>
                                            <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>
        </div>
    </div>


    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="{% static '/js/backstageNet/common.js'%}"></script>
    <script>
        layui.use(['table', 'layer', 'element', 'laydate', 'laypage'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var element = layui.element;
            var laydate = layui.laydate;
            var laypage = layui.laypage;
            //执行一个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: 199
                , theme: '#2ca9f9'
                , layout: ['prev', 'page', 'next', 'skip']
                , jump: function (obj, first) {
                    scrollBar()
                }
            });
        })
        var waterTempId = [];
        var data = {
            'dat': [{
                'name': '草莓产业基地',
                'email': '[[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623]]',
                'tel': '张三',
                'uptime': '2019年8月2日 14:31'
            },
            {
                'name': '苹果产业基地',
                'email': '[[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623]]',
                'tel': '李四',
                'uptime': '2019年8月2日 14:31'
            },
            {
                'name': '用户一',
                'email': '[[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623]]',
                'tel': '12',
                'uptime': '2019年8月2日 14:31'
            },
            {
                'name': '用户一',
                'email': '[[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623]]',
                'tel': '213',
                'uptime': '2019年8月2日 14:31'
            },
            {
                'name': '用户一',
                'email': '[[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623]]',
                'tel': '46',
                'uptime': '2019年8月2日 14:31'
            },
            {
                'name': '用户一',
                'email': '[[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623]]',
                'tel': '45345',
                'uptime': '2019年8月2日 14:31'
            },
            {
                'name': '用户一',
                'email': '[[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623],[23.6589,113.5623]]',
                'tel': '6867',
                'uptime': '2019年8月2日 14:31'
            },

           ],
            'nums': 75
        }
        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++) {
                html += "<tr>";
                html += "<td>" + data[i].name + "</td><td>" + data[i].email + "</td><td>" + data[i].tel + "</td><td>" + data[i].uptime + "</td><td><button class=\"layui-btn layui-btn-sm  layui-btn-normal\">分配</button><button class=\"layui-btn layui-btn-sm  layui-btn-danger\">删除</button></td>";
                html += "</tr>";
                if (i == data.length - 1) {
                    console.log(html)
                    console.log(table)
                    $(table).html(html);
                    scrollBar()
                }
            }
        }
        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()
        }
        scrollBar()

    </script>
</body>

</html>