#override("css")
#end
#override("body")


<div class="ibox float-e-margins">
    <div class="ibox-content">
    	<div class="col-sm-12">
	        <form id="validForm" class="form-horizontal m-t" novalidate="novalidate">
	        	<input id="resource" name="roles" type="hidden" value="$!userRoles"/>
	        	<input type="hidden" id="user.id" name="id" value="$!user.id"/>
	            <div class="form-group">
	                <label class="col-sm-2 control-label">短信内容：</label>
	                <div class="col-sm-5">
	                	<textarea class="form-control" rows="4" cols="12" aria-required="true" name="content" required="true" placeholder="请输入短信内容"></textarea>
	                </div>
	            </div>
	            <div class="form-group">
	                <label class="col-sm-2 control-label">标签：</label><button type="button" onclick="addSeleTags()" class="glyphicon glyphicon-plus btn glyphicon btn-primary btn-sm"></button>
	                <div class="col-sm-5" id="seleTagArrs">
					</div>
	            </div>

	            <div class="form-group">
	            	<label class="col-sm-2 control-label">图文指导：</label>
	                <div class="col-sm-5">
	                    <label class="checkbox-inline i-checks">
							<div class="icheckbox_square-green" style="position: relative;">
								<input type="checkbox" class="i-checks" id="multChe" style="position: absolute; opacity: 0;" >
							</div>
						</label>
	                </div>
	                <div class="form-group">
	                	<label class="col-sm-2 control-label"></label>
	                	<div class="col-sm-5">
							<input type="hidden" class="i-checks" value="$!verId" name="templateVersionId">
	                	</div>
	                </div>
	                <div class="form-group hidden" id="imageTitle">
		            	<label class="col-sm-2 control-label">标题：</label>
		                <div class="col-sm-5">
		                     <input type="text" name="richTitle" class="form-control" placeholder="请输入图文指导标题">
		                </div>
	            	</div>
	            	<div class="form-group hidden" id="imageContext">
		            	<label class="col-sm-2 control-label">正文：</label>
		                <div class="col-sm-5">
		                    <script id="editor" name="richText" type="text/plain"></script>
		                </div>
	            	</div>
	            <div class="hr-line-dashed"></div>
	            <div class="form-group">
	                <div class="col-sm-7 col-sm-offset-3 pull-right">
	                    <button type="button" class="btn btn-primary" onclick="save();"><i class="fa fa-check"></i>&nbsp;提交</button>
	                    <button type="button" class="btn btn-white" onclick="parent.closeAll();"><i class="fa fa-close"></i>&nbsp;取消</button>
	                </div>
	            </div>
	        </form>
		</div>
    </div>
</div>
#end 
#extends("/common/base_list.html")
<script type="text/javascript" charset="utf-8" src="${ctx}/static/js/plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/static/js/plugins/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/static/js/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
	var seleTagNum = 1;
	var optionTagHtml = "";

	function addSeleTags(){

		var seleHtml = "<select id='select"+seleTagNum+"' style='width: 100%;height: 36px;'  multiple data-selectator-keep-open='true'>"+optionTagHtml+"</select>";
		
		$("#seleTagArrs").append(seleHtml);

		$('#select'+seleTagNum).selectator({
			prefix : 'selectator_', // CSS class prefix
			height : '36', // auto or element
			useDimmer : false, // dims the screen when option list is visible
			useSearch : true, // if false, the search boxes are removed and 
			keepOpen : true, // if true, then the dropdown will not close when 
			showAllOptionsOnFocus : true, // shows all options if input box is empty
			selectFirstOptionOnSearch : true, // selects the topmost option on every search
			searchCallback : function(value) {
			}, 
			labels : {
				search : 'Search...' // Placeholder text in search box in single select box
			}
		});
		//ID累计
		seleTagNum++;
	}

	function initTagsData(){
		$.get("${ctx}/contentTags/seleList", "json", function(data) {
			if (data.success) {
				data.data.forEach(function(d, i) {
					optionTagHtml += '<option value="'+d.id+'">' + d.tagName + '</option>';
				});
				//默认一个选择标签
				addSeleTags();
			}
		});
	}

	$('#multChe').on('ifClicked', function (event) {
		$("#imageTitle").toggleClass("hidden");
		$("#imageContext").toggleClass("hidden");
		$("#imageTitle").toggleClass("show");
		$("#imageContext").toggleClass("show");
		//初始化富文本
		var ue = UE.getEditor('editor',{initialFrameHeight:200,initialFrameWidth:"100%" });
	});

	$(function(){
		
		setTimeout(function(){
			initTagsData();
		},500);
		
	});
	
	function save(){
		var content = UE.getEditor('editor').getContent();
		if($('#validForm').valid()){
			var data = $('#validForm').serialize();
			for(var i=1;i<seleTagNum;i++){
				data+="&contentTagIds="+$("#select"+i).val();
			}
			if($("#multChe:checked").val() == "on"){
				data+="&isRich=1";
			}else{
				data+="&isRich=0";
			}

			
			alert(data);
			//ajaxPost(APP.PATH + "/contentMessageTemplate/create",data);
			//parent.reloadGrid('dataTable');
		}
	}
</script>