{extend name="base" /}
{block name="css"}
<link href="__ADMIN__/js/ztree/css/zTreeStyle/zTreeStyle.css?v={$v}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/plugins/webuploader/webuploader.css?v={$v}" />
{/block}
{block name="js"}
<script src="__ADMIN__/js/ztree/jquery.ztree.all-3.5.js?v={$v}"></script>
<script src="__STATIC__/plugins/webuploader/webuploader.js?v={$v}" type="text/javascript" ></script>
<script src="__STATIC__/plugins//kindeditor/kindeditor.js?v={$v}" type="text/javascript" ></script>
<script src="__ADMIN__/articles/articles.js?v={$v}" type="text/javascript"></script>
<script>
$(function () {
	initCombo(0);
	{if condition="$object['articleId'] !=0 "}
	   WST.setValues({$object});
	{/if}
	$('#articleForm').validator({
	    fields: {
	    	articleTitle: {
	    		tip: "请输入文章名称",
	    		rule: '文章名称:required;length[~50];'
	    	},
	    	catIds: {
		        tip: "请选择文章分类",
		    	rule: "文章分类:required;",
		    	target:"#catIdt"
		    },
	    	articleKey: {
	    		tip: "请输入关键字",
	    		rule: '关键字:required;length[~100];'
	    	},
        layoutType: {
          tip: "请选择移动端布局样式",
          rule: '关键字:required;length[~100];'
        },
		    articleContent: {
	    		tip: "请输入文章内容",
	    		rule: '文章内容:required;'
	    	}
	    },
	    valid: function(form){
	    	var articleId = $('#articleId').val();
	    	toEdits(articleId);
	    }
	})
});
</script>
{/block}
{block name="main"}
<input type='hidden' id='articleId' value='{$object["articleId"]}'/>
<form id='articleForm' autocomplete="off">
<table class='wst-form wst-box-top '>
  <tr>
     <th width='150'>文章标题<font color='red'>*</font>：</th>
     <td><input type="text" id='articleTitle' name='articleTitle' maxLength='50' style='width:300px;' class='ipt'/></td>
  </tr>
   <tr>
     <th width='150' align='right'>分类类型<font color='red'>*</font>：</th>
     <td>
       <input id="catSel" type="text" readonly onclick="showMenu();" style='width:250px;' value="{$object.catName}"/>
     <div id="ztreeMenuContent" class="ztreeMenuContent">
        <ul id="dropDownTree" class="ztree" style="margin-top:0; width:250px; height: 300px;"></ul>
     </div>
     <input id="catId"  class="text ipt" autocomplete="off" type="hidden" value=""/>
     </td>
   </tr>
   <tr>
      <th width='150'>是否显示<font color='red'>*</font>：</th>
      <td height='24' class="layui-form">
         <input type="checkbox" id="isShow" {if $object['isShow']==1}checked{/if} name="isShow" value="1" class="ipt" lay-skin="switch" lay-filter="isShow" lay-text="显示|隐藏">
      </td>
   </tr>
  <tr>
     <th width='150'>关键字<font color='red'>*</font>：</th>
     <td><input type="text" id='articleKey' name='articleKey' maxLength='120' style='width:600px;' class='ipt'/></td>
  </tr>
   <tr >
      <th>移动端布局样式预览图：</th>
      <td  class="typeState" style="padding-top: 10px;">
          <li>
             <input type='radio' name='TypeStatus' class='ipt' value='1'/>
             <label>
               <img src="__ADMIN__/img/news_1.png" style="width:150px;height:80px;">
             </label>
          </li>
          <li>
            <input type='radio' name='TypeStatus' class='ipt' value='2' />
             <label>
                <img src="__ADMIN__/img/news_2.png" style="width:150px;height:80px;">
             </label>
          </li>
          <li>
             <input type='radio' name='TypeStatus' class='ipt' value='3' />
             <label>
                <img src="__ADMIN__/img/news_3.png" style="width:150px;height:80px;">
             </label>
          </li>
      </td>
   </tr>
  <tr>
     <th>封面图片：</th>
     <td>
     <div id='coverImgPicker'>请上传封面图片</div><span id='coverImgMsg'></span>图片大小:230x195(px)，格式为 gif, jpg, jpeg, png
     <input type="hidden" id='coverImg' name="coverImg" class="ipt"/>
     </td>
  </tr>
   <tr>
    	<th>预览图：</th>
     	<td><div style="min-height:70px;" id="preview">{if ($object['articleId']!=0 && $object['coverImg'])}<img src="__IMGURL__/{$object['coverImg']}" height="152" />{/if}</div></td>
   </tr>
   <tr>
       <th width='150'>文章内容<font color='red'>*</font>：</th>
       <td>
       	<textarea id='articleContent' name='articleContent' class="form-control ipt" style='width:80%;height:400px'></textarea>
       </td>
    </tr>  
     <tr>
       <td colspan='2' align='center'>
       	<button type="submit" class="btn btn-primary btn-mright" ><i class="fa fa-check"></i>保&nbsp;存</button> 
        <button type="button" class="btn" onclick="javascript:history.go(-1)"><i class="fa fa-angle-double-left"></i>返&nbsp;回</button>
       </td>
     </tr>
</table>
 </form>
  <script>
$(function(){
	//文件上传
	WST.upload({
  	  pick:'#coverImgPicker',
  	  formData: {dir:'articles',isThumb:1},
  	  accept: {extensions: 'gif,jpg,jpeg,png',mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif'},
  	  callback:function(f){
  		  var json = WST.toAdminJson(f);
  		  if(json.status==1){
  			$('#coverImgMsg').empty().hide();
        	$('#preview').html('<img src="'+WST.conf.IMGURL+'/'+json.savePath+json.thumb+'" height="152" />');
        	$('#coverImg').val(json.savePath+json.name);
  		  }
	  },
	  progress:function(rate){
	      $('#coverImgMsg').show().html('已上传'+rate+"%");
	  }
    });
  //编辑器
    KindEditor.ready(function(K) {
		editor1 = K.create('textarea[name="articleContent"]', {
			height:'350px',
      uploadJson : WST.conf.ROOT+'/admin/articles/editorUpload',
			allowFileManager : false,
			allowImageUpload : true,
      allowMediaUpload : false,
			items:[
			        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
			        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
			        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
			        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
			        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
			        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|','image','media','table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
			        'anchor', 'link', 'unlink', '|', 'about'
			],
			afterBlur: function(){ this.sync(); }
		});
	});
});
</script>
{/block}