<template>
	<view>
		<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 class="top-content-options">
			<!-- 是否已查看 -->
			<view style="margin-right: 20upx;">
				<!-- <u-picker :show="statusSelectShow" @cancel="statusSelectShow = false" @confirm="chooseStatus" :columns="selectData" keyName="label"></u-picker> -->
				<!-- <text class="textbtn" @click="statusSelectShow = true">{{ statusBtn }}</text> -->
				<text class="textbtn" @click="statusSelectShow = !statusSelectShow">状态</text>
			</view>
			<!--课程-->
			<view class="input-search">
				<u-search
				 
				    :clearabled="true"
					v-model="query.keyword"
					placeholder="输入关键词"
					@search="findData(true)"
					@clear="findData(true)"
					:showAction="false"
					shape="square"
					bgColor="#ffffff"
				>
					<!-- <template slot="suffix">
						<u-icon @click="findData(true)" name="search"></u-icon>
					</template> -->
				</u-search>
			</view>
		</view>
		<view class="sea-show" v-show="statusSelectShow">
			<text @click="chooseStatus(null)" :class="[isRead == null?'sea-active':'','sea-index' ]">全部</text>
			<text @click="chooseStatus(true)" :class="[isRead == true?'sea-active':'','sea-index' ]">已查看</text>
			<text @click="chooseStatus(false)" :class="[isRead == false?'sea-active':'','sea-index' ]">未查看</text>
		</view>
		<view v-if="conType == 1">
			<view v-for="(item, idx) in courseList" :key="idx" class="course_box">
				<view class="course" @click="toCourseDetail(item)">
					<view><course-image :course="item" width="262upx" height="147upx"></course-image></view>
					<view class="course-content">
						<view><span class="common" :class="contentTypeFilter(item.contentType).class">{{ contentTypeFilter(item.contentType).text }}</span><span style="font-weight: bold;font-size: 32upx;" v-html="$keywordActiveShow(item.title,query.keyword)"></span></view>
						<view class="course-con_source">分享日期：{{ item.time }}</view>
						<view class="course-author">
							{{ item.authorName }}分享给我
						</view>
					</view>
				</view>
			<!-- 	<view><interact-bar :data="item" :shares="false" :views="false"></interact-bar></view> -->
		<!-- 	<view class="">
				<text class="isread" v-if="!item.isRead">
					<image style="height: 26rpx;" src="../../static/images/icon/noread.png" mode=""></image>
					未查看</text>
				<text  class="isread" v-else>
						<image style="margin-top: -5rpx;" src="../../static/images/icon/isread.png" mode=""></image>
					已查看</text>
			</view> -->
			<view class="rowbtn-right">
				<view class="rowbtn rowbtn-info" v-if="item.isRead">
					<u-icon name="eye-fill" color="#767676" labelColor="#767676" label="已查看" size="16" labelSize="12"></u-icon>
				</view>
				<view class="rowbtn rowbtn-info" v-else>
					<u-icon name="eye-off" color="#767676" labelColor="#767676" label="未查看" size="16" labelSize="12"></u-icon>
				</view>
			</view>
			</view>
		</view>

		<view v-if="conType == 2">
			<view class="article_one" v-for="(item, idx) in articleList" :key="idx" @click="toArticleDetail(item)">
			
					<view class="articla_tit">
						<text v-if="item.isRead" style="color:#3e7fff;margin-right: 8upx">
							[已查看]
						</text>
						<text v-else style="color:#FF3E3E;margin-right: 8upx">
							[未查看]
						</text>
						{{ $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 style="font-size: 26rpx;color: #9d9d9d;">{{item.time}}</text>
						<text style="font-size: 26rpx;color: #666666;margin-right: 35upx;">{{ item.sysCreateBy }}分享给我</text>
					</view>
				<!-- 	<view style="margin-top: 8px;"><interact-bar :data="item" :shares="false"></interact-bar></view> -->
				  <!-- <view class=""> -->
				  	<!-- <text class="isread" v-if="item.isRead">
				  	 	<image style="height: 26rpx;" src="../../static/images/icon/noread.png" mode=""></image>
				  	 	未查看</text>
				  	 <text  class="isread" v-else>
				  	 		<image style="margin-top: -5rpx;" src="../../static/images/icon/isread.png" mode=""></image>
				  	 	已查看</text> -->
				  <!-- </view> -->
				
			
			</view>
		</view>
		<view v-if="conType == 4">
			<view v-for="(item, idx) in qaList" :key="idx" class="qa" @click="toQaDetail(item)">
				<view class="qa-body" >
					<text v-if="item.question.isResolve" style="color:#08A890;margin-right: 8upx">[已解决]</text>
					<text v-else style="color:#588afc;margin-right: 8upx">
						[待解决]
					</text>
					<text v-html="$keywordActiveShow(item.question.title,query.keyword)"></text>
				</view>
				<view class="qa-bottom" v-html="$keywordActiveShow(item.question.content,query.keyword)"></view>
				<!-- <author-info :avatar="item.avatar" :name="item.question.sysCreateBy" :info="item.orgInfo"></author-info> -->
				
				<view class="qa-answers" v-if="item.question.isResolve">
					
					<view class="answer-two" 
					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;" >最佳回答：</text>
						{{ item.question.bestAnswer }}
					</view>
					
				</view>
				<text class="qa-text">{{item.time}}</text>
				<text style="font-size: 26rpx;color: #666666">{{ item.sysCreateBy }}分享给我</text>
				<!-- <view class="qa-bar"><interact-bar :data="item.question" :praises="false" :views="false"></interact-bar></view> -->
			<!-- 	<view class="">
					<text class="isread" v-if="item.isRead">
						<image style="height: 26rpx;" src="../../static/images/icon/noread.png" mode=""></image>
						已查看</text>
					<text  class="isread" v-else>
						<image style="margin-top: -5rpx;" src="../../static/images/icon/isread.png" mode=""></image>
						未查看</text>
				</view> -->
				<view class="rowbtn-right">
					<view class="rowbtn rowbtn-info" v-if="item.isRead">
						<u-icon name="eye-fill" color="#767676" labelColor="#767676" label="已查看" size="16" labelSize="12"></u-icon>
					</view>
					<view class="rowbtn rowbtn-info" v-else>
						<u-icon name="eye-off" color="#767676" labelColor="#767676" label="未查看" size="16" labelSize="12"></u-icon>
					</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 apiShares from '@/api/modules/shares.js';
import apiUser from '@/api/system/user.js';
// import apiShares from '@/api/modules/shares.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: 4,
				keyword:'',
				isRead:null
			},
			courseList:[],
			articleList:[],
			qaList:[],
			count:0,
			loadStatus: 'more', //more,loading,noMore, 应该划分出三个
			running:false,
		};
	},
	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(this.running){
				return;
			}
			this.running=true;
			let $this = this;
			//是否重置列表
			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: 'mymecourselist',
				2: 'mymearticlelist',
				4: 'mymeqalist'
			};
			apiShares[conList[this.conType]](this.query).then(rs => {
				if (rs.status == 200) {
					this.count=rs.result.count
					
					if(this.conType==1){
						
						rs.result.list.forEach(item=>{
							$this.courseList.push(item)
						})

					}else if(this.conType==2){
						let userIds = [];
						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);
					}else  if(this.conType==4){
						let userIds = [];
						rs.result.list.forEach(item=>{
							item.avatar=''
							item.orgInfo='';
							item.sex=null;
							userIds.push(item.question.sysCreateAid);
							$this.qaList.push(item)
						});
						$this.loadQaUserInfos(rs.result.list,userIds);
					}
				}else{
					uni.showToast({
					title: "获取数据失败",
					icon:'none' 
					});
				}
				this.running=false;
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 100);
		},
		loadUserInfos(list, userIds) {
			let $this = this;
			const noReapetIds = [...new Set(userIds)];
			if(noReapetIds.length==0){
				return;
			}
			if(noReapetIds[0]==null){
				return;
			}
			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.$config.fileUrl + author.avatar;
										//实际上根本没有拿到fileUrl
									}else{
										item.avatar=''
									}
									item.sex = author.sex;
									item.orgInfo = author.orgInfo;
									return true;
								}
								return false;
							});
						});
					
				}
			});
		},
		loadQaUserInfos(list, userIds) {
			let $this = this;
			const noReapetIds = [...new Set(userIds)];
			if(noReapetIds.length==0){
				return;
			}
			if(noReapetIds[0]==null){
				return;
			}
			apiUser.getByIds(noReapetIds).then(res => {
				if (res.status == 200) {
					list.forEach(item => {
						res.result.some(author => {
							if (author.aid == item.question.sysCreateAid) {
								if (author.avatar != '') {
									item.avatar = $this.$config.fileUrl + author.avatar;
									//实际上根本没有拿到fileUrl
								}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;
			//console.log(this.isRead)
			this.findData(true);
			
		},
		toCourseDetail(citem) {
			if(!citem.isRead){
				apiShares.updateIsRead(citem.id).then(res=>{
					if(res.status==200){
					}
				})
			}
			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) {
			if(!item.isRead){
				apiShares.updateIsRead(item.id).then(res=>{
					if(res.status==200){
					}
				})
			}
			uni.navigateTo({
				url: '/pages/resource/articeDetail?id=' + item.objId
			});
		},
		toQaDetail(item) {
			if(!item.isRead){
				apiShares.updateIsRead(item.id).then(res=>{
					if(res.status==200){
					}
				})
			}
			uni.navigateTo({
				url: '/pages/resource/qaDetail?id=' + item.question.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;
		},
	}
}
</script>

<style lang="scss" scoped>
	.rowbtn-right{
		margin-top: 10upx;
		display: flex;
		justify-content: flex-end;
	}
	.rowbtn{
		padding: 5px 8px 0px 8px; 
		height: 20px;
		border-radius: 10upx;
	}
	.rowbtn-primary{
		background-color: #ebf3fe;
	}
	.rowbtn-info{
		background-color: #f7f7f7;
	}
/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;
}
.sea-show{
		padding: 20rpx 30upx;
		padding-bottom: 0;
		.sea-active{
			border: 1rpx solid #679cfc !important;
			color: #679cfc;
		}
		.sea-index{
			font-size: 26rpx;
			padding: 6rpx 16rpx;
			border: 1rpx solid #ccc;
			border-radius: 20rpx;
			margin-right: 16rpx;
			background-color: #fff;
		}
		
	}
.isread{
		 color: #666;
		 font-size: 24rpx;
		 line-height: 35rpx;
		 image{
			 width: 30rpx;
			 height: 30rpx;
			 margin-right: 10rpx;
			 padding-top: 10rpx;
			 vertical-align: top;
		 }
	 }
.top-content-options{
		// height: 40px;
		display: flex;
		align-items: center;
		// line-height: 40px;
		padding: 20upx 30upx 0upx 30upx;
		
		/deep/ .input-search {
			margin-top: 4upx;
			flex: 1;
			.u-search {
				height: 34px;
				background: #ffffff;
				border-radius: 8upx;
				.u-search__content{
					// border-width:0 !important;
				}
			}
			}
	}

.textbtn {
		background-color: #ffffff;
		padding: 18upx 20upx;
		color: #666;
		border-radius: 8upx;
		font-size: 28upx;
	}

.top-tab {
	height: 50px;
	// background: linear-gradient(to bottom, #6BA0FC, #6297FD);
	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:28upx 20upx;
	.u-input{
		background: #ffffff;
	}
	// /deep/.u-icon{
	// 	span{
	// 		font-size: 50upx;
	// 		color: #588afc;
	// 	}
	// }
	// /deep/.uni-input-placeholder{
	// 	color: #588afc!important;
	// }
}
.course_box {
	// margin-bottom: 10px;
	margin-top: 20upx;
	background-color: #ffffff;
	padding: 20upx 30upx;

	/deep/ .course {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		uni-image{
			border-radius:8px;
		}
		.course-img {
			display: flex;
			justify-content: space-around;
			width: 120px;
			height: 70px;
			margin-right: 5upx;
		}

		.course-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20upx;
			height: 74px;
			margin-top:-12upx;
			.course-con_source{
				font-size: 26upx;
				color: #787878;
			}
			.course-author {
				font-size: 26upx;
				color: #666;
			}
			.common{
				padding: 3upx 20upx;
				border-radius: 2px;
				font-size: 26upx;
				color: #fff;
				margin-right: 20upx;
			}
			.uc-course-type1{
				background: #588afc;
			}
			.uc-course-type2{
				background: #ffb30f;
			}
		}
	}
}

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

.article {
	background: #f8fbfd;
}

.article_one {
	// padding-top: 10px;
	margin-top: 20upx;
	background-color: #fff;
	padding: 20upx 30upx;
	.articla_tit {
		line-height: 50rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-size: 30upx;
		word-break:break-all;
	}

	.articla_text {
		word-break:break-all;
		font-size: 28rpx;
		color: #797979;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 10rpx;
		
	}
	.artical_text_bottom{
		margin-top: 10rpx;
		text{
			margin-right: 10px;
		}
	}
}

.qa {
	padding: 20upx 30upx;
	// margin-top: 20upx;
	// padding: 10px;
	box-shadow: #f7f7f7 0px 6px 5px;
	border-radius: 4px;
	background: #ffffff;
	margin-top: 10px;
	// padding-bottom: 10rpx;

	.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 {
		line-height: 26px;
		// overflow: hidden;
		// text-overflow:ellipsis;
		// white-space: nowrap;
		font-size: 30rpx;
		font-weight: bold;
		
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		word-break:break-all;
		-webkit-line-clamp: 2;
		
	}

	.qa-bottom {
		
		font-size: 15px;
		color: #454545;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		word-break:break-all;
	}

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

	.qa-text{
		font-size: 26rpx;
		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>
