<template>
	<view class="recommend-index">
		<view class="index-banner">
			<u-swiper
			    :list="resonimg"
				keyName="image"
			    @change="change"
			    @click="click"
			    ></u-swiper>
		</view>
		<view class="course-re">
			<view class="recommend-index-title" style="margin-bottom: 20upx;">
				<text class="title-line"></text>
				热门课程推荐
				<!-- <text class="tetle-text">查看更多</text> -->
			</view>
			<course-list :items="courseDataList"></course-list>
		</view>
		<view style="margin:30upx 0 60upx 0">
			<image @click="imgJup()" style="width: 100%;height:220upx" :src="fileUrl+placeholderImg.image" mode=""></image>
		</view>
		<view class="ranking-list">
			<view class="recommend-index-title">
				<text class="title-line"></text>
				排行榜
			</view>
			<view class="list-box">
				<view class="list-box-index">
				    <view class="list-box-title course-bg-info">
				    	热门课程排行榜
				    </view>	
					<view class="list-box-text" v-for="(cou,index) in courseRankingList" @click="toCourseDetail(cou)">
						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
						<text>{{cou.name}}</text>
					</view>
				</view>
				<view class="list-box-index">
				    <view class="list-box-title art-bg-info">
				    	热门文章排行榜
				    </view>	
					<view class="list-box-text" v-for="(arl,index) in arlRankingList" @click="toArticleDetail(arl)">
						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listred01.png" mode=""></image>
						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listred02.png" mode=""></image>
						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listred03.png" mode=""></image>
						<text>{{arl.title}}</text>
					</view>
				</view>
				<view class="list-box-index">
				    <view class="list-box-title qa-bg-info">
				    	热门问答排行榜
				    </view>	
					<view class="list-box-text" v-for="(qa,index) in qaRankingList" @click="toQaDetail(qa)">
						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/list-01.png" mode=""></image>
						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/list02.png" mode=""></image>
						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/list03.png" mode=""></image>
						<text>{{qa.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="articl-recommend">
			<view class="recommend-index-title">
				<text class="title-line"></text>
				热门文章推荐
				<!-- <text class="tetle-text">查看更多</text> -->
			</view>
			<view class="articl-box">
				<view class="articl-box-index" v-for="ar in arlDataList" @click="toArticleDetail(ar)">
					<image  style="width: 560upx;height: 314upx;border-radius: 24upx 24upx 0 0;" :src="fileUrl+ar.coverurl" mode=""></image>
					<view class="box-index">
						<view class="box-index-title" style="height:90upx">
							{{ar.title}}
						</view>
						<view class="box-index-authr">
							<author-info width="32px" height="32px" :avatar="ar.authorInfo.avatar" :name="ar.authorInfo.name" :sex="ar.authorInfo.sex"></author-info>
							<!-- <image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
							学习小助手 -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qa-recommend">
			<view class="recommend-index-title">
				<text class="title-line"></text>
				热门问答推荐
				<!-- <text class="tetle-text">查看更多</text> -->
			</view>
			<view class="qa-box" style="display: flex;overflow-x: auto;">
				<view class="qa-box-index" v-for="qa in qaDataList" @click="toQaDetail(qa)">
					<view class="box-index-title">
						{{qa.title}}
					</view>
					<view class="box-index-authr" style="display: flex;">
						<author-info width="26px" height="26px" :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :sex="qa.authorInfo.sex"></author-info>
						<!-- <image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
						<text style="font-size: 28upx;color: #39424C;">学习小助手</text> -->
						<text style="font-size: 28upx;color: #6E7B84;margin-top: 10upx;display: inline-block;margin-left: 20upx;">「最热答案」</text>
					</view>
					<view class="box-index-text">
						{{qa.content}}
					</view>
				</view>
			</view>
		</view>
		<u-divider text="没有更多了"></u-divider>
	</view>
</template>

<script>
	import apiIndex from '@/api/phase2/index.js';
	import apiPlace from '@/api/phase2/place.js';
	import { mapGetters,mapActions} from 'vuex';
	import apiUser from '@/api/system/user.js';
	export default {
		data() {
			return {
				fileUrl:this.$config.fileUrl,
				arlDataList:[],
				qaDataList:[],
				courseDataList:[],
				qaRankingList:[],
				arlRankingList:[],
				courseRankingList:[],
				resonimg:[],//轮播图
				placeholderImg:{},
			}
		},
		computed: {
		    ...mapGetters(['userInfo'])
		},
		mounted(){
			this.couresreso();
			this.getCourseData();
			// this.getSysTypeTree();
			// this.findCourseData();
			this.loadSysTypes();
			this.getQaRanking();
			this.getArtRanking();
			this.getArtData();
			this.getQaData();
			this.getCourseRanking();
			
		},
		methods: {
			imgJup() {
				if(this.placeholderImg.JumpUrl){
				      window.open(this.placeholderImg.JumpUrl);
				}
			},
			click(e) {
				let JumpUrl = this.resonimg[e].JumpUrl;
				 if(JumpUrl){
				      window.open(JumpUrl);
				}
			},
			change(e) {
			},
			couresreso() {
			    let key = 'mobileIndex1';
			    apiPlace.detail(key).then(res => {
				  this.resonimg = [];
				  if(res.result.content && res.result.content.length>10){
						let lmj = JSON.parse(res.result.content)
						lmj.forEach(item=>{
							this.resonimg.push(
							{
							   image: this.fileUrl+item.image,
							   JumpUrl: item.JumpUrl,
							}
							);
						})
				  }
			      
			    });
				let keyImg = 'mobileIndex2';
				apiPlace.detail(keyImg).then(res => {
					if(res.result.content && res.result.content.length>10){
						let lmj = JSON.parse(res.result.content)
						this.placeholderImg = lmj[0];
					}
				});
			  },
			//文章跳转详情
			toArticleDetail(item) {
				uni.navigateTo({
					url: '/pages/resource/articeDetail?id=' + item.id
				});
			},
			toQaDetail(item) {
				uni.navigateTo({
					url: '/pages/resource/qaDetail?id=' + item.id
				});
			},
			//课程跳转详情
			toCourseDetail(citem) {
				if(citem.source == 1){
				 uni.navigateTo({
				 	url: '/pages/study/studydetail?id='+citem.id+'&type='+citem.type
				 });
				} else {
					uni.navigateTo({
					 	url: '/pages/study/courseStudy?id='  + citem.id 
					});
					// if (citem.type == 10) {
					// 	uni.navigateTo({
					// 		url: '/pages/resource/microDetail?id='  + citem.id 
					// 	});
					// } else if (citem.type == 20) {
					// 	uni.navigateTo({
					// 		url: '/pages/resource/courseDetail?id=' +citem.id
					// 	});
					// }
				}
			},
			...mapActions({
			      // getResOwnerTree:'resOwner/getResOwnerTree',
			      // loadResOwners:'resOwner/loadResOwners',
			      getSysTypeTree:'sysType/getSysTypeTree',
			      loadSysTypes:'sysType/loadSysTypes'
			    }),
			//问答排行榜
			getQaRanking(){
				apiIndex.qaAnswers(3).then(res=>{
					if(res.status == 200) {
						this.qaRankingList = res.result;
					}
				})
			},
			//文章排行榜
			getArtRanking(){
				apiIndex.articleViews(3).then(res=>{
					if(res.status == 200){
						this.arlRankingList = res.result;
					}
				})
			},
			//课程排行榜
			getCourseRanking(){
				apiIndex.scorelist(3,1).then(res=>{
					if(res.status == 200){
						this.courseRankingList = res.result;
					}
				})
			},
			//推荐文章
			getArtData() {
				apiIndex.mobieArticle(2).then(res=>{
					if(res.status == 200) {
						let ids = [];
						res.result.forEach(item=>{
							ids.push(item.sysCreateAid);
							item.authorInfo={avatar:'',name:'',code:'',sex:null};
						})
						this.arlDataList = res.result;
						this.loadAuthorInfo(res.result,ids);
					}
				})
			},
			// 推荐问答
			getQaData(){
				let params = {
				  pageSize: 4,
				  orderAsc: false,
				  orderField: 'views'
				};
			    apiIndex.indexList(params).then(res=>{
					if(res.status == 200){
						let ids = [];
						res.result.forEach(item=>{
							ids.push(item.sysCreateAid);
							item.authorInfo={avatar:'',name:'',code:'',sex:null};
						})
						this.qaDataList = res.result;
						this.loadAuthorInfo(res.result,ids);
					}
				})
			},
			// 推荐课程
			getCourseData(){
				let course = {
				  num:6,
				  device: 1,
				  orderField: 'studys',
				  orderAsc: false,
				  topOrder: true,
				};
				apiIndex.mobileIndex(course).then(res=>{
					if(res.status == 200) {
						this.courseDataList = res.result;
					}
				})
			},
			loadAuthorInfo(list, ids) {
			        //加载作者信息，头像，机构信息
			        if (ids.length == 0) {
			          return;
			        }
			        const noReapetIds = [...new Set(ids)];
			        apiUser.getByIds(ids).then(res => {
			          if (res.status == 200) {
			            list.forEach((item, index) => {
			              res.result.some(author => {
			                if (author.aid == item.sysCreateAid) {
			                  item.authorInfo = author;
			                  return true;
			                } else {
			                  return false;
			                }
			              });
			            });
			          } else {
			            console.log('加载用户信息失败:' + res.error);
			          }
			        });
			      },
		}
	}
</script>

<style scoped lang="scss">
.recommend-index{
	background-color: #fff;
	padding:16upx 30upx;
	padding-bottom: 100upx;
	.recommend-index-title{
		font-size: 36upx;
		font-weight: 600;
		height: 40upx;
		line-height: 40upx;
		color: #04243C;
		margin-top: 50upx;
		.title-line{
			display: inline-block;
			width: 8upx;
			height: 28upx;
			background: #387DF7;
			border-radius: 8upx;
			margin-right: 12upx;
		}
		.tetle-text{
			float: right;
			font-size: 24upx;
			color: #6E7B84;
			font-weight: 400;
		}
	}
    .ranking-list{
		.list-box{
			// width: 1720upx;
			margin-top: 30upx;
			display: flex;
			overflow-x: auto;
		}
		.list-box-index:nth-child(1){
			background: url(../../static/images/ranking/qa-box.png) no-repeat 100% / 100%;
			background-position: 0 0;
		}
		.list-box-index:nth-child(2){
			background: url(../../static/images/ranking/list-pink.png) no-repeat 100% / 100%;
			background-position: 0 -1px;
		}
		.list-box-index:nth-child(3){
			background: url(../../static/images/ranking/list-or.png) no-repeat 100% / 100%;
			background-position: 0 0;
		}
	   .list-box-index{
		   width: 560upx;
		   min-width: 560upx;
		   height: 332upx;
		   box-sizing: border-box;
		   border-radius: 24upx;
		   border: 2upx solid #E4EAEF;
		   padding: 34upx 30upx;
		   // background: url(../../static/images/ranking/qa-box.png) no-repeat 100% / 100%;
		   // background-position: 0 0;
		   margin-right: 20upx;
		  
		   .list-box-title{
			   font-size: 32upx;
			   font-weight: 600;
			   color: #04243C;
			   margin-bottom: 4upx;
		   }
		   .list-box-text{
			   margin-top: 26upx;
			   font-size: 28upx;
			   color: #39424C;
			   overflow: hidden;
			   text-overflow: ellipsis;
			   -webkit-box-orient: vertical; 
			   display: -webkit-box;-webkit-line-clamp: 1; 
			   word-break:break-all;
		   }
	   }
    }
	.articl-recommend{
		.articl-box{
			margin-top: 28upx;
			display: flex;
			overflow-x: auto;
			.articl-box-index{
				width: 560upx;
				border-radius: 24upx;
				border: 2upx solid #E4EAEF;
				margin-right: 20upx;
				.box-index{
					padding: 30upx;
					.box-index-title{
						font-size: 32upx;
						font-weight: 600;
						color: #39424C;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical; 
						display: -webkit-box;-webkit-line-clamp: 2; 
						word-break:break-all;
					}
					.box-index-authr{
						margin-top: 30upx;
						font-size: 28upx;
						color: #6E7B84;
					}
				}
			}
		}
	}
    .qa-recommend{
		.qa-box{
			margin-top: 32upx;
			margin-bottom: 60upx;
			
			.qa-box-index{
				background: url(../../static/images/ranking/qa-bg.png) no-repeat 100% / 100%;
				background-position: 0 0;
				margin-right: 20upx;
				width: 560upx;
				min-width: 560upx;
				border: 2upx solid #E4EAEF;
				border-radius: 24upx;
				padding: 30upx;
				box-sizing: border-box;
				.box-index-title{
					font-size: 32upx;
					font-weight: 600;
					color: #02233C;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;-webkit-line-clamp: 2; 
					word-break:break-all;
				}
				.box-index-authr{
					margin-top: 30upx;
					margin-bottom: 20upx;
					/deep/.author-name{
						color: #39424C !important;
					}
				}
				.box-index-text{
					font-size: 28upx;
					color: #6E7B84;
					margin-bottom: 10upx;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;-webkit-line-clamp: 2; 
					word-break:break-all;
				}
			}
			
		}
	}
}
</style>
