
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/8/3
  Time: 14:29
  To change this template use File | Settings | File Templates.
--%>
<%@ 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>
<div class="wrapper wrapper-content mt5 right-content ml5 mr5">
	<div class="toolbar-panel bdd">
		<!--搜索条件 -->
		<div class="toolbar-body">
		<form action="${ctx}/questionsAnswers/page" method="get" id="condition" class="layui-form">
			<div class="toolbar-body">
				<div class="row pt10 pb10 whitebg ml0 mr0">
					<span class="dlblock w100 textr">问题：</span>
					<span class="bdc pt6 pb6 pl6 pr5 w180 dlblock">
							<input type="text" placeholder="请输入标题" id="question" name="question" value="">
						</span>

					<div class="layui-inline">
						<label class="layui-form-label">状态</label>
						<div class="layui-input-inline">
							<select id="status">
								<option value="">请选择</option>
								<option value="0">显示</option>
								<option value="1">不显示</option>
							</select>
						</div>
					</div>

                    <!-- <div class="mt10 mb20">
						<span class="dlblock w100 textr">开始日期</span>
						<span class="bdc pt6 pb6 pl6 pr5 w180 dlblock">
							 <input type="text" placeholder="" id="date1" class="w150">
							 <i class="fa fa-calendar"></i>
						</span>
						<span class="dlblock w100 textr">结束日期</span>
						<span class="bdc pt6 pb6 pl6 pr5 w180 dlblock">
						<input type="text" placeholder="" id="date2" class="w150">
							<i class="fa fa-calendar"></i>
						</span>
					</div> -->
				</div>
			</div>
		</form>
	</div>
</div>
<table class="layui-hide" id="questionsAnswersTab" lay-filter="questionsAnswersTab"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		<button class="layui-btn layui-btn-sm" lay-event="search">查询</button>
	</div>
</script>

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="statu">
	{{#  if(d.status == 1){ }}
	<span class="layui-badge layui-bg-green">显示</span>
	{{#} else { }}
	<span class="layui-badge">不显示</span>
	{{#} }}
</script>

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

		var tableIns = table.render({
			elem: '#questionsAnswersTab'
			, url: '${ctx}/questionsAnswers/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.data.count, //解析数据长度
					"data": res.data.data //解析数据列表
				};
			}
			, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				title: '提示'
				, layEvent: 'LAYTABLE_TIPS'
				, icon: 'layui-icon-tips'
			}]
			, title: '系统安全问答表'
			, cols: [[
				{type: 'checkbox', fixed: 'left', hidden: true}
				, {field: 'numbers', title: '序号', fixed: 'left', unresize: true, width: 80, sort: true, type: 'numbers'}
				, {field: 'question', title: '问题'}
				, {field: 'seq', title: '排序'}
				, {field: 'status', title: '状态',templet:'#statu'}
				, {field: 'createDt', title: '创建日期', sort: true,
					templet: "<div>{{layui.util.toDateString(d.createDt, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
				, {fixed: 'right', title: '操作', toolbar: '#barDemo'}
			]]
			, request: {
				pageName: 'current' //页码的参数名称，默认：page
				, limitName: 'size' //每页数据量的参数名，默认：limit
			}
			, 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(questionsAnswersTab)', function (obj) {
			switch (obj.event) {
				case 'add':
					// 添加
					toAdd();
					break;
				case 'search':
					// 查询
					// $("#condition").submit();
					tableIns.reload({
						where: { //设定异步数据接口的额外参数，任意设
							status:  $("#status").val(),
							question: $("#question").val()
						}
						,page: {
							curr: 1 //重新从第 1 页开始
						}
					});
					break;
			}
		});

		//监听行工具事件
		table.on('tool(questionsAnswersTab)', function (obj) {
			var data = obj.data;
			//console.log(obj)
			if (obj.event === 'del') {
				layer.confirm('真的删除行么?', function (index) {
					obj.del(data);
					layer.close(index);
					del(obj);
				});
			} else if (obj.event === 'edit') {
				toAdd(obj.data);
			}
		});

		function toAdd(obj) {
			var url = '${ctx}/questionsAnswers/detail';
			if (obj != undefined) {
				url = "${ctx}/questionsAnswers/detail/" + obj.id
			}
			var index = layer.open({
				type: 2
				, shade: 0.5
				, maxmin: true
				, content: url
				, area: ['550px', '500px']
			});
		}

		function del(obj) {
			$.ajax({
				url: '${ctx}/questionsAnswers/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
						});
					} else {
						layer.msg(res.message, {
							icon: 5
						});
					}
				}
			})
		}
	});
</script>
</body>
</html>
