<template>
	<view>
		<!--查询-->
		<u-popup :show="searchShow" mode="top" @close="closeSearch()">
			<view style="background-color: #f2f2f2;">
				<view style="padding: 20upx;">
					<u-search shape="round" placeholder="关键词" borderColor="#ffb30f"></u-search>
				</view>
				<view class="search-words">
					<view class="search-words-type">
						<text>搜索历史</text>
					</view>
					<view class="search-words-tag">
						<text>企业文化</text><text>美女</text>
					</view>
					<view class="search-words-type">
						<text>热门搜索</text>
					</view>
					<view class="search-words-tag">
						<text>企业文化</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!--页面头部-->
		<view class="top">
			<view class="top-bar">
				<view style="position: relative" @click="system()" >
					<!-- <text class="top-bar-alert">●</text> -->
					<view style="position: absolute;top:16px;right: 16px;z-index: 999;">
					<u-badge :isDot="true" :offset="[30,30]" type="error"></u-badge></view>
					<u-icon class="top-bar-icon" :size="26" name="bell"></u-icon>
				</view>
				<view class="top-bar-center">
					<view class="top-bar-tab" @click="clicktab(0)" :class="{'active':tabIndex==0}">最新</view>
					<view class="top-bar-tab" @click="clicktab(1)" :class="{'active':tabIndex==1}">最热</view>
				</view>
				<view>
					<u-icon @click="toSearch()" class="top-bar-icon" name="search" :size="26"></u-icon>
				</view>
			</view>
		</view>
		<!--内容切换区-->
		<view class="con-top">
			<view class="con-tab">
				<view class="con-tab-item" v-for="(item,index) in conTypeList" :key="index" @click="changeConType(item)"
					:class="{'active':conType==item.type}">{{item.con}}</view>
			</view>
		</view>
		<!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样-->
		<view class="items">
			<!--每条信息的显示,id,type,title,-->
			<view class="item" v-for="(item,idx) in dataList[dataName].list" :key="idx">
				<view @click="toPage(item)">
					<view class="item-title">{{item.title}}</view>
					<view class="item-info">
						<view class="item-author" style="display: flex;">
							<view>
								<u-avatar v-if="item.avatar==''" :size="25" shape="square" icon="account"></u-avatar>
								<u-avatar v-else :size="25" shape="square" :src="item.avatar"></u-avatar>
							</view>
							<view style="padding-left: 10upx;">({{item.sysCreateBy}})</view>
						</view>
						<view v-if="item.type==1" class="item-time"><text style="color:#FFB30F;font-size: 1.5em;">{{item.views}}</text>分</view>
						<view v-if="item.type>1" class="item-time">{{item.sysCreateTime}} </view>
					</view>
					
					<view v-if="item.type==1 && item.images!=''" style="position: relative;">
						<!-- <image :src="fileUrl+item.images" mode ="aspectFill" style="width: 100%;"></image> -->
						<course-image :course="item" width="100%" height="400upx" ></course-image>
						<text v-if="item.ctype == 10" class="course-type">录播</text>
						<text v-if="item.ctype == 20" class="course-type">录播</text>
					</view>
					<view v-if="item.type>1 && item.summary!=''" class="item-con">
						{{item.summary}}
					</view>
				</view>
				<view class="item-foot">
					<view>
						<text v-if="item.type==1" style="color: #FFB30F;">课程</text>
						<text v-if="item.type==2" style="color: #5ba2fc;">文章</text>
						<text v-if="item.type==4" style="color: #08a890;">问答</text>
					</view>
					<view class="item-foot-num">
						<u-icon v-if="item.type==1" name="eye" color="#666666" size="20"  :label="item.studys+'人学习'"></u-icon>
						<u-icon v-else name="chat" size="20" color="#666666" :label="item.comments"></u-icon>
					</view>
					<view class="item-foot-num">
						<u-icon v-if="item.type==1" name="thumb-up" color="#666666" size="20"  :label="item.praises+'人点赞'"></u-icon>
						<u-icon v-else name="thumb-up" size="20" color="#666666" :label="item.praises"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
		<!--查询-->
		<u-popup :show="searchShow" mode="top" @close="closeSearch()">
			<view style="background-color: #f2f2f2;">
				<view style="padding: 20upx;">
					<u-search shape="round" placeholder="关键词" borderColor="#ffb30f"></u-search>
				</view>
				<view class="search-words">
					<view class="search-words-type">
						<text>搜索历史</text>
					</view>
					<view class="search-words-tag">
						<text>企业文化</text><text>美女</text>
					</view>
					<view class="search-words-type">
						<text>热门搜索</text>
					</view>
					<view class="search-words-tag">
						<text>企业文化</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	
	import apiArticle from '@/api/modules/article.js'
	import apiCoursePortal from '@/api/modules/coursePortal.js'
	import apiIndex from '@/api/modules/index.js'
	import apiUser from '@/api/system/user.js'
	import apiQa from '@/api/modules/qa.js'
	import config from '@/config/index.js'
	export default {
		data(){
			return {
				tabIndex: 0,
				conType: 0,
				loadStatus: 'more',
				searchShow:false,
				pageSize:10,//统一每页多少条
				conTypeList: [
				    {type: 0,con: '全部'},
					{type: 1,con: '课程'},
					{type: 2,con: '文章'},
					{type: 4,con: '问答'},
				],
				fileUrl:config.fileUrl,
				dataList:{
					list00:{pageIndex:1,hasMore:true,list:[]},
					list01:{pageIndex:1,hasMore:true,list:[]},
					list02:{pageIndex:1,hasMore:true,list:[]},
					list04:{pageIndex:1,hasMore:true,list:[]},
					list10:{pageIndex:1,hasMore:true,list:[]},
					list11:{pageIndex:1,hasMore:true,list:[]},
					list12:{pageIndex:1,hasMore:true,list:[]},
					list14:{pageIndex:1,hasMore:true,list:[]}
				},
				dataName:'list00'
			}	
		},
		onPullDownRefresh() {
			this.onReachBottom();
		},
		onReachBottom() {
			this.loadStatus='loading';//more,loading,noMore
			this.dataName='list'+this.tabIndex+this.conType;
			this.dataList[this.dataName].pageIndex++;
			this.findData(false);
		},
		mounted() {
			this.findData(true);
		},
		methods: {
			system() {
				uni.navigateTo({
					url: '/pages/my/message'
				})
			},
			showSearch(){
				this.searchShow=true;
			},
			closeSearch(){
				this.searchShow=false;
			},
			toSearch(){
				let pageUrl='/pages/resource/search';
				uni.navigateTo({
					url:pageUrl
				})
			},
			clicktab(idx) {
				this.tabIndex = idx;
				this.dataName='list'+this.tabIndex+this.conType;
				let len=this.dataList[this.dataName].list.length;
				if(len==0){
					this.findData(false);
				}
				
			},
			changeConType(item) {
				this.conType = item.type;
				this.dataName='list'+this.tabIndex+this.conType;
				let len=this.dataList[this.dataName].list.length;
				if(len==0){
					this.findData(false);
				}
			},
			findData(flag){ //是否重置列表
				//哪个列表
				this.dataName='list'+this.tabIndex+this.conType;
				//console.log(this.dataName);
				let curList=this.dataList[this.dataName];
				let $this=this;
				//生成查询条件
				uni.showLoading({title:'加载中...'})
				//查询条件
				let params={
					pageIndex:curList.pageIndex,
					pageSize:this.pageSize,
					type:this.conType,
					orderType:this.tabIndex
				}
				if(flag){
					curList.list=[];
				}
				if(this.conType==0){ //查询全部
					apiIndex.findAll(params).then(rs=>{
						if(rs.status==200){
							let userIds=[];
							rs.result.list.forEach(item=>{
								curList.list.push(item);
								userIds.push(item.sysCreateAid);
							});
							this.loadUserInfos(rs.result.list,userIds);
						}
						setTimeout(function(){ uni.hideLoading() },1000);
					})
				}else { //查询问答
					apiIndex.findByType(params).then(rs=>{
						if(rs.status==200){
							let userIds=[];
							rs.result.list.forEach(item=>{
								curList.list.push(item);
								userIds.push(item.sysCreateAid);
							});
							this.loadUserInfos(rs.result.list,userIds);
						}
						setTimeout(function(){ uni.hideLoading() },1000);
					})
				}
				setTimeout(function(){$this.loadStatus='more';},1000);
			},
			loadUserInfos(list,userIds){
				let $this=this;
				const noReapetIds=[...new Set(userIds)]
				apiUser.getByIds(noReapetIds).then(res=>{
				  if(res.status==200){
				    list.forEach(item=>{
						res.result.some(author=>{
							if(author.aid==item.sysCreateAid){
								if(author.avatar!=''){
									item.avatar=$this.fileUrl+author.avatar;
								}
								item.orgInfo=author.orgInfo;
								return true;
							}
							return false;
						})
				    })
				  }
				})
			},
			toPage(item) {
				//根据判断是转赂课程1，文章 2，问答4
				let pageUrl='';
				if (item.type ==1) {
					if(item.ctype==10){
						pageUrl='/pages/resource/microDetail?id='+ item.id
					}else if(item.ctype==20){
						pageUrl='/pages/resource/courseDetail?id='+ item.id
					}
				} else if (item.type == 2) {
					pageUrl='/pages/resource/articeDetail?id='+item.id
				} else if (item.type ==4) {
					pageUrl='/pages/resource/qaDetail?id='+item.id
				}
				if(pageUrl!=''){
					uni.navigateTo({
						url: pageUrl
					})
				}else{
					uni.showToast({
						title:'无此跳转['+item.type+']'
					})
				}
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.search-words{
		// background-color: #f1f1f1;
		padding: 30upx;
		height: 300upx;
		.search-words-type{
			padding: 30upx 0upx;
			font-size: 1.1em;
			color: #999999;
		}
		.search-words-tag{
			text{
				background-color: #FFFFFF;
				padding: 6upx 20upx;
				border-radius: 20upx;
				margin: 20upx 20upx 10upx 0upx;
			}
		}
	}
	.top {
		background: #FFFFFF;
		position: relative;
		.top-bar {
			display: flex;
			justify-content: space-between;
			height: 50px;
			line-height: 50px;
			.top-bar-alert{
				position: absolute;
				left:30px;
				top:-6px; 
				color:#ff5500;
				font-size: 12rpx;
			}
			.top-bar-icon {
				margin-left: 14px;
				margin-right: 14px;
				margin-top: 15px;
			}
			.top-bar-center {
				display: flex;
				font-size: 35upx;
				.top-bar-tab {
					margin: 0upx 50upx;
				}
				.active {
					border-bottom: 2px solid #588AFC;
					color: #5282eb;
				}
			}
		}
	}
    .con-top{
		display: flex;
		position: relative;
		justify-content: space-between;
		height: 50upx;
		line-height: 50upx;
		padding: 15upx 0upx;
		.con-tab{
			display: flex;
			.con-tab-item {
				padding: 0upx 20upx;
				font-size: 1.1em;
				color: #666666;
				text-align: center;
			}
			.active {
				font-weight: 700;
				color: #666666;
				font-weight: bold;
			}
		}
		
	}
    .items{
		margin-bottom: 30upx;
		.item{
			
			margin-bottom: 20upx;
			background: #ffffff;
			position: relative;
			padding: 20upx;
			.item-title{
				line-height: 48upx;
				font-size: 1.1em;
			}
			.item-info{
				display: flex;
				justify-content: space-between;
				height: 50upx;
				line-height: 50upx;
				padding: 10upx 0upx;
				color: #8f8f8f;
				.item-author{
					font-size: 0.9em;
				}
				.item-score{
					
				}
				.item-time{
					font-size: 0.8em;
					color: #828282;
				}
			}
			.item-image{
				
			}
			.item-con{
				line-height: 40upx;
				font-size: 0.9em;
				color: #333333;
				.item-con-img{
					float: right;
					width:320upx;
					height: 180upx;
				}
			}
			.item-foot{
				display: flex;
				padding-top: 26upx;
				.item-foot-num{
					margin-left: 15upx;
				}
			}
		}
	}
	.course-type{
		position: absolute;
		top: 10upx;right: 0px;
		width: 140upx;
		height: 50upx;
		text-align: center;
		line-height: 50upx;
		z-index: 9;
		background-color: #676767;
		opacity: 0.5;
		border-top-left-radius: 25upx;
		border-bottom-left-radius: 25upx;
		color: #FFFFFF;
	}
</style>
