<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="<%=basePath%>/static/layui/css/layui.css">
<script src="<%=basePath%>/static/js/jquery.min.js"></script>
<script src="<%=basePath%>/static/layui/layui.js"></script>
<script type="text/html" id="toolbarDemoArticle">
	 <div class="layui-btn-container demoTable">
		<button class="layui-btn layui-btn-sm" lay-event="add" ><i class="layui-icon layui-icon-add-circle-fine" style="font-size:20px;font-weight:bold"></i> 新增文章</button>
	</div>	
</script>
<script type="text/html" id="toolbarDemo">
	 <div class="layui-btn-container demoTable">
		<!--批量导入按钮&#xe6a2;-->
		<button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="mulAdd"><i class="layui-icon"></i>导入文件</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchdel" data-type="getCheckData"><i class="layui-icon layui-icon-delete" style="font-size:20px;"></i>批量删除</button>
	</div>	
</script>
</head>
<body>
	<div class="layui-tab">
		<ul class="layui-tab-title ">
			<li class="layui-this">系统公告</li>
		</ul>
	</div>
	<div class="layui-row">
		<div class="layui-col-xs12 layui-col-md8">
			<h3>公告列表</h3>
			<form class="layui-form" id="articleForm">
				<div class="layui-form-item">
					<label class="layui-form-label">文章标题</label>
					<div class="layui-input-inline">
						<input type="text" id="title" name="title" class="layui-input">
					</div>
					<label class="layui-form-label">文章类型</label>
					<div class="layui-input-inline">
						<select name="type" id="type">
							<option value=""></option>
							<option value="1">管理费用</option>
							<option value="2">销售费用</option>
							<option value="3">软件费用</option>
						</select>
					</div>
					<div class="layui-inline">
						<div class="layui-input-block">
							<button type="button" class="layui-btn" id="searchArticle">查询</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</div>
			</form>
			<table class="layui-hide" id="articleTable" lay-filter="articleTable"></table>
		</div>
		<div class="layui-col-xs6 layui-col-md4">
			<form class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label">文件名称</label>
					<div class="layui-input-inline">
						<input type="text" id="fileName" name="fileName"
							class="layui-input">
					</div>
				</div>
			</form>
			<table class="layui-hide" id="fileTable" lay-filter="fileTable"></table>
		</div>
	</div>
	<div class="layui-upload" id="popmulAddTest" style="display:none">
		<button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
		<div class="layui-upload-list">
			<table class="layui-table">
				<thead>
					<tr>
						<th>序号</th>
						<th>文件名</th>
						<th>大小</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="demoList"></tbody>
			</table>
		</div>
		<button type="button" class="layui-btn" style="margin: 100px 300px"
			id="testListAction" lay-submit lay-filter="upLoad">开始上传</button>
	</div>
	<script type="text/html" id="barDemoArticle">
  		<a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
		<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete" ></i>删除</a>
  		<a class="layui-btn layui-btn-sm" lay-event="info"><i class="layui-icon"></i>查看</a>
	</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-sm" lay-event="downLoad"><i class="layui-icon layui-icon-export"></i>下载</a>
		<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete" ></i>删除</a>
	</script>
	
	<%-- <script type="text/javascript">
		layui.use(['table', 'form','element','upload'], function() {
			var $ 		 = layui.jquery
				table 	 = layui.table,
				form  	 = layui.form, 
				element  = layui.element,
				upload   = layui.upload;
			
			//生成表格
			table.render({
				elem 	: '#articleTable',
				url 	: '<%=basePath%>/getArticle',
				toolbar : '#toolbarDemoArticle',
				title	: "文章",//导出名
				id 		: 'articleAll',
				//skin	: 'row',
				//size	:'lg',
				border  : true,
				page 	: true,
				limits	: [10,30,50,80,100,999],
				where 	: {
					title		: '',
					type  		: ''
				},
				cols : [ [ 
					/* { 
						type: 'checkbox'
					}, */
					{ 	type: 'numbers',
						title: '序号',
						unresize: true 
					},
					{
						field : 'title',
						align : "center",
						title : '文章标题'
					},{
						field : 'content',
						align : "center",
						title : '摘要'
					},{
						field : 'createBy',
						align : "center",
						width : 120,
						title : '添加人'
					},{
						fixed : 'right',
						title : '操作',
						align : "center",
						toolbar : '#barDemoArticle'
					}
				] ],
				parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
					return {
						"code" 	: 0, //解析接口状态
						"msg" 	: "", //解析提示文本
						"count"	: res.data.articles.total,//解析数据长度
						"data" 	: res.data.articles.list//解析数据列表
					};
				}
			});
			
			//生成表格
			table.render({
				elem 	: '#fileTable',
				url 	: '<%=basePath%>/getAllFiles',
				toolbar : '#toolbarDemo',
				title	: "文件明细",//导出名
				id 		: 'fileAll',
				//skin	: 'row',
				//size	:'lg',
				border  : true,
				page 	: true,
				limits	: [10,30,50,80,100,999],
				where 	: {
					fileName		: '',
					add_time_begin  : '',
					add_time_end  	: ''
				},
				cols : [ [ 
					{ 
						type: 'checkbox'
					},
					{ 	type: 'numbers',
						title: '序号',
						unresize: true 
					},{
						field : 'fileName',
						align : "center",
						title : '文件名称'
					},{
						fixed : 'right',
						title : '操作',
						align : "center",
						toolbar : '#barDemo'
					}
				] ],
				parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
					return {
						"code" 	: 0, //解析接口状态
						"msg" 	: "", //解析提示文本
						"count"	: res.data.fileList.total,//解析数据长度
						"data" 	: res.data.fileList.list//解析数据列表
					};
				}
			});
			
			
			//点击查询按钮，重载文章表格
			$('#searchArticle').on('click', function() {
				table.reload('articleAll', {
					method : 'post',
					where : {
						title 	: $("#title").val(),
						type 	: $("#type").val()
					},
					page : {
						curr : 1
					}
				});
				return false;
			});
			//点击查询按钮，重载表格
			$('#searchBtn').on('click', function() {
				table.reload('fileAll', {
					method : 'post',
					where : {
						fileName 	   : $("#fileName").val()
					},
					page : {
						curr : 1
					}
				});
				activeDelFunction();
				return false;
			});
			
			//监听头工具栏事件--文件上传按钮
			table.on('toolbar(fileTable)', function (obj) {
				var checkStatus = table.checkStatus(obj.config.id), 
				data = checkStatus.data; //获取选中的数据
				switch (obj.event) {
					case 'mulAdd'://导入
						layer.open({
							//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
							type: 1,
							title: "导入文件",
							area: ['720px', '430px'],
							content: $("#popmulAddTest")//引用的弹出层的页面层的方式加载添加界面表单
						});
					break;
					case 'add':
					    layer.open({
						type: 2,
						title: "添加文章",
						area: ['900px','600px'],
						skin: "layui-layer-molv",
						content: './addFileImport.jsp',
						});
				    break;
				};
			});
			//监听头工具栏事件--新增文章按钮
			table.on('toolbar(articleTable)', function (obj) {
				var checkStatus = table.checkStatus(obj.config.id), 
				data = checkStatus.data; //获取选中的数据
				switch (obj.event) {
					case 'add':
					    layer.open({
						type: 2,
						title: "添加文章",
						area: ['900px','600px'],
						skin: "layui-layer-molv",
						content: './addArticle.jsp',
						});
				    break;
				};
			});
			//多文件上传
			form.on('submit(upLoad)',function(obj){
				layer.msg('开始上传，请稍后~~',{icon:6,offset:"auto",time:2000});//提示框
				$('#testListAction').html('<span style="color: #FF5722;">正在上传...</span>');
				$('#testListAction').addClass("layui-btn-disabled").attr("disabled",true);
			})
			var demoListView = $('#demoList'),
			uploadListIns = upload.render({
				elem: '#testList',
				url: '<%=basePath%>/priceUpload', //价格上传接口
				url: '<%=basePath%>/fileUpload', //文件上传接口
				accept: 'file',
				multiple: true,
				auto: false,
				bindAction: '#testListAction',
				choose: function(obj){  //选完文件调用
					var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
					//读取本地文件
					var count = 1;
					obj.preview(function(index, file, result){
						var tr = $(['<tr id="upload-'+ index +'">',
							'<td>'+ count++ +'</td>',
							'<td>'+ file.name +'</td>',
							(file.size/1024/1024) > 1 ? '<td>'+ (file.size/1024/1024).toFixed(1) +'m</td>':'<td>'+ (file.size/1024).toFixed(1) +'kb</td>',
							'<td>等待上传</td>',
							'<td>',
							'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
							'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
							'</td>',
							'</tr>'].join(''));
						//单个重传
						tr.find('.demo-reload').on('click', function(){
							obj.upload(index, file);
						});
						//删除
						tr.find('.demo-delete').on('click', function(){
							delete files[index]; //删除对应的文件
							tr.remove();
							uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
						});
						demoListView.append(tr);
					});
				},
				done: function(res, index, upload){ //上传成功后调用
					if(res.code == 200){ //上传成功
						var tr = demoListView.find('tr#upload-'+ index),
						tds = tr.children();
						tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
						tds.eq(4).html(''); //清空操作
						$('#testListAction').html('<span>开始上传</span>');
						$('#testListAction').removeClass("layui-btn-disabled").attr("disabled",false);
						return delete this.files[index]; //删除文件队列已经上传成功的文件
					}
					this.error(index, upload);
				},
				error: function(index, upload){	//上传失败后调用
					var tr = demoListView.find('tr#upload-'+ index)
					,tds = tr.children();
					tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
					$('#testListAction').html('<span>开始上传</span>');
					$('#testListAction').removeClass("layui-btn-disabled").attr("disabled",false);
					tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
				}
			});
			
			//监听表格操作按钮
			table.on('tool(fileTable)',function(obj){
				switch (obj.event) {
				//下载
				case 'downLoad':
					var url = "<%=basePath%>"+"deptFile/"+obj.data.fileName
					var request = new XMLHttpRequest();
				        request.responseType = "blob";
				        request.open("GET", url);
				        request.onload = function() {
				            var url = window.URL.createObjectURL(this.response);
				            var a = document.createElement("a");
				            document.body.appendChild(a);
				            a.href = url;
				            a.download = obj.data.fileName;
				            a.click();
				        }
				        request.send();
				    break;
				//删除
				case 'del':
					layer.confirm('确定要删除该数据么？',{icon:3,title:"提示"}, function(index){
						$.ajax({
			    			url:"<%=basePath%>/deleteFile",
			    		  	data:{'fileId': obj.data.fileId},
			    			type:"post",
			    		  	success:function (data) {
			    			 	if (data.code == 200) {
			    			 		layer.msg('删除成功！',{icon:6,offset:"auto",time:1000});//提示框
							  	}else{
								    layer.msg('删除失败！',{icon:5,offset:"auto",time:1000});//提示框
							  	}
			    			 	setTimeout(function(){
			    			 		location.reload();//重新加载页面
								}, 1100);
			    		 	}  
			    	 	}); 
					});
		     	}; 
			}); 
			
			//监听表格操作按钮--文章编辑
			table.on('tool(articleTable)',function(obj){
				if(obj.event === 'edit'){
					/* layer.open({
			    		type: 2,
			    		title: "修改信息",
			    		area: ['900px','600px'],
						skin: "layui-layer-molv",
			    		fix: false, //不固定
			    		btn: ['取消'],//弹出层按钮
			    		maxmin: true,
			    		content: './updateArticle.jsp',
			    		success: function(layero, index){
			    			var body = layer.getChildFrame('body', index);
			    		    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
			    		    body.find('#id').val(obj.data.id);
			    		    body.find('#titleUp').val(obj.data.title);
			    		    body.find('#typeUp').val(obj.data.type);
			    		   	body.find('#CONTENT').val(obj.data.content);
			    		   	body.find('#contentUp').val(obj.data.content);
			    		    layui.form.render("select");
			    		}
			    	 }); */
					 $.get("<%=basePath%>/updateArticle",function (str) {
		                    layer.open({
		                        type: 2,
		                        title : '修改文章',
		                        content : 'updateArticle.jsp',
		                        area: ['900px','600px'],
		                        skin:'layui-layer-molv',
		                        btn:['确定','取消'],
		                        success:function(){ 
		                            $.get('<%=basePath%>/articleInfo',{id:obj.data.id},function (data) {
		                                //显示数据
		                                console.log(data.data.article.title)
		                                layui.form.val('articleForm',{
		                                	'title' : data.data.article.title,
		                                	'type'  :data.data.article.type
		                                });
		                            });
		                        },
		                        yes : function () {
		                            
		                        }
		                    });
		                });
				}else if(obj.event === 'info'){
			    	layer.open({
			    		type: 2,
			    		title: "",
			    		area: ['100%','100%'],
						skin: "layui-layer-molv",
			    		fix: false, //不固定
			    		//btn: ['取消'],//弹出层按钮
			    		maxmin: true,
			    		content: './infoArticle.jsp',
			    		success: function(layero, index){
			    			var body = layer.getChildFrame('body', index);
			    		    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
			    		    body.find('#id').val(obj.data.id);
			    		    body.find('#titleUp').val(obj.data.title);
			    		    body.find('#typeUp').val(obj.data.type);
			    		    body.find('#contentUp').val(obj.data.content);
			    		    layui.form.render("select");
			    		  }
			    	 });
				}else if(obj.event === 'del'){
					layer.confirm('确定要删除该数据么？',{icon:3,title:"提示"}, function(index){
						$.ajax({
			    			url:"<%=basePath%>/deleteArticle",
			    		  	data:{'id': obj.data.id},
			    			type:"post",
			    		  	success:function (data) {
			    			 	if (data.code == 200) {
			    			 		layer.msg('删除成功！',{icon:6,offset:"auto",time:1000});//提示框
							  	}else{
								    layer.msg('删除失败！',{icon:5,offset:"auto",time:1000});//提示框
							  	}
			    			 	setTimeout(function(){
			    			 		location.reload();//重新加载页面
								}, 1100);
			    		 	}  
			    	 	}); 
					});
				}
			});
			//激活批量删除
			function activeDelFunction(){
				$('.demoTable .layui-btn').on('click', function(){
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
			} 
			activeDelFunction();
			//执行批量删除
			var $ = layui.$,active = {
				getCheckData: function(){ //获取选中数据
					var checkStatus = table.checkStatus('fileAll'),
					checkData = checkStatus.data,
					ids="";
					fileNames="";
					if(checkData.length == 0){
						layer.msg("请选择要删除的数据",function(){});
						return;
					}
					for (var i = 0; i < checkData.length; i++) {
						ids+=checkData[i].fileId+",";
						fileNames+=checkData[i].fileName+";";
					}
					//var ids = JSON.stringify(delList);
					layer.confirm('确定要删除这['+checkData.length+'条]数据么？',{icon:5,title:'友情提示'}, function(index){
						$.ajax({
							url:"<%=basePath%>/deleteFiles",
							dataType:'json',
							data:{
								ids:ids,
								fileNames:fileNames
							},
							type:'post',
							success:function(data){
								if (data.code == 200) {
									layer.msg('删除成功！',{icon:6,offset:"auto",time:2000});//提示框
								}else{
									layer.msg('删除失败！',{icon:5,offset:"auto",time:2000});//提示框
								}
								setTimeout(function(){
									location.reload();//重新加载页面表格
								}, 1000);
							}
						});
						return false; 
					});
				}    
			};
		});
	</script> --%>
<script src="../../js/article.js" charset="utf-8"></script>
<script src="../../js/file.js" charset="utf-8"></script>
</body>
</html>