<#-- 话题列表  分页 -->
<#-- 页面需引入layer.js 和 DPlayer -->
<@function page="${url_page}" tagId="${url_tagId}">
<div class="topicModule">
	<div class="topic-box">
		<div class="topicList">
			<#if topicRelated_topic_page?exists && topicRelated_topic_page.records?exists && topicRelated_topic_page.records?size gt 0>
				<#list topicRelated_topic_page.records as topic>
					<div class="topicItem">
					
						<div class="avatarBox">
				            <a class="avatarLink" href="user/control/home?userName=${topic.userName}">
				            	<#if topic.avatarName != null>
									<img src="${topic.avatarPath}100x100/${topic.avatarName}">
								<#else>
									<!--[if (IE)]><img src="${commonPath}images/min_avata.png"><![endif]-->
									<!--[if !(IE)]><!--><img avatar="${(topic.nickname != null && topic.nickname??) ?string(topic.nickname , topic.account)}" ><!--<![endif]-->
								</#if>                                                           
				            </a>   
				        </div>
						
						<div class="content clearfix">
							<ul class="info">
					        	<li>
					            	<span class="tag-container"><span class="tag">${topic.tagName}</span></span>
					            	<a class="userName" href="user/control/home?userName=${topic.userName}">
					            		${(topic.nickname != null && topic.nickname??) ?string(topic.nickname , topic.account)}
					            	</a>
					            	<#list topic.userRoleNameList as roleName>
										<span class="userRoleName">${roleName}</span>
									</#list>
					            	<#if topic.isStaff>
										<span class="staff">官方人员</span>
									</#if>
					            	<span class="postTime">发表时间：${topic.postTime}</span>
					            	<#if topic.lastReplyTime != null>
					            		<span class="lastReplyTime">最新回复：${topic.lastReplyTime}</span>
					            	</#if>
					        	</li>
					        </ul>
					        <#if topic.account == null || topic.account == ''>
								<div class="cancelAccount">此用户账号已注销</div>
							</#if>
							<h2 class="title clearfix">
								<a href="thread?topicId=${topic.id}" target="_blank">${topic.title}</a>
					            <#list topic.allowRoleViewList as roleName>
									<span class="topicRoleName">${roleName}</span>
								</#list>
								<#list topic.hideTagTypeMap as key, value>
									<span class="hideTagType hide_${key}" data="${key}">
		                      			<#if value?c == 'true'>
		                      				<span class="circle point"><i class="cms-unlock-solid" ></i></span>
		                      			<#else>
		                      				<span class="circle"><i class="cms-lock-solid" ></i></span>
		                      			</#if>
			                      	</span>
								</#list>
					            <#if topic.essence == true>
				            		<span class="essence">精华</span>
					            </#if>
					             <#if topic.sort gt 0>
					            	<span class="top">置顶</span>
					            </#if>
						            
								<#if topic.giveRedEnvelopeId != null && topic.giveRedEnvelopeId??>
		                      		<span class="redEnvelope" alt="红包" title="红包" ><i class="cms-redEnvelope-1" ></i></span>
		                      	</#if>
								
							</h2>
							<div class="clearfix"></div>
							
							<div class="detail">
								<#if topic.imageInfoList?size gt 0 || topic.mediaInfoList?size gt 0>
									<#if topic.imageInfoList?size gt 0>
					                	<div class="tm-m-photos topic_thumbnail_${topic.id}">
											<ul class="tm-m-photos-thumb">
												<#list topic.imageInfoList as imageInfo>
													<#-- 图片最多显示8张 -->
													<#if imageInfo_index lt 8>
														<li data-src="${imageInfo.path}${imageInfo.name}">
															<#-- 本地缩略图 -->
															<#if fileStorageSystem == 0>
																<div class="img" style="background-image: url(${imageInfo.path}240x240/${imageInfo.name})"></div>
															</#if>
															<#-- SeaweedFS缩略图 使用nginx image_filter的缩略图处理功能 -->
															<#if fileStorageSystem == 10>
																<div class="img" style="background-image: url(${imageInfo.path}${imageInfo.name}?width=240)"></div>
															</#if>
															<#--  MinIO缩略图 使用nginx image_filter的缩略图处理功能 -->
															<#if fileStorageSystem == 20>
																<div class="img" style="background-image: url(${imageInfo.path}${imageInfo.name}?width=240)"></div>
															</#if>
															<#-- 阿里云OSS缩略图 -->
															<#if fileStorageSystem == 30>
																<div class="img" style="background-image: url(${imageInfo.path}${imageInfo.name}?x-oss-process=image/resize,w_240)"></div>
															</#if>
															
														<b class="tm-photos-arrow"></b> </li>
													</#if>
												</#list>
											</ul>
											<div class="tm-m-photo-viewer transition1 topic_original_${topic.id}"> 
												<img src="${commonPath}images/null.gif"> 
												<span class="tm-m-photo-viewer-navleft navleft_${topic.id}"></span> 
												<span class="tm-m-photo-viewer-navright navright_${topic.id}" ></span> 
											</div>
										</div>
									<#else>
										<div class="videoInfo">
											
											<#list topic.mediaInfoList as mediaInfo>
												<#-- 视频最多显示3个 -->
												<#if mediaInfo_index lt 3>
													<player url="${mediaInfo.mediaUrl}" cover="${mediaInfo.cover}" thumbnail="${mediaInfo.thumbnail}">
														<img class="cover" src="${mediaInfo.cover}"/>
														<span class="circle"><span class="iconBox"><i class="cms-control-play playIcon"></i></span></span>
														
													</player>
												</#if>
											</#list>
										</div>
									</#if>
								<#else>
									<h2 class="summary">
										${topic.summary}
									</h2>
								</#if>
								<script>
									$(function () {
										new commentMove(".topic_thumbnail_${topic.id}",".topic_original_${topic.id}","${topic.id}").init();
								    })
								</script>
			                </div>
						</div>
						
						<div class="statistic clearfix">
		                	
		                	<div class="viewTotal">
		                		<i class="cms-view icon"></i>
		                		${topic.viewTotal}
		                	</div>
		                	
		                	<div class="commentTotal">
		                		<i class="cms-commentCount icon"></i>
		                		${topic.commentTotal}
		                	</div>
						</div>
					</div>    
				</#list>
			</#if>     
        	
            <div class="topicPage">
				<#assign pageView = topicRelated_topic_page>
				<#--引入分页-->
				<@include action="${newPublic_1}"/>
			</div>
		</div>
	</div>
</div>

<style>
/** 半透明提示层 **/
.hideTag-class .layui-layer-content{
	background-color: rgba(0,0,0,0.6);
}
.hideTag-class .layui-layer-content .layui-layer-TipsG {
	position: absolute;
	width: 0;
	height: 0;
	border-width: 5px;
	*overflow: hidden;
	
	border-style: dashed;
 	border-color:rgba(0,0,0,0.6) transparent transparent transparent;
	margin-bottom: -2px;
	margin-bottom: 3px\0;
	*margin-bottom: 3px;
}

.hideTag-class .layui-layer-content .layui-layer-TipsT {
	left: 7px;
	border-right-style: solid;
	border-right-color: rgba(0,0,0,0.6);
}
</style>


<script type="text/javascript">
var tip_index = 0;
$(".hideTagType").on('mouseenter', this,function() {
	var hideTagType = $(this).attr("data");
	var hideTagValue = "";
	if(hideTagType == 10){
		hideTagValue = "输入密码可见";
	}else if(hideTagType == 20){
		hideTagValue = "评论话题可见";
	}else if(hideTagType == 30){
		hideTagValue = "达到等级可见";
	}else if(hideTagType == 40){
		hideTagValue = "积分购买可见";
	}else if(hideTagType == 50){
		hideTagValue = "余额购买可见";
	}
	
	tip_index = layer.tips(hideTagValue, $(this).children("span:first-child"), {
		tips: 1,//[1, "rgba(0, 0, 0,0.5)"],
		time: 5000,
		skin: 'hideTag-class'
	});
}).on('mouseleave', this, function(){
	layer.close(tip_index);
});
</script>


<script type="text/javascript">
// 获取随机数
function getRandom(m) {
	//生成的随机数截取m位，生成的随机数最大不超过13位，能保证首位不为0
    m = m > 13 ? 13 : m;
   	var num = Math.random().toString();
   	if(num.substr(num.length - m, 1) === '0') {           
   		return getRandom(m);
   	}
	return num.substring(num.length - m);
}

//设置播放器标签
function setPlayerTag(){
	//获取<player>标签属性
	$(".videoInfo").find("player").each(function(){
		var random = getRandom(13);

		var id = "player_"+random;
		var url = $(this).attr("url");
		var cover = $(this).attr("cover");//封面
		var thumbnail = $(this).attr("thumbnail");//缩略图
		//设置Id
		$(this).attr("id",id);
		
		$(this).click(function(){
			$(this).unbind('click');//解绑事件
			
			if(url == ""){//如果视频处理中
				var dp = new DPlayer({
	         		container: document.getElementById(id),//播放器容器元素
	         		screenshot: false,//开启截图，如果开启，视频和视频封面需要开启跨域
	         		video: {
	         			    
	         		}
	         	});
				insertProcess(id);
			}else{
				if(cover != undefined && cover != "" && thumbnail != undefined && thumbnail != ""){//切片视频
					var dp = new DPlayer({
						container: document.getElementById(id),//播放器容器元素
						screenshot: false,//开启截图，如果开启，视频和视频封面需要开启跨域
						hotkey: true,
						preload: 'none', //禁止视频预加载
						video: {
						    url: url,
						    type: 'hls',
						    pic: cover,//视频封面
						    thumbnails: thumbnail//视频预览图
						}
					});
					dp.play();//播放视频
				
				}else{
					var dp = new DPlayer({
            			container: document.getElementById(id),//播放器容器元素
            			screenshot: false,//开启截图，如果开启，视频和视频封面需要开启跨域
            			
            			video: {
            			    url: url
            			}
            		});
            		dp.play();//播放视频
				}
			}
		});
	})
}
//插入处理提示层
function insertProcess(id){
	$("#"+id).prepend("<div class='dplayer-process'><div class='box'><div class='prompt'>视频处理中，请稍后再刷新</div></div></div>");
}
$(document).ready(function(){
	setPlayerTag();
});
</script>

</@function>