<%@ page language="java" 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"/>
	<style>
		.layui-input,.layui-textarea{
			border-color:#606060;
		}
	</style>
</head>
<body>
<form class="layui-form" action="" style="width: 70%">
	<input name="id" value="${banner.id}" hidden/>
	<input name="picUrl" value="${banner.picUrl}" hidden />

	<div class="layui-form-item">
		<label class="layui-form-label">排序</label>
		<div class="layui-input-block" style="margin-left:0px">
			<div class="layui-input-block">
				<input name="seq" value="${banner.seq}" placeholder="请输入描述" class="layui-input"/>
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">跳转地址</label>
		<div class="layui-input-block" style="margin-left:0px">
			<div class="layui-input-block">
				<input name="jumpUrl" value="${banner.jumpUrl}" placeholder="请输入类型" class="layui-input"/>
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">图片类型</label>
		<div class="layui-input-block" style="margin-left:0px">
			<div class="layui-input-block">
<%--				<input name="type" value="${banner.type}" placeholder="请输入类型" class="layui-input"/>--%>
				<select name="type" id="adTypeCode" class="layui-input">
					<option value="01" <c:if test='${"01" eq banner.type }'>selected="selected"</c:if>>主页</option>
					<option value="02" <c:if test='${"02" eq banner.type }'>selected="selected"</c:if>>推广页</option>
					<option value="03" <c:if test='${"03" eq banner.type }'>selected="selected"</c:if>>插件</option>
				</select>
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">上传图片</label>
		<div class="layui-input-block" style="display: flex;justify-content: flex-start">
			<input name="fileKey" id="fileKey" hidden/>
			<input type="hidden" name="picUrl" value="${banner.picUrl}" id="url"/>
			<input name="fileName" id="fileName" class="layui-input layui-col-xs6 layui-disabled" disabled/>
		</div>
		<div class="layui-input-block" style="display: flex;justify-content: flex-start ; margin-top: 5px">
			<button type="button" class="layui-btn layui-btn layui-btn-normal  layui-col-xs3"  onclick="$('#file').click();">
				浏览...
			</button>
			<button type="button" class="layui-btn layui-btn-normal layui-col-xs3"  id="uploadParam">
				上传
			</button>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
			<button type="button" id="close" class="layui-btn layui-btn-primary">关闭</button>
		</div>
	</div>
</form>

<form id="ajaxForm" class="layui-form" style="width: 70%" >
	<input type="hidden" name="OSSAccessKeyId" id="accessid" value="${uploadParam.accessid}">
	<input type="hidden" name="policy" id="policy" value="${uploadParam.policy}">
	<input type="hidden" name="signature" id="signature" value="${uploadParam.signature}">
	<input type="hidden" name="expire" id="expire" value="${uploadParam.expire}">
	<input type="hidden" name="success_action_status" id="success_action_status" value="200">
	<input type="hidden" name="key" id="key" value="${uploadParam.key}">
	<input type="hidden" name="callBack" id="key2_callBack" value="${uploadParam.callBack}">
	<input type="file" style="display: none" name="file" id="file" onchange="document.getElementById('fileName').value=this.files[0].name">
</form>

<script type="text/javascript">
	layui.use(['form', 'upload','layer'], function(){
		var form = layui.form;
		var upload = layui.upload;
		var layer = layui.layer;

		$('#close').click(function() {
			parent.layer.closeAll();
		});

		var data;
		$("#uploadParam").click(function () {
			var fileName = $("#fileName").val();
			if(!fileName){
				layer.msg("请先选择文件！");
				return;
			}
			var suffix = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length); //
			var key = '${uploadParam.key}'+"."+suffix;
			$("#key").val(key);
			$("#fileKey").val(key);
			var index = layer.load(1,{shade: [0.1,'#000'] });
			$.ajax({
				url: '${uploadParam.host}',
				method: 'post',
				data: new FormData($('#ajaxForm')[0]),
				dataType:'json',
				processData: false,
				contentType: false,
				success: function(res) {
					layer.close(index);
					if (res.code == 200){
						layer.msg("上传成功！")
						$("#url").val(res.url);
					}else{
						layer.msg("上传失败！")
					}
				},
				error: function (errorMsg) {
					layer.close(index);
					layer.msg("上传出错！")
				}
			})
		})

		//监听提交
		form.on('submit(formDemo)', function(data){
			var index = layer.load(1,{shade: [0.1,'#000'] });
			$.ajax({
				url: '${ctx}/banner/saveOrUpdate',
				method: 'post',
				data: JSON.stringify(data.field),
				dataType: 'JSON',
				contentType:"application/json",
				success: function(res) {
					layer.close(index);
					if(res.code == 200) {
						layer.alert(res.data,function(){
							parent.location.reload();
						})
					} else {
						layer.msg(res.message, {
							icon: 5
						});
					}
				}
			})
			return false;
		});
	});
</script>
</body>
</html>