<template>
	<!--我的问答， 都是已回答的问题，这里只是查询查看，无操作-->
	<view class="answer">
		<u-toast ref="articleToast"></u-toast>
		<page-title :showBack="true">我的回答</page-title>
		<u-toast ref="messager"></u-toast>
		<view class="top-filter">
			<view class="top-content">
				<view  class="top-content-options">
					<view style="margin-right: 20upx;">
						<text class="textbtn" @click="statusSelectShow = !statusSelectShow">状态</text>
					</view>
					<view class="center">
						<u-search
							:clearabled="true"
							placeholder="搜索关键字"
							@search="findData(true)"
							@clear="findData(true)"
							v-model="qaList.keyWord"
							:showAction="false"
							shape="square"
							bgColor="#ffffff"
						></u-search>
					</view>
				</view>
			</view>
		</view>
		<view class="sea-show" v-show="statusSelectShow">
			<text @click="chooseStatus(null)" :class="[qaList.isResolve == null?'sea-active':'','sea-index' ]">全部</text>
			<text @click="chooseStatus(true)" :class="[qaList.isResolve == true?'sea-active':'','sea-index' ]">已解决</text>
			<text @click="chooseStatus(false)" :class="[qaList.isResolve == false?'sea-active':'','sea-index' ]">待解决</text>
		</view>
		<!-- 回答问题 -->
		<view class="uni-list" style="margin-top: 10upx;">
			<view class="article-one" v-for="(item, qidx) of qaList.list" :key="qidx" >
				<view class="artical-box">
				<!-- 	<view class="authors">
						<author-info v-if="item.avatar!=''" :avatar="item.avatar" :name="item.name" :info="item.orgInfo"></author-info>
					</view> -->
					<view>
						<view class="artical-box-top" @click="toDetail(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: 30rpx;
							font-weight: bold;
							">
							<text class="qa-basic qa-solve" v-if="item.isResolve">[已解决]</text>
							<text class="qa-basic qa-unSolve" v-else >[待解决]</text>
							<text v-html="$keywordActiveShow(item.title,qaList.keyWord)"></text>
							</view>
							<!-- <text>已解决</text> -->
						</view>
						<view class="articl-box-cont" @click="toDetail(item)">
							<view>{{ item.content }}</view>
						</view>
						<view class="articl-box-cont" style="margin-top: 15upx;font-weight: bold;" @click="toDetail(item)">
							<view><text style="">我的回答：</text>{{ item.answercontent }}</view>
						</view>
						<view class="articl-box-time">
							<!-- 这里原本只显示一个时间，pc端两个时间都显示 -->
							<!-- <view>问题时间：{{ item.sysCreateTimeQ }}</view> -->
							<view style="padding-top: 12px;">回复时间：{{ item.sysCreateTimeA }}</view>
							<view class="rowbtn-right">
								<view class="rowbtn rowbtn-primary" @click="editItem(item)">
									<u-icon name="edit-pen" color="#3E7FFF" labelColor="#3E7FFF"  label="编辑" size="16" labelSize="12"></u-icon>
								</view>
								<view class="rowbtn rowbtn-info" @click="delItem(item)">
									<u-icon name="trash" color="#767676" labelColor="#767676" label="删除" size="16" labelSize="12"></u-icon>
								</view>
							</view>
						</view>
					</view>
				
					<!-- <interact-bar :comments="false" :answers="true" :data="item"></interact-bar> -->
				</view>
			</view>
		</view>
		<view v-if="qaList.count>qaList.pageSize"> <uni-load-more :status="loadStatus"></uni-load-more></view>
		<u-popup :show="inputShow" @close="closeInput" @open="openInput">
			<view>
				<view style="display: flex;">
					<view style="flex: 1;padding: 15upx;">
						<!-- +reply.sysCreateBy -->
						<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>
	</view>
</template>

<script>
import apiQa from '@/api/modules/qa.js';
import apiUser from '@/api/system/user.js';
export default {
	data() {
		return {
			reply: {},
			inputValue: '',
			inputShow:false,//控制回复弹窗
			isResolve: null,
			statusSelectShow: false,
			statusBtn: '全部',
			statusArray: [
				[
					{
						name: '全部',
						value: null
					},
					{
						name: '待解决',
						value: false
					},
					{
						name: '已解决',
						value: true
					}
				]
			],
			qaList: {
				pageIndex: 1,
				pageSize: 20,
				count: 0,
				list: [],
				isResolve:null,
			},
			loadStatus: 'more'
		};
	},
	methods: {
		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.findData(true);
			            } else {
			              $this.$refs.articleToast.show({message:'修改失败',type:'error'});
			            }
			          })
			        
		},
		editItem(item){
			this.reply = item;
			this.inputValue = item.answercontent;
			this.inputShow=true
		},
		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.findData(true);
						    } else {
						      $this.$refs.articleToast.show({message:'删除失败，请稍后再试',type:'error'});
						    }
						  })
		    		}
		    	}
		    });
		    },
			
		chooseStatus(e) {
			// this.statusSelectShow = false;
			// this.statusBtn = e.value[0].name;
			this.qaList.isResolve = e;
			this.findData(true);
		},
		toDetail(item) {
			uni.navigateTo({
				url: '/pages/resource/qaDetail?id=' + item.qid
			});
		},
		findData(flag) {
			uni.showLoading({ title: '加载中...' });
			if (flag) {
				this.qaList.list = [];
			}
			// const { pageIndex, pageSize, keyWord,isResolve } = this.qaList;
			let params = {
				pageIndex:this.qaList.pageIndex,
				pageSize:this.qaList.pageSize,
				isResolve:this.qaList.isResolve,
			};
			if (this.qaList.keyWord) {
				params.keyWord = this.qaList.keyWord;
			}
			let $this=this;
			apiQa.queryAnswer(params).then(async res => {
				if (res.status == 200) {
					this.qaList.count = res.result.count;
					let userIds = [];
					res.result.list.forEach(item => {
						item.avatar='';
						item.name='',
						item.orgInfo='';
						userIds.push(item.sysCreateAid);
						$this.qaList.list.push(item);
					});
					this.loadUserInfos(res.result.list, userIds);
				}else{
					//加载数据列表错误
					this.$refs.messager.show({message:'加载数据失败：'+res.message,type:'error'});
				}
				setTimeout(function(){uni.hideLoading();},100);
			});
		},
		loadUserInfos(list, userIds) {
			const noReapetIds = [...new Set(userIds)];
			let $this=this;
			apiUser.getByIds(noReapetIds).then(res => {
				if (res.status == 200) {
					list.forEach(item => {
						res.result.some(author => {
							if (author.aid == item.sysCreateAid) {
								item.name = author.name;
								item.aid = author.aid;
								item.orgInfo = author.orgInfo;
								item.code = author.code;
								item.avatar = $this.$config.fileUrl + author.avatar;
								//console.log(item,'item');
								return true;
							}
							return false;
						});
					});
				} else {
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
				}
				//原本想用async await等数据请求完成后使用hideLoading,但是页面渲染需要时间，关闭太早了，有考虑用nexeTick()
				setTimeout(function() {
					uni.hideLoading();
				}, 1000);
			});
		}
	},
	
	onLoad: function(options) {
		this.findData(true);
	},
	onPullDownRefresh() {
		this.onReachBottom();
	},
	
	async onReachBottom() {
		if (this.qaList.list.length < this.qaList.count) {
			this.loadStatus = 'loading'; //more,loading,noMore
			this.qaList.pageIndex++;
			await this.findData(false);
			this.loadStatus = 'more';
		} else {
			this.loadStatus = 'noMore';
		}
	}
};
</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;
		margin-left: 20upx;
	}
	.rowbtn-primary{
		background-color: #ebf3fe;
	}
	.rowbtn-info{
		background-color: #f7f7f7;
	}
.authors {
	font-size: 28rpx;
	color: #444444;
	.title-one {
		font-size: 24rpx;
		color: #666666;
	}
}
.sea-show{
			// padding: 20rpx;
			// padding-bottom: 10upx;
			padding: 20upx 30upx 2upx 30upx;
			.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;
			}
			
		}
.top-filter {
	.top-content {
		
		// background-color: #6297FD;

		.top-content-options {
			padding:20upx 30upx  0 30upx ;
			height: 40px;
			line-height: 40px;
			display: flex;
			align-items: center;
			.center{
				flex: 1;
				// margin: 0upx 0upx 0upx 12upx;
			}
		}
	}

	.top-filter-result {
		padding: 5px 10px;
		font-size: 24upx;
		color: #747474;
	}
}

.uni-list {
	.artical-box {
		margin-top: 20upx;
		color: #151515;
		padding: 8rpx 30rpx;
		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:  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 {
			font-size: 26rpx;
			color: #999999;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			// border-bottom: 1rpx solid #eee;
			// view{
			// 	font-size: 26rpx;
			// }
		}
		// .articl-box-cont :nth-child(2) {
		// 	margin: 15upx;
		// }
	}
}

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