{layout name="layout" /}
<style>
    a ,a:hover{
        color: #fff;
        text-decoration: none;
    }
    .set_con {
        width: 100%;
        height: auto;
        float: left;
        background-color: #fff;
        min-width: 1130px;
        overflow: auto;
        box-sizing: border-box;
        padding-left: 50px;
    }
    .layui-form-item {
        /* margin-bottom: 15px; */
        clear: both;
        width: 1130px;
        margin: 10px 0;
        float: left;
    }
    .layui-input, .layui-textarea {
        width: 190px;
    }
    #if_con {
        overflow: auto;
        background:#fff;
    }

.up_con span input {
    height: 1.5rem;
    width: 1.5rem;
    opacity: 0;
}

input.imginputfile{
    height: 36px;
    line-height: 24px;
    width: 72px;
    overflow: hidden;
    cursor: pointer;
}

.oneimg {
	width:200px;
 	float:left;
 }
/*.oneimg img {*/
    /*width: 191px;*/
/*}*/

    .oneimg img {

        width: 200%;
        height: 200%;

    }
.layui-form-item.showimgbox {
    padding-left: 50px;
    margin-top: 0px;
	width: 820px;
}
.layui-form-label {
    width: 100px;
}
.oneimg{ float: none;}
    /*.oneimg img{width:{$imgsize['index'][0]}px; height: {$imgsize['index'][1]}px;}*/
</style>
<div class="if_wrap">
<div id="if_con">
    <div class="cus-con">
        <div class="set-top">
		{$topmenu}
        </div>
         <form class="layui-form layui-form-pane1" action="" method="post" id="addform" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label class="layui-form-label">广告位名称</label>
                <div class="layui-input-block">
					<input type="hidden"  name="id" value="{$data.id}" />
                    <input type="text"  name="adv_name" value="{$data.adv_name}"  class="layui-input" lay-verify="required|title" required placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" >广告位置</label>
                <div class="layui-input-inline">
                    <select name="adv_seat" id="" lay-filter="adv_seat" lay-verify="adv_seat">
                        <option value="{$data.adv_seat}">{$showselect}</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" >广告位图片<br/><span class="imgsize">宽{$imgsize['index'][0]}px<br/>高{$imgsize['index'][1]}px</span></label>
                <div class="layui-upload layui-form-label" style="padding-left:0px;">
                    <input type="file" name="image[]" class="imginputfile imginputfile{$detail[img]|count}" /><br/>
                </div>
            </div>
            <div class="layui-form-item showimgbox">
                {foreach $detail['img'] as $k=>$v}
                <div class="oneimg oneimg{$i++}" >
                	<input type="hidden" name="oldimg[]" value="{$v}" />
            		<img src="__PUBLIC__/uploads/{$v}" class="upimg" id="imgbox"  style="margin-top:10px; "/>
				    <input type="text" value="{$detail['link'][$k]}" name="oldlink[]" placeholder="输入带http开头连接地址"  class="layui-input" />
					    <span class="layui-btn layui-btn-sm del" data-inputid="" >
					      <i class="layui-icon"></i>
				    </span>
			    </div>
                {/foreach}
            </div>

            <div class="layui-form-item" pane>
                <label class="layui-form-label">广告状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="adv_status" value="0" title="不使用" {$data.adv_status!=1?'checked':''}>
                    <input type="radio" name="adv_status" value="1" title="使用" {$data.adv_status==1?'checked':''}>
                </div>
            </div>
            <div class="layui-form-item" style="height:100px">
                <div class="layui-input-block">
                    <button class="layui-btn gosubmit" lay-submit lay-filter="*">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
<script>
    // 返回
    layui.use('form', function(){
        var form = layui.form;
        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 2){
                    return '标题也太短了吧';
                }
            }
	        ,adv_seat: function(value){
	        	var val = parseInt(value);
	            if(val==0){
	                return '请选择广告位置';
	            }
	        }
        });
        form.on('radio', function(data){
            console.log(data);
        });
        //事件监听
        form.on('select', function(data){
            var coupouid = $("select[name=couponid]").val();
            if(coupouid>0){
                for(i in coupons){
                    if(coupons[i].id==coupouid){
                        $("#couponimg").attr('src','__PUBLIC__/uploads/'+coupons[i].img);
                    }
                }
            }
            return false;
        })
        //监听提交
        form.on('submit(*)', function(data){
            title = $("input[name=tilie]").val();
            var formid = document.getElementById("addform");
            var sformData = new FormData(formid);
            var hasimg =$.trim($('.showimgbox>div').attr('class'));
            if(!hasimg){
            	layer.msg('请最少上传1张广告图片', {
    			    icon: 2
    			});
            	return false;
            }else{
	            $.ajax({
	                type:"post",
	                url:"{:url('vip/advertising/edit')}",
	                data:sformData,
	                processData: false,  // 不处理数据
	                contentType:false,
	                success:function(s){
	                    if(s.code==1){
	        				   layer.open({
	                            content: '恭喜您修改成功！',
	                            btn: ['确认'],
	                            yes: function(index, layero) {
	                                window.location.href="{:url('vip/advertising/index')}";
	                            }
	                        });
	                    }else{
	        				layer.msg('修改失败',{
	        				    icon: 2
	        				});
	                    }
	                    return false;
	                }});
            		return false;
            }
        });
    });

    // 图片显示
    var imgNum = {$detail[img]|count};
    $(".layui-form-item").on('change','.imginputfile',function(){
    	imgNum +=1;
    	var _this = this;
    	$(_this).parents('.layui-upload').prepend('<input type="file" name="image[]"  class="imginputfile imginputfile'+imgNum+'" />');
        $(_this).hide();
    	imgView(_this,imgNum);

    });
    // 删除图片
    $(".cus-con").on('click','.del',function(){
    	var inputid = $(this).attr('data-inputid');
    	if(inputid){
        	$('.'+inputid).remove();
    	}
    	$(this).parents('.oneimg').remove()

    });
    // 图片显示处理函数
    function imgView(filedom,num){
    	num = num -1;
        console.log(filedom);
        // 判断是否支持fileReader
        if(window.FileReader){
            var reader = new FileReader();
            // 获取文件
            var file = filedom.files[0];
            var imagetype = /^image\//;
            // 判断是否是图片
            console.log(file);
            console.log(file.type);
            if(!imagetype.test(file.type)){
    			layer.msg('请上传正确图片类型文件', {
    			    icon: 2,
    			});
                return;
            }
            // 读取完成
            reader.onload = function(e){
                // 获取图片dom
                //var img = document.getElementById('imgbox');

               var img = '<div class="oneimg oneimg'+num+'">'+
              			    '<img src="'+e.target.result+'" class="upimg" id="imgbox"  style="margin-top:10px;"/>'+
						    '<input type="text" value="" name="link[]" placeholder="输入连接地址,可选,如果多张图片,只设置一个连接地址,择所有图片都取这个连接"  class="layui-input" />'+
							    '<span class="layui-btn layui-btn-sm del" data-inputid="imginputfile'+num+'" >'+
							      '<i class="layui-icon"></i>'+
							    '</span>'+
						    '</div>';
                $(filedom).parents('.cus-con').find('.showimgbox').append(img);
                // 图片路径设置为读取的图片
                //img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }

    }
</script>
</body>
</html>