<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>设备列表</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/public.css"/>
</head>
<body class="child-body">

<div class="child-nav">
    <span class="layui-breadcrumb">
         <a>系统管理</a>
         <a><cite>设备列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新"
       style="float:right;margin-top: 3px">
        <i class="layui-icon" style="line-height:30px">&#x1002;</i>
    </a>
</div>

<div class="layui-row">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <a href="/admin/device/detail" type="button"
                   class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe608;</i>新增</a>
            </div>
        </div>
    </form>
</div>

<table class="layui-table" id="devicePage" lay-filter="devicePage">
    <thead>
    <tr>
        <th lay-data="{field:'id', sort: true}">Id</th>
        <th lay-data="{field:'deviceId', sort: true}">设备id</th>
        <th lay-data="{field:'deviceType', sort: true}">设备类型</th>
        <th lay-data="{field:'opt', fixed: 'right', align:'center', width:300}">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="device:${deviceList}">
        <td th:text="${device.id}"></td>
        <td th:text="${device.deviceId}"></td>
        <td th:if="${device.deviceType=='YG'}">烟感</td>
        <td th:if="${device.deviceType=='JG'}">井盖</td>
        <td>
            <a class="layui-btn layui-btn-xs" lay-event="detail">
                <i class="layui-icon">&#xe642;</i>编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger"
               lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
        </td>
    </tr>
    </tbody>
</table>
<div id="pag"></div>
<script src="/plugins/layui/layui.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var pageable = [[${deviceList}]];
    /*]]>*/

    layui.use(['element', 'laypage', 'layer', 'table', 'laydate'], function () {
        var $ = layui.jquery;
        var table = layui.table, laypage = layui.laypage;

        table.init('devicePage', {limit: pageable.size});

        laypage.render({
            elem: 'pag',
            count: pageable.totalElements,
            groups: 10,
            limit: pageable.size,
            curr: pageable.number + 1,
            layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
            jump: function (obj, first) {
                if (!first) {
                    window.location.href = "/admin/device/list?page=" + obj.curr + "&limit=" + obj.limit;
                }
            }
        });

        table.on('tool(devicePage)', function (obj) {
            if (obj.event === 'detail') {
                location.href = "/admin/device/detail?deviceId=" + obj.data.id;
            } else if (obj.event === 'delete') {
                layer.msg('确定要删除该数据吗？', {
                    time: 0,
                    shade: [0.5, '#fff'],
                    btn: ['确定', '取消'],
                    yes: function (index) {
                        $.ajax({
                            url: '/admin/device/remove',
                            type: 'POST',
                            data: {deviceId: obj.data.id},
                            dataType: 'json',
                            success: function (data) {
                                if (data.code == 0) {
                                    layer.msg(data.msg, {icon: 1, time: 1000}, function () {
                                        location.reload();
                                    });
                                } else {
                                    layer.msg(data.msg, {time: 1000});
                                }
                            }
                        });
                    }
                });
            }
        });


    });

</script>
</body>
</html>