<template>
	<view>
		<page-title :showBack="true">分享给我的</page-title>
		<view v-for="(item,index) in dataList.list" :key="index">
		  <view v-if="item.type == 1">
			<view class="course_box">
				<view class="course" @click="toCourseDetail(item)">
					<view class="course-img" 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-content">
						<text style="height: 100upx;margin-top: 6upx;" v-html="$keywordActiveShow(item.title,query.keyword)"></text>
						<view class="coures-bottom">
						<view class="course-author" >{{ item.authorName }}分享给我</view>
						<view style="margin-left: auto;display: flex;">
							<view v-if="item.isRead" class="Viewed" >
								已查看
							</view>
							<view v-else class="notViewed" >
								未查看
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

		<view v-if="item.type == 2">
			<view class="article_one" @click="toArticleDetail(item)">
					<view class="articla_tit">{{ $keywordActiveShow(item.title,query.keyword) }}</view>
					<text class="articla_text" v-html="$keywordActiveShow(item.summary,query.keyword)"></text>
					<view class="artical_text_bottom">
						<view style="margin-top: 10upx;">
						   <text style="font-size: 24upx;color: #999;margin-right: 35upx;">{{ item.sysCreateBy }}分享给我</text>
						</view>
						<view class="rowbtn-right">
							<view v-if="!item.isRead" class="Viewed">
								已查看
							</view>
							<view v-else class="notViewed">
								未查看
							</view>
						</view>
					</view>
				
			</view>
		</view>
		<view v-if="item.type == 4">
		<view  class="qa" >
				<view class="qa-body" @click="toQaDetail(item.question)">
					<text v-html="$keywordActiveShow(item.question.title,query.keyword)"></text>
				</view>
				<view class="qa-bottom" @click="toQaDetail(item.question)" v-html="$keywordActiveShow(item.question.content,query.keyword)"></view>
				<view class="qa-bottombox">
					<view class="qa-bottom-left">
						<text style="font-size: 24upx;color: #999;margin-top: 10upx;" @click="toQaDetail(item.question)">分享给{{item.toAname}}</text>
					</view>
					<view class="rowbtn-right" style="margin-left: auto;">
						<view v-if="item.isRead" class="Viewed">
							已查看
						</view>
						<view v-else class="notViewed">
							未查看
						</view>
					</view>
				</view>
			</view>
		
		</view>
		</view>
		<view v-show="count>dataList.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';
export default {
	computed: mapState(['resourceTab']),
	data() {
		return {
			dataList: {
				    pageIndex: 1,
				    pageSize: 10,
				    keyword: '',
				    count: 0,
				    list: []
			},
			isRead:null,
			statusBtn: '全部',
			selectData: [
				[
					{ label: '全部', value: null },
					{ label: '已查看', value: true },
					{ label: '未查看', value: false },
					
				]
			],
			statusSelectShow: false,
			conType: 1,
			query:{
				pageIndex: 1,
				pageSize: 10,
				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.dataList.list.length<this.count){
				this.loadStatus='loading';
				this.query.pageIndex++;
				await this.findData(false);
				this.loadStatus='more';
			}else{
				this.loadStatus='noMore';
			}
	},
    methods: {
		//查找数据
		findData(flag) {
			//生成查询条件
			uni.showLoading({ title: '加载中...' });
			apiShares.findShareMe(this.query).then(rs => {
				if (rs.status == 200) {
					this.count=rs.result.count
					rs.result.list.forEach(item => {
					    if(item.type == 4) {
					     item.question = {isResolve:false,title:'',content:'',bestAnswer:''};
					     item.question.isResolve=item.isResolve;
					     item.question.title=item.title;
					     item.question.content=item.content;
					     item.question.bestAnswer=item.bestAnswer;
					     item.question.id=item.id;
					}
					    if(item.type == 3){
							item.cases = {title:'',summary:''};
							item.cases.title=item.title;
							item.cases.summary=item.content;
							item.cases.id=item.id;
				}
								
		});
					   if(flag){
					    this.dataList.list = rs.result.list;
				     }else{
						this.dataList.list.push(...rs.result.list);
				  }
					
				}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 lmj = String(value)
		    let obj = {};
		    switch (lmj) {
		    case '10': {
		          obj.text = '录播';
		          break;
		        }
		    case '21': {
		          obj.text = '直播';
		          break;
		        }
		    case '20': {
		          obj.text = '录播';
		          break;
		        }
		    case '30': {
		          obj.text = '面授';
		          break;
		        }
		    case '90': {
		          obj.text = '混合';
		          break;
		        }
		    }
		    return obj;
		},
	}
}
</script>

<style lang="scss" scoped>
	.qa-bottombox{
		display: flex;
	}
	.coures-bottom{
		display: flex;
	}
	.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;
	}
	.withdraw{
		font-size: 24upx;
		color: #666666;
		line-height: 38upx;
		margin-right: 46upx;
		image{
			width: 28upx;
			height: 28upx;
			vertical-align: middle;
		}
	}
	.Viewed{
		font-size: 24upx;
		color: #999999;
		line-height: 38upx;
	}
	.notViewed{
		font-size: 24upx;
		color: #FD3F1A;
		line-height: 38upx;
	}
	.rowbtn-right{
		margin-top: 10upx;
		display: flex;
		justify-content: flex-end;
	}
	.rowbtn{
		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;
	}
	
}
.course_box {
	margin-bottom: 20upx;
	background-color: #ffffff;
	padding: 40upx 32upx;
	/deep/ .course {
		display: flex;
		justify-content: flex-start;
		uni-image{
			border-radius:8upx;
		}
		.course-img {
			display: flex;
			justify-content: space-around;
			margin-right: 20upx;
		}

		.course-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-left: 10upx;
			.course-con_source{
				font-size: 28upx;
				color: #444;
				margin-top: 10rpx;
				padding-bottom: 10rpx;
			}
			.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 {
		font-weight: bold;
		padding-bottom: 15rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-size: 36upx;
		color: #333;
		word-break:break-all;
	}

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

.qa {
	padding: 36upx 36upx;
	box-shadow: #f7f7f7 0px 6px 5px;
	border-radius: 4px;
	background: #ffffff;
	margin-bottom: 20upx;
	padding-bottom: 15rpx;
	.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 {
		margin-top: 18upx;
		font-size: 30upx;
		color: #454545;
		display: -webkit-box;
		margin-bottom: 20rpx;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		word-break:break-all;
	}

	.qa-answers {
		display: flex;
		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>
