{{include file=../head.tpl}}
<style>
	.main_content{
		margin-top: 0;
	}
	.special_content_top{
		width: 100%;
		float: left;
	}
	.special_content_top_left{
		width: 24%;
		border: 1px solid #ddd;
		margin-right: 1%;
	}
	.special_content_info{
		width: 100%;
		float: left;
	}
	.special_content_info_thumb{
		padding: 5%;
		width: 90%;
		float: left;
	}
	.special_content_info_thumb img{
		width: 100%;
		height: 200px;
	}
	.special_content_info_description,.special_content_info_other{
		padding: 5%;
		float: left;
		width: 90%;
		
	}
	.special_content_info_description .sort,.special_content_info_other .sort,.special_content_top_center .sort{
		height: 35px;
		line-height: 35px;
		background-color: #fff;
	}
	.special_content_info_description .sort span, .special_content_info_other .sort span{
		padding-left:5px ;
		float: left;
		font-size: 14px;
	}
	.special_content_info_description .text,.special_content_info_other .text{
		padding: 5%;
		float: left;
		width: 90%;
		font-size: 12px;
		border: 1px solid #ddd;
		color: #212121;
		background-color: #fff;
	}
	.special_content_info_other .text p{
		line-height: 25px;
	}
	.special_content_top_center{
		width: 50%;
	}
	.special_content_top_center .sort span{
		float: left;
	}
	.special_content_top_center .article_list{
		border: 1px solid #ddd;
		float: left;
		width: 100%;
		background-color: #fff;
	}
	.special_content_top_center .article_list li{
		border-bottom: dashed 1px #ddd;
		line-height: 25px;
		height: 25px;
		width: 100%;
		float: left;
		overflow:hidden ;
	}
	.special_content_top_center .article_list li a{
		float: left;
		padding-left:10px ;
	}
	.special_content_top_center .article_list li span.time{
		float: right;
		padding-right: 5px;
		font-size: 12px;
	}
	.special_content_top_center .article_list #page{
		text-align: center;
	}
	.special_content_top_right{
		width: 23%;
		margin-left: 1%;
	}
	.special_content_top_right .zt{
		float: left;
		width: 100%;
		background-color: #fff;
	}
	.special_content_top_right .zt .list{
		border: 1px solid #ddd;
		float: left;
		width: 100%;
	}
	.special_content_top_right .zt .list ul{
		padding: 10px;
	}
	.special_content_top_right .zt .list ul li{
		border-bottom: dashed 1px #ddd;
		line-height: 25px;
		height: 25px;
		width: 100%;
		float: left;
		overflow:hidden ;
	}
	.special_content_top_right .zt .list ul li:last-child{
		border:0
	}
	.special_photo{
		width: 1136px;
		float: left;
		height: 140px;
		border: 1px solid #ddd;
		background-color: #fff;
	}
	.special_photo .s{
		float: left;
		writing-mode: tb-rl;
		height: 130px;
		background: #ddd;
		text-align: center;
		line-height: 30px;
		margin: 5px;
		letter-spacing: 5px;
	}
	.special_photo ul{
		float: left;
		width: 1095px;
	}
	.special_photo ul li{
		width: 125px;
		float: left;
		margin-left: 10px;
		margin-top: 10px;
	}
	.special_photo ul li img{
		width: 100%;
		height: 100px;
	}
	.special_photo ul li .title{
		margin-top: 5px;
		overflow:hidden ;
		line-height: 20px;
		height: 20px;
	}
	.sort,.comment_list_sort_add{
		background-color: #fff;
	}
	#comment_list,.comment{
		width: 1135px;
	}
	.layui-textarea{
		
	}
	fieldset{
		background-color: #fff;
	}
</style>
<div class="main_content">
	<div class="special_content_top">
		<div class="special_content_top_left left">
			<div class="special_content_info">
				<div class="special_content_info_thumb">
					<img src="{{get_img_url($data[thumb])}}" alt="{{$data[name]}}"  onerror="this.src='{{WEBURL}}/public/global/images/nopic.jpg'"/>
				</div>
				<div class="special_content_info_description">
					<div class="sort"><span>专题介绍</span></div>
					<div class="text">{{$data[content]}}</div>
				</div>
				<div class="special_content_info_other">
					<div class="sort"><span>相关信息</span></div>
					<div class="text">
						<p><span>创建时间：</span>{{date('Y-m-d H:i:s',$data['posttime'])}}</p>
						<p><span>浏览次数：</span> <red class="mr10" id="clicks">{{$data[clicks]}}</red>次</p>
						<p><span>专题文章：</span> <red class="mr10" id="article_num">{{$data[article_num]}}</red>篇</p>
						<p><span>评论数量：</span> <red class="mr10" id="comment_num">{{$data[comment_num]}}</red>篇</p>
					</div>
				</div>
			</div>
		</div>
		<div class="special_content_top_center left">
			<div class="sort"><span>{{$data[name]}}专题列表</span></div>
			<div class="article_list">
				<ul id="article_list">
					<if condition="$getlist">
					<foreach array="getlist">
					<li><a href="{{$row[url]}}" target="_blank">{{$row[title]}}</a><span class="time">{{$row[posttime]}}</span></li>
					</foreach>
					<else>
					</if>
				</ul>
				<div id="page"></div>
			</div>
		</div>
		<div class="special_content_top_right left">
			<div class="zt">
				<div class="sort"><span>最新专题</span><span></span></div>
				<div class="list">
					<ul>
						<sql out="special_list" from="jab.special_list" where="1" order="id" by="desc" limit="10">
						<foreach array="special_list">
						<li><a href="{{U(['special'=>'content','id'=>$row[id],'sid'=>$row[sid]])}}" target="_blank">{{$row[name]}}</a></li>
						</foreach>
					</ul>
				</div>
			</div>
			<div class="zt mt10">
				<div class="sort"><span>热门专题</span><span></span></div>
				<div class="list">
					<ul>
						<sql out="special_list" from="jab.special_list" where="1" order="clicks" by="desc" limit="10">
						<foreach array="special_list">
						<li><a href="{{U(['special'=>'content','id'=>$row[id],'sid'=>$row[sid]])}}" target="_blank">{{$row[name]}}</a></li>
						</foreach>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="c"></div>
	<div class="special_photo mt10">
		<span class="s">新闻推荐</span>
		<ul>
			<sql out="special_list" from="jab.article" where="state=1 AND is_pic=1" order="reorder" by="desc" limit="8">
			<foreach array="special_list">
			<li>
				<a href="{{U(['aid'=>$row[aid],'cid'=>$row[cid]],MODULE)}}" target="_blank" title="{{$row[title]}}">
					<img src="{{get_img_url($row['thumb'])}}" alt="{{$row[title]}}"/>
					<div class="title">{{$row[title]}}</div>
				</a>
			</li>
			</foreach>
		</ul>
	</div>
	<div class="c"></div>
	<div id="comment">
		<div id="comment_list" class="mb10">
			<div class="comment_list">
				<div id="null"></div>
			</div>
			<div id="comment_page"></div>
		</div>
		<div class="comment">
			<div class="comment_list_sort">
				<div class="sort">
					<span>我来说两句</span>
					<span>
						不管本信息如何，都邀请您在下面说几句...
					</span>
				</div>
			</div>
			<div class="comment_list_sort_add">
				<if condition="$data['is_comment']=='1'">
				<form class="layui-form" action="">
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">评论内容</label>
						<div class="layui-input-block">
							<textarea id="comment_content" name="content" placeholder="请输入内容" class="layui-textarea" lay-verify="required|content"></textarea>
						</div>
					</div>
					<if condition="!C('add_comment_yzm')">
					<div class="layui-form-item layui-form-text" id="comment_yzm">
						<label class="layui-form-label">验证码</label>
						<div class="layui-input-block">
							<input name="yz_code" placeholder="验证码" class="layui-input" id="yz_code" type="text">
							<img src="{{WEBURL}}/Verification_Code{{C('HTML')}}" alt="点击图片更换验证码" title="点击图片更换验证码" class="yzimg"  onclick="this.src='{{WEBURL}}/Verification_Code/index/index/'+Math.random();"/>
						</div>
					</div>
					</if>
					<div class="layui-form-item commentbutton">
						<input type="hidden" name="id" value="{{$data[id]}}" />
						<button class="layui-btn" lay-submit="" lay-filter="button">提交</button>
					</div>
				</form>
				<else>
				<span class="close">本专题关闭了评论</span>
				</if>
			</div>
			<div class="comment_Reply">
		    	<form class="layui-form" action="">
		    		<div class="layui-form-item">
		    			<label class="layui-form-label">回复内容</label>
		    			<div class="layui-input-block">
		    				<textarea id="comment_Reply_content" name="content" placeholder="请输入内容" class="layui-textarea" lay-verify="required|content"></textarea>
		    			</div>
		    		</div>
		    		<div class="layui-form-item" id="commentReply_yzm"></div>
		    		<div class="layui-form-item">
		    			<div class="layui-input-block ">
		    				<input type="hidden" name="id" value="{{$data[id]}}" />
		    				<button class="layui-btn" lay-submit="" lay-filter="comment_Reply_button">回复</button>
		    			</div>
		    		</div>
		    		<div id="reply_id"></div>
		    	</form>
		    </div>
		</div>
	</div>
	<div class="c"></div>
</div>
<script>
			var allnum=Number({{$data[comment_num]}});
			var login="";
			var comment_add=true;
			var page=1;
			var commentReply="";
			layui.use(['form', 'layedit','layer','laypage'], function() {
				var form = layui.form,
					layer = layui.layer,
					laypage = layui.laypage,
					layedit = layui.layedit;
					
				//专题分页
				laypage.render({
					elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
					,count: {{$data[article_num]}} //数据总数，从服务端得到
					,limit:{{$data['rows']}}
					,jump: function(obj, first){
						if(!first){
						    var data={'id':{{$_GET[id]}},'page':obj.curr,'sid':{{$_GET[sid]}}};
						   	ajax_article(data);
						}
					}
				});

				//自定义验证规则
				form.verify({
					content: function(value) {
						if(value.length < 5) {
							return '评论内容至少得5个字符';
						}
					}
				});
				//监听评论提交
				form.on('submit(button)', function(data) {
					$.ajax({
						url:"/special/comment_add",
					    type: 'POST',
					    data:data.field,
					    dataType: 'json',
					    success: function(data){
					    	if(data.code=='19'){
					    		login=layer.open({
								    type: 2 //此处以iframe举例
								    ,title: '登录提醒'
								    ,area: ['390px', '260px']
								    ,shadeClose:true
								    ,shade: [0.8, '#393D49']
								    ,content: '{{WEBURL}}/login/index/small_login/tpl/login'
								});
					    		return false;
					    	}else if(data.code=='501' || data.code=='502' || data.code=='503'){
					    		layer.msg(data.text, {
								    time: 20000, //20s后自动关闭
								    btn: ['确定']
								    ,shadeClose:true
							        ,shade: [0.8, '#393D49']
								});
					    		return false;
					    	}else if(data.code=='9'){
					    		$(".comment_Reply .yzimg").click();
					    		layer.msg(data.text, {
								    time: 20000, //20s后自动关闭
								    btn: ['确定']
								    ,shadeClose:true
							        ,shade: [0.8, '#393D49']
								});
					    		return false;
					    	}else{
					    		$('#null').html('');
						    	allnum=allnum+1;
						    	$(".comment_list_sort_add .yzimg").click(); 
						    	$('#comment_content').val('');
						    	$('#yz_code').val('');
						    	$('#yz_code').focusout();
						    	comment_add=false;
						    	template(data.id,data.reply_id,data.text.username,data.text.content,data.text.username,data.text.posttime,'1');
					    	}
					    }
					});
					return false;
				});
				

				function get_comment_list(page){
					comment_add=true;
					var data={'id':'{{$_GET[id]}}','page':page,'sid':'{{$_GET[sid]}}'};
					$.ajax({
							url:"/special/comment_list/",
						    type: 'POST',
						    data:data,
						    dataType: 'json',
						    success: function(data){
						    	if(data){
						    		$('.comment_list').empty();
							    	for(var i=0; i<data.list.length;i++){
							    		template(data.list[i].id,data.list[i].reply_id,data.list[i].username,data.list[i].content,data.list[i].username,data.list[i].posttime,data.list[i].quanxian);
							    		if(data.list[i].list){
							    			FOR_comment_list(data.list[i].list);
							    		}
							    	}
						    	}else{
						    		$('#null').html('<div class="none">暂无评论....</div>');
						    	}
						    	
						    }
					})
				}
				
				function FOR_comment_list(data){
					
					for(var i=0; i<data.length;i++){
						template(data[i].id,data[i].reply_id,data[i].username,data[i].content,data[i].username,data[i].posttime,data[i].quanxian);
						if(data[i].list){
							FOR_comment_list(data[i].list);
						}
					}
				}
				
				function template(a,b,c,d,e,f,g){
					console.log(g);
					var quanxian="";
					if(g ===1 || g ===2){
						quanxian='<a href="javascript:void(0)" onclick="javascript:comment_del('+a+')">删除</a>';
					}
					var htm='<fieldset class="layui-elem-field" id="comment_list_'+a+'">'+
								'<legend>'+c+'</legend>'+
								'<div class="layui-field-box">'+
									d+
								'</div>'+
								'<div class="comment_list_action">'+
									'<span>发布人：'+e+'</span>'+
									'<span>时间：'+f+'</span>'+
									'<a href="javascript:void(0)" onclick="javascript:comment_Reply('+a+')">回复</a>'+
									quanxian+
								'</div>'+
								'<div class="new_Reply_'+a+'" id="new_Reply_'+a+'"></div>'+
							'</fieldset>'; 
					if(comment_add==true){
						if(b){
							if($('#comment_list_'+b).length>0){
					    		$("#comment_list_"+b).append(htm);
					    	}else{
					    		$(".comment_list").append(htm);
					    	}
						}else{
							$(".comment_list").append(htm);
						}
					}else{
						if(b){
							if($('#new_Reply_'+b).length>0){
					    		$("#new_Reply_"+b).append(htm);
					    	}else{
					    		$(".comment_list").prepend(htm);
					    	}
						}else{
							$(".comment_list").prepend(htm);
						}
					}
				}
				laypage.render({
					elem: 'comment_page'
					,count: allnum //数据总数，从服务端得到
					,limit:{{$data[comment_rows]}}
					,jump: function(obj, first){
						get_comment_list(obj.curr);
					},
					layout:['prev', 'page', 'next'],
				});
				//监听评论提交
				form.on('submit(comment_Reply_button)', function(data) {
					$.ajax({
						url:"/special/comment_add",
					    type: 'POST',
					    data:data.field,
					    dataType: 'json',
					    success: function(data){
					    	if(data.code=='19'){
					    		login=layer.open({
								    type: 2 //此处以iframe举例
								    ,title: '登录提醒'
								    ,area: ['390px', '260px']
								    ,shadeClose:true
								    ,shade: [0.8, '#393D49']
								    ,content: '{{WEBURL}}/login/index/small_login/tpl/login'
								});
					    		return false;
					    	}else if(data.code=='501' || data.code=='502' || data.code=='503'){
					    		layer.msg(data.text, {
								    time: 20000, //20s后自动关闭
								    btn: ['确定']
								    ,shadeClose:true
							        ,shade: [0.8, '#393D49']
								});
					    		return false;
					    	}else if(data.code=='9'){
					    		$(".comment_Reply .yzimg").click();
					    		layer.msg(data.text, {
								    time: 20000, //20s后自动关闭
								    btn: ['确定']
								    ,shadeClose:true
							        ,shade: [0.8, '#393D49']
								});
					    		return false;
					    	}else{
						    	layer.close(commentReply);
						    	comment_add=false;
						    	$('#comment_Reply_content').val('');
								$('#commentReply_yzm').html('');
						    	$(".comment_list_sort_add .yzimg").click();
						    	$('#yz_code').val('');
						    	template(data.id,data.reply_id,data.text.username,data.text.content,data.text.username,data.text.posttime,'1');
							}
					    }
					});
					return false;
				});
			});
			function comment_del(id){
				$.ajax({
					url:"/special/comment_del",
					type: 'POST',
					data:{'lid':"{{$data[id]}}",'id':id},
					dataType: 'json',
					success: function(data){
						if(data.code=='504' || data.code=='505'){
							layer.msg(data.text, {
						    time: 20000, //20s后自动关闭
						   	btn: ['确定']
						    ,shadeClose:true
						    ,shade: [0.8, '#393D49']
							});
						}else if(data.code==0){
						   	allnum=allnum-1;
						   	$('#comment_list_'+id).remove();
						}else{
						   	alert('异常错误');
						}
					}
				})
			}
			function comment_Reply(id) {
				 	$('#reply_id').html("<input type='hidden' name='reply_id' value='"+id+"' />'"); 	
					if($('#comment_yzm').length>0){
					    $('#commentReply_yzm').html($('#comment_yzm').html()); 	
					}
					commentReply=layer.open({
						type: 1
						,title: '评论回复'
						,area: ['540px', '300px']
						,shadeClose:false
						,shade: [0.8, '#393D49']
						,content: $('.comment_Reply')
						,cancel: function(index, layero){
							$('#comment_Reply_content').val('');
							$('#commentReply_yzm').html('');
							$(".comment_list_sort_add .yzimg").click();
						    layer.close(index);
						  	return false; 
						}
					});
			}
			function ajax_article(data){
				$.ajax({
					url: "/special/ajax_article/",
					type: 'POST',
					data:data,
					dataType: 'json',
					success: function(data) {
						$("#article_list").html('');
						for(var i=0;i<data.list.length;i++){
							var htm='<li><a href="'+data.list[i].url+'" target="_blank">'+data.list[i].title+'</a><span class="time">'+data.list[i].posttime+'</span></li>';
							$("#article_list").append(htm);
						}	
					}
				})
			}
		</script>
{{include file=../foot.tpl}}