<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
{js:jquery}
{js:dialog}
{js:artTemplate}
{set:$type = IReq::get('type') == 'checkbox' ? 'checkbox' : 'radio'}
{set:$dev = IClient::getDevice()}
<style>
.__cate {font-size: 12px;overflow-x: hidden;{if:$dev=='pc'}width:516px; height:400px{/if}}
.__cate,.__cate * {padding: 0;margin: 0;list-style: none;}
.__cate .__cate_box {padding: 8px;overflow-y: scroll;}
.__cate .__cate_box h3 {height: 28px;line-height: 28px;text-indent: 15px;background: #F0AD4E;color: #fff;border: 1px solid #EEA236;border-radius: 5px;}
.__cate .__cate_box ul {overflow: hidden;}
.__cate .__cate_box ul.select {width: 150px;float: left;margin-right: 10px;}
.__cate .__cate_box ul:before {
	display: block;height: 32px;line-height: 32px;content: "顶级分类";text-align: center;
	border: 1px solid #357EBD;background: #428BCA;color: #fff;margin-top: 10px;border-radius: 5px;
}
.__cate .__cate_box ul + ul:before {content: "二级分类"}
.__cate .__cate_box ul + ul + ul.select {margin-right: 0;}
.__cate .__cate_box ul + ul + ul:before {content: "三级分类"}
.__cate .__cate_box ul + ul + ul + ul:before {content: "四级分类"}
.__cate .__cate_box ul + ul + ul + ul + ul:before {content: "五级分类"}
.__cate .__cate_box ul + ul + ul + ul + ul + ul:before {content: "六级分类"}
.__cate .__cate_box ul li {margin-top: 5px;}
.__cate .__cate_box ul li label {}
.__cate .__cate_box ul li label input {display: none;}
.__cate .__cate_box ul li label span {
	display: block;height: 28px;line-height: 28px;text-align: center;border: 1px solid #ddd;
	border-radius: 5px;
}
.__cate .__cate_box ul li label span:hover {
	background: #f0f0f0;cursor: pointer;
}
.__cate .__cate_box ul li label input:checked + span {color: #fff;border-color: #4CAE4C;background: #5CB85C;}
</style>
</head>
<body class="__cate">
	<div class="__cate_box">
		<h3>所属分类：</h3>
		<div id="categoryBox"></div>
		<!--分类列表-->
		<script id="categoryListTemplate" type="text/html">
		<ul {if:$dev=='pc'} class="select"{/if} name="catRow">
			<%for(var item in templateData){%>
			<%item = templateData[item]%>
			<li onmouseover="showCategory(<%=item['id']%>,<%=level%>);"><label><input name="categoryVal" type="{$type}" value="<%=item['id']%>" onchange="selectCategory(this);" <%if( jQuery().inArray(item['id'],checkedCategory) != -1 ){%>checked="checked"<%}%> /> <span><%=item['name']%></span></label></li>
			<%}%>
		</ul>
		</script>
	</div>
</body>

<script type="text/javascript">
//分类层次数据结构
categoryParentData = art.dialog.data('categoryParentData');

//初始化被选中的分类ID
checkedCategory = art.dialog.data('categoryValue') ? art.dialog.data('categoryValue') : [];

$(function()
{
	//生成顶级分类信息
	var templateHtml = template.render('categoryListTemplate',{'templateData':categoryParentData[0],'level':0,'checkedCategory':checkedCategory});
	$('#categoryBox').append(templateHtml);
})

//显示分类数据信息
function showCategory(categoryId,level)
{
	$('[name="catRow"]:gt('+level+')').remove();
	var childCategory = categoryParentData[categoryId];
	if(childCategory)
	{
		var templateHtml = template.render('categoryListTemplate',{'templateData':childCategory,'level':level+1,'checkedCategory':checkedCategory});
		$('#categoryBox').append(templateHtml);
	}
}

//选择分类数据
function selectCategory(_self)
{
	var categoryId = $(_self).val();
	var valueIndex  = jQuery.inArray(categoryId,checkedCategory);

	if($(_self).prop('checked'))
	{
		(valueIndex == -1) ? checkedCategory.push(categoryId) : "";
	}
	else
	{
		(valueIndex == -1) ? "" : checkedCategory.splice(valueIndex,1);
	}
	//更新分类数据值
	{if:$type == 'checkbox'}
	art.dialog.data('categoryValue',checkedCategory);
	{else:}
	var result = checkedCategory.pop();
	art.dialog.data('categoryValue',Array(result));
	{/if}
}
</script>
</html>
