<%@ page contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <jsp:include page="../../common.jsp"/>

</head>
<body>
<table class="layui-hide" id="notificationTab" lay-filter="notificationTab"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="already">全部已读</button>
        <button class="layui-btn layui-btn-sm" lay-event="whithout">全部未读</button>
    </div>
</script>

<script id="barDemo" type="text/html">
    {{# if (d.status == '1') { }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="edit">点击已读</a>
    {{# } else { }}
    <scan>已读</scan>
    {{# } }}
</script>

<script>
    layui.use(['table', 'layer' ], function () {
        var table = layui.table;
        var layer = layui.layer;

        var tableIns = table.render({
            elem: '#notificationTab'
            , url: '${ctx}/notification/page'
            , response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , countName: 'count' //数据总数的字段名称，默认：count
                , dataName: 'data' //默数据列表的字段名称，认：data
                , statusCode: 200
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.notificationList //解析数据列表
                };
            }
            , request: {
                pageName: 'currPage' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , title: '通知'
            , cols: [[
                {type: 'checkbox',  hidden: true}
                , {field: 'numbers', title: '序号',width: 80,type: 'numbers'}
                , {field: 'title', title: '通知路由',width: 180,align:"center"}
                , {field: 'content', title: '通知信息',align:"center"}
                , {field: 'createTime', title: '创建时间',width: 160,align:"center"}
                , {fixed: 'right', title: '操作',width: 100, toolbar: '#barDemo',align:"center"}
            ]]
            , page: true
            , done: function () {
                $("[data-field='forceUpdate']").children().each(function () {
                    if ($(this).text() == '0') {
                        $(this).text('否');
                    } else if ($(this).text() == '1') {
                        $(this).text('是');
                    }
                });
            }
        });

        //头工具栏事件
        table.on('toolbar(notificationTab)', function (obj) {
            if (obj.event === 'already') {
                layer.confirm('确认选择全部已读?', function (index) {
                    layer.close(index);
                    already();
                });
            } else if (obj.event === 'whithout') {
                layer.confirm('确认选择全部未读?', function (index) {
                    layer.close(index);
                    whithout();
                });
            }
        });
        //监听行工具事件
        table.on('tool(notificationTab)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'edit') {
                // layer.confirm('确认已读?', function (index) {
                //     layer.close(index);
                    del(obj);
                // });
            }
        });

        function already() {
            $.ajax({
                url: '${ctx}/notification/already',
                method: 'post',
                dataType: 'JSON',
                contentType: "application/json",
                success: function (res) {
                    if (res.code == 200) {
                        parent.location.reload();
                    } else {
                        layer.msg(res.message, {
                            icon: 5
                        });
                    }
                }
            })
        }

        function whithout() {
            $.ajax({
                url: '${ctx}/notification/whithout',
                method: 'post',
                dataType: 'JSON',
                contentType: "application/json",
                success: function (res) {
                    if (res.code == 200) {
                        location.reload();
                    } else {
                        layer.msg(res.message, {
                            icon: 5
                        });
                    }
                }
            })
        }

        function del(obj) {
            $.ajax({
                url: '${ctx}/notification/delete',
                method: 'post',
                data: JSON.stringify(obj.data),
                dataType: 'JSON',
                contentType: "application/json",
                success: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.message, {
                            icon: 1
                        });
                        location.reload();
                    } else {
                        layer.msg(res.message, {
                            icon: 5
                        });
                    }
                }
            })
        }
    });
</script>
</body>
</html>