<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<script th:include="sys/common/metaCSS" th:remove="tag"></script> 
<script th:include="sys/common/metaJS" th:remove="tag"></script>
<link th:href="@{/static/js/select/fselect.css}" rel="stylesheet" type="text/css">
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/js/city/city.json.js}"></script>
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/js/city/citySetMe_V.js}"></script>
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/js/city/Popt.js}"></script>
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/sys/js/My97DatePicker/WdatePicker.js}"></script>
<script src="sys/js/select/fSelect.js" th:src="@{/static/js/select/fselect.js}"></script>
</head>
 <style type="text/css">
   body{min-width:180px;}
       .select1{
   		    width:100%;
		    height: 32px;
		    line-height: 32px;
		    border-top: solid 1px #a7b5bc;
		    border-left: solid 1px #a7b5bc;
		    border-right: solid 1px #ced9df;
		    border-bottom: solid 1px #ced9df;
		    opacity:1;
	        margin-bottom: 10px;
    	}
    	.btn{
    	  width: 100px;
    	}
     label.control-label-error {color: Red;}	
     
._citys {     background-color: whitesmoke;width: 450px; display: inline-block; border: 2px solid #eee; padding: 5px; position: relative; }
._citys span { color: #05920a; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 10px; top: 10px; border: 1px solid #05920a; cursor: pointer; }
._citys0 { width: 95%; height: 34px; line-height: 34px; display: inline-block; border-bottom: 2px solid #05920a; padding: 0px 5px; font-size:14px; font-weight:bold; margin-left:6px; }
._citys0 li { display: inline-block; line-height: 34px; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }
._citys1 { width: 100%; display: inline-block; padding: 10px 0; }
._citys1 a { width: 83px; height: 35px; display: inline-block; background-color: #f5f5f5; color: #666; margin-left: 6px; margin-top: 3px; line-height: 35px; text-align: center; cursor: pointer; font-size: 12px; border-radius: 5px; overflow: hidden; }
._citys1 a:hover { color: #fff; background-color: #05920a; }
.AreaS { background-color: #05920a !important; color: #fff !important; }
#school{
	margin-left: 110px;
	padding-bottom: 10px;
}  
#school span{
  	min-width: 25%;
    float: left;
    margin-bottom: 10px;
}
.joinseachform li{
	width: 50%;
	margin-right: 0px;
	padding-right: 0px;
}

.schoolseachform li{
	width: 50%;
	margin-right: 0px;
	padding-right: 0px;
}    

dtext{
	color: red;
	cursor: pointer;
}
.forminfo li label{
	text-align: right;
	padding-right: 10px
}
#posterimgs img{
	width: 120px;
  
    margin: 10px;
}

.imgred{
  border: 1px solid red;
}

.imgfff{
  border: 1px solid #fff;
}
  
</style>
<body>
<div class="formbody">
		<ul class="forminfo">
			<li>
				<label>活动名称：	<b>*</b></label>
				<input type="text" id="name" class="dfinput fl" name="name" th:value="${activity.name}" />
			</li>
			<li>
				<label>机构名称：	<b>*</b></label>
				<div class="vocation " style="margin-right: 5px; width: 300px" >
					<select class="select2 mselect" name="jname"  multiple="multiple">
						<optgroup label="机构">
							<option th:value="${item.id}"
									th:each="item:${posterJoins}" th:text="${item.name}">学前</option>
						</optgroup>
					</select>

				</div>
			</li>
			
			<li style="margin-bottom:3px">
				<label>从以下模板中选择(单选)：<b></b></label>

				<div id="posterimgs">
					<img class="imgfff" th:each="item:${templates}" th:data-id="${item.id}" th:src="${imgUrl+item.backImg}">
				</div>
			</li>
			
			<li style="padding-top: 20px">
				<label>&nbsp;</label>
				<button type="submit" onclick="save();" class="btn">提交</button>
				<button type="button" class="btn" onclick="closeWin();">取消</button>
			</li>
			
		</ul>
			
</div>

</body>
<script type="text/javascript">


$(function (){
     $('#posterimgs img').click(function() {
    	 $('#posterimgs img').removeClass('imgred');
    	 $('#posterimgs img').addClass('imgfff');
    	 $(this).removeClass('imgfff');
         $(this).addClass('imgred');
     });

	$('.mselect').fSelect();
})

function save(){
	
	if($("#name").val()==''){
		parent.layer.msg("活动名称不能为空",{icon:11});
		return
	}
	var templateId=$(".imgred").data("id");
	if(templateId=='' || templateId==undefined || templateId=='undefined'){
		parent.layer.msg("活动模板不能为空",{icon:11});
		return
	}
	var ids = "";
	$('.selected').each(function(i,n){
		ids=ids+$(n).data("value")+",";
	});
	parent.layer.confirm("确定保存活动信息?", {
		icon: 4, btn: ['确定','关闭'],offset: '100px' //按钮
	}, function(){
		var url="[[${sysUrl}]]/sys/poster/activityJoin/save";
		var params ={
			'ids' : ids,
            'aid' : '[[${activity.id}]]',
            'templateId' : templateId,
        };
		$.post(url,params,function(data){
			if(data.meta.success){
				parent.layer.msg("保存成功",{icon:1});
				parent.location.reload();
				parent.layer.close(parent.layer.getFrameIndex(window.name));
			}else{
				parent.layer.msg(data.meta.message,{icon:11});
			}
		});
	});
}

function closeWin(){
	parent.location.reload();
	parent.layer.close(parent.layer.getFrameIndex(window.name));
}

</script>
</html>