{js:kindeditor}
<div class="breadcrumbs" id="breadcrumbs">
	<ul class="breadcrumb">
		<li>
			<i class="home-icon fa fa-home"></i>
			<a href="#">工具</a>
		</li>
		<li>
			<a href="#">文章管理</a>
		</li>
		<li class="active">编辑文章</li>
	</ul>
</div>

<div class="content">
	<form action='{url:/tools/article_edit_act}' method='post' name='article'>
		<input type='hidden' name='id' value="" />
		<table class="table form-table">
			<colgroup>
				<col width="130px" />
				<col />
			</colgroup>
			<tr>
				<th>分类：</th>
				<td>
					<select class="form-control w-auto" name="category_id" pattern="required" alt="请选择分类值">
						<option value=''>选择文章分类</option>
						{foreach:items=Api::run('getArticleCategoryListAll')}
						<option value='{$item['id']}'>{echo:str_repeat('&nbsp;&nbsp;&nbsp;',substr_count($item['path'],',')-2)}{$item['name']}</option>
						{/foreach}
					</select>
					<a href="{url:/tools/article_cat_edit}">添加文章分类</a>
					<p class="help-block">*选择文章所属分类（必填）</p>
				</td>
			</tr>
			<tr>
				<th>标题：</th>
				<td><input type='text' name='title' class='form-control' value='' pattern='required' placeholder='标题不能为空' /></td>
			</tr>
			<tr>
				<th>是否发布：</th>
				<td>
					<label class='radio-inline'><input type='radio' name='visibility' value='1' checked=checked />是</label>
					<label class='radio-inline'><input type='radio' name='visibility' value='0' />否</label>
				</td>
			</tr>
			<tr>
				<th>首页推荐：</th>
				<td>
					<label class='radio-inline'><input type='radio' name='top' value='1' checked=checked />是</label>
					<label class='radio-inline'><input type='radio' name='top' value='0' />否</label>
				</td>
			</tr>
			<tr>
				<th>标题字体：</th>
				<td>
					<label class='radio-inline'><input type='radio' name='style' value='0' checked=checked />正常</label>
					<label class='radio-inline'><input type='radio' name='style' value='1' /><b>粗体</b></label>
					<label class='radio-inline'><input type='radio' name='style' value='2' /><span style="font-style:oblique;">斜体</span></label>
				</td>
			</tr>
			<tr>
				<th>标题颜色：</th>
				<td>
					{set:$color = ($this->articleRow['color']) ? $this->articleRow['color'] : '#000000'}
					<input type='hidden' name='color' value='' />
					<a style='color:{$color};background-color:{$color};' href='javascript:showColorBox();' id='titleColor'>{$color}</a>
					<div id='colorBox' style='display:none'></div>
				</td>
			</tr>
			<tr>
				<th>排序：</th>
				<td><input type='text' class='form-control' name='sort' value='' /></td>
			</tr>
			<tr>
				<th>关联相关商品：</th>
				<td>
					<table class='table list-table table-bordered text-center' style='width:650px'>
						<colgroup>
							<col />
							<col width="120px" />
						</colgroup>
						<thead>
							<tr><td>商品名称</td><td>操作</td></tr>
						</thead>
						<tbody id="goodsListBox"></tbody>
					</table>
					<button class='btn btn-default' type='button' onclick='searchGoods({"type":"checkbox","callback":searchGoodsCallback});'>选择商品</button>
					<p class="help-block">文章所要关联的商品（可选）</p>
				</td>
			</tr>

			<tr>
				<th>内容：</th><td><textarea id="content" name='content' style='width:100%;height:350px' pattern='required' alt='内容不能为空'>{echo:htmlspecialchars($this->articleRow['content'])}</textarea></td>
			</tr>
			<tr>
				<th>关键词(SEO)：</th><td><input type='text' class='form-control' name='keywords' value='' /></td>
			</tr>
			<tr>
				<th>描述简要(SEO)：</th><td><input type='text' class='form-control' name='description' value='' /></td>
			</tr>
			<tr>
				<th></th><td><button class='btn btn-primary' type='submit'>确定</button></td>
			</tr>
		</table>
	</form>
</div>

<!--商品模板-->
<script type="text/html" id="goodsItemTemplate">
<tr>
	<td>
		<input type='hidden' name='goods_id[]' value='<%=templateData['goods_id']%>' />
		<img src="<%=webroot(templateData['img'])%>" style="width:80px;" />
		<%=templateData['name']%>
	</td>
	<td><a href="javascript:void(0)" onclick="$(this).parent().parent().remove();"><i class='operator fa fa-close'></i></a></td>
</tr>
</script>

<script type='text/javascript'>
jQuery(function(){
	//调色板颜色
	var colorBox = new Array('#000','#930','#330','#030','#036','#930','#000080','#339','#333','#800000','#f60','#808000','#808080','#008080','#00f','#669','#f00','#f90','#9c0','#396','#3cc','#36f','#800080','#999','#f0f','#fc0','#ff0','#0f0','#0ff','#0cf','#936','#c0c0c0','#f9c','#fc9','#ff9','#cfc','#cff','#9cf','#c9f','#fff');
	for(color in colorBox)
	{
		var aHTML = '<a href="javascript:void(0)" onclick="changeColor(this);" style="display:inline-block;width:60px;background-color:'+colorBox[color]+';color:'+colorBox[color]+'">'+colorBox[color]+'</a> ';
		$('#colorBox').html($('#colorBox').html() + aHTML);
	}

	var FromObj = new Form('article');
	FromObj.init({echo:JSON::encode($this->articleRow)});

	KindEditor.ready(function(K){
		K.create('#content');
	});

	{if:$this->articleRow}
	{set:$goodsList = Api::run("getArticleGoods",array("#article_id#",$this->articleRow['id']))}
	createGoodsList({echo:JSON::encode($goodsList)});
	{/if}
});

//弹出调色板
function showColorBox()
{
	var layer = document.createElement('div');
	layer.className = "poplayer";
	$(document.body).append(layer);
	var poplay = $('#colorBox');
	$('.poplayer').bind("click",function(){if(poplay.css('display')=='block') poplay.fadeOut();$("div").remove('.poplayer');})
	poplay.fadeIn();
}

//选择颜色
function changeColor(obj)
{
	var color = $(obj).html();
	$('#titleColor').css({color:color,'background-color':color});
	$('input[type=hidden][name="color"]').val(color);
	$('#colorBox').fadeOut();
	$("div").remove('.poplayer');
}

//输入筛选商品的条件
function searchGoodsCallback(goodsList)
{
	var result = [];
	goodsList.each(function()
	{
		var temp = $.parseJSON($(this).attr('data'));
		result.push(temp);
	});
	createGoodsList(result);
}

//创建商品数据
function createGoodsList(goodsList)
{
	for(var i in goodsList)
	{
		var templateHTML = template.render('goodsItemTemplate',{"templateData":goodsList[i]});
		$('#goodsListBox').append(templateHTML);
	}
}
</script>