{layout name="layout" /}
<link rel="stylesheet" href="__PUBLIC__/admin/wedit/css/myedit.css">
<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;
    margin: 10px 0;
    float: left;
}
.layui-input, .layui-textarea {
    width: 190px;
}
#if_con {
    overflow: auto;
	background:#fff;
}
.display{ display:none}
#editor{
	width:800px;
	height:500px;
}
.height590{
	height:590px
}
.w-e-text {
    padding: 0 10px;
    overflow-y: inherit !important;
}
input#filebtn {
    position: absolute;
    width: 70px;
    left: 6px;
    height: 20px;
    z-index: 1;
}
.layui-form-checkbox {
    margin-bottom: 2px;
}
.edit-content video,.phoneWinView video{
	height: 200px;
	background:#000;
}
.layui-form-item .ybtn {
    margin-left: 141px;
}
.cheight {
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #23b7e5;
    margin-top: 5px;
	display:none;
}
.phoneWin .panel:hover {
    border: 0;
    background: rgba(58, 243, 255, 0.10);
}
.phoneWin .panel {
    border:0;
}
 
.phoneWin .panel:hover {
    border: 0;
    background: #f1f1f1;
}
.w-e-text p, .w-e-text h1, .w-e-text h2, .w-e-text h3, .w-e-text h4, .w-e-text h5, .w-e-text table, .w-e-text pre {
    padding: 10px 0;
    line-height: 1.5;
}
.phoneWin .edit-content {
    margin-top: 0px;
}
.noborder{
    border: 0;
}
.layui-form-label {
    width: 100px;
}

</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">
			<input type="hidden" name="styledetail" value="" />
			<div class="setOther">
				<div class="layui-form-item">
					<label class="layui-form-label">类型</label>
					<div class="layui-input-inline">
						<select name="typeid"  lay-filter="typeid">
							<option value="0">广告</option>
							<option value="1">视频</option>
							<option value="2">游戏</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item ytitle" style="display:none">
					<label class="layui-form-label" >任务标题</label>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="请输入任务标题" name="ytitle" value="" lay-verify="title">
					</div>
				</div>   
				<div class="layui-form-item yurl" style="display:none">
					<label class="layui-form-label" >游戏连接</label>
					<div class="layui-input-inline">
						<textarea class="layui-textarea" placeholder="请输入游戏的连接地址" name="taskurl" lay-verify="url" ></textarea>
					</div>
				</div>  
				<div class="layui-form-item"> 
					<label class="layui-form-label" >列表展示图<br/><span class="imgsize">宽{$imgsize['index'][0]}px*高{$imgsize['index'][1]}px</span></label>
					<button type="button" class="layui-btn" id="indeximg" lay-verify="indeximgfile" required>
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img src=""  id="indeximginput"  width="150" height="120" style="margin-top:10px;" class="display"/>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">任务周期(天)</label>
					<div class="layui-input-inline">
						<input type="text" name="days" class="layui-input" value="1" lay-verify="num" placeholder="" >
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">完成奖励积分</label>
					<div class="layui-input-inline">
						<input type="text" name="rewardscore" class="layui-input" value="0" lay-verify="num" placeholder="" >
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分享积分奖励</label>
					<div class="layui-input-inline">
						<input type="text" name="sharescore" class="layui-input" value="0" lay-verify="num" placeholder="" >
					</div>
				</div>
				<div class="layui-form-item" pane> 
					<label class="layui-form-label" >上传分享图片<br/><span class="imgsize">宽{$imgsize['share'][0]}px*高{$imgsize['share'][1]}px</span></label>
					<button type="button" class="layui-btn" id="shareimg" >
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img src=""  id="shareimginput" width="150" height="120" style="margin-top:10px;" class="display"/>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分享介绍</label>
					<div class="layui-input-inline">
						<textarea placeholder="请输入分享时的介绍,最好保持在10-50字中间" name="sharecontent" class="layui-textarea" maxlength="100"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">*开始日期</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input test-item" name="starttime" lay-verify="required|starttime|time" required readonly='readonly' id="starttime">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">*截止日期</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input test-item" lay-verify="required|endtime|time"   name="endtime" required readonly='readonly' id="endtime">
					</div>
				</div>
				<div class="layui-form-item" pane>
					<label class="layui-form-label">是否发布</label>
					<div class="layui-input-block">
						<input type="radio" name="status" value="0" title="暂不发布" >
						<input type="radio" name="status" value="1" title="立即发布" checked >
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label" >排序数字</label>
					<div class="layui-input-inline">
						<textarea placeholder="请输入内容" name="content"  id="editor" style="display:none"></textarea>
						<input type="text" class="layui-input"  name="ordernum" id="ordernum" value="0" lay-verify="num">
					</div>
				</div> 
				
				<div class="layui-form-item ybtn" style="display:none">
					<div class="layui-input-inline">
						<span class="layui-btn back">返回</span>          
						<button class="layui-btn layui-btn-danger" lay-submit lay-filter="*" id="btn">立即提交</button>
					</div>
				</div>    
		</div>
		<div class="span19">
		    <div class="widget-box">
		        <div class="widget-content" style="min-height: 584px;height:auto">
		              	<div class="win">
		              	 	<div class="top panel">
							        <!-- <span class="mclose">隐藏</span> -->
							        <div class="topArea">
							        	<input type="text" name="title" placeholder="输入任务标题" class="title" lay-verify="title">
							        </div>
							</div>
							<div class="phoneWin">
							    <div class="edit-content ctrl panel w-e-text-container" data-toolbar=".editToolbar" style="z-index:10000;"></div>
							</div>
							<div class="cheight"></div>
						</div>
		                <div class="phoneToolbar">
		                    <div class="toolbarAttrs">
		                     <p>工具栏</p>
		                     <div class="editToolbar attr" style="border:solid 1px #ddd; display:none; width:100%; margin:15px 0;  float:left; clear:both;zoom:1;  padding:10px 0px;background:#fff;">
		                         <p style="font-size:12px; color:#3a8d76;margin:5px 0 15px 10px;">编辑器辅助工具栏：</p>
		                         <div class="fontEdit w-e-toolbar" style="width: 220px; display: block; box-sizing: border-box;"></div>
		                     </div>
							<div class="tool" style="display: block; width: 100%;float: left;">
								<div class="widget-box m0 p0">
									<div class="widget-title bg_lg">背景图库<i class="layui-icon">&#xe61a;</i></div>
									<div class="bgbody display">
										<div class="widget-content backgrounds" style="height:200px;overflow-y: auto;box-sizing:border-box; overflow:auto;">
											{foreach $bgimgs as $v}
											<div class="xx-bg-box bj" data-id="{$v.id}" data-path="__PUBLIC__/uploads/editor/{$v['img']}" style="background:url(__PUBLIC__/uploads/editor/{$v[img]}) top center no-repeat; background-size:100% 100%;"><i class="layui-icon rmbg display" title="移除左边背景" >&#x1005;</i><i class="layui-icon delbg" title="从数据库删除背景">&#xe640;</i></div>
											{/foreach}
										</div>
										<div class="widget-content upbtn">
											<button type="button" class="layui-btn" id="delBg">
												<i class="layui-icon">&#xe640;</i>清除背景
											</button>
											<button type="button" class="layui-btn" id="bgimg">
												<i class="layui-icon">&#xe67c;</i>上传图片
											</button>
										</div>
									</div>
								</div>
							</div>
							<div class="tool" style="width: 100%;float: left;">
								<div class="widget-box m0 p0">
									<div class="widget-title bg_lg">插入视频<i class="layui-icon">&#xe61a;</i></div>
									<div class="bgbody display" >
										<div class="widget-content videobox" style="height:200px;overflow-y: auto;box-sizing:border-box; overflow:auto;">
											{foreach $videos as $v}
											<div class="xx-bg-box video"  data-id="{$v.id}" >
												<video height="80" data-id="{$v.id}" class="vid{$v.id}">
													<source src="__PUBLIC__/uploads/video/{$v['name']}" type="video/{$v['type']}">
												</video>
												<i class="layui-icon display" title="移除视频" >&#xe640;</i>
										    </div>
											{/foreach}
										</div>
										<div class="widget-content upbtn">
											<button type="button" class="layui-btn" id="upradio">
												<i class="layui-icon">&#xe67c;</i>上传视频
											</button>
											<button type="button" class="layui-btn " id="addurl">
												<i class="layui-icon">&#xe67c;</i>插入视频地址
											</button>
										</div>
									</div>
								</div>
							</div>
		                   </div>
		                    <div id="qrcode"></div>
		                    <p style="font-size:12px;color:#999;border-top:solid 1px #ccc; margin-top:15px; padding-top:10px;">提示:虚线样式不会被显示！</p>  
		                     <span class="layui-btn back">返回</span>          
		                     <button class="layui-btn layui-btn-danger" lay-submit lay-filter="*" id="btn">立即提交</button>
		                     <span class="layui-btn layui-btn-warm viewhtml">预览</span>               
		                 </div>
		        </div>
		    </div>
		</div>
</form>
</div>
</div>
<script>
   var ajaxUrl = "{:url('vip/activity/upload')}";
   var _public = "__PUBLIC__";
</script>
<script src="__PUBLIC__/admin/wedit/js/wangEditor.js" type="text/javascript"></script>
<script src="__PUBLIC__/admin/wedit/js/myedit.js" type="text/javascript"></script>
<script>
layui.use('upload', function(){
	 var upload = layui.upload;
	 //执行实例
	 var uploadInst = upload.render({
	   elem: '#bgimg' //绑定元素
	   ,url: "{:url('vip/activity/upload')}" //上传接口
	   ,done: function(res){
	   	var html = '<div class="xx-bg-box bj" data-id="'+res.id+'" data-path="'+res.data+'" style="background:url('+res.data+') top center no-repeat; background-size:100% 100%;"><i class="layui-icon"></i></div>';
	   	$(".backgrounds").append(html);
	   }
	   ,error: function(){
	   }
	 });
	 
	 //执行实例
	 var uploadInst = upload.render({
	   elem: '#indeximg' //绑定元素
	   ,url: "{:url('vip/activity/upload')}" //上传接口
	,auto: false
	,field: 'img'
	,choose: function(obj){
		  var files = obj.pushFile();
		  obj.preview(function(index, file, result){
		    $("#indeximginput").attr('src',result).show();
		  });
		}
	 });
	
	 //执行实例
	 var uploadInst = upload.render({
	   elem: '#shareimg' //绑定元素
	   ,url: "{:url('vip/activity/upload')}" //上传接口
	   ,auto: false
	   ,field: 'shareimg'
	,choose: function(obj){
		  var files = obj.pushFile();
		  obj.preview(function(index, file, result){
		    $("#shareimginput").attr('src',result).show();
		  });
		}
	 });
	 
	 //上传视频
	 var uploadInst = upload.render({
	   elem: '#upradio' //绑定元素
	   ,url: "{:url('vip/activity/upload')}?type=1" //上传接口
	   ,accept: "video"
	   ,exts:'mp4|wmv|ogg|MPEG4'
	   ,done: function(res){
	   	var html = '<div class="xx-bg-box video" data-id="'+res.id+'" class="vid'+res.id+'">'+
						'<video height="80" data-id="{$v.id}" class="vid{$v.id}">'+
							'<source src="'+res.data+'" type="video/'+res.type+'">'+
						'</video>'+
						'<i class="layui-icon display" title="移除视频" >&#xe640;</i>'+
			    	'</div>';
	   	$(".videobox").append(html);
	   }
	   ,error: function(){
	     //请求异常回调
	   }
	 });

});

// 返回
$(".back").on('click',function(){
	location.href = "{:url('vip/task/index')}";
})
layui.use('laydate', function(){
  var laydate = layui.laydate;
  //同时绑定多个
  lay('.test-item').each(function(){
    laydate.render({
      elem: this
      ,trigger: 'click',
    });
  });
  
})

layui.use('form', function(){
  var form = layui.form;
  //自定义验证规则
  form.verify({
    title: function(value){
      var typeid = $("select[name=typeid]").val()
      if(typeid == 2){
    	 var ytitle = $("input[name=ytitle]").val()
         if(!ytitle || ytitle.length<2){
        	 $("input[name=ytitle]").focus()
        	 return '请输入正确的任务的标题,保持在2个字符以上';
         }
      }else{
    	  var title = $("input[name=title]").val();
          if(!title || title.length<2){
         	 $("input[name=title]").focus()
         	 return '请输入正确的任务的标题,保持在2个字符以上';
          }
      }
    }
    ,pass: [/(.+){6,50}$/, '密码必须6到50位']
    ,indeximgfile:function(val){
    	return $('#indeximginput').attr('src')==''?'请上传首页列表展示图':'';
    }
    ,num:[/[0-9]+/,'此项必须是数字']
    ,time:function(value){
    	 var starttime = $("#starttime").val();
         var endtime   = $("#endtime").val();
         if(starttime && endtime && starttime>endtime){
        	 return '开始时间不能小于结束时间的';
         }
    },
    starttime:function(value){
    	 var starttime = $("#starttime").val();
         if(!starttime){
        	 return '请选择活动开始时间';
         }
    },
    endtime:function(value){
   	 var endtime = $("#endtime").val();
        if(!endtime){
       	 return '请选择活动截止时间';
        }
   },
   url:function(val){
	   var typeid = $("select[name=typeid]").val();
	   if(typeid==2){
		   var pattern = /^(http[s]?|www)/i;
		   if(!val || !pattern.test(val)){
			   return '请输入正确的连接地址,正确的格式例如：http://baidu.com或www.baidu.com';
		   }
	   }
   }
  });
  form.on('radio', function(data){
    console.log(data);
  });
  //事件监听
  form.on('select(typeid)', function(data){
  	  var id = $("select[name=typeid]").val();
	  if(id==2){
 		 $(".win,.phoneToolbar").hide();
 		 $(".ytitle,.yurl,.ybtn").show();
	  }else{
		 $(".win,.phoneToolbar").show();
		 $(".ytitle,.yurl,.ybtn").hide();
	  }
 
  })
  //监听提交
  form.on('submit(*)', function(data){
	var title = $("input[name=tilie]").val();
	var style = $(".edit-content").attr('style');
	var content = $(".w-e-text").html();
	$('input[name=styledetail]').val(style);
	$('textarea[name=content]').val(content);
	var formid = document.getElementById("addform");
	var sformData = new FormData(formid);

	$.ajax({
		type:"post",
		url:"{:url('vip/task/add')}",
		data:sformData,
		processData: false,  // 不处理数据
		contentType:false,
		success:function(s){
		if(s.status==1){
            layer.open({
                content: '恭喜您添加成功！',
                btn: ['确认'],
                yes: function(index, layero) {
                    window.location.href="{:url('vip/task/index')}";
                }
            });
		}else{
			layer.msg('添加失败', {
			    icon: 2,
			});
		}
		return false;
	}})
    return false;
  });
});
</script>
</body>
</html>