<!DOCTYPE html>
<!--[if IE 8]>
  <html lang="en" class="ie8 no-js">
  <![endif]-->
<!--[if IE 9]>
    <html lang="en" class="ie9 no-js">
    <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
<base href="#springUrl('/assets/adminlte/')" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>工作台</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet"
	href="plugins/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet"
	href="plugins/ionicons/css/ionicons.min.css">
	
<!-- DataTables -->
<link rel="stylesheet"
	href="plugins/datatables/dataTables.bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- Date Picker -->
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<!-- Daterange picker -->
<link rel="stylesheet"
	href="plugins/daterangepicker/daterangepicker-bs3.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet"
	href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<!--validate css-->
<link rel="stylesheet" href="plugins/jquery-validation/css/validate.css">
<!--fileinput css-->
<link rel="stylesheet"
	href="plugins/ztree/css/metroStyle/metroStyle.css" type="text/css" />
<link rel="stylesheet"
	href="plugins/bootstrap-fileinput/bootstrap-fileinput.css">
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
	href="plugins/daterangepicker/daterangepicker-bs3.css">
<link rel="stylesheet"
	href="plugins/timepicker/bootstrap-timepicker.css">
<link rel="stylesheet"
	href="plugins/timepicker/bootstrap-timepicker.min.css">
<!-- <link href="plugins/bootstrap-dateTimePicker/css/bootstrap.min.css" rel="stylesheet" media="screen"> -->
<link href="plugins/bootstrap-dateTimePicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
<style type="text/css"></style>

<style>
.datepicker.dropdown-menu {
	z-index: 100000 !important
}
</style>
</head>
<!-- END HEAD -->

<body class="hold-transition skin-blue sidebar-mini">

	<div id="hiddenDiv" style="display:none">$!{imageText.content}</div>

	<div class="wrapper">
		<div id="treeSelect"></div>
		<div class="content-wrapper" style="margin-left: 0;">
			<section class="content-header">
				<h1>
					二维码管理 <small>二维码设置</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="#"> <i class="fa fa-dashboard"></i>首页
					</a></li>
					<li><a class="active">二维码管理</a></li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-xs-12">
						<div class="box box-primary">
							<form role="form" id="qrcodeForm"> 
								<div class="box-body">
									<input type="hidden" id="updateId">
									#if("$!{qrcode.id}"=='')
									<div class="form-group form-md-line-input" id="andview">
									<label>有效性</label> 
										<div class="radio" id="optionsRadios">
<!-- 										 <label> <input -->
<!-- 												type="radio" name="sendType" id="sendTypeText" -->
<!-- 												value="text" checked>文本 -->
<!-- 											</label> <label> <input type="radio" name="sendType" -->
<!-- 												id="sendTypeImage" value="image" >图片 -->
<!-- 											</label> --> 
											<label> <input type="radio" name="actionName"
												id="qrscene" checked value="QR_SCENE" >临时
											</label><label> <input type="radio" name="actionName"
												id="qrlimitscene" value="QR_LIMIT_SCENE" >永久
											</label>
										</div>
										 <div class="row">
										<div class="col-xs-2" style="display: inline;" id="contentqrscene">
											 <div class="input-group date form_datetime" data-date="" data-date-format="yyyy-mm-dd hh:ii" data-link-field="expireSeconds">
							                    <input class="form-control" size="16" type="text" value="" readonly placeholder="有效时间">
							                    <!-- <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> -->
												<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
												<input type="hidden" id="expireSeconds" value="" />
						               		 </div>
										</div>
										</div>
									</div>
									#end
									<div class="form-group form-md-line-input">
									<label>消息回复类型</label>
										<div class="radio" id="optionsRadios">
										
											<label> <input
												type="radio" name="replyType" id="replyTypeText"
												value="text" checked>文本
											</label> <label> <input type="radio" name="replyType"
												id="replyTypenews" value="news" >图文
											</label>
										</div> 
									</div>
									<div class="form-group form-md-line-input" id="contentText">
										<label for="content_source">文本内容</label>
										<br/>
										<textarea name="content_source" id="content_source"  maxlength="50" rows="5" cols="100">#if($reply.replyType=="text")$!{reply.content_source}#end</textarea>
									</div>
									
									<div class="form-group form-md-line-input" id="contentnews" style="display:none">
										<label for="content_source">图文选择</label>
										<a id="newseach" href="javascript:void(0)"
										class="btn btn-primary">选择图文 </a>
										<input type="hidden" value="" id="imgtext">
										<br/> 
									</div>
								</div>
								<div class="box-footer">
									<input class="btn btn-primary" id="save" value="保存"
										type="submit"> <a href="#springUrl('/a/wx/qrcode/list')"
										class="btn btn-default">取消</a>
								</div>
							</form>
						</div>
					</div>
				</div>
			</section>
		</div>
		<div class="control-sidebar-bg"></div>
	</div>
	<!-- ./wrapper -->
	<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<!-- Bootstrap 3.3.5 -->
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<!-- SlimScroll -->
	<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<!-- FastClick -->
	<script src="plugins/fastclick/fastclick.min.js"></script>
	<!--fileinput js-->
	<script src="plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="plugins/datatables/extensions/i18n/lanauage_ch.js"></script>
	<script src="plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
	<!-- AdminLTE App -->
	<script src="dist/js/app.min.js"></script>
	<script src="plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"
		type="text/javascript"></script>
	<script src="plugins/security/sha256.js" type="text/javascript"></script>
	<script src="plugins/ztree/js/jquery.ztree.all.min.js"
		type="text/javascript"></script>
	<script src="plugins/jquery-validation/js/jquery.validate.min.js"></script>
	<script src="js/jquery.form.min.js"></script>
	<!-- Uedit Start -->
	<script type="text/javascript" charset="utf-8"
		src="plugins/ueditor-min-1.4.3/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="plugins/ueditor-min-1.4.3/ueditor.all.js"></script>
	<!-- Uedit End -->
	<script type="text/javascript" charset="utf-8"
		src="plugins/ueditor-min-1.4.3/lang/zh-cn/zh-cn.js"></script>
	<script src="common/js/cfapp.js"></script> 
	<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
	<!-- <script src="plugins/datepicker/bootstrap-datepicker.js"></script>
	<script src="plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script> -->
	<script type="text/javascript" src="plugins/bootstrap-dateTimePicker/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="plugins/bootstrap-dateTimePicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
	<script type="text/javascript" src="plugins/bootstrap-dateTimePicker/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script type="text/javascript" src="common/js/seachImageText.js"></script>
	<!-- END PAGE LEVEL PLUGINS -->

	<script>
        var csrfheader = {name:'_csrf_header',value:'${_csrf.headerName}'};
        var csrftoken  = {name:'_csrf',value:'${_csrf.token}'};
	</script>
	<script>
	 var sSource = "#springUrl('/a/imagetext/seachImageText')";//根据选中的ID获取图文内容
	var selectedActivity="";   //带点的选中值
	 var recordingAllByPage="";
	var selectImageText="";  //不带点的选中值
	if("$!{qrcode.id}"!=null && "$!{qrcode.id}"!=""){ 
		//加载修改页
		$("#updateId").val("${qrcode.id}");
		$("#andview").hide();
		if("$!{qrcode.esEndtime}"){
			$("#expireSeconds").val("$!{qrcode.esEndtime}");
		}
		if("${qrcode.replyType}"=='news'){ 
			//加载图文缩略图
			selectImageText="$!{qrcode.contentSource}";
			var arry=selectImageText.split(',');
			for(i=0;i<arry.length-1;i++){
				selectedActivity+="."+arry[i]+",";
			} 
			$("#contentnews").show();
			$("#contentText").hide();
			$.ajax({
                "type": "GET",
                "contentType": "application/json",
                "url": sSource,
                "dataType": "json",
                "data": {ids:selectImageText}, //以json格式传递
                "success":function(data){
                	$(".box-body").after(setImageTextList(data));//填充图文信息内容
                }
            });
		}else{
			$("#content_source").val("$!{qrcode.contentSource}".replace(/<br\/>/g,"\r\n"));
		}
		$("input[name='replyType'][value='$!{qrcode.replyType}']").prop("checked",true);
	}
	 Cfapp.init();
	 $('#newseach').on('click',function() {
	              Cfapp.modal({
	                title: '选择图文',
	                url: "#springUrl('/a/imagetext/fetchData')",
	                success: function() {
	                	$("#messageLabel").remove();  
	                	$("#contentnews").next().remove(); 
	                	if(selectedActivity.indexOf(".")>=0){
	                		selectImageText=selectedActivity.replace(/\./g,"");  
	                	}else{ 
	                		selectImageText="";
	                	}
	                	if(selectImageText!=null && selectImageText!=""){
	                		$.ajax({
	                            "type": "GET",
	                            "contentType": "application/json",
	                            "url": sSource,
	                            "dataType": "json",
	                            "data": {ids:selectImageText}, //以json格式传递
	                            "success":function(data){
	                            		$(".box-body").after(setImageTextList(data));//填充图文信息内容
	                            } 
	                        });
	                	}
	                },
	                cancel: function() {
	                	selectedActivity="";
 	                	recordingAllByPage="";
	                },close:function(){
	                	selectedActivity="";
 	                	recordingAllByPage="";
	                }
	              })
	            });
		function formatDates(now) {
			var now = new Date(now);
			var year = now.getFullYear();
			var month = now.getMonth() + 1;
			var date = now.getDate();
			var hour = now.getHours();
			var minute = now.getMinutes();
			var second = now.getSeconds();
			return year + "-" + month + "-" + date + "   " + hour + ":"
					+ minute + ":" + second;
		}
		//消息类型改变事件
		$("input[name='replyType']").change(function() { 
			if($(this).val()=="news"){
				$("#contentnews").show();
				$("#contentText").hide(); 
				$("#messageLabel").show();
			}else{
				$("#contentText").show();
				$("#messageLabel").hide();
				$("#contentnews").hide();
			}
		}); 
		//二维码有效性改变事件
		$("input[name='actionName']").change(function() { 
			if($(this).val()=="QR_SCENE"){
				$("#contentqrscene").show();
			}else{
				$("#contentqrscene").hide();
				 $("#expireSeconds").val(null);
			}
		}); 
		//30天时间差计算方法
        function fun_submit(){
			var date1 = new Date();
			var date2 = new Date(date1);
			date2.setDate(date1.getDate()+30);
			var times = date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDate();
			return times;
		}  
		$().ready(function() {
			//form提交
            $("#qrcodeForm").validate({
              submitHandler: function(form) {
            	 var content="";
            	 var actionName="";
            	 var expireSeconds="";
            	 var endtime="";
            	 if("$!{qrcode.id}"!=null && "$!{qrcode.id}"!=""){
            		 //修改
            	 }else{
	            	  if($("input[name='actionName']:checked").val()=="QR_SCENE"){
	            		 if($("#expireSeconds").val()){
	            			 //有效时间的二维码
	            			 actionName="QR_SCENE";
	            			 expireSeconds=$("#expireSeconds").val();
	            		 }else{
	            			 var HTML="<label id='content-error' class='error' for='content'>请输入有效时间</label>"; 
	                 		$("#contentqrscene").after(HTML);
	                 		return false;
	            		 }
	            	 }else if($("input[name='actionName']:checked").val()=="QR_LIMIT_SCENE"){
	            		 //永久二维码
	            		 actionName="QR_LIMIT_SCENE";
	            		 expireSeconds="";
	            		 $("#expireSeconds").val("");
	            	 }
	            	 if(expireSeconds!="" && expireSeconds!=null){
	            		 var time=Math.round((new Date(expireSeconds).getTime()-new Date().getTime())/1000);
	            		 expireSeconds=time;
	            	 }
            	 }
            	 if($("#expireSeconds").val()!=null && $("#expireSeconds").val()!=""){
            		 endtime=$("#expireSeconds").val(); 
            	 } 
                if($("input[name='replyType']:checked").val()=="text"){
                	console.log($("#expireSeconds").val()); 
                	if($("#content_source").val()){
                		if($("input[name='actionName']:checked").val()=="QR_LIMIT_SCENE"){
                			content={
    		                		id:$("#updateId").val(),
    		                		"actionName":actionName,
    		                		"expireSeconds":expireSeconds,
    		            			contentSource:$("#content_source").val(),
    		            			sendType:$("input[name='actionName']:checked").val(),
    		            			replyType:$("input[name='replyType']:checked").val()
    		            		};
                		}else{
		                	content={
		                		id:$("#updateId").val(),
		                		"actionName":actionName,
		                		"expireSeconds":expireSeconds,
		                		esEndtime:$("#expireSeconds").val(),
		            			contentSource:$("#content_source").val(),
		            			sendType:$("input[name='actionName']:checked").val(),
		            			replyType:$("input[name='replyType']:checked").val()
		            		};
                		}
                	}else{
                		 var HTML="<label id='content-error' class='error' for='content'>请输入文本内容</label>"; 
                		$("#content_source").after(HTML);
                		return false;
                	}
            	}else if($("input[name='replyType']:checked").val()=="news"){
            		if(selectImageText!=null && selectImageText!=""){
                    	$("#imgtext").val(selectImageText);
                    	if($("input[name='actionName']:checked").val()=="QR_LIMIT_SCENE"){
                    		content={
                    				id:$("#updateId").val(),
                    				"actionName":actionName,
                            		"expireSeconds":expireSeconds,
                        			contentSource:$("#imgtext").val(),
                        			sendType:$("input[name='sendType']:checked").val(),
                        			replyType:$("input[name='replyType']:checked").val()
                        			};
                    	}else{
	                		content={
	                				id:$("#updateId").val(),
	                				"actionName":actionName,
	                        		"expireSeconds":expireSeconds,
	                        		esEndtime:$("#expireSeconds").val(),
	                    			contentSource:$("#imgtext").val(),
	                    			sendType:$("input[name='sendType']:checked").val(),
	                    			replyType:$("input[name='replyType']:checked").val()
	                    			};
                    	}
                		$("#content_source").val("");  //清空文本消息
            		}else{
            			var HTML="<label id='content-error' class='error' for='content'>请选择图文</label>";
                		$("#contentnews").after(HTML);
                		return
            		}
            	};
            	if(content!=null){

                    content._csrf_header=csrfheader.value;
                    content._csrf=csrftoken.value;

            		$.ajax({
                        type:"POST",
                        url:"#springUrl('/a/wx/qrcode/addqrcode')",
                        data:content,
                        datatype: "json",
                        //在请求之前调用的函数
                        beforeSend:function(){
                       	 
                        },success:function(data){
                       	 if(data.errorNo==0){
                       		 Cfapp.confirm({
                       			 message: "添加成功",
                       			 btnoktext:"继续添加",
                       			 btncanceltext:"关闭",
                       			 success:function(){
                       				 location.reload();
                       			 },
                       			cancel:function(){
                       				location.href = "#springUrl('/a/wx/qrcode/list')";
                       			 }
                       		   }) 
                       	 }else if(data.errorNo==2){
                       		 Cfapp.alert({
      	                          message: "修改成功",
      	                          btntext: "确定",
      	                          success: function (data) {
      	                              location.href = "#springUrl('/a/wx/qrcode/list')";
      	                          }
      	                      }) 
                       	 }else if(data.errorNo==3){
                       		 Cfapp.alert({
      	                          message: "类型已存在",
      	                          btntext: "确定",
      	                          success: function () {
      	                              
      	                          }
      	                      })
                       	 }
                        },error: function(){
                       	 Cfapp.alert({
   	                          message: "编辑失败",
   	                          btntext: "确定",
   	                          success: function () {
   	                              location.href = "#springUrl('/a/wx/qrcode/list')";
   	                          }
   	                      })
                        }         
                     });
            	}
              }
            });
          });
		//时间选择插件
		 $('.form_datetime').datetimepicker({
		        language:  'zh-CN',
		        weekStart: 1,
		        todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2, 
				forceParse: 0, 
		        showMeridian: 1,
		        startDate:new Date(),
  				endDate:fun_submit()
		    });
		</script>
</body>
<!-- END BODY -->
</html>