{extend name="layout/content" /}
{block name="header"}
<title>渠道登录页管理</title>
<style>
	.add{
		width: 100px;
		height: 100px;
	}

	.add:hover{
		cursor: pointer;
	}

	input[type=file]{
		display: none;
	}

	.layui-inline{
		/* width:100%; */
		
	}

	.layui-form-item .layui-input-inline {
		width: 220px;
		float: unset;
		
	}

	.layui-form-mid {
		float: unset;
		
	}

	img{
		display: inline-block;
	}

	.preview{
		/* display: none; */
		/* width: 100px; */
		/* height: 100px; */
	}
</style>
{/block}
{block name="content"}
<div class="x-body">

	<form class="layui-form" action="{:url('Channel/loginPage')}" id="my-form" method="post" enctype="multipart/form-data">


		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">上传游戏图片1：</label>
				<div class="layui-input-inline J_wrap" style="float: unset">
					{empty name="$list[0]['filename']"}
					<img src="" alt="" class="preview"  >
					{else /}
					<img src="https://cdn.{$Think.QM_DOMAIN_URL}/{$list[0]['filename']}" alt="" class="preview" data-id="10" >
					{/empty}
					<img src="/static/images/add.png" alt="" class="add">
					<input type="file" name="carrousel_1" accept="image/jpeg,image/png,image/bmp" onchange="uploadPreview(this,event)">
				</div>

				<div class="layui-form-mid layui-word-aux" style="float: unset">
					<label class="layui-form-label"></label>
					<button type="button" class="layui-btn layui-btn-sm layui-btn-danger J_del">删除</button>
				</div>

				<!-- 记录用 -->
				<div class="layui-input-inline J_operation" style="float: unset">
					<input type="hidden" class="operationType" name="operation_type_1" value="0">
					<input type="hidden" class="operationID" name="operation_id_1" value="{$list[0]['id']}">
				</div>


				<div class="layui-form-mid layui-word-aux" style="float: unset">
					<label class="layui-form-label"></label>
					请上传尺寸为256px*256px，格式为jpg、png、bmp的图片。
				</div>


				<div class="layui-inline">
					<label class="layui-form-label">图片跳转：</label>
					<div class="layui-input-inline">
						<!-- lay-verify="required" -->
						<input type="tel" name="address_1" placeholder="http://" autocomplete="off" class="layui-input" onblur="isURL(this.value)" value="{$list[0]['url']}">
					</div>
				</div>
				<!--
				<div class="layui-inline">
					<input type="checkbox" name="ifJump_1" lay-skin="primary" title="不跳转" {if condition="$list[0]['isjump']==0" } checked="" {/if}>
				</div>
				-->
			</div>
		</div>


		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">上传游戏图片2：</label>
				<div class="layui-input-inline J_wrap" style="float: unset">
					{empty name="$list[1]['filename']"}
					<img src="" alt="" class="preview"  >
					{else /}
					<img src="https://cdn.{$Think.QM_DOMAIN_URL}/{$list[1]['filename']}" alt="" class="preview" data-id="10" >
					{/empty}
					<img src="/static/images/add.png" alt="" class="add">
					<input type="file" name="carrousel_2" accept="image/jpeg,image/png,image/bmp" onchange="uploadPreview(this,event)">
				</div>

				

				<div class="layui-form-mid layui-word-aux" style="float: unset">
					<label class="layui-form-label"></label>
					<button type="button" class="layui-btn layui-btn-sm layui-btn-danger J_del">删除</button>
				</div>

				<div class="layui-input-inline J_operation" style="float: unset">
					<input type="hidden" class="operationType" name="operation_type_2" value="0">
					<input type="hidden" class="operationID" name="operation_id_2" value="{$list[1]['id']}">
				</div>

				<div class="layui-form-mid layui-word-aux" style="float: unset">
					<label class="layui-form-label"></label>
					请上传尺寸为256px*256px，格式为jpg、png、bmp的图片。
				</div>


				<div class="layui-inline">
					<label class="layui-form-label">图片跳转：</label>
					<div class="layui-input-inline">
						<input type="tel" name="address_2" placeholder="http://" autocomplete="off" class="layui-input" onblur="isURL(this.value)" value="{$list[1]['url']}">
					</div>
				</div>
				<!--
				<div class="layui-inline">
					<input type="checkbox" name="ifJump_2" lay-skin="primary" title="不跳转" {if condition="$list[1]['isjump']==0" } checked="" {/if}>
				</div>
				-->
			</div>
		</div>


		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">上传游戏图片3：</label>
				<div class="layui-input-inline J_wrap" style="float: unset">
					{empty name="$list[2]['filename']"}
					<img src="" alt="" class="preview"  >
					{else /}
					<img src="https://cdn.{$Think.QM_DOMAIN_URL}/{$list[2]['filename']}" alt="" class="preview" data-id="10" >
					{/empty}
					<img src="/static/images/add.png" alt="" class="add">
					<input type="file" name="carrousel_3" accept="image/jpeg,image/png,image/bmp" onchange="uploadPreview(this,event)">
				</div>

			
				<div class="layui-form-mid layui-word-aux" style="float: unset">
					<label class="layui-form-label"></label>
					<button type="button" class="layui-btn layui-btn-sm layui-btn-danger J_del">删除</button>
				</div>

				<div class="layui-input-inline J_operation" style="float: unset">
					<input type="hidden" class="operationType" name="operation_type_3" value="0">
					<input type="hidden" class="operationID" name="operation_id_3" value="{$list[2]['id']}">
				</div>

				<div class="layui-form-mid layui-word-aux" style="float: unset">
					<label class="layui-form-label"></label>
					请上传尺寸为256px*256px，格式为jpg、png、bmp的图片。
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">图片跳转：</label>
					<div class="layui-input-inline">
						<input type="tel" name="address_3" placeholder="http://" autocomplete="off" class="layui-input" onblur="isURL(this.value)" value="{$list[2]['url']}">
					</div>
				</div>
				<!--
				<div class="layui-inline">
					<input type="checkbox" name="ifJump_3" lay-skin="primary" title="不跳转" {if condition="$list[2]['isjump']==0" } checked="" {/if}>
				</div>
				-->

			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">上传游戏图片4：</label>
				<div class="layui-input-inline J_wrap" style="float: unset">
					{empty name="$list[3]['filename']"}
					<img src="" alt="" class="preview"  >
					{else /}
					<img src="https://cdn.{$Think.QM_DOMAIN_URL}/{$list[3]['filename']}" alt="" class="preview" data-id="10" >
					{/empty}
					<img src="/static/images/add.png" alt="" class="add">
					<input type="file" name="carrousel_4" accept="image/jpeg,image/png,image/bmp" onchange="uploadPreview(this,event)">
				</div>

			
				<div class="layui-form-mid layui-word-aux" style="float: unset">
					<label class="layui-form-label"></label>
					<button type="button" class="layui-btn layui-btn-sm layui-btn-danger J_del">删除</button>
				</div>

				<div class="layui-input-inline J_operation" style="float: unset">
					<input type="hidden" class="operationType" name="operation_type_4" value="0">
					<input type="hidden" class="operationID" name="operation_id_4" value="{$list[3]['id']}">
				</div>

				<div class="layui-form-mid layui-word-aux" style="float: unset">
					<label class="layui-form-label"></label>
					请上传尺寸为256px*256px，格式为jpg、png、bmp的图片。
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">图片跳转：</label>
					<div class="layui-input-inline">
						<input type="tel" name="address_4" placeholder="http://" autocomplete="off" class="layui-input" onblur="isURL(this.value)" value="{$list[3]['url']}">
					</div>
				</div>
				<!--
				<div class="layui-inline">
					<input type="checkbox" name="ifJump_4" lay-skin="primary" title="不跳转" {if condition="$list[3]['isjump']==0" } checked="" {/if}>
				</div>
				-->
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label"></label>
				<button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="">确定</button>
			</div>
		</div>







	</form>
</div>
{/block}


{block name="footer"}
<script>

	

	$(".preview").each(function (index, item) {
		if ($(item).attr("src")) {
			$(item).css({
				width: 100,
				height: 100
			})
		} else {
			$(item).css({
				width: "0",
				height: "0"
			})
		}
	})


	$(".add").on("click", function () {
		$(this).siblings("input")[0].click()
	})


	$(document).ready(function () { 
		layui.use(['form', 'layer','upload'], function () {
			var form = layui.form,
				upload = layui.upload,
				layer = layui.layer;

				form.render();


			form.on('submit(*)', function (data) {

				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}


				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

			});




		})
	})







	$(".J_del").on("click", function () {

		var i = $(this).parents(".layui-form-item").index();


		$(this).parent().siblings(".J_wrap").find("img.preview").attr("src", "").css({
			width:"0",
			height:"0"
		});
		$(this).parent().siblings(".J_wrap").find("input[type=file]").val("");

		$(this).parent().siblings(".J_operation").find("input.operationType").val("2");
	


	})









	function uploadPreview(element, e) {

		var f = element.value;

		var i = $(element).parents(".layui-form-item").index();

	

		$(element).parent().parent().find(".J_operation").children(".operationType").val("1");

		if ($(element).siblings(".preview").attr("data-id")) {
		
			$(element).parent().parent().find(".J_operation").children(".operationType").val("3")
		}



		if (f == "") {
			alert("请上传图片");
			return false;
		} else {

			if (!/\.(jpg|JPG|PNG|png|BMP|bmp)$/.test(f)) {
				alert("图片类型必须是jpg,png,bmp格式");
				element.value = "";
				return false;
			} else {

				var fileObj = e.target.files;

				for (var i = 0; i < fileObj.length; i++) {
					var fileSize = (fileObj[i].size / 1024).toFixed(0);
					if (parseFloat(fileSize) > 3072) {
						alert("图片不得大于3M")

					} else {
						var reader = new FileReader();

						reader.onload = function () {
							
							$(element).siblings("img.preview").attr("src", this.result).css({
								width: "100px",
								height: "100px"
							});

						};

						reader.readAsDataURL(fileObj[i]);
					}
				}
			}



		}


	}


	// 验证url
	function isURL(str_url) {

		if (str_url.length > 0) {
			var strRegex = "^((https|http|ftp|rtsp|mms)?://)" +
				"?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@
				+
				"(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
				+
				"|" // 允许IP和DOMAIN（域名）
				+
				"([0-9a-z_!~*'()-]+\.)*" // 域名- www.
				+
				"([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
				+
				"[a-z]{2,6})" // first level domain- .com or .museum
				+
				"(:[0-9]{1,4})?" // 端口- :80
				+
				"((/?)|" // a slash isn't required if there is no file name
				+
				"(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
			var re = new RegExp(strRegex);
			if (re.test(str_url) == false) {
				layer.msg("输入的url格式有误，请重新输入")
				return re.test(str_url);
			}
		}


	}
</script>
{/block}