<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta name="decorator" content="base" />
<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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>消息中心</title>
<link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
<style>
</style>
</head>
<body>
	<div class="layui-fluid">
		<form class="layui-form layui-card" action="" id="searchForm" lay-filter="searchForm">

			<div class="layui-tab layui-tab-brief">
				<ul class="layui-tab-title">
					<li class="layui-this">
						<%--<a href="${ctx}/notification/list">消息中心</a>--%>
							<a href="${ctx}/msg/center/list">消息中心</a>
					</li>
				</ul>
			</div>

			<div class="layui-card-body">
			</div>
		</form>

		<div class="layui-card">
			<div class="layui-card-body">
				<table id="dataList" class="scroll-list" lay-filter="dataList"></table>
			</div>
		</div>

	</div>

	<!--自定义toolbar-->
	<div id="tableToolbar" class="layui-form-item layui-hide">
		<button class="layui-btn layui-btn-sm layuiadmin-btn-useradmin " lay-event="markRead" data-type="add">
			<i class="layui-icon layui-icon-add-1"></i>标记为已读</button>
	</div>

	<script type="text/html" id="rowToolbar">
		<span style="color:#D9B589;cursor:pointer;" lay-event="showDetail">{{d.title}}</span>
	</script>
	<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
	<script type="text/javascript">
        var table;
        layui.use(['table', 'form','layer'], function() {
			var $ = layui.$, form = layui.form;
			table = layui.table;

			//初始化table表格，事件处理在初始化之后
			table.render({
				elem : '#dataList',
				height : 'full-200',
				url : '${ctx}/msg/center/listData', //数据接口
				page : true, //开启分页
				toolbar : "#tableToolbar",
				defaultToolbar : [],
				limits : [ 20, 50, 100 ],
				limit : 20,
				cols : [[
                    {type: 'numbers',title:'序号'}
                    ,{field: 'id', type: 'checkbox'}
                    ,{field: 'title', title: '通知公告', templet: '#rowToolbar'}
                    ,{field: 'bid', title: '状态', templet: function(d) {
                        return !!d.bid ? '已读' : '<span style="color: red;">未读</span>';
					}}
                    ,{field: 'create_time', title: '公告时间'}
				]]
			});

            var readHandler = (function _readHandler() {
                var marking = false;
                return function (ids) {
                    if (marking) {
                        return;
                    }
                    $.ajax({
                        type: 'post',
                        data: {id: ids},
                        url: "${ctx}/msg/center/markMsgAsRead",
                        success: function (data) {
                            if (data.code === "200") {
                                layer.msg("标记成功！", {icon: 1});
                                table.reload('dataList');
                            } else if (data.code === '422') {
                                layer.msg("标记失败！", {icon: 2});
                            } else {
                                layer.msg("标记失败！", {icon: 2});
                            }
                        },
                        complete: function () {
                            marking = false;
                        }
                    });
                    return false;
                }
            })();

			//监听行工具事件
		    table.on('toolbar(dataList)', function(obj) {
			    if(obj.event === 'markRead') {
                    var checkedData = table.checkStatus("dataList");
                    var ids = [];
                    if (checkedData.data.length < 1) {
                        layer.msg("请勾选一条择待处理数据！", {icon: 2});
                        return;
                    }
                    var datas = checkedData.data;
                    $.each(datas, function(i, d) {
                        ids.push(d.id);
					});
                    layer.confirm('确定要将所选择的消息标记为已读吗？', {
                        icon:3,
                        btn: ['确定','取消'] //按钮
                    }, function(){
                        readHandler(ids.join(","))
                    }, function(){
                    });
                }
		    });

            table.on("tool(dataList)", function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                //查看公告内容
                if (layEvent === 'showDetail') {
                    layer.open({
                        type: 2,
                        title: '详情',
                        content: '${ctx}/msg/center/showDetail?id=' + data.id,
                        maxmin: true,
                        area: ['800px', '495px'],
                        btn: ['关闭'],
                        yes: function (index, layero) {
                            layer.close(index);
                            if (!data.bid) {
                                table.reload('dataList', {
                                    page: {
                                        curr: layui.$('.layui-laypage-skip').find('input').val()
                                    }
                                });
                            }
                        },
						cancel: function (index, layero) {
                            layer.close(index);
                            if (!data.bid) {
                                table.reload('dataList', {
                                    page: {
                                        curr: layui.$('.layui-laypage-skip').find('input').val()
                                    }
                                });
                            }
                        }
                    });
                }
            });

		});
		
	</script>
</body>
</html>
