<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<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="bannerTab" lay-filter="bannerTab"></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-xs" lay-event="statusUpdate">状态</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

<script type="text/html" id="imgtmp">
	<img src="{{d.picUrl}}">
</script>

<script type="text/html" id="type">
	{{#  if(d.type == '01' ){ }}
	<span>主页</span>
	{{# } else if (d.type == "02") { }}
	<span>推广页</span>
	{{#} else { }}
	<span>插件</span>
	{{#} }}
</script>

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

<style type="text/css">
	.layui-table-cell{
		height:auto!important;
		white-space:normal;
	}
</style>

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

		var tableIns = table.render({
			elem: '#bannerTab'
			,url:'${ctx}/banner/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',hidden: true}
				,{field:'numbers', title:'序号',unresize: true,type:'numbers'}
				,{field:'id', title:'ID',unresize: true, sort: true}
				,{field:'picUrl', title:'缩略图',templet:"#imgtmp"}
				,{field:'seq', title:'排序', sort: true}
				,{field:'jumpUrl', title:'跳转路径'}
				,{field:'type', title:'导航选择',templet:"#type"}
				,{field:'status', title:'状态',templet:'#statu'}
				,{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(bannerTab)', function(obj){
			switch(obj.event){
				case 'add':
					// 添加
					toAdd();
					break;
				case 'search':
					// 查询
					tableIns.reload();
					break;
			}
		});

		//监听行工具事件
		table.on('tool(bannerTab)', 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);
			} else if(obj.event === 'statusUpdate'){
				layer.confirm('确定更改已选状态吗?',function (index) {
					layer.close(index);
					statusUpdate(obj);
				});
			}
		});

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

		function statusUpdate(obj) {
			$.ajax({
				url: '${ctx}/banner/statusUpdate',
				method: 'post',
				data: JSON.stringify(obj.data),
				dataType: 'JSON',
				contentType:"application/json",
				success: function(res) {
					if(res.code == 200) {
						layer.msg(res.data, {
							icon: 1,
						});
					} else {
						layer.msg(res.data, {
							icon: 5
						});
					}
				}
			})
		}

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

