<template>
	<view class="my-qa-page">
		<u-toast ref="articleToast"></u-toast>
		<page-title :showBack="true">我的问答</page-title>
		<view class="top-content">
			<view>
				<u-search 
				:clearabled="true"
				@search="findData(true)"
				@clear="findData(true)"
				placeholder="搜索" 
				:height="36"
				v-model="keyword" 
				:showAction="false">
				</u-search>
			</view>
		</view>
		<view class="my-qa-tabs">
			<view class="tabs-text" @click="tabsClick(1)" :class="{'active':active ==1}"><text style="z-index: 999;">提问</text><text v-show="active ==1" class="active-line"></text></view>
			<view class="tabs-text" @click="tabsClick(2)" :class="{'active':active ==2}">回答<text v-show="active ==2" class="active-line"></text></view>
		</view>
		<view class="my-qa-list" v-show="active ==1">
			<view class="my-qa-index" v-for="put in putList.list" :key="put.id" @click="toDetail(put)">
				<view class="artical-box-top">
					<view style="" class="artical-tit">
						<text class="qa-basic qa-solve" v-if="put.isResolve">【已解决】</text>
						<text class="qa-basic  qa-unSolve" v-else >【待解决】</text>
						{{put.title}}
					</view>
				</view>
				<view class="qa-author-time">
					<view class="author-info">
						<author-info :avatar="put.avatar" :name="put.name" :sex="put.sex"></author-info>
					</view>
					<view class="qa-time">
						{{put.sysCreateTime}}
					</view>
				</view>
				<view class="qa-text">
					<view v-html="highlightedFilter(put.content)"></view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 20upx;">
					<view style="display: flex;">
						<view class="rowbtn" @click.stop="toEdit(put)">
							<image class="btn-img" src="../../static/images/icon/edit.png" size="24"></image><text class="btn-text">编辑</text>
						</view>
						<view class="rowbtn" style="margin-left: 12upx;" @click.stop="del(put)">
							<image class="btn-img" src="../../static/images/icon/del.png" size="24"></image><text class="btn-text">删除</text>
						</view>
					</view>
					<view class="">
						<interact-bar :comments="false" :answers="true"  :views="false" :data="put"></interact-bar>
					</view>
				</view>
			</view>
			
		</view>
		<view class="my-answer-list" v-show="active ==2">
			<view class="uni-list">
				<view class="article-one" style="border-bottom: 20upx solid #F9F9F9;" v-for="(item, qidx) of answerList.list" :key="qidx" >
					<view class="artical-box">
						<view>
							<view class="artical-box-top" @click="toanDetail(item)">
								<view style="
								word-break:break-all;
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-box-orient: vertical; 
								display: -webkit-box;-webkit-line-clamp: 1; 
								font-size: 36upx;
								font-weight: 600;
								">
								<text class="qa-basic qa-solve" v-if="item.isResolve">【已解决】</text>
								<text class="qa-basic qa-unSolve" v-else >【待解决】</text>
								{{item.title}}
							</view>
							<view class="articl-box-cont">
								<view>
									<text style="color: #333333;font-weight: 600;font-size: 28upx;">我的回答：</text>
									<text style="color: #818181;font-size: 28upx;">{{displayAll(item)}}</text>
								     <text style="color: #387DF7;" v-if="item.answercontent.length>60" @click.stop="changeIsAll(item)">
								       {{item.isAll?'收起':'展开'}}
								     </text>
								</view>
							</view>
							<view class="articl-box-time">
								<view style="padding-top: 10upx;">{{ item.sysCreateTimeA }}</view>
								<view class="rowbtn-right" style="display: flex;">
									<view class="rowbtn rowbtn-primary" @click.stop="editItem(item)">
										<image class="btn-img" src="../../static/images/icon/edit.png" size="24"></image><text class="btn-text">编辑</text>
									</view>
									<view class="rowbtn rowbtn-info" style="margin-left: 20upx;" @click.stop="delItem(item)">
										<image class="btn-img" src="../../static/images/icon/del.png" size="24"></image><text class="btn-text">删除</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			  </view>
			</view>
		</view>
		<u-popup :show="inputShow" @close="closeInput" @open="openInput">
			<view>
				<view style="display: flex;">
					<view style="flex: 1;padding: 15upx;">
						<u--textarea :height="150" v-model="inputValue" :plaholder="'回复'" count></u--textarea>
					</view>
					<view style="width:160upx;text-align: center;padding-top: 10px;line-height: 80upx;">
						<view>
							<u-button type="primary" @click="publishReply" text="发布" style="width: 100upx;height: 80upx;margin-top: 80upx;"></u-button>
						</view>
					</view>
				</view>
				<view>
		
				</view>
			</view>
		</u-popup>
		<uni-load-more :status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	 import apiStat from '@/api/phase2/stat.js';
	 import apiQa from '@/api/modules/qa.js';
	 import apiUser from '@/api/system/user.js';
	 export default {
		 computed: {
		 	...mapGetters(['userInfo']),
		 },
		 data() {
			 return {
				 inputShow:false,
				 loadStatus:'more',
				 active:1,
				 keyword:'',
				 inputValue: '',
				 uCoinRecord:[],
				 uinfo: {
				   uCurrency: 0 ,// 用户累计U币
				   timestamp:'',
				 },
				putList:{
					pageIndex:1,
					pageSize:10,
					list:[],
					count:0,
				},
				reply: {},
				answerList:{
					pageIndex:1,
					pageSize:10,
					list:[],
					count:0,
				}
			 }
		 },
		 onPullDownRefresh() {
		 	this.onReachBottom();
		 },
		 async onReachBottom() {
			 if(this.active == 1) {
				 if (this.putList.list.length < this.putList.count) {
				 	this.loadStatus = 'loading'; //more,loading,noMore
				 	this.putList.pageIndex++;
				 	await this.findData(false);
				 	this.loadStatus = 'more';
				 } else {
				 	this.loadStatus = 'noMore';
				 }
			 } else {
				 if (this.answerList.list.length < this.answerList.count) {
				 	this.loadStatus = 'loading'; //more,loading,noMore
				 	this.answerList.pageIndex++;
				 	await this.findAnData(false);
				 	this.loadStatus = 'more';
				 } else {
				 	this.loadStatus = 'noMore';
				 }
			 }
		 	
		 },
		 mounted() {
		   this.findData(true);
		   this.findAnData(true);
		 },
		 methods:{
			  //展示全部
		   displayAll(item) {
		     // let content = '';
		     // content = item.content.replace(/(\n){2,}/,'<br>');
		     // item.content = content;
		     if(!item.isAll && item.answercontent && item.answercontent.length > 60) {
		         return item.answercontent.slice(0, 60) + "...";
		     }
		     return item.answercontent;
		   },
		   changeIsAll(item) {
		     item.isAll=!item.isAll;
		   },
			 publishReply() {
			 	const $this=this;
			 	 let {answerid,content,sysCreateAid,favorites,praises,shares}=this.reply;
			    apiQa
			      .updateAnswer({id:answerid,sysCreateAid,content:$this.inputValue})
			      .then(res => {
			        if (res.status == 200) {
			          $this.$refs.articleToast.show({message:'修改成功',type:'success'});
			          $this.closeInput();
			          $this.findAnData(true);
			        } else {
			          $this.$refs.articleToast.show({message:'修改失败',type:'error'});
			        }
			      })
			    
			 },
			 openInput() {
			 	this.inputShow = true;
			 },
			 closeInput() {
			 	this.inputShow = false;
			 },
			 delItem(item) {
			    const $this=this
			    uni.showModal({
			    	title: '提示',
			    	content: '您确定要删除此回答吗？',
			    	success: function (res) {
			    		if (res.confirm) {
			 				apiQa
			 				  .delAnswer(item.answerid)
			 				  .then(res => {
			 				    if (res.status == 200) {
			 				      $this.$refs.articleToast.show({message:'删除成功',type:'success'});
			 					  $this.findAnData(true);
			 				    } else {
			 				      $this.$refs.articleToast.show({message:'删除失败，请稍后再试',type:'error'});
			 				    }
			 				  })
			    		}
			    	}
			    });
			    },
			 editItem(item){
			 	this.reply = item;
			 	this.inputValue = item.answercontent;
			 	this.inputShow=true
			 },
			 toanDetail(item) {
			 	uni.navigateTo({
			 		url: '/pages/resource/qaDetail?id=' + item.answerqid

			 	});
			 },
			 toDetail(item) {
				 console.log(item,'item')
			 	uni.navigateTo({
			 		url: '/pages/resource/qaDetail?id=' + item.id
			 	});
			 },
			 toEdit(item){
			 	uni.navigateTo({
			 		url:'/pages/plus/editQuestion?value='+JSON.stringify(item)
			 	})
			 },
			 del(item){
			 	const $this=this
			 	uni.showModal({
			 		title: '提示',
			 		content: '确认删除这条提问吗？',
			 		success: function (res) {
			 			if (res.confirm) {
			 				apiQa.del(item.id).then(res=>{
			 					if(res.status=200){
			 						$this.$refs.articleToast.show({message:'删除成功',type:'success'});
			 						setTimeout(()=>{
			 							$this.findData(true)
			 						},1000)
			 					}else{
			 						$this.$refs.articleToast.show({message:'删除失败，请稍后再试',type:'error'});
			 					}
			 				})
			 			} else if (res.cancel) {
			 			}
			 		}
			 	});
			 },
			 findAnData(flag) {// 回答
			 	uni.showLoading({ title: '加载中...' });
			 	if (flag) {
			 		this.answerList.list = [];
			 	}
			 	// const { pageIndex, pageSize, keyWord,isResolve } = this.qaList;
			 	let params = {
			 		pageIndex:this.answerList.pageIndex,
			 		pageSize:this.answerList.pageSize,
			 		isResolve:this.answerList.isResolve,
			 	};
			 	if (this.answerList.keyWord) {
			 		params.keyWord = this.answerList.keyWord;
			 	}
			 	let $this=this;
			 	apiQa.queryAnswer(params).then(async res => {
			 		if (res.status == 200) {
			 			this.answerList.count = res.result.count;
			 			let userIds = [];
			 			res.result.list.forEach(item => {
							item.isAll=false;
			 				item.avatar='';
			 				item.name='',
			 				item.orgInfo='';
							item.sex = null;
			 				userIds.push(item.sysCreateAid);
			 				$this.answerList.list.push(item);
			 			});
			 			this.loadUserInfos(res.result.list, userIds);
			 		}else{
			 			//加载数据列表错误
			 			this.$refs.messager.show({message:'加载数据失败：'+res.message,type:'error'});
			 		}
			 		setTimeout(function(){uni.hideLoading();},100);
			 	});
			 },
			 findData(flag) {// 提问
			 	//是否重置列表
			 	if (flag) {
			 		this.putList.list = [];
			 	}
			 	uni.showLoading({ title: '加载中...' });
			 	//查询条件
			 	let params = {
			 		pageIndex: this.putList.pageIndex,
			 		pageSize: this.putList.pageSize,
			 		isResolve: this.putList.isResolve
			 	};
			 	if (this.keyWord) {
			 		params.keyWord = this.keyWord;
			 	}
			 	apiQa.queryQuestion(params).then(async rs => {
			 		if (rs.status == 200) {
			 			if (rs.result.list.length != 0) {
			 				this.putList.count = rs.result.count;
			 				let userIds = [];
			 				rs.result.list.forEach(item => {
								item.avatar='';
								item.name='',
								item.orgInfo='';
								item.sex = null;
			 					this.putList.list.push(item);
			 					userIds.push(item.sysCreateAid);
			 				});
			 				await this.loadUserInfos(rs.result.list, userIds);
			 			}
			 		}
			 		uni.hideLoading();
			 	}).catch((err)=>{
					uni.hideLoading();
				});
			 },
			 loadUserInfos(list, userIds) {
			 	const noReapetIds = [...new Set(userIds)];
			 	apiUser.getByIds(noReapetIds).then(res => {
			 		if (res.status == 200) {
			 			list.forEach(item => {
			 				res.result.some(author => {
			 					if (author.aid == item.sysCreateAid) {
			 						let { aid, avatar, name, orgInfo, code,sex } = author;
			 						// if (!avatar) {
			 						// 	avatar = this.$config.fileUrl + avatar;
			 						// }
			 						item.name = name;
			 						item.aid = aid;
			 						item.orgInfo = orgInfo;
			 						item.code = code;
			 						item.avatar = avatar;
									item.sex = sex;
									
			 						return true;
			 					}
			 					return false;
			 				});
			 			});
			 		} else {
			 			uni.showToast({
			 				title: '获取数据失败',
			 				icon: 'none'
			 			});
			 		}
			 		//原本想用async await等数据请求完成后使用hideLoading,但是页面渲染需要时间，关闭太早了，有考虑用nexeTick()
			 		setTimeout(function() {
			 			uni.hideLoading();
			 		}, 1000);
			 	});
			 },
           findList(){
			   
		   },
		   tabsClick(tab) {
			   this.active=tab
		   },
		   highlightedFilter(value) {
		   	if (value.indexOf(this.copyKeyWord) !== -1 && this.copyKeyWord !== '') {
		   		return value.replace(this.copyKeyWord,`<span class='highlighted'>${this.copyKeyWord}</span>`);
		   	}else{
		   		return value
		   	}
		   },
	
		 }
		 
	 }
</script>

<style scoped lang="scss">
	
	.qa-solve{
	  color: #333333;
	  margin-left:-7px;
	}
	.qa-unSolve{
	  margin-left:-7px;
	  color:#387DF7;
	}
	
	.my-qa-page{
		padding: 36upx;
		background-color: #fff;
		.rowbtn{
			padding: 5px 8px 0px 0; 
			height: 20px;
			border-radius: 10upx;
			.btn-img{
				width: 16px;
				height: 18px;
				vertical-align: middle;
			}
			.btn-text{
				margin-left: 12upx;
				font-size: 24upx;
				color: #999999;
			}
		}
		.my-qa-tabs{
			display: flex;
			margin-top: 40upx;
			.tabs-text{
				margin: 0 44upx 0 4upx;
				font-size: 32upx;
				color: #666666;
			}
			.active{
				font-size: 32upx;
				font-weight: 600;
				color: #333333;
				position: relative;
				.active-line{
					z-index: 1;
					position: absolute;
					display: inline-block;
					bottom: -4upx;
					left: -4upx;
					width: 70upx;
					height: 10upx;
					background: linear-gradient(270deg, #46ACFF 0%, #1E68F9 100%);
					border-radius: 6upx;
				}
			}
		}
		.my-qa-list{
			margin-top: 12upx;
			.my-qa-index{
				padding-bottom: 36upx;
				border-bottom: 20upx solid #F9F9F9;
			}
			.artical-box-top {
				padding: 36upx 0;
				font-weight: 600;
				line-height: 50upx;
				.artical-tit{
					word-break:break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;-webkit-line-clamp: 2; 
					font-size: 36upx;
					color: #333333;
				}
				
			}
			.qa-author-time{
				display: flex;
				justify-content: space-between;
				margin-bottom: 34upx;
				.qa-time{
					margin-top: 14upx;
				}
			}
			.qa-text{
				font-size: 28upx;
				color: #666666;
				word-break:break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical; 
				display: -webkit-box;-webkit-line-clamp: 2; 
			}
			.qa-time{
				font-size: 24upx;
				color: #999999;
			}
		}
	.artical-box {
		// margin-top: 20upx;
		color: #151515;
		padding: 36rpx 0 26rpx 0;
		background-color: #ffffff;
		.artical-box-top {
			font-weight: 500;
			font-size: 30rpx;
			// line-height: 60rpx;
			// margin-top: 10rpx;
		}
		.articl-box-cont {
			font-size: 28rpx;
			// line-height: 50rpx;
			color: #454545;
			margin-top: 30upx;
			// margin:  0upx 10upx;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// -webkit-box-orient: vertical; 
			// display: -webkit-box;-webkit-line-clamp: 2; 
			word-break:break-all;
		}
		.articl-box-time {
			margin-top: 10upx;
			font-size: 26rpx;
			color: #999999;
			// padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
		}
	}
	}
</style>
