#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">
				<div class="form-group">
					<label class="col-sm-2 control-label">版本库名称：</label>
					<div class="col-sm-9">
						<input type="text" name="vName" value="$!vName" disabled class="form-control">
						<input type="hidden" class="i-checks" value="$!verId" id="verId" name="templateVersionId">
						<input type="hidden" name="id" value="$!id"  class="form-control">
					</div>
				</div>

	            <div class="form-group">
	                <label class="col-sm-2 control-label">*短信内容：</label>
	                <div class="col-sm-9">
	                	<textarea class="form-control" rows="4" maxlength="128" cols="12" name="content" id="content" required placeholder="请输入短信内容">$!tempInfo.content</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-9" id="seleTagArrs">
					</div>
	            </div>

	            <div class="form-group">
	            	<label class="col-sm-2 control-label">图文指导：</label>
	                <div class="col-sm-9">
	                    <label class="checkbox-inline i-checks">
							<div class="icheckbox_square-green" style="position: relative;">
								<input type="checkbox" #if($!tempInfo.isRich==1)  checked="checked" #end class="i-checks" id="multChe" style="position: absolute; opacity: 0;" >
							</div>
						</label>
	                </div>
	                <div class="form-group hidden" id="imageTitle">
		            	<label class="col-sm-2 control-label">标题：</label>
		                <div class="col-sm-9">
		                     <input type="text" name="richTitle" id="richTitle" value="$!tempInfo.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-9">
		                    <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>
				</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 = "";
	var tagsData;

	function addSeleTags(seleIds){
		var seleHtml = "<select id='select"+seleTagNum+"' style='width: 100%;height: 36px;'  multiple data-selectator-keep-open='true'>";
        tagsData.forEach(function(d, i) {
            seleHtml += "<option";
            if(seleIds!=null) {
                for(t in seleIds){
                    if(seleIds[t]!=""){
                        if (d.id == seleIds[t]) {
                            seleHtml += ' selected ';
                        }
                    }
				}
            }
            seleHtml += " value='"+d.id+"'>" + d.tagName + "</option>";
        });
        seleHtml+="</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) {
                tagsData = data.data;
                initSeleTags();
			}
		});
	}

	$('#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 initSeleTags(){
        if("$!tags" != "" && "$!tags" != "[]"){
			#foreach($tg in $tags)
				//alert("${tg.tagsIds}".split(","));
				addSeleTags("${tg.tagsIds}".split(","));
			#end
        }else{
			//默认一个选择标签
            addSeleTags();
        }
	}


    $(function(){
        initTagsData();
		if("$!id"!=""&&"$!tempInfo.isRich"==1){
            $("#imageTitle").toggleClass("hidden");
            $("#imageContext").toggleClass("hidden");
            $("#imageTitle").toggleClass("show");
            $("#imageContext").toggleClass("show");
            var ue = UE.getEditor('editor',{initialFrameHeight:200,initialFrameWidth:"100%" });
            ue.ready(function(){
                //设置编辑器的内容
                ue.setContent('$!tempInfo.richText');
			});
		}
	});

	function save(){
		if($('#validForm').valid()){
            var data = $('#validForm').serialize();
            if($("#multChe:checked").val() == "on"){//图文指导
                data+="&isRich=1";
            }else{
                data+="&isRich=0";
            }
            for(var i=1;i<seleTagNum;i++){
                data+="&contentTagIds["+(i-1)+"]=,"+$("#select"+i).val()+",";
            }
			ajaxPost(APP.PATH + "/contentMessageTemplate/create",data,function (r) {
				msg(r.message);
				parent.showMessageList();//关闭弹窗
			});

//            $('#validForm')[0].reset();
//            UE.getEditor('editor').setContent("");
		}
	}
</script>