<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="256upx" height="150upx"></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" style="margin-right: 50upx;">分享给{{ item.toAname }}</view>
								<view class="withdraw"  v-if="!item.isRead" @click.stop="withdraw(item)">
				 					<image src="../../static/images/icon/withdrawnew.png" mode=""></image>撤回
								</view>   
								<view v-if="item.isRead" style="margin-left:auto ;" class="Viewed">
									已查看
								</view>
								<view v-else style="margin-left:auto ;" class="notViewed">
									未查看
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="item.type == 2">
				<view class="article_one">
					<view>
						<view @click="toArticleDetail(item)" class="articla_tit" >
								<text v-html="$keywordActiveShow(item.title,query.keyword)"></text>
						    </view>
							<text class="articla_text" @click="toArticleDetail(item)" 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">
								<view style="margin-top: 10upx;">
									<text style="font-size: 24upx;color: #999;margin-right: 35upx;">分享给{{item.toAname}}</text>
								</view>
								<view class="rowbtn-right">
									<view class="withdraw"  v-if="!item.isRead" @click.stop="withdraw(item)">
										<image src="../../static/images/icon/withdrawnew.png" mode=""></image>撤回
									</view>
									<view v-if="item.isRead" class="Viewed">
										已查看
									</view>
									<view v-else class="notViewed">
										未查看
									</view>
								</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 class="withdraw"  v-if="!item.isRead" @click.stop="withdraw(item)">
								<image src="../../static/images/icon/withdrawnew.png" mode=""></image>撤回
							</view>
							<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: '全部',
			statusSelectShow: false,
			conType: 1,
			query:{
				pageIndex: 1,
				pageSize: 10,
				keyword:'',
				isRead:null
			},
			courseList:[],
			articleList:[],
			qaList:[],
			count:0,
			loadStatus: 'more', //more,loading,noMore, 应该划分出三个
		};
	},
	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: {
		contentTypeFilter(value) {
			let lmj = String(value)
		    let obj = {};
		    switch (lmj) {
		    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;
		},
		//点击切换类别时请求数据
		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) {
			//生成查询条件
			uni.showLoading({ title: '加载中...' });
			//查询条件
			apiShares.findMeShare(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' 
					});
				}
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 100);
		},
		withdraw(item){
			apiShares.deleteshares(item.shareId).then(res=>{
			          if(res.status == 200){
						  uni.showToast({
							icon:'success',
							title:"撤回成功"
						  })
						  setTimeout(()=>{
							  this.findData(true);
						  },1000)
						  
			          }else{
			            uni.showToast({
			            	icon:'none',
			            	title:"撤回失败"
			            })
			          }
			        })
		},
		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 = $this.$config.fileUrl + author.avatar;
										//实际上根本没有拿到fileUrl
									}else{
										item.avatar=''
									}
									item.sex = author.sex
									item.orgInfo = author.orgInfo;
									return true;
								}
								return false;
							});
						});
					}else{
						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;
							});
						});
					}
				}
			});
		},
		toCourseDetail(citem) {
			// if (citem.contentType == 10) {
				// uni.navigateTo({
				// 	url: '/pages/resource/microDetail?id=' + citem.objId
				// });
			// } else {
				
				uni.navigateTo({
					url: '/pages/study/courseStudy?id=' + citem.id
				});
			// }
		},
		toArticleDetail(item) {
			uni.navigateTo({
				url: '/pages/resource/articeDetail?id=' + item.id
			});
		},
		toQaDetail(item) {
			uni.navigateTo({
				url: '/pages/resource/qaDetail?id=' + item.id
			});
		},
		chooseStatus(e) {
			// this.statusSelectShow = false;
			// this.statusBtn = e.value[0].label;
			this.isRead = e;
			//console.log(this.isRead)
			this.findData(true);
			
		},
		
	}
}
</script>

<style lang="scss" scoped>
	.qa-bottombox{
		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;
	}
	.coures-bottom{
		display: flex;
	}
	.course-author {
		font-size: 26upx;
		color: #666;
	}
	.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;
	}
	.sea-show{
			padding: 20rpx;
			padding-left: 28upx;
			padding-bottom: 10upx;
			.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;
			}
			
		}
	.coursetit-sl{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		word-break:break-all;
		-webkit-line-clamp: 1;
		line-height: 45rpx;
		-webkit-box-orient: vertical;
	}
	.with{
		color: #666;
		font-size: 24rpx;
		line-height: 35rpx;
		image{
					 width: 26rpx;
					 height: 26rpx;
					 margin-right: 10rpx;
					 padding-top: 10rpx;
					 vertical-align: top;
		}
	}
	 .isread{
		 color: #666;
		 font-size: 24rpx;
		 line-height: 35rpx;
		 image{
			 width: 30rpx;
			 height: 30rpx;
			 margin-right: 10rpx;
			 padding-top: 10rpx;
			 vertical-align: top;
		 }
	 }
	.textbtn {
		background-color: #ffffff;
		padding: 18upx 20upx;
		color: #4f4f4f;
		border-radius: 8upx;
		font-size: 28upx;
	}
	
	.top-content-options{
		height: 34px;
		display: flex; 
		align-items: center;
		line-height: 34px;
		padding: 20upx 0upx  0upx 28upx;
		
		.input-search {
			height: 34px;
			padding-right: 10px;
			flex: 1;
			
			// padding: 28upx 20upx;
			.u-input {
				background: #ffffff;
			}
		
			}
	}
	
	
	
/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;
}

.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{
	height: 34px;
	.u-input{
		background: #ffffff;
	}
	// /deep/.u-icon{
	// 	span{
	// 		font-size: 50upx;
	// 		color: #588afc;
	// 	}
	// }
	// /deep/.uni-input-placeholder{
	// 	color: #588afc!important;
	// }
}
.course_box {
	margin-bottom: 20upx;
	background-color: #ffffff;
	padding: 40upx 32upx;
	.course {
		display: flex;
		justify-content: flex-start;
		/deep/ .course-img {
			display: flex;
			justify-content: space-around;
			margin-right: 20upx;
			uni-image{
				border-radius:8upx;
			}
		}

		.course-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-left: 10upx;
			.course-con_source{
				font-size: 28upx;
				color: #444444;
				margin-top: 10rpx;
				padding-bottom: 10rpx;
			}
			
			.common{
				padding: 4upx 15upx;
				border-radius: 2px;
				font-size: 24upx;
				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;
}
	
.art_type{
	// float: left;
}
.articla_tit {
		padding-bottom: 15rpx;
		overflow: hidden;
		font-weight: bold;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-size: 36rpx;
		color: #333;
	}
	.articla_text {
		word-break:break-all;
		font-size: 28rpx;
		color: #666;
		display: -webkit-box;
		line-height: 40rpx;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 10rpx;
	}
.article_one {
	// padding-top: 10px;
   margin-bottom: 20rpx;
   background-color: #fff;
	padding: 36upx 36upx;
	.answers_text {
		// font-size: 14px;
		// color: #797979;
		// display: -webkit-box;
		overflow: hidden;
		width: 80%;
		// line-height: 25upx;
		// -webkit-box-orient: vertical;
		// -webkit-line-clamp: 2;
		
	}
	
	.artical_text_bottom{
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		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: 25px;
		display: flex;
		justify-content: space-between;

		.qa-user {
			display: flex;

			img {
				height: 25px;
				width: 25px;
				margin-right: 5px;
			}
		}
	}

	.qa-body {
		line-height: 40px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-size: 30rpx;
		font-weight: bold;
	}

	.qa-bottom {
		font-size: 30rpx;
		color: #454545;
		display: -webkit-box;
		overflow: hidden;
		line-height: 45rpx;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 4rpx;
		word-break:break-all;
	}

	.qa-answers {
		display: flex;
		overflow: hidden;
		line-height: 20upx;
		width: 100%;
		// height: 70upx;
		margin: 10upx 0upx; 
		padding: 10upx 0;
		font-size: 30rpx;
		color: #5b5b5b;
		answer-one{
			width: 50%;
		}
		answer-two{
			flex: 1;
			word-break:break-all;
			overflow: hidden;
			// display: -webkit-box;
			// -webkit-box-orient: vertical;
			// -webkit-line-clamp: 2;
			display:inline-block;/*转为行内块元素*/
					white-space: pre-wrap;/*处理元素内的空白,保留空白符序列，但是正常地进行换行*/
					word-wrap: break-word;
		}
	}

	.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>
