<%@ 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">
		<div class="layui-form layui-card">
			<div class="layui-tab layui-tab-brief">
				<ul class="layui-tab-title">
						<sfTags:pagePermission authFlag="SIT_YYGL_TZGG_TZGG_T" html='<a href="${ctx}/announce/announceList"><li class="layui-this">通知公告</li></a>'/>
				<button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10" id="searchBtn" lay-submit lay-filter="LAY-user-back-search">
					<i class="layui-icon fs-12">&#xe615;</i>查询</button>
				</ul>
			</div>
			<div class="layui-card-body">
				<div class="layui-form-item">
					<div class="layui-col-lg4 layui-col-sm6">
						<label class="layui-form-label">时间：</label>
						<div class="layui-input-block">
							<div class="layui-col-xs5">
								<input type="text" name="applyTimeSta" class="layui-input" id="startTime"
									   placeholder="开始日期" readonly>
							</div>
							<div class="layui-col-xs2 text-c lh-30">
								—
							</div>
							<div class="layui-col-xs5">
								<input type="text" name="applyTimeEnd" class="layui-input" id="endTime" placeholder="结束日期" readonly>
							</div>
						</div>
					</div>
					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">状态：</label>
						<div class="layui-input-block">
							<select name="read" lay-search>
								<option value="">请选择</option>
								<option value="0">未读</option>
								<option value="1">已读</option>
							</select>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="dataList" class="scroll-list" lay-filter="dataList"></table>
			</div>
		</div>
	</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">

        layui.use(['table', 'form','layer','laydate'], function() {
			var $ = layui.$, form = layui.form,
			table = layui.table,
            laydate = layui.laydate;
            //开始日期
            var insStart = laydate.render({
                elem: '#startTime'
               /* ,type: 'datetime'*/
                ,done: function(value, date){
                    //更新结束日期的最小日期
                    insEnd.config.min = lay.extend({}, date, {
                        month: date.month - 1
                    });
                    //自动弹出结束日期的选择器
                    insEnd.config.elem[0].focus();
                }
            });

            //结束日期
            var insEnd = laydate.render({
                elem: '#endTime'
                /*,type: 'datetime'*/
                ,done: function(value, date){
                    //更新开始日期的最大日期
                    insStart.config.max = lay.extend({}, date, {
                        month: date.month - 1
                    });
                }
            });

			//初始化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: 'title', title: '通知公告', templet: '#rowToolbar', align : 'center'}
                    ,{field: 'bid', title: '状态', align : 'center',templet: function(d) {
                        return !!d.bid ? '已读' : '<span style="color: red;">未读</span>';
					}}
                    ,{field: 'create_time', title: '通知时间' , align : 'center'}
				]]
			});

            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("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()
                                    }
                                });
                            }
                        }
                    });
                }
            });


            //监听搜索
            form.on('submit(LAY-user-back-search)', function(data){
                var field = data.field;
                //执行重载
                table.reload('dataList', {
                    where: field,
                    page: {
                        curr: 1
                    }
                });
            });


		});

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