<template>
	<!--搜索页-->
	<view style="background-color: #fff;height: 100vh;">
		<u-toast ref="messager"></u-toast>
		<view style="margin:30upx 30upx; display: flex;">
			<u-icon @click="back()" name="arrow-left" color="#383838" size="22" style="margin-right: 10upx;"></u-icon>
			<u-search
			 bgColor="#F2F5F7"
			 maxlength="20"
			 placeholder="请输入关键字" 
			 v-model="keyword" 
			 :focus="true" 
			 shape="round" 
			 @clear="clearSearch" 
			 @search="searchList" 
			 @custom="searchList"
			 search-icon="search" 
			 :showAction="true" 
			 actionText="搜索" 
			></u-search>
		</view>
		<view v-show="stepIndex!==1" style="margin:30upx 30upx 10upx 30upx;position: relative;border-bottom:1px solid #f0f0f0; display: flex;justify-content: space-between;">
			<view class="con-top">
				<view class="con-tab" >
					<view class="con-tab-item" v-for="(item,index) in conTypeList" :key="index" @click="changeConType(item)"
						:class="{'active':conType==item.type}">{{item.con}}</view>
				</view>
			</view>
			<view v-show="conType==1" style="padding: 15upx 0upx;line-height: 34upx;height: 40upx; font-size: 24upx;">
				<data-filter :type="conType" @reset="resetFilters" @submit="submitFilters"></data-filter>
			</view>
		</view>
		<view v-show="stepIndex==1">
			<view class="words">
				<view class="words-top">
					<view class="words-title" @click="openMore()">
						<text>搜索历史</text>
						<u-icon v-if="!isOpen" name="arrow-down" color="#b3b3b3" size="16"></u-icon>
						<u-icon v-if="isOpen" name="arrow-up" color="#b3b3b3" size="16"></u-icon>
					</view>
					<view class="words-clear" @click="cleanHistory()">
						<image src="../../static/images/icon/del.png" mode="" style="margin-right: 15px;"></image>
					</view>
				</view>
				<view class="words-items">
					<view  v-for="(word,widx) in historyWords" :key="widx" v-if="widx<10" @tap="wordSearch(word)" class="words-item">{{word}}</view>
					<view  v-for="(word,widx) in historyWords" :key="widx" v-if="isOpen && widx>9"  @tap="wordSearch(word)" class="words-item">{{word}}</view>
				</view>
			</view>
			<view class="words">
				<view class="words-top">
					<view class="words-title">热门搜索</view>
					<view class="words-clear" @click="hotSearch()">
						<image v-if="!showHotSearch" src="../../static/images/icon/eye_close.png" mode=""  style="margin-right: 15px;width: 32upx;height: 26upx;"></image>
						<image v-if="showHotSearch" src="../../static/images/icon/eye_open.png" mode=""  style="margin-right: 15px;width: 32upx;height: 26upx;"></image>
					</view>
				</view>
				
				<view class="words-items" v-if="showHotSearch">
					 <view  v-for="(hw,hwidx) in hotWords" :key="hwidx" @tap="wordSearch(hw)" class="words-item">{{hw}}</view>
				</view>
			</view>
		</view>
		<!--查询的列表-->
		<view v-show="stepIndex==2">
			<view v-if="conType==1">
				<view class="tags" v-if="course.filters.length>0">
					 <u-scroll-list :indicator="false">
						<view v-for="(tag, tagIdx) in course.filters" :key="tagIdx" >
							<view class="tag-item">{{tag.text}} </view>
						</view>
					</u-scroll-list>
				</view>
				<view class="items">
					<view v-for="(c,cidx) in course.list" :key="cidx" class="con_box">
						<view class="course" @click="toCoursePage(c)">
							<view class="course-img">
								<view class="course-left">
									<!-- <text v-if="c.type==10" class="course-type">录播</text> -->
									<!-- <text v-if="c.type==20" class="course-type">录播</text> -->
									<!-- <text v-if="c.type=='online-course'" class="course-type">录播</text> -->
									<!-- <text v-if="c.type=='face-course'" class="course-type">面授班</text> -->
									<!-- <text v-if="c.type=='project'" class="course-type">学习项目</text> -->
									<course-image :course="c" width="308upx" height="192upx"></course-image>
								</view>
								<view class="coures-conent">
									<view class="conent-title" v-html="c.name">
									</view>
									<!-- <view class="con-au"> -->
										<!-- <view v-else style="font-size: 24upx; color: #666666;padding-top: 10upx;"> -->
											<!-- <text>发布时间：</text><text>{{c.showTime}}</text> -->
										<!-- </view> -->
									<!-- </view> -->
									<view v-if="c.type==10 || c.type==20" class="item-author" style="display: flex;">
										<text style="font-size: 24upx; color: #666666;">{{c.teacher}}</text>
									</view>
									<view class="statuy-ren">
										<text v-if="c.score" class="stu-f">
											<view style="width: 32upx;height: 32upx;float: left;margin-right: 8upx;">
												<image style="width: 100%;height: 100%" src="../../static/images/icon/scoreicon.png" mode=""></image>
											</view>
										{{converToScore(c.score)}}
										</text>
										<text>{{ c.score }}<text class="statuy-num">{{c.studies}}+</text>人学习</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="empty" v-if="course.list.length==0 && course.loadStatus=='noMore'" >
						<!-- <u-empty icon="search" text=""></u-empty>
						<view class="agreeTip">抱歉暂时没有找到相关内容,</view>
						<view class="agreeTip">
							是否要去<text class="productAgree" @click="toProductAgree">“提个意见”</text>呢
						</view> -->
						<u-empty 
						        text="没有查找到相关内容"
						        icon="../../static/images/seach-empt.png">
						</u-empty>
					</view>
				</view>
				<view v-if="course.count>course.params.pageSize">
					<uni-load-more :status="course.loadStatus"></uni-load-more>
				</view>
			</view>
			<view v-if="conType==2">
				<view class="tags" v-if="article.filters.length>0">
					 <u-scroll-list :indicator="false">
						<view v-for="(tag, tagIdx) in article.filters" :key="tagIdx" >
							<view class="tag-item">{{tag.text}} </view>
						</view>
					</u-scroll-list>
				</view>
				<view class="items">
						<!--每条信息的显示,id,type,title,-->
					<view class="article" v-for="(item,irs) in article.list" :key="irs" @click="toArticlePage(item)">
						<div class="article-content">
							<div class="article-info">
								<view class="article-title">
									<text v-html="$keywordActiveShow(item.title,keyword)"></text>
									<!-- {{ item.title }} -->
								<!-- 	<text style="font-size: 14px;line-height: 40upx; color: #BBBBBB;font-weight: 400; float: right;">
										{{item.sysCreateTime.substring(0,10)}}
									</text> -->
								<!-- 	<text v-if="item.coverurl==''"  style="font-size: 14px;line-height: 40upx; color: #BBBBBB;font-weight: 400; float: right;padding-top: 0rpx;">
										{{item.sysCreateTime.substring(0,10)}}
									</text> -->
								</view>
								<view style="display: flex;justify-content: space-between;">
									<view>
										
										<view>
											<view class="article-summary" >{{ item.summary }}</view>
										</view>
									</view>
									<view v-if="item.coverurl!=''" class="article-img" style="margin-top: 30rpx;">
										<image :src="fileUrl+item.coverurl" style="width: 157rpx;height: 118rpx;border-radius: 15rpx;"></image>
									</view> 
								</view>
								<!-- <view class="article-author" style="display: flex;">
									<author v-if="item.authorInfo" :showInfo="true" :data="item.authorInfo"></author>
									<text v-if="item.coverurl!=''" style="padding-top: 13rpx;padding-left: 9rpx; font-size: 14px;line-height: 40upx; color: #BBBBBB;font-weight: 400; float: right;">
										{{item.sysCreateTime.substring(0,10)}}
									</text>
								</view>
								<view v-if="item.coverurl==''" >
									<view class="article-summary" >{{ item.summary }}</view>
								</view> -->
								<view class="article-bottom">
									<view class="article-author" style="display: flex;">
										<author v-if="item.authorInfo" :showInfo="true" :data="item.authorInfo"></author>
										<!-- <text style="padding-top: 13rpx;padding-left: 9rpx; font-size: 18rpx;line-height: 40upx; color: #BBBBBB;font-weight: 400; float: right;">
											{{item.sysCreateTime.substring(0,10)}}
										</text> -->
									</view>
									<view class="article-inter">
										<interact-bar :data="item"></interact-bar>
									</view>
								</view>
							</div>
							<!-- <div v-if="item.coverurl!=''" class="article-img">
								<image :src="fileUrl+item.coverurl" style="width: 100px;height: 75px;"></image>
							</div> -->
						</div>
					</view>
					<view v-if="article.list.length==0 && article.loadStatus=='noMore'" class="empty">
						<!-- <u-empty icon="search" text=""></u-empty>
						<view class="agreeTip">抱歉暂时没有找到相关内容,</view>
						<view class="agreeTip">
							是否要去<text class="productAgree" @click="toProductAgree">“提个意见”</text>呢
						</view> -->
						<u-empty
						        text="没有查找到相关内容"
						        icon="../../static/images/seach-empt.png">
						</u-empty>
					</view>
				</view>
				<view v-if="article.count>article.params.pageSize">
					<uni-load-more :status="article.loadStatus"></uni-load-more>
				</view>
			</view>
			<view v-if="conType==4">
				<view class="tags" v-if="qa.filters.length>0">
					 <u-scroll-list :indicator="false">
						<view v-for="(tag, tagIdx) in qa.filters" :key="tagIdx" >
							<view class="tag-item">{{tag.text}} </view>
						</view>
					</u-scroll-list>
				</view>
				<view class="items">
					<view class="qa" v-for="(item,irs) in qa.list" :key="irs" @click="toQaPage(item)">
						<view class="content">
							<view class="content-list">
								<view class="content-title" style="margin-left: -10upx;">
									<text v-if="item.isResolve" class="qa-solve" >【已解决】</text>
									<text v-else class="qa-unSolve">【待解决】</text>
									<text v-html="$keywordActiveShow(item.title,keyword)"></text>
								</view>
							</view>
							<view class="item-author" style="display: flex;padding: 0 10upx;">
								<view style="font-size: 28upx;color: #666666;">
									{{ item.sysCreateBy }}
								</view>
								<text style="color: #999; font-size: 24upx; margin-left: auto;">
									{{item.sysCreateTime.substring(0,10)}}
								</text>
							</view>
							<view class="content-listtwo">
								<view class="list-details">
									<view class="list-text" >{{item.content }}</view>
									<view class="list-best" v-if="item.isResolve" >
										<text style="color:#FFB30F">最佳回答：</text>
									{{item.bestAnswer}}</view>
								</view>
								<view style="margin-left: 10rpx;" v-if="item.images != ''">
									<image :src="fileUrl+item.images" style="width: 157rpx;height: 118rpx;border-radius: 15rpx;"></image>
								</view>
							</view>
							<view style="margin-top: 10px;">
								<interact-bar :comments="false" :answers="true" :data="item"></interact-bar>
							</view>
						</view>
					</view>
					
					<view v-if="qa.list.length==0 && qa.loadStatus=='noMore'" class="empty">
						<!-- <u-empty icon="search" text=""></u-empty>
						<view class="agreeTip">抱歉暂时没有找到相关内容,</view>
						<view class="agreeTip">
							是否要去<text class="productAgree" @click="toProductAgree">“提个意见”</text>呢
						</view> -->
						<u-empty
						        text="没有查找到相关内容"
						        icon="../../static/images/seach-empt.png">
						</u-empty>
					</view>
				</view>
				<view v-if="qa.count>qa.params.pageSize">
					<uni-load-more :status="qa.loadStatus"></uni-load-more>
				</view>
			</view>
		</view>
		<!--清空确认-->
		<u-modal :show="clearShow" @confirm="confirmClear" @cancel="clearShow=false" :showCancelButton="true" ref="uModal" content="您确认要清除搜索历史吗？" :asyncClose="true"></u-modal>
	</view>
	
</template>

<script>
	import apiSysType from '@/api/modules/type.js'
	import apiScence from '@/api/modules/scene.js'
	import apiHotSearch from '@/api/modules/searchterm.js'
	import apiCourse from '@/api/modules/course.js'
	import apiOldCourse from '@/api/modules/course.js'
	import apiCoursePortal from '@/api/modules/coursePortal.js'
	import apiUser from '@/api/system/user.js'
	import apiQa from '@/api/modules/qa.js'
	import {toScore} from '@/utils/tools.js'
	import apiArticle from '@/api/modules/article.js'
	import apiBoeCourse from '@/api/boe/course.js'
	export default{
		data(){
			return{
				showHotSearch:true,
				noPageList:true,
				noDataList:true,
				hotSaveKey:'SearchWords',
				hotWords:[],
				converToScore:toScore,
				fileUrl:this.$config.fileUrl,
				historyWords:[],
				clearShow:false,
				keyword:'',
				conTypeList: [
					{type: 1,con: '课程'},
					{type: 2,con: '文章'},
					{type: 4,con: '问答'},
				],
				conType: 1,
				stepIndex:1,
				isOpen: false,
				course:{
					filters:[],
					loadStatus:'more',
					count:0,
					pages:0,
					params:{pageIndex:1,pageSize:10,keyword:'',publish:true,device:2,},
					pageIndex:1,
					list:[]
				},
				article:{ //文章的控制数据都在这里实现
					filters:[],
					loadStatus:'more',
					count:0,
					pages:0,
					params:{pageIndex:1,pageSize:20,keyword:'',publish:true},
					pageIndex:1,
					list:[]
				},
				qa:{
					filters:[],
					loadStatus:'more',
					count:0,
					pages:0,
					params:{pageIndex:1,pageSize:20,keyword:'',publish:true},
					pageIndex:1,
					list:[]
				}
			}
		},
		components: {},
		onLoad(options){
			if(options.type){
				this.conType=parseInt(options.type);
			}else{
				this.conType=1;
			}
			this.loadSeachWords();
		},
		computed:{
			
		},
		onPullDownRefresh() {
			this.onReachBottom();
		},
		onReachBottom() {
			if(this.conType== 1) {// 课程
				if(this.course.loadStatus=='more'){
					this.course.params.pageIndex++;
					this.loadCourseData();
				}
			} else if(this.conType == 2) {// 文章
				if(this.article.loadStatus=='more'){
					this.article.params.pageIndex++;
					this.loadArticleData();
				}
			} else if(this.conType == 4) {// 问答
				if(this.qa.loadStatus=='more'){
					this.qa.params.pageIndex++;
					this.loadQaData();
				}
				
			}

		},
		mounted() {
			//this.course.list=[];
			//this.course.pageIndex=1;
			//this.findData(true);
		},
		methods:{
			clearSearch(){
				this.stepIndex=1;
				this.course.filters=[];
				this.course.list=[];
				this.course.count=0;
				this.course.pageIndex=1;
				
				this.article.filters=[];
				this.article.list=[];
				this.article.count=0;
				this.article.pageIndex=1;
				
				this.qa.filters=[];
				this.qa.list=[];
				this.qa.count=0;
				this.qa.pageIndex=1;
				
				
			},
			loadSeachWords(){
				//let $this=this;
				let list=uni.getStorageSync(this.hotSaveKey);
				if(list){
					this.historyWords=JSON.parse(list);
				}
				//加载搜索历史
				apiHotSearch.list(10,this.conType).then(res=>{
					if(res.status==200){
						this.hotWords=res.result;
					}
				})
			},
			saveSearchWord(){
				if(this.keyword==''){
					return;
				}
				let hasIndex=-1;
				let $this=this;
				this.historyWords.some((hw,hwidx)=>{
					if($this.keyword==hw){
						hasIndex=hwidx;
						return true;
					}else{
						return false;
					}
				})
			
				if(hasIndex>-1){
					if(hasIndex>0){
						this.historyWords.splice(hasIndex,1);
						this.historyWords.unshift(this.keyword);
					}
				}else{
					this.historyWords.unshift(this.keyword);
					if(this.historyWords.length>50){
						this.historyWords.splice(this.historyWords.length-1,1);
					}
				}
				uni.setStorageSync(this.hotSaveKey,JSON.stringify(this.historyWords));
				//存储到服务器
				apiHotSearch.save({keyword:this.keyword,type:this.conType});
			},
			back(){
				let pages =getCurrentPages();
				const prevPage=pages[pages.length-2];
				if(!prevPage){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack();
				}
			},
			changeConType(item) {
				this.conType = item.type;
				//是否替换关键词或内容
				if(this.keyword!='' && this.stepIndex==2){
					//this.searchList();
					this.course.params.keyword=this.keyword;
					this.article.params.keyword=this.keyword;
					this.qa.params.keyword=this.keyword;
					if(this.keyword!=''){
						if(this.conType==1){
							if(this.course.loadStatus=='more'){
								this.loadCourseData();
							}
							
						}else if(this.conType==2){
							if(this.article.loadStatus=='more'){
								this.loadArticleData();
							}
						}else if(this.conType==4){
							if(this.qa.loadStatus=='more'){
								this.loadQaData();
							}
						}
					}
				}
			},
			openMore() {
				if(this.isOpen){
					this.isOpen = false;
				} else{
					this.isOpen = true;
				}
				 
			},
			cleanHistory(){
				this.clearShow=true;
			},
			
			// 热门搜索显示控制
			hotSearch(){
				this.showHotSearch = !this.showHotSearch;
			},
			
			confirmClear(){
				this.historyWords=[];
				uni.setStorageSync(this.hotSaveKey,JSON.stringify([]));
				this.clearShow=false;
			},
			wordSearch(w){
				this.keyword=w;
				this.searchList();
			},
			resetFilters(){
				this.stepIndex=2;
				this.filterTags=[];
				if(this.conType==1){
					this.course.filters=[];
					this.course.list=[];
					this.course.params.pageIndex=1;
					this.course.loadStatus='more';
					this.loadCourseData();
				}else if(this.conType==2){
					this.article.filters=[];
					this.article.list=[];
					this.article.params.pageIndex=1;
					this.article.loadStatus='more';
					this.loadArticleData();
				}else if(this.conType==4){
					this.qa.filters=[];
					this.qa.list=[];
					this.qa.params.pageIndex=1;
					this.qa.loadStatus='more';
					this.loadQaData();
				}
				if(this.keyword!=''){
					this.saveSearchWord();
				}
			},
			submitFilters(tags,params){
				this.stepIndex=2;
				this.noPageList = true;
				this.noDataList = true;
				if(this.conType==1){
					this.course.filters=tags;
					this.course.list=[];
					this.course.loadStatus='more';
					this.course.params=params;
					this.course.params.keyword=this.keyword;
					this.loadCourseData();
				}else if(this.conType==2){
					this.article.filters=tags;
					this.article.list=[];
					this.article.loadStatus='more';
					this.article.params=params;
					this.article.params.keyword=this.keyword;
					this.loadArticleData();
				}else if(this.conType==4){
					this.qa.filters=tags;
					this.qa.list=[];
					this.qa.loadStatus='more';
					this.qa.params=params;
					this.qa.params.keyword=this.keyword;
					this.loadQaData();
				}
				if(this.keyword!=''){
					this.saveSearchWord();
				}
			},
		async loadCourseData(){
				uni.showLoading({title:'加载中...'});
				this.course.params.keyword=this.keyword;
				//查询课程
				let $this=this;
				let dataList = [];
				await apiCoursePortal.courseSearch(this.course.params).then(rs=>{
					setTimeout(function(){ uni.hideLoading();},100);
					if(rs.status==200){
						let courseIds=[];
						this.course.list.push(...rs.result.list);
						this.course.count=rs.result.count;
						if(rs.result.list.length == 0) {
							this.course.loadStatus='noMore';
						} else {
							this.course.loadStatus='more'
						}
					}else{
						this.$refs.messager.show({message:rs.message,type:'error'});
					}
				}).catch(err=>{
					setTimeout(function(){ uni.hideLoading();},100);
				})
			},
			loadArticleData(){
				uni.showLoading({title:'加载中...'});
				this.article.params.keyword=this.keyword;
				//查询文章
				let $this=this;
				apiArticle.findPortal(this.article.params).then(rs=>{
					setTimeout(function(){ uni.hideLoading();},100);
					if(rs.status==200){
						let userIds=[];
						rs.result.list.forEach(item=>{
							item.authorInfo={avatar:'',code:'',name:'',sex:''}
							$this.article.list.push(item);
							userIds.push(item.sysCreateAid)
						});
						if(this.article.params.pageIndex>=rs.result.totalPages){
							this.article.loadStatus='noMore';
						}
						this.article.count=rs.result.count;
						this.loadUserInfos(rs.result.list,userIds);
					}else{
						this.$refs.messager.show({message:rs.message,type:'error'});
					}
				}).catch(err=>{
					setTimeout(function(){ uni.hideLoading();},100);
				})
			},
			loadQaData(){
				uni.showLoading({title:'加载中...'});
				this.qa.params.keyword=this.keyword;
				//查询问答
				let $this=this;
				apiQa.pageList(this.qa.params).then(rs=>{
					setTimeout(function(){ uni.hideLoading();},100);
					if(rs.status==200){
						let userIds=[];
						rs.result.list.forEach(item=>{
							item.authorInfo={avatar:'',code:'',name:'',sex:null}
							$this.qa.list.push(item);
							userIds.push(item.sysCreateAid)
						})
						if(this.qa.params.pageIndex>=rs.result.totalPages){
							this.qa.loadStatus='noMore';
						}
						this.qa.count=rs.result.count;
						this.loadUserInfos(rs.result.list,userIds);
					}else{
						this.$refs.messager.show({message:rs.message,type:'error'});
					}
				}).catch(err=>{
					setTimeout(function(){ uni.hideLoading();},1000);
				})
			},
			searchList() {
				if(this.keyword==''){
					return;
				}
				this.stepIndex=2;
				this.resetFilters();
			},
			loadUserInfos(list,userIds){
				let $this=this;
				const noReapetIds=[...new Set(userIds)]
				if(userIds.length>0){
					apiUser.getByIds(noReapetIds).then(res=>{
					  if(res.status==200){
						list.forEach(item=>{
							res.result.some(author=>{
								if(author.aid==item.sysCreateAid){
									item.authorInfo={
										avatar:author.avatar,
										code:author.code,
										name:author.name,
										sex:author.sex
									}
									if(author.avatar!=''){
										item.authorInfo.avatar=$this.fileUrl+author.avatar;
									}
									return true;
								}
								return false;
							})
						})
					  }
					})
				}
			},
			loadCouserTeacher(list,ids){ //临时解决方案，单独的查询课程教师
			  let that = this;
			  // 先查课程关联教师iD
			  apiCoursePortal.getTeacherByCourseIDs(ids).then(cres => {
			    if(cres.status==200){
			      let userIds = [];
			      list.forEach((item,index)=>{
			        cres.result.some(courseTeahcer=>{
			          if(courseTeahcer.courseId==item.id){
			            if(courseTeahcer.teacherIds){
			              // userIds.push(courseTeahcer.teacherIds[0]);                  
			              // item.authorInfo.aid=courseTeahcer.teacherIds[0];
						  item.teachersName = courseTeahcer.names[0];
						  item.teachersId = courseTeahcer.teacherIds[0];
			            }
			            return true;
			          }else{
			            return false;
			          }
			        })
			      });
			      // that.loadCourseAuthorInfo(list,userIds);
			    }
			  })
			},
			loadCourseAuthorInfo(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.authorInfo.aid){
			            if(author.avatar != '') {
			            	item.authorInfo.avatar = this.$config.fileUrl + author.avatar;
			            }
			            item.authorInfo.name = author.name;
						item.authorInfo.sex = author.sex;
			            return true;
			          }else{
			            return false;
			          }
			        })
			      });
			    }else{
			      console.log('查询课程教师用户信息失败:'+res.error);
			      //this.$message.error(res.message);
			    }
			  });
			},
			toCoursePage(coure){
				if(coure.source ==1){
				 uni.navigateTo({
				 	url: '/pages/study/studydetail?id='+coure.id+'&type='+coure.type
				 });
				} else {
					uni.navigateTo({
						url: '/pages/study/courseStudy?id='+coure.id
					})
				}
			},
			toArticlePage(item) {
				uni.navigateTo({
					url: '/pages/resource/articeDetail?id='+item.id
				})
			},
			toQaPage(item) {
				uni.navigateTo({
					url: '/pages/resource/qaDetail?id='+item.id
				})
			},
			toProductAgree(){
				uni.navigateTo({
					url: '/pages/plus/feedback'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-modal{
		width: 288px !important;
		border-radius: 28upx;
	}
	/deep/ .u-modal__content{
		text-align: center;
		font-size: 36upx;
		font-weight: 600;
		color: #333333;
		padding: 33px 25px 33px 25px;
	}
	.article-bottom{
		display: flex;
		.article-author{
			display: flex;
			padding-top: 0upx;
		}
		.article-inter{
			margin-left: auto;
		}
		
	}
	::v-deep .u-search .u-search__content{
		height: 72upx !important;
	}
	.words-clear{
		image{
			width: 30upx;
			height: 30upx;
		}
	}
	::v-deep .u-search__action{
		font-size: 32upx;
		color: #387DF7;
		font-weight: 500;
	}
	.con-top{
		display: flex;
		position: relative;
		justify-content: space-between;
		height: 50upx;
		line-height: 50upx;
		padding: 15upx 0upx;
		
		.con-tab{
			display: flex;
			.con-tab-item {
				padding-right:40upx;
				color: #666666;
				text-align: center;
			}
			.active {
				font-weight: 700;
				color: #5282eb;
			}
		}
		
	}
	.tags{
		padding: 0upx 10upx;
		line-height: 30upx;
		.u-scroll-list{
			padding-bottom: 0px;
		}
		.tag-item{
			display: inline-block;
			padding: 10upx 35upx;
			white-space:nowrap;
			margin: 10upx;
			background-color: #FFFFFF;
			border: 1px solid #e7e7e7;
			font-size: 26upx;
			border-radius: 28upx;
		}
	}
	.words{
		margin-top: 20upx;
		padding: 30upx;
		line-height: 40upx;
		.words-top{
			display: flex;
			justify-content: space-between;
			.words-title{
				display: flex;
				color: #333333;
				font-weight: 500;
				font-size: 32upx !important;
				padding-right: 6upx;
			}
		}
		.words-items{
			margin-top: 20upx;
			.words-item{
				display: inline-block;
				padding: 10upx 35upx;
				margin: 10upx;
				background-color: #FFFFFF;
				border: 1px solid rgba(153,153,153,0.2);
				font-size: 28upx;
				color: #333;
				border-radius: 28upx;
			}
		}
	}
	.qalabel{
		//border: 1px solid #d7d7d7;
		line-height: 16upx;
		text-align: center;
		padding: 5upx 10upx 0upx 0upx;
	}
	.con_box {
		margin-bottom: 10px;
		background-color: #FFFFFF;
		padding: 10px 15px;
		margin-top: 5px;
		.tit {
	        font-size: 32rpx;
			color: #4c4c4c;
			font-weight: 35upx;
			margin-bottom: 10upx;
		}
	}
	.course {
		.course-img {
			display: flex;
			align-items: center;
			/deep/ .course-left{
			    width: 308upx;
			    height: 192upx;
				margin-top: 4upx;
				position: relative;
				uni-image {
					width: 308upx;
					height: 192upx;
					border-radius: 16upx;
				}
			}
			.con-con {
				// display: flex;
				flex-direction: column;
				font-size: 14px;
	            color: #444444;
				padding-left: 10upx;
				margin-top: 3px;
				margin-bottom: 6px;
				 display: -webkit-box;
				  // white-space:pre-wrap;
				  overflow: hidden;
				  // text-overflow:ellipsis;
				  -webkit-box-orient: vertical;
				  -webkit-line-clamp: 2;
				  box-sizing: border-box;
				
			}
			.con-au {
				display: flex;
	            justify-content: space-between;
				// padding-top: 20upx;
				image{
					border-radius: 50%;
				}
			}
			.im {
				width: 50upx;
				height: 50upx;
				margin-right: 8upx;
			}
			.tet {
				font-size: 12px;
	            color: #666666;
				padding-top: 10upx;
			}
			.coures-conent{
				// padding: 10upx 10upx 0 15upx;
				margin-left: 10px;
				display: flex;
				flex-direction:column;
				justify-content: space-between;
				flex: 1;
				height: 192upx;
				overflow: hidden;
				.conent-title{
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333;
					white-space:nowrap;
					overflow: hidden;
					height: 112upx;
					text-overflow: ellipsis;
				}
				.statuy-ren{
					font-size: 25upx;
					color: #999999;
					display: flex;
					// justify-content: space-between;
					// align-items: flex-end;
					.statuy-num{
						font-size: 24upx;
						color: #999;
					}
				}
				.stu-f {
					font-size: 24upx;
					color: #333;
					font-weight: 500;
					margin-right: 20upx;
				}
				// height: 100%;
			}
			
		}
		.stu_c {
			display:flex;
		justify-content: space-between;
			.stu_e {
				margin-top: 10upx;
			    display: flex;
				font-size: 12px;
				color: #666666;
			}
			.stu_e :nth-child(2) {
				margin-left: 40upx;
			}
			.stu-f {
				font-size: 20upx;
				color: #FFB30F;
				font-weight: 500;
			}
		}
	}
	.article {
		padding-bottom: 10upx;
		// height: 264upx;
		margin-bottom: 10px;
		background-color: #FFFFFF;
		padding: 10px;
		.article-content{
			display: flex;
			justify-content: space-between;
			.article-info{
				flex: 1;
				.article-title{
					font-size: 36upx;
					color: #333;
					font-weight: 500;
					margin-bottom: 20rpx;
					word-break:break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;-webkit-line-clamp: 2; 
				}
				
				.article-summary{
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					color: #454545;
					line-height: 39rpx;
					height: 80upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
			.article-img{
				width: 100px;
				height: 75px;
				margin: 0px 10px;
				padding-right: 20rpx;
				
				image{
					border-radius: 6rpx;
				}
			}
		}
	}
	.qa {
		padding-bottom: 10upx;
		// height: 264upx;
		.content{
			background: #FFFFFF;
			border-radius: 5upx;
			.content-list{
				display: flex;
				width: 100%;
				padding: 10upx 0upx;
				// margin-left: 8upx;
				margin-right: 8upx;
				
				// text {
				// 	white-space: nowrap;
				// 	overflow: hidden;
				// 	text-overflow: ellipsis;
				// }
				.content-title{
					font-size: 36upx;
					color: #333;
					font-weight: 500;
					word-break:break-all;
					margin-bottom: 10rpx;
					line-height: 50rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;
					-webkit-line-clamp: 2; 
				}
				.content-time{
					flex: 1;
					margin-left: 5rpx;
					font-size: 15rpx;
					padding-top: 8rpx;
				}
			}
			.content-listtwo{
				display: flex;
				justify-content: space-between;
				margin-top: 10upx;
				//height: 60upx;
				// margin-left: 8upx;
				margin-right: 8upx;
				.list-details{
					padding-left: 10upx;
					.list-text{
						font-size: 28upx;
						color: #666;
					    line-height: 33upx;
						font-family: Source Han Sans CN;
						//height: 39upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break:break-all;
						margin-bottom: 10rpx;
					}
					.list-best{
						font-size:26rpx;
						color: #454545;
						// height: 80upx;
						// font-size: 30upx;
						// color: #454545;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
	.items{
		margin-bottom: 30upx;
		.item{
			margin-bottom: 50upx;
			background: #FFFFFF;
			position: relative;
			margin-bottom: 20upx;
			padding: 20upx;
			.item-title{
				width: 400upx;
				line-height: 48upx;
				overflow: hidden;
				white-space:nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.item-info{
				display: flex;
				justify-content: space-between;
				height: 50upx;
				line-height: 50upx;
				padding: 10upx 0upx;
				color: #8f8f8f;
				
				.item-score{
					
				}
				.item-time{
					font-size: 0.8em;
					color:#FFB30F;
				}
			}
			
			.item-image{
				
			}
			.item-con{
				line-height: 40upx;
				font-size: 0.9em;
				color: #333333;
				.item-con-img{
					float: right;
					width:320upx;
					height: 180upx;
				}
			}
			.item-foot{
				display: flex;
				padding-top: 10upx;
				.item-foot-num{
					color: #999999;
					font-size: 12px;
					margin-left: 15upx;
				}
			}
		}
	}
	.item-author{
		font-size: 0.9em;
		//color:#666666;
		// margin-bottom: 10rpx;
	}
	.course-type{
		position:absolute;
		bottom: 8px;
		right: 0;
		text-align: center;
		line-height: 15px;
		background-color: #7f7f7f;
		font-size: 10px;
		opacity: 0.7;
		color: #FFFFFF;
		z-index: 88;
		padding: 1px 5px;
		border-radius: 10px 0px 0px 10px;
	}
	
	.empty{
		text-align: center;
		padding-top: 100px;
		color: #999999;
		/deep/ .items{
			.u-empty{
				.u-empty__text{
					display: none;
				}
			}
		}
		.agreeTip{
			text-align: center;
			font-size: 14px;
			color: rgb(192, 196, 204);
			.productAgree{
				font-size: 30rpx;
				font-weight: 600;
				color: black;
			}
		}
	}
	/deep/ .u-search{
		.u-search__content{
			// border-radius: 999px!important;
			height: 28px;
		}
	}	
</style>
