<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/html5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/respond.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${pageContext.request.contextPath }/common/admin/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/css/style.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/jquery/1.9.1/jquery.min.js"></script> 
<script charset="utf-8" src="${pageContext.request.contextPath }/common/other/kingedit/kindeditor-min.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath }/common/other/kingedit/lang/zh_CN.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>图片列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 图片管理 <span class="c-gray en">&gt;</span> 图片列表 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<!-- 添加图片的div -->
<div class="layui-layer layui-anim layui-layer-iframe" id="layui-layer4" times="4" showtime="0" contype="string" style="display:none;z-index: 100; width: 400px; height: 260px; position: absolute; top: 100px; left: 379px;">
  <form action="${pageContext.request.contextPath }/admin/banner/add" method="post" class="form form-horizontal" id="form-member-add">
    <div class="row cl">
      <label class="form-label col-3"><span class="c-red">*</span>外链：</label>
      <div class="formControls col-5">
        <input type="text" class="input-text" value="" placeholder="" id="check-out-url" name="bannerName" datatype="*2-16" nullmsg="名称不能为空">
      </div>
      <div class="col-4"> </div>
    </div>
     <div class="row cl">
      <label class="form-label col-3"><span class="c-red">*</span>图片：</label>
      <div class="formControls col-5">
	      <a class="btn btn-primary radius" id="selectImages" href="javascript:;">
			<i class="Hui-iconfont">&#xe600;</i> 选择图片
		  </a>
	  </div>
      <div class="col-4"> </div>
    </div>
    <div class="row cl">
      <div class="formControls col-5" id="imagesDiv" align="center" style="width: 100%"></div>
      <div class="col-4"></div>
    </div>
    <span class="layui-layer-setwin">
		<a class="layui-layer-ico layui-layer-close layui-layer-close1" onclick="exitWindowsDiv(this)" href="javascript:;"></a>
	</span>
	<div class="row cl">
      <div class="formControls col-5" style="width: 100%" align="center">
      	<button class="btn btn-success radius" id="confirm-add-btn"  name="">确认添加</button>
      </div>
      <div class="col-4"> </div>
    </div>
  </form>
</div>
<div class="pd-20">
	<div class="cl pd-5 bg-1 bk-gray mt-20"> 
		<span class="l">
			<a class="btn btn-primary radius" onclick="showDivImage()" href="javascript:;">
				<i class="Hui-iconfont">&#xe600;</i> 添加图片
			</a>
			&nbsp;&nbsp;&nbsp;为<<font id="bannerNameFont">${banner.bannerName }</font>>编辑图片
		</span>
	</div>
	<div class="mt-20">
		<table class="table table-border table-bordered table-bg table-hover table-sort">
			<thead>
				<tr class="text-c">
					<th width="80">ID</th>
					<th width="100">封面</th>
					<th width="100">外链</th>
					<th width="100">创建时间</th>
					<th width="100">所属游戏</th>
					<th width="100">操作</th>
				</tr>
			</thead>
			<tbody id="image-tr-tbody">
				<c:choose>
					<c:when test="${!(empty images) }">
						<c:forEach items="${images }" var="img">
							<tr class="text-c">
								<td>${img.bannerImageId }</td>
								<td>
									<img alt="图片" src="${img.bannerImageUrl}">
								</td>
								<td>${img.bannerImageCheckOutUrl }</td>
								<td>
									<fmt:formatDate value="${img.bannerCreateDate }" pattern="yyyy-MM-dd HH:mm:ss"/>
								</td>
								<td>${banner.bannerName }</td>
								<td class="td-manage">
									<a style="text-decoration:none" class="ml-5" onClick="deleteImage(${img.bannerImageId }, this)" href="javascript:;" title="删除">
										<i class="Hui-iconfont">&#xe6e2;</i>
									</a>
								</td>
							</tr>
						</c:forEach>
					</c:when>
					<c:otherwise>
						<tr id="emptyImg">
							<td colspan="6" style="text-align: center;">
								<a class="btn btn-primary radius" onclick="showDivImage()" href="javascript:;">
									<i class="Hui-iconfont">&#xe600;</i> 添加图片
								</a>
							</td>
						</tr>
					</c:otherwise>
				</c:choose>
			</tbody>
		</table>
	</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/layer/1.9.3/layer.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/H-ui.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/H-ui.admin.js"></script> 
<script>
	var imgUrl = "";
	$(function(){
		$("#confirm-add-btn").click(function() {
			var checkOutUrl = $("#check-out-url").val();
			if (imgUrl == "") {
				layer.msg("图片必须选择!",{icon:5,time:2000});
				return false;
			}
			if (checkOutUrl == "") {
				layer.msg("外链必须填写!",{icon:5,time:2000});
				return false;
			}
			$.ajax({
				   type: "POST",
				   url: "${pageContext.request.contextPath}/admin/banner/addImage/${banner.bannerId}",
				   data: {"checkOutUrl":checkOutUrl, "imgUrl":imgUrl},
				   dataType: "json",
				   success: function(data){
						if (data.flag) {
							layer.msg("添加成功！",{icon:1,time:2000});
							$("#emptyImg").hide();
							$("#image-tr-tbody").append(
									"<tr class='text-c'>" + 
									"<td>" + data.info + "</td>" + 
									"<td>" + 
										"<img alt='图片' src='" + imgUrl + "'>" + 
									"</td>" + 
									"<td>" + checkOutUrl + "</td>" + 
									"<td>" + 
										formatDate(new Date(), "yyyy-MM-dd HH:mm:ss") +
									"</td>" + 
									"<td>" + $("#bannerNameFont").html() + "</td>" + 
									"<td class='td-manage'>" + 
										"<a style='text-decoration:none' class='ml-5' onClick='deleteImage(" + new Number(data.info) + ", this)' href='javascript:;' title='删除'>" + 
											"<i class='Hui-iconfont'>&#xe6e2;</i>" + 
										"</a>" + 
									"</td>" + 
								"</tr>"
								);
						} else {
							layer.msg(data.info,{icon:5,time:2000});
						}
				   }
			});
			return false;
		});
	});
	// 删除
	function deleteImage(id, _this) {
		$.getJSON("${pageContext.request.contextPath}/admin/banner/deleteImg", {"imgId":id, "dateTime" : new Date().getTime()}, function(data) {
			if (data.flag) {
				$(_this).parent().parent().remove();
				layer.msg("删除成功！",{icon:1,time:2000});
			} else {
				layer.msg(data.info,{icon:5,time:2000});
			}
		});
	}
	KindEditor.ready(function(K) {
	    window.editor = K.create('#goodDesc',{
	    	fileManagerJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/file_manager_json.jsp',
	        uploadJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/upload_json.jsp',
	         allowFileManager : true,
	         width : '965px'
	     });
	});
	// 关闭窗口
	function exitWindowsDiv(_this) {
		$("#layui-layer4").hide();
	}
	KindEditor.ready(function(K) {
		var editor = K.editor({
        	fileManagerJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/file_manager_json.jsp',
            uploadJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/upload_json.jsp',
			allowFileManager : true
		});
		K('#selectImages').click(function() {
			editor.loadPlugin('image', function() {
				editor.plugin.imageDialog({
					imageUrl : K('#url1').val(),
					clickFn : function(url, title, width, height, border, align) {
						$("#imagesDiv").html("");
						imgUrl = url;
						$("#imagesDiv").append("<img src='" + url + "' style='width: 50px;height: 50px'>");
						editor.hideDialog();
					}
				});
			});
		});
	});
	
	function showDivImage() {
		imgUrl = "";
		$("#check-out-url").val("");
		$("#imagesDiv").html("");
		$("#layui-layer4").show();
		
	}
	function formatDate(date, format) {
	    if (!date) return;
	    if (!format) format = "yyyy-MM-dd";
	    switch(typeof date) {
	        case "string":
	            date = new Date(date.replace(/-/, "/"));
	            break;
	        case "number":
	            date = new Date(date);
	            break;
	    } 
	    if (!date instanceof Date) return;
	    var dict = {
	        "yyyy": date.getFullYear(),
	        "M": date.getMonth() + 1,
	        "d": date.getDate(),
	        "H": date.getHours(),
	        "m": date.getMinutes(),
	        "s": date.getSeconds(),
	        "MM": ("" + (date.getMonth() + 101)).substr(1),
	        "dd": ("" + (date.getDate() + 100)).substr(1),
	        "HH": ("" + (date.getHours() + 100)).substr(1),
	        "mm": ("" + (date.getMinutes() + 100)).substr(1),
	        "ss": ("" + (date.getSeconds() + 100)).substr(1)
	    };    
	    return format.replace(/(yyyy|MM?|dd?|HH?|ss?|mm?)/g, function() {
	        return dict[arguments[0]];
	    });                
	}
</script>
</body>
</html>