<!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">
<!-- 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-11">
						<div class="box box-primary">
							<form role="form" id="imageTextForm" enctype="multipart/form-data">
								<div class="box-body">
									<div class="form-group form-md-line-input">
										<input type="text" hidden="true" id="id" name="id"
											value="$!{activity.id}"> <label for="title">图文标题</label>
										<input type="text" class="form-control" id="title" name="title"
											maxlength="30" placeholder="请输入图文标题" required="required"
											value="$!{imageText.title}">
									</div>
									<div class="form-group form-md-line-input">
										<label for="author">作者</label> <input type="text"
											class="form-control" name="author" id="author"
											maxlength="10" placeholder="请输入作者名字" 
											value="$!{imageText.author}">
									</div>
									<div class="form-group form-md-line-input">
										<label for="readDetail">查看原文链接</label> <input type="text"
											class="form-control" name="readDetail" id="readDetail"
											maxlength="500" placeholder="请输入原文链接" 
											value="$!{imageText.readDetail}">
									</div>
									<div class="form-group form-md-line-input">
										<label for="description">描述</label>
										<br/>
										<textarea name="description" id="description"  maxlength="50" rows="5" cols="100">$!{imageText.description}</textarea>
									</div>
									
									<div class="form-group form-md-line-input" id="detail">
										<label>图文详情</label>
										<script id="ueditor" type="text/plain"></script>
									</div>
									<div class="form-group form-md-line-input" id="picImage">
										<div class="fileinput fileinput-new" data-provides="fileinput">
											<div class="fileinput-preview thumbnail"
												data-trigger="fileinput"
												style="width: 200px; height: 150px;"></div>
											<div>
												<span class="btn btn-default btn-file"> <span
													class="fileinput-new">图文图片</span> <span
													class="fileinput-exists">更换</span> <input type="file"
													name="picUrl" value="$!{imageText.picUrl}"></span> <a
													href="javascript:;" class="btn btn-danger fileinput-exists"
													data-dismiss="fileinput">移除</a>
											</div> 
										</div>
									</div>
<!-- 									<div class="form-group form-md-line-input">  -->
<!-- 									<label>是否将封面上传到微信<font style="color:#666;font-size:12px;">组合图文时，必须上传</font></label>  -->
<!-- 										<div class="radio" id="optionsRadios"> -->
<!-- 										#if("$!{imageText.isThumbMedia}"=='0') -->
<!-- 											<label> <input type="radio" name="isThumbMedia" -->
<!-- 												  value="0" checked>否 -->
<!-- 											</label> -->
<!-- 										<label> <input type="radio" name="isThumbMedia" -->
<!-- 												 value="1">是  -->
<!-- 											</label> -->
<!-- 										#end  -->
										
<!-- 										#if("$!{imageText.isThumbMedia}"=='1') -->
<!-- 										<label> <input type="radio" name="isThumbMedia" -->
<!-- 												  value="0" >否 -->
<!-- 											</label> -->
<!-- 										<label> <input type="radio" name="isThumbMedia" -->
<!-- 												 value="1" checked>是  -->
<!-- 											</label> -->
<!-- 										#end  -->
<!-- 										</div>  -->
<!-- 									</div> -->
								</div>
								<div class="box-footer"><a id="preview" href="javascript:void(0)"
										class="btn btn-primary">预 览 </a>
									<input class="btn btn-primary" id="save" value="保存"
										type="submit"> <a href="#springUrl('/a/imagetext/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/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/datepicker/bootstrap-datepicker.js"></script>
	<script src="plugins/datepicker/locales/bootstrap-datepicker.zh-CN.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 imgUrl = "$!{imageText.picUrl}";
          if (imgUrl != null&&imgUrl!="") {
            // 		$("div[data-trigger='fileinput']>img").attr("src","$!{activity.imgUrl}");
            var imgHtml = "<img src='" + imgUrl + "' />";
            $("div[data-trigger='fileinput']").append(imgHtml);
          };
          var ue = null;
          $().ready(function() {
            Cfapp.init();
			  toolbars: [[
				  'insertimage',
				  'insertvideo',
				  'redo', //重做
				  'bold', //加粗
				  'indent', //首行缩进
				  'italic', //斜体
				  'underline', //下划线
				  'strikethrough', //删除线
				  'subscript', //下标
				  'fontborder', //字符边框
				  'superscript', //上标
				  'formatmatch', //格式刷
				  'source', //源代码
				  'blockquote', //引用
				  'pasteplain', //纯文本粘贴模式
				  'selectall', //全选
				  'print', //打印
				  'preview', //预览
				  'horizontal', //分隔线
				  'removeformat', //清除格式
				  'time', //时间
				  'date', //日期
				  'unlink', //取消链接
				  'insertrow', //前插入行
				  'insertcol', //前插入列
				  'mergeright', //右合并单元格
				  'mergedown', //下合并单元格
				  'deleterow', //删除行
				  'deletecol', //删除列
				  'splittorows', //拆分成行
				  'splittocols', //拆分成列
				  'splittocells', //完全拆分单元格
				  'deletecaption', //删除表格标题
				  'inserttitle', //插入标题
				  'mergecells', //合并多个单元格
				  'deletetable', //删除表格
				  'cleardoc', //清空文档
				  'insertparagraphbeforetable', //"表格前插入行"
				  'insertcode', //代码语言
				  'fontfamily', //字体
				  'fontsize', //字号
				  'paragraph', //段落格式
				  'edittable', //表格属性
				  'edittd', //单元格属性
				  'link', //超链接
				  'emotion', //表情
				  'spechars', //特殊字符
				  'insertvideo', //视频

				  'justifyleft', //居左对齐
				  'justifyright', //居右对齐
				  'justifycenter', //居中对齐
				  'justifyjustify', //两端对齐
				  'forecolor', //字体颜色
				  'backcolor', //背景色
				  'insertorderedlist', //有序列表
				  'insertunorderedlist', //无序列表
				  'fullscreen', //全屏
				  'directionalityltr', //从左向右输入
				  'directionalityrtl', //从右向左输入
				  'rowspacingtop', //段前距
				  'rowspacingbottom', //段后距
				  'pagebreak', //分页
				  'insertframe', //插入Iframe
				  'imagenone', //默认
				  'imageleft', //左浮动
				  'imageright', //右浮动
				  'attachment', //附件
				  'imagecenter', //居中
				  'wordimage', //图片转存
				  'lineheight', //行间距
				  'edittip ', //编辑提示
				  'customstyle', //自定义标题
				  'autotypeset', //自动排版
				  'touppercase', //字母大写
				  'tolowercase', //字母小写

				  'inserttable', //插入表格
				  'drafts', // 从草稿箱加载
				  'charts', // 图表
				  ]]
			  });
            //数据 
            ue.addListener("ready", function() {

            	var hiddenHtml = $("#hiddenDiv").html();
            	ue.setContent(hiddenHtml);
            })

            jQuery.validator.addMethod("validateImg",
            function(value, element) {
              var length = value.length;
              return this.optional(element) || (length > 0 && value != null);
            },
            "请选择图片！");
			 jQuery.validator.addMethod("validateContent", function(value, element) {
				var length = value.length;
				 return this.optional(element) || (length > 0 && value != null);
					 },"请选择图片！");

            $("#imageTextForm").validate({
              rules: {
                title: {
                  required: true,
                  htmlescape: true
                },
                content: {
                  validateImg: true
                },
               description:"required"
              },
              messages: {
                title: {
                  required: "请输入图文标题",
                  htmlescape: "请您不要输入特殊字符!"
                },
                content: {
                  required: "请输入图文内容"
                },
               description:"请输入描述"
              },
              submitHandler: function(form) {
                if(ue.getContent()==""||ue.getContent()==null){
            		var HTML="<label id='content-error' class='error' for='content'>请输入详情内容</label>";
            		$("#detail").append(HTML);
            		return
            	};
            	  if($(".fileinput").find("img").length==0){
            		  var HTML="<label id='picImage-error' class='error' for='picImage'>请选择一张图片</label>";
          			  $("#picImage").append(HTML);
            		return
            	}  
                var options = {
                  url: "#springUrl('/a/imagetext/addFileUpload')",
                  type: "POST",
                  dateType: "json",
                  data: {
                	id:"$!{imageText.id}",
                    title: $('#title').val(),
                    picUrl: $('#picUrl').val(),
                    author:$('#author').val(),
                    description:$("#description").val(),
                    readDetail:$("#readDetail").val(),
                    content:ue.getContent(),
                      "_csrf_header":csrfheader.value,"_csrf":csrftoken.value
                   /*  isThumbMedia:$("input[name='isThumbMedia']:checked").val() */
                    /* imgUrl: $('#imgUrl').val(),  */
                  },
                  success: function(data) {
                    if (data.errorNo == 0) {
                      Cfapp.confirm({
                        message: "保存图文成功！",
                        btnoktext: "继续添加",
                        btncanceltext: "关闭",
                        success: function() {
                          location.href ="#springUrl('/a/imagetext/imageTextForm')" ;
                        },
                        cancel: function() {
                          location.href = "#springUrl('/a/imagetext/list')";
                        }
                      });
                    }else if(data.errorNo==2){
                    	Cfapp.alert({
                            message: "修改图文成功！",
                            success: function() {
                              location.href ="#springUrl('/a/imagetext/list')" ;
                            }
                          });
                    }else if(data.errorNo==3){
                    	Cfapp.alert({
                            message: "编辑图文失败,无法上传到微信官方",
                            success: function() {
                            }
                          });
                    }else {
                      Cfapp.alert({
                        message: "保存图文失败!",
                        success: function() {
                          $(".modal-backdrop").fadeOut();
                        }
                      });
                    }

                  }
                };
                $("#imageTextForm").ajaxSubmit(options);
              }
            });
            $("#preview").click(function(){
				var html = { 
					content:ue.getContent(),
					title:$('#title').val(),
					url: $('#readDetail').val(),
				} 
				localStorage.setItem("Ueditor",JSON.stringify(html));
				var host = "http://"+window.location.host;
				 var url=host+"/cfwechat/static/imagetext/previewImageText.html";                             //转向网页的地址;
				    var name="new";                            //网页名称，可为空;
				    var iWidth="320";                         //弹出窗口的宽度;
				    var iHeight="568";                         //弹出窗口的高度;
				    //获得窗口的垂直位置 
				    var iTop = (window.screen.availHeight-30-iHeight)/2;        
				    //获得窗口的水平位置
				    var iLeft = (window.screen.availWidth-10-iWidth)/2;           
				window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no');
        	  })
          });</script>
</body>
<!-- END BODY -->
</html>