<template>
	<view>
		<!-- <u-popup :show="show" mode="center" closeable  @close="close">
		    <view>
		        您确定要取消收藏吗？
		    </view>
		</u-popup> -->
		<page-title :showBack="true">我的收藏</page-title>
		<view class="top-tab">
			<view class="top-bar-center">
				<view class="top-bar-tab" @click="clicktab(1)" :class="{ active: conType == 1 }">课程</view>
				<view class="top-bar-tab" @click="clicktab(2)" :class="{ active: conType == 2 }">文章</view>
				<view class="top-bar-tab" @click="clicktab(4)" :class="{ active: conType == 4 }">问答</view>
			</view>
		</view>
		<view v-if="conType == 1">
			<view v-if="courseList.length == 0 && loadStatus == 'noMore'"  class="empt-box">
				<u-empty 
				        text="你还没有收藏哦～"
				        icon="../../static/images/favorite-empt.png">
				</u-empty>
			</view>
			<view v-else >
				<view v-for="(item, idx) in courseList" :key="idx" class="course_box">
					<view class="course" @click="toCourseDetail(item)">
						<view class="course-info">
							<view class="" style="position: relative;">
								<course-image :course="item" width="262upx" height="147upx"></course-image>
								<view class="coureslabel">
									{{ contentTypeFilter(item.contentType).text }}
								</view>
							</view>
							<view class="course-title">
								<view class="course-name">
									<text style="font-weight: bold; font-size: 32rpx;" v-html="$keywordActiveShow(item.title, query.keyword)"></text>
								</view>
								<view class="course-content">
									<author-info :avatar="item.avatar" :name="item.authorName" :info="item.orgInfo" :sex="item.sex"></author-info>
								</view>
							</view>
						</view>
					</view>
					<view class="item-bottom">
						<text class="item-time">收藏时间：{{ item.time }}</text>
						<view class="rowbtn rowbtn-primary">
							<image src="../../static/images/icon/favo.png" mode=""></image>取消收藏
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="conType == 2">
			<view class="empt-box" v-if="articleList.length == 0 && loadStatus == 'noMore'">
				<u-empty
				        text="你还没有收藏哦～"
				        icon="../../static/images/favorite-empt.png">
				</u-empty>
			</view>
			<view v-else  >
				<view class="article_one" v-for="(item, idx) in articleList" :key="idx">
						<view class="articla_tit" @click="toArticleDetail(item)" v-html="$keywordActiveShow(item.title, query.keyword)"></view>
						<text class="articla_text" v-html="$keywordActiveShow(item.summary, query.keyword)"></text>
						<author-info :avatar="item.avatar" :name="item.sysCreateBy" :info="item.orgInfo" :sex="item.sex"></author-info>
						<view class="artical_text_bottom">
							<text class="item-time">收藏时间：{{ item.time }}</text>
							<view class="rowbtn rowbtn-primary">
								<image src="../../static/images/icon/favo.png" mode=""></image>取消收藏
							</view>
						</view>
				</view>
			</view>
			
		</view>
		<view v-if="conType == 4">
			<view class="empt-box" v-if="qaList.length == 0 && loadStatus == 'noMore'">
				<u-empty 
				        text="你还没有收藏哦～"
				        icon="../../static/images/favorite-empt.png">
				</u-empty>
			</view>
			<view >
				<view v-for="(item, idx) in qaList" :key="idx" class="qa">
					<view class="qa-body" @click="toQaDetail(item.question)">
						<text v-if="item.question.isResolve" style="color:#08A890">【已解决】</text>
						<text v-else style="color:#387DF7">
							【待解决】
						</text>
						<text v-html="$keywordActiveShow(item.question.title, query.keyword)"></text>
					</view>
					<author-info :avatar="item.avatar" :name="item.question.sysCreateBy" :info="item.orgInfo" :sex="item.sex"></author-info>
					<view class="qa-bottom" v-html="$keywordActiveShow(item.question.content, query.keyword)"></view>
					<view class="qa-answers" v-if="item.question.isResolve">
						<view style="
						word-break:break-all;
						width: 100%; 
						overflow: hidden; 
						text-overflow: ellipsis;
						-webkit-box-orient: vertical; 
						display: -webkit-box;-webkit-line-clamp: 2; 
						line-height: 35rpx;
						overflow: hidden;text-overflow: ellipsis;
						font-size: 28rpx;
						">
						<text style="color: #FFB30F; " class="answertext" >最佳回答：</text>	{{ item.question.bestAnswer }}
						</view>
					</view>
					<view class="item-bottom">
						<text class="item-time">收藏时间：{{ item.time }}</text>
						<view style="margin-top: 10upx;" class="rowbtn rowbtn-primary">
							<image src="../../static/images/icon/favo.png" mode=""></image>取消收藏
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- <view v-show="count > query.pageSize"><uni-load-more :status="loadStatus"></uni-load-more></view> -->
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import apiFavorites from '@/api/modules/favorites.js';
import apiUser from '@/api/system/user.js';
export default {
	computed: mapState(['resourceTab']),
	data() {
		return {
			isRead:null,
			statusBtn: '全部',
			selectData: [
				[
					{ label: '全部', value: null },
					{ label: '已查看', value: true },
					{ label: '未查看', value: false },
					
				]
			],
			statusSelectShow: false,
			conType: 1,
			query: {
				pageIndex: 1,
				pageSize: 10,
				keyword: ''
			},
			courseList: [],
			articleList: [],
			qaList: [],
			count: 0,
			loadStatus: 'more', //more,loading,noMore, 应该划分出三个
			// show:false,//控制弹出层
			// collectStorge:{},//用于存储点击取消收藏的数据
		};
	},
	onLoad: function(options) {
		this.findData(true);
	},
	onPullDownRefresh() {
		this.onReachBottom();
	},
	async onReachBottom() {
		if (this.conType == 1) {
			if (this.courseList.length < this.count) {
				this.loadStatus = 'loading';
				this.query.pageIndex++;
				await this.findData(false);
				this.loadStatus = 'more';
			} else {
				this.loadStatus = 'noMore';
			}
		}
		if (this.conType == 2) {
			if (this.articleList.length < this.count) {
				this.loadStatus = 'loading';
				this.query.pageIndex++;
				await this.findData(false);
				this.loadStatus = 'more';
			} else {
				this.loadStatus = 'noMore';
			}
		}
		if (this.conType == 4) {
			if (this.qaList.length < this.count) {
				this.loadStatus = 'loading';
				this.query.pageIndex++;
				await this.findData(false);
				this.loadStatus = 'more';
			} else {
				this.loadStatus = 'noMore';
			}
		}
	},
	methods: {
		//点击切换类别时请求数据
		clicktab(val) {
			this.conType = val;
			this.query.pageIndex = 1;
			this.query.keyword = '';
			this.isRead = null;
			this.query.isRead = null;
			this.statusBtn = '全部'
			this.findData(true);
		},
		//查找数据
		findData(flag) {
			//是否重置列表
			if (flag) {
				if (this.conType == 1) {
					this.courseList = [];
				}
				if (this.conType == 2) {
					this.articleList = [];
				}
				if (this.conType == 4) {
					this.qaList = [];
				}
			}
			this.query.isRead = this.isRead;
			//生成查询条件
			uni.showLoading({ title: '加载中...' });
			//查询条件
			const conList = {
				1: 'coursePageList',
				2: 'articlePageList',
				4: 'qaPageList'
			};
			apiFavorites[conList[this.conType]](this.query).then(rs => {
				if (rs.status == 200) {
					this.count = rs.result.count;
					let userIds = [];
					if (this.conType == 1) {
						rs.result.list.forEach(item => {
							item.avatar = '';
							item.orgInfo = '';
							item.sex = null;
							userIds.push(item.authorId);
							this.courseList.push(item);
							this.loadUserInfos(rs.result.list, userIds);
						});
					}
					if (this.conType == 2) {
						rs.result.list.forEach(item => {
							item.avatar = '';
							item.orgInfo = '';
							item.sex = null;
							userIds.push(item.sysCreateAid);
							this.articleList.push(item);
							this.loadUserInfos(rs.result.list, userIds);
						});
					}
					if (this.conType == 4) {
						rs.result.list.forEach(item => {
							item.avatar = '';
							item.orgInfo = '';
							item.sex = null;
							userIds.push(item.question.sysCreateAid);
							this.qaList.push(item);
							this.loadUserInfos(rs.result.list, userIds);
						});
					}
				} else {
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
				}
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 100);
		},
		loadUserInfos(list, userIds) {
			let $this = this;
			const noReapetIds = [...new Set(userIds)];
			apiUser.getByIds(noReapetIds).then(res => {
				if (res.status == 200) {
					if (this.conType == 2) {
						list.forEach(item => {
							res.result.some(author => {
								if (author.aid == item.sysCreateAid) {
									if (author.avatar != '') {
										item.avatar =  author.avatar;
									} else {
										item.avatar = '';
									}
									item.sex = author.sex;
									item.orgInfo = author.orgInfo;
									return true;
								}
								return false;
							});
						});
					} else if (this.conType == 1){
						list.forEach(item => {
							res.result.some(author => {
								if (author.aid == item.authorId) {
									if (author.avatar != '') {
										item.avatar =  author.avatar;
									} else {
										item.avatar = '';
									}
									item.sex = author.sex;
									item.orgInfo = author.orgInfo;
									return true;
								}
								return false;
							});
						});
					}
					else if (this.conType == 4) {
						list.forEach(item => {
							res.result.some(author => {
								if (author.aid == item.question.sysCreateAid) {
									if (author.avatar != '') {
										item.avatar =  author.avatar;
									} else {
										item.avatar = '';
									}
									item.sex = author.sex;
									item.orgInfo = author.orgInfo;
									return true;
								}
								return false;
							});
						});
					}
				}
			});
		},
		chooseStatus(e) {
			
			this.statusSelectShow = false;
			this.statusBtn = e.value[0].label;
			this.isRead = e.value[0].value;
			//console.log(this.isRead)
			this.findData(true);
			
		},
		toCourseDetail(citem) {
			if (citem.contentType == 10) {
				uni.navigateTo({
					url: '/pages/resource/microDetail?id=' + citem.objId
				});
			} else if (citem.contentType == 20 || citem.contentType == 21) {
				uni.navigateTo({
					url: '/pages/resource/courseDetail?id=' + citem.objId
				});
			}
		},
		toArticleDetail(item) {
			uni.navigateTo({
				url: '/pages/resource/articeDetail?id=' + item.articleId
			});
		},
		toQaDetail(item) {
			uni.navigateTo({
				url: '/pages/resource/qaDetail?id=' + item.id
			});
		},
		contentTypeFilter(value) {
			let obj = {};
			switch (value) {
				case '10': {
					obj.class = 'uc-course-type2';
					obj.text = '录播';
					break;
				}
				case '21': {
					obj.class = 'uc-course-type2';
					obj.text = '直播';
					break;
				}
				case '20': {
					obj.class = 'uc-course-type2';
					obj.text = '录播';
					break;
				}
				case '30': {
					obj.class = 'uc-course-type2';
					obj.text = '面授';
					break;
				}
				case '90': {
					obj.class = 'uc-course-type2';
					obj.text = '混合';
					break;
				}
			}
			return obj;
		},
		delCollectItem(item) {

			apiFavorites.del(item.id).then(res => {
				if (res.status == 200) {
					uni.showToast({
					title:"取消收藏成功" ,
					duration: 1000
					});
					setTimeout(()=>{
						this.findData(true)
					},1000)
				} else {
					uni.showToast({
						title: "操作失败",
						icon:'none' 
						});
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.empt-box{
		height: 64vh;
		background: #fff;
		padding-top: 300upx;
	}
	.coureslabel{
		width: 78upx;
		height: 32upx;
		background: #2C2C2C;
		color: #FFFFFF;
		text-align: center;
		line-height: 32upx;
		font-weight: normal;
		font-size: 20upx;
		border-radius: 6upx;
		opacity: 0.52;
		position: absolute;
		right: 12upx;
		top: 104upx;
	}
	.rowbtn{
		image{
			width: 36upx;
			height: 36upx;
			vertical-align: bottom;
		}
	}
	.rowbtn-primary{
		font-size: 24upx;
		color: #999999;
		font-weight: 400;
		// background-color: #ebf3fe;
	}
	.item-box{
		padding: 15px;
	}
	.item-time{
		margin-top: 14upx;
		font-size: 13px;
		color: #999999;
	}
	.item-bottom{
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}
	
/deep/.filter .btn-box > uni-view {
	border: solid 0.5px #ffb30f;
}

/deep/.filter .btn-box .submit {
	background-color: #ffb30f;
}

/deep/.filter .btn-box > uni-view {
	border: solid 0.5px #ffb30f;
}

/deep/.filter .btn-box .reset {
	color: #ffb30f;
}

/deep/.filter .menu-box .box .labels .on {
	border-color: #ffb30f;
	background-color: #ffb30f;
}

/deep/.filter .menu-box .box .labels > uni-view {
	width: 125px;
	padding-left: 5px;
	padding-right: 5px;
}

/deep/.sub-menu-list .sub-menu > .menu-name > .iconfont {
	color: #ffb30f;
}

/deep/.sub-menu-list.alone .sub-menu {
	border-bottom: 0;
}

/deep/.nav .first-menu.on {
	color: #ffb30f;
}

/deep/.sub-menu-list.alone .sub-menu.on {
	color: #ffb30f;
}

/deep/.u-tabs__wrapper__nav {
	display: flex;
	justify-content: space-around;
}

.textbtn {
		background-color: #ffffff;
		padding: 8px 10px;
		color: #4f4f4f;
		border-radius: 8upx;
		font-size: 24upx;
	}
.top-tab {
	height: 50px;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	line-height: 60px;
	color: #373737;
	.top-bar-center {
		display: flex;
		font-size: 30upx;
		// margin-left: 40upx;
		.top-bar-tab {
			margin: 0upx 50upx;
		}
		.active {
			border-bottom: 2px solid #588afc;
			// color: #5282eb;
			font-size: 35upx;
			font-weight: bold;
		}
	}

	.top-tab-left {
		display: flex;
		justify-content: space-around;
		width: 100%;
		text-align: center;
	}

	.top-tab-line {
		width: 50px;
		height: 3px;
		background: #ffffff;
		margin-top: -5px;
	}
}

.input-search {
	padding-right: 10px;
	flex: 1;
	// padding: 28upx 20upx;
	.u-input {
		background: #ffffff;
		
	}
	/deep/ .u-search{
		border-radius: 8upx;
	}
	// /deep/.u-icon {
	// 	span {
	// 		font-size: 50upx;
	// 		color: #588afc;
	// 	}
	// }
	// /deep/.uni-input-placeholder{
	// 	color: #588afc!important;
	// }
}

.top-content-options{
		height: 40px;
		display: flex;
		align-items: center;
		line-height: 40px;
		padding: 28upx 0upx  0upx 28upx;
		
		.input-search {
			flex: 1;
			// margin-right: 50rpx;
			// padding: 28upx 20upx;
			.u-search {
				background: #ffffff;
			}
		// 	/deep/.u-icon {
		// 		span {
		// 			font-size: 50upx;
		// 			color: #588afc;
		// 		}
		
		// 	}
			}
	}

.course_box {
	margin-bottom: 20upx;
	background-color: #ffffff;
	padding: 28upx 28upx;
	.course {
		// display: flex;
		// justify-content: flex-start;
		.common {
			padding: 4upx 20upx;
			border-radius: 2px;
			font-size: 24upx;
			color: #fff;
			margin-right: 20upx;
		}
		.uc-course-type1 {
			background: #588afc;
		}
		.uc-course-type2 {
			background: #ffb30f;
		}
		/deep/ .course-info {
			display: flex;
			uni-image{
				// border-radius:8upx;
			}
			.course-title{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 147upx;
				margin-left: 10rpx;
				padding-bottom: 10upx;
				.course-name{
					// height: 70upx;
					  display: -webkit-box;
					  // white-space:pre-wrap;
					  word-wrap: break-word;
					  word-break:break-all;
					  overflow: hidden;
					  text-overflow:ellipsis;
					  -webkit-box-orient: vertical;
					  -webkit-line-clamp: 2;
				}
			}
			.course-content {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-top: 40rpx;
				font-size: 13px;
				color: #999999;
			}
		}
	}
	
}

.noCollect {
	padding-top: 20rpx;
	padding-bottom: 50rpx;
		.nocollright{
			float: left;
            color: #666;
            font-size: 24rpx;
            line-height: 40rpx;
			padding-left: 5rpx;
			padding-bottom: 15rpx;
		}
	}


.article-center {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}

.article {
	background: #f8fbfd;
}

.article_one {
	margin-bottom: 20rpx;
	background-color: #ffffff;
	padding: 19upx 28upx;
	padding-top: 28upx;
	.articla_tit {
		line-height: 45rpx;
		padding-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 32upx;
		color: #333333;
		font-weight: bold;
		
	}
.answertext{
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	word-break:break-all;
	text-overflow: ellipsis;
}
	.articla_text {
		word-break:break-all;
		font-size: 28upx;
		color: #666;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 10rpx;
	}
	.artical_text_bottom {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		// padding-bottom: 20rpx;
	}
	
}

.qa {
	padding: 28upx 30upx;
	margin-bottom: 20rpx;
	box-shadow: #f7f7f7 0px 6px 5px;
	border-radius: 4px;
	background: #ffffff;
	.qa-header {
		height: 26px;
		line-height: 50rpx;
		display: flex;
		justify-content: space-between;
		.qa-user {
			display: flex;
			img {
				height: 25px;
				width: 25px;
				margin-right: 5px;
			}
		}
	}

	.qa-body {
		font-weight: 500;
		word-break:break-all;
		width: 100%; 
		overflow: hidden; 
		text-overflow: ellipsis;
		-webkit-box-orient: vertical; 
		display: -webkit-box;
		-webkit-line-clamp: 2; 
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 32upx;
		margin-bottom: 26upx;
	}

	.qa-bottom {
		margin-top: 22upx;
		word-break:break-all;
		font-size: 14px;
		color: #7f7f7f;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		
	}

	.qa-answers {
		font-size: 28rpx;
		color: #5b5b5b;
		display: flex;
		overflow: hidden;
		line-height: 20upx;
		width: 100%;
		// height: 70upx;
		margin: 10upx 0upx; 
		padding: 10upx 0;
	}

	.qa-text {
		font-size: 24rpx;
		color: #9d9d9d;
		margin-right: 10px;
	}
	
}

.details {
	height: 127px;
	border-bottom: 1px solid #e3e3e3;
}
.newest {
	width: 60px;
	height: 31px;
	background: #ffffff;
	font-size: 11px;
	border-radius: 4px;
	color: #505050;
	text-align: center;
	line-height: 31px;
	margin-top: 2px;
	margin-left: 9px;
}

.hottest {
	background: #dfebf4;
	color: #5ba2fc;
}

.big_top {
	height: 37px;
}

.big_box_top {
	display: flex;
	height: 80upx;
	padding: 30upx 0;
}

.big-box_center {
	height: 173px;
	margin-top: 9px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.llef {
	width: 168px;
	height: 172px;
	border-radius: 4px;
	background: #ffffff;
	box-shadow: #f1f6fe 0px 6px 5px;
}

.llef img {
	width: 168px;
	height: 96px;
}
</style>
