<%@ 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="row animated fadeInRight" style="margin: 0;">
	<div class="wrapper wrapper-content mt5 right-content ml5 mr5">
		<div class="toolbar-panel bdd">
			<div class="toolbar-box">
				<div class="toolbar-head clearfix lgraybg pt5 pl10 bdbd">
					<!-- 顶部按钮 -->
					<div class="fl">
						查询条件
					</div>
					<div class="tools fr">
						<a href="javascript:void(0);" class="collapse dblock f14 dgray mr5">
							<i class="fa-2x fa fa-angle-double-up"></i>
						</a>
					</div>
				</div>
			</div>
			<!--搜索条件 -->
			<div class="toolbar-body">
				<form class="layui-form" id="form1" action="" style="margin-top: 10px;">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">用户ID</label>
							<div class="layui-input-block">
								<input type="text" name="userId" id="userId" placeholder="用户ID"
									   autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">联系手机号</label>
							<div class="layui-input-block">
								<input type="text" name="phone" id="phone" placeholder="联系人手机号"
									   autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">处理状态</label>
							<div class="layui-input-block">
								<select id="status" name="status">
									<option value="">请选择</option>
									<option value="0">未处理</option>
									<option value="1">已处理</option>
								</select>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="mb50 mt10">
		<div class="whitebg pl10 pr10">
			<table class="layui-hide" id="suggestTab" lay-filter="suggestTab"></table>
		</div>
	</div>
</div>
<script type="text/html" id="leftBar">
	<a class="layui-btn layui-btn-sm" lay-event="search">
		<i class="layui-icon layui-icon-search"></i>查询
	</a>
</script>
<script type="text/html" id="toolBar">
	{{# if (d.status != "1") { }}
		<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="markDeal">
			<i class="layui-icon layui-icon-ok"></i>标记已处理
		</a>
	{{# } }}
	{{# if (d.picUrls && d.picUrls.indexOf("null") < 0) { }}
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="showPic">
			<i class="layui-icon layui-icon-list"></i>查看图片
		</a>
	{{# } }}
</script>

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

		var tableIns = table.render({
			elem: '#suggestTab'
			, url: ctx + '/suggest/page'
			, id: 'suggest'
			, 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.total, //解析数据长度
					"data": res.data.records //解析数据列表
				};
			}
			, toolbar: '#leftBar' //开启头部工具栏，并为其绑定左侧模板
			, defaultToolbar: ['filter']
			, title: '意见反馈信息表'
			, cols: [[
				 {field: 'numbers', title: '序号', unresize: true, width: 80, type: 'numbers'}
				, {field: 'userId', title: '用户ID',width: 90}
				, {field: 'content', title: '反馈内容'}
				, {field: 'phone', title: '联系手机号',width: 120}
				, {field: 'status', title: '状态',width: 100,templet: function (d){
					return d.status == '0' ? '<span style="color: red">未处理</span>' : '<span style="color: green">已处理</span>'
					}}
				, {
					field: 'createDt',
					title: '创建时间',
					width: 150,
					templet: "<div>{{layui.util.toDateString(d.createDt,'yyyy-MM-dd HH:mm')}}</div>"
				}
				, {fixed: 'right', title: '操作', width: 220, toolbar: '#toolBar'}
			]]
			, request: {
				pageName: 'current' //页码的参数名称，默认：page
				, limitName: 'size' //每页数据量的参数名，默认：limit
			}
			, page: true
		});
		table.on('tool(suggestTab)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			if (layEvent === 'showPic') { //详情
				let picUrls = data.picUrls.split(",");
				let obj = {};
				obj.title = "图片详情";
				obj.id = 1;
				obj.start = 0;
				let cData = [];
				$.each(picUrls,function (k,v){
					let pData = {};
					pData.alt = "意见反馈图";
					pData.pid = 1;
					pData.src = v;
					pData.thumb = v;
					cData.push(pData);
				})
				obj.data = cData;
				layer.photos({
					photos: obj
					,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
				});
			} else if (layEvent === 'markDeal') {
				layer.confirm('标记为已完成？', {icon: 3, title: '提示'}, function (index) {
					var url = ctx + "/suggest/markDeal";

					$.ajax({
						url: url,
						type: "POST",
						data: {
							id: data.id
						},
						success: function (d) {
							layer.alert(d.message);

							table.reload('suggest', {
								where: params
								, page: {
									size: 10
									, current: 1
								}
							});
						}
					});

					layer.close(index);
				});
			}
		});
		//监听头工具栏事件
		table.on('toolbar(suggestTab)', function (obj) {
			switch (obj.event) {
				case 'search':
					var params = serialize($('#form1'));
					table.reload('suggest', {
						where: params
						, page: {
							size: 10
							, current: 1
						}
					});
					break;
			}
		});
	});
</script>
</body>
</html>
