<div class="opwindow">
	<form name="theform2" id="theform2" method="post" action="{echo \befen\get_url()}">
	<div class="layui-form layui-row">
		<div class="layui-form-item">
			<input type="hidden" name="item" id="item" value="">
			<div class="layui-col layui-col-md6">
				<label>设备SN</label>
				<input type="text" id="SN" class="layui-input" value="{$value[SN]}" placeholder="请输入设备SN">
			</div>
			<div class="layui-col layui-col-md3">
				<label>展示类型</label>
				<select name="type" id="type" class="layui-select">
					<option value="image" <!--{if $ads['type'] == 'image'}-->selected<!--{/if}-->>图片</option>
					<option value="video" <!--{if $ads['type'] == 'video'}-->selected<!--{/if}-->>视频</option>
				</select>
			</div>
			<div class="layui-col layui-col-md3">
				<label>轮播时间</label>
				<input type="text" name="time" id="time" class="layui-input" value="{$ads[time]}" placeholder="请输入轮播时间">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-col layui-col-md12">
				<label>视频</label>
				<div>
					<input type="text" name="video" id="video" class="layui-input" value="{$ads[video]}" placeholder="" style="float:left;width:400px;">
					<input type="button" class="layui-btn" id="v-upload" value="上传" style="float:left;margin-left:10px;"><input type="button" class="layui-btn" id="v-preview" value="预览" style="float:left;margin-left:10px;">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-col layui-col-md12">
				<hr>
				<div id="ads_list">
					<div class="ad_item">
						<img id="item-0" src="">
						<p class="item-delete"><i class="layui-icon layui-icon-close"></i></p>
						<p class="item-upload"><input type="button" class="layui-btn layui-btn-fluid" value="上传"></p>
					</div>
					<div class="ad_item">
						<img id="item-1" src="">
						<p class="item-delete"><i class="layui-icon layui-icon-close"></i></p>
						<p class="item-upload"><input type="button" class="layui-btn layui-btn-fluid" value="上传"></p>
					</div>
					<div class="ad_item">
						<img id="item-2" src="">
						<p class="item-delete"><i class="layui-icon layui-icon-close"></i></p>
						<p class="item-upload"><input type="button" class="layui-btn layui-btn-fluid" value="上传"></p>
					</div>
					<div class="ad_item">
						<img id="item-3" src="">
						<p class="item-delete"><i class="layui-icon layui-icon-close"></i></p>
						<p class="item-upload"><input type="button" class="layui-btn layui-btn-fluid" value="上传"></p>
					</div>
					<div class="ad_item">
						<img id="item-4" src="">
						<p class="item-delete"><i class="layui-icon layui-icon-close"></i></p>
						<p class="item-upload"><input type="button" class="layui-btn layui-btn-fluid" value="上传"></p>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<hr>
		</div>
		<div class="layui-form-item">
			<div class="layui-col layui-col-md12" style="text-align:right;">
				<button type="submit" name="submit2" value="submit2" id="submit2" class="layui-btn">提交</button>
			</div>
		</div>
	</div>
	</form>
</div>
<style>
#ads_list div.ad_item {width:20%;float:left;text-align:center;position:relative;cursor:pointer;}
#ads_list div.ad_item img {width:100px;height:160px;border:1px solid #DDD;cursor:pointer;}
#ads_list div.ad_item p.bg {width:100px;height:160px;position:absolute;top:1px;left:6px;background:rgba(0, 0, 0, 0);}
#ads_list div.ad_item:hover p.bg {background:rgba(0, 0, 0, 0.5);}
#ads_list div.ad_item .item-upload {width:102px;}
#ads_list div.ad_item .item-upload .layui-btn {margin:5px 4px 0;}
#ads_list div.ad_item .item-delete {width:20px;height:20px;background:#000;color:#FFF;font-size:16px;position:absolute;top:1px;right:5px;display:none;}
#ads_list div.ad_item:hover .item-delete {display:block;}
</style>
<script type="text/javascript">
init_Form();
$("#theform2").find("#SN").attr("disabled", "disabled").addClass("layui-disabled");
$("#submit2").click(function(){
	var item = new Array();
	$("#ads_list").find("img").each(function(index){
		item[index] = $(this).attr("src");
	});
	$("#item").val(item);
	if($("#type").val() == "video" && !$("#video").val()) {
		showAlert("请上传视频");
		return false;
	}
	ajaxSubmit(this, "", "#theform2");
});
$("#v-preview").click(function(){
	init_Layer(function(){
		index_video = layer.open({
			type: 1,
			time: 0,
			anim: 0,
			shade: 0.5,
			isOutAnim: false,
			area: [],
			title: "",
			content: '<video id="video_preview" style="width:800px;height:600px;" src="' + $("#video").val() + '" preload="auto" controls="controls" autoplay="autoplay"></video>'
		});
	});
});
var list = {echo json_encode($list)};
$(document).ready(function(){
	if(list.length > 0) {
		for (var k in list) {
			$("#item-" + k).attr("src", list[k]);
		}
	}
	$("#ads_list").find("img").each(function(index){
		if($(this).attr("src") == "") {
			$(this).attr("src", "{$noad}");
		}
	});
	$("#ads_list").find(".item-upload").each(function(index){
		add_upload($(this));
	});
	$("#ads_list").find(".item-delete").click(function(){
		$(this).parent().find("img").attr("src", "{$noad}");
	});
	$("#v-upload").click(function(){
		
	});
});
init_upload({
	elem: "#v-upload",
	url: "{echo url('device/upload')}",
	exts: "mp4",
	acceptMime: "video/mp4",
	callback: function(item, data, index, upload){
		//console.log(item);
		//console.log(data);
		if(data.status == 0) {
			showAlert(data.message);
		} else {
			$("#video").val(data.message);
		}
	}
});
function add_upload(elem) {
	if(!elem) {
		elem = '.item-upload';
	}
	init_upload({
		elem: elem,
		url: "{echo url('device/upload')}",
		exts: "png|jpg",
		acceptMime: "image/*",
		callback: function(item, data, index, upload){
			//console.log(item);
			//console.log(data);
			if(data.status == 0) {
				showAlert(data.message);
			} else {
				item.parent().find("img").attr("src", data.message);
			}
		}
	});
}
</script>
