<template>
	<!--我的问答-->
	<view class="article">
		<u-toast ref="articleToast"></u-toast>
		<page-title :showBack="true">我的提问</page-title>
		<view class="top-filter">
			<view class="top-content">
				<view class="top-content-options">
					<view style="margin-right: 20upx;">
					<!-- 	<u-picker
							:defaultIndex="[0]"
							:show="statusSelectShow"
							@cancel="statusSelectShow = false"
							@confirm="chooseStatus"
							:columns="statusArray"
							keyName="name"
						></u-picker> -->
						<text class="textbtn" style="font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">状态</text>
					</view>
					<view class="center" >
						<!-- @search这个方法根本没有执行,没有触发条件,在搜索框回车时只是调用了onload里面的请求 -->
						<!-- 所以不知道在哪个位置改变copyKeyWord的值进行高亮显示-->
						<u-search
							:clearabled="true"
							@search="copyKeyWord=qaList.keyWord;findData(true);"
							placeholder="输入搜索关键词"
							v-model="qaList.keyWord"
							:showAction="false"
							@clear="copyKeyWord='';findData(true)"
							shape="square"
							bgColor="#ffffff"
						></u-search>
					</view>
					<view style="width: 70upx;">
						<view class="textbtn"  @click="toAddQa()"><u-icon name="plus" color="#2979ff" size="18"></u-icon></view>
					</view>
				</view>
			</view>
			<!-- <view class="top-filter-result" v-if="hasSearch">本次共搜索到X条记录</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">
			<view class="artical-box" v-for="(item, idx) of qaList.list" :key="idx">
				<!--我提问的不需要显示人员信息-->
				<!-- <view class="authors">
					<img claass="authors-img" style="vertical-align:middle;margin-right: 30rpx;" :src="item.avatar" />
					<text class="authors-title">
						{{ item.name }}
						<text class="title-one">{{ item.orgInfo }}</text>
					</text>
				</view> -->
				<view @click="toDetail(item)">
					<view class="artical-box-top">
						<view style="" class="artical-tit">
							<text class="qa-basic qa-solve" v-if="item.isResolve">[已解决]</text>
							<text class="qa-basic qa-unSolve" v-else >[待解决]</text>
							{{item.title}}
						</view>
					</view>
					<view class="articl-box-cont">
						<view v-html="highlightedFilter(item.content)"></view>
					</view>
					<view class="qa-answers" v-if="item.isResolve">
						<view class="qa-tit" style="">
						<text style="color: #FFB30F;" >最佳回答：</text>	{{ item.bestAnswer }}
						</view>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 10upx;">
					<view class="createTime">
						{{item.sysCreateTime}}
					</view>
					<view style="display: flex;">
						<view class="rowbtn rowbtn-primary">
							<u-icon name="edit-pen" color="#3E7FFF" labelColor="#3E7FFF" @click="toEdit(item)" label="编辑" size="16" labelSize="12"></u-icon>
						</view>
						<view class="rowbtn rowbtn-info" style="margin-left: 20px;">
							<u-icon @click="del(item)" color="#767676" labelColor="#767676" name="trash" label="删除" size="16" labelSize="12"></u-icon>
						</view>
						<!-- <u-icon name="more-dot-fill" @click="setEditId(item)" size="16" labelSize="16"></u-icon> -->
					</view>
				</view>
				<!-- <view class="article_action">
					<interact-bar :comments="false" :answers="true" :data="item"></interact-bar>
					<view class="article_btn">
						<u-icon name="edit-pen" @click="toEdit(item)" label="编辑"></u-icon>
						<u-icon style="margin-left: 20px;" @click="del(item)" name="trash" label="删除"></u-icon>
					</view>
				</view> -->
			</view>
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
	</view>
</template>
<script>
import apiQa from '@/api/modules/qa.js';
import apiUser from '@/api/system/user.js';
import { mapGetters } from 'vuex';
// 未解决问题
// Myanswers中显示回复时间和提问时间存在问题
// Myanswers和myArticles中初始加载不显示头像和作者名，但是下拉加载之后就会出现
export default {
	data() {
		return {
			statusArray: [
				[
					{
						name: '全部',
						value: null
					},
					{
						name: '待解决',
						value: false
					},
					{
						name: '已解决',
						value: true
					}
				]
			],
			qaList: {
				pageIndex: 1,
				pageSize: 20,
				isResolve: null,
				count: 0,
				list: []
			},
			statusSelectShow: false,
			statusBtn: '全部',
			loadStatus: 'more', //more,loading,noMore, 应该划分出三个
			copyKeyWord: ''
		};
	},
	computed: {
	  ...mapGetters(['userInfo'])
	},
	methods: {
		findData(flag) {
			//是否重置列表
			if (flag) {
				this.qaList.list = [];
			}
			uni.showLoading({ title: '加载中...' });
			//查询条件
			let params = {
				pageIndex: this.qaList.pageIndex,
				pageSize: this.qaList.pageSize,
				isResolve: this.qaList.isResolve
			};
			if (this.qaList.keyWord) {
				params.keyWord = this.qaList.keyWord;
			}
			apiQa.queryQuestion(params).then(async rs => {
				if (rs.status == 200) {
					if (rs.result.list.length != 0) {
						this.qaList.count = rs.result.count;
						let userIds = [];
						rs.result.list.forEach(item => {
							this.qaList.list.push(item);
							userIds.push(item.sysCreateAid);
						});
						//await this.loadUserInfos(rs.result.list, userIds);
					}
				}
				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 } = author;
								if (!avatar) {
									avatar = this.$config.fileUrl + avatar;
								}
								item.name = name;
								item.aid = aid;
								item.orgInfo = orgInfo;
								item.code = code;
								item.avatar = avatar;
								return true;
							}
							return false;
						});
					});
				} else {
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
				}
				//原本想用async await等数据请求完成后使用hideLoading,但是页面渲染需要时间，关闭太早了，有考虑用nexeTick()
				setTimeout(function() {
					uni.hideLoading();
				}, 1000);
			});
		},
		chooseStatus(e) {
			// this.statusSelectShow = false;
			// this.statusBtn = e.value[0].name;
			this.qaList.isResolve = e;
			this.findData(true);
		},
		toAddQa() {
			uni.navigateTo({
				url: '/pages/plus/addQuestion'
			});
		},
		toDetail(item) {
			uni.navigateTo({
				url: '/pages/resource/qaDetail?id=' + item.id
			});
		},
		highlightedFilter(value) {
			if (value.indexOf(this.copyKeyWord) !== -1 && this.copyKeyWord !== '') {
				return value.replace(this.copyKeyWord,`<span class='highlighted'>${this.copyKeyWord}</span>`);
			}else{
				return value
			}
		},
		del(item){
			const $this=this
			uni.showModal({
				title: '提示',
				content: '您确定要删除此提问吗？',
				success: function (res) {
					if (res.confirm) {
						//$this.del();
						apiQa.del(item.id).then(res=>{
							if(res.status=200){
								$this.$refs.articleToast.show({message:'删除成功',type:'success'});
								setTimeout(()=>{
									$this.findData(true)
								},1000)
								// $this.findData(true)
								// let pages =getCurrentPages();
								// const prevPage=pages[pages.length-2];
								// if(!prevPage){
								// 	uni.switchTab({
								// 		url:'/pages/index/index'
								// 	})
								// }else{
								// 	uni.navigateBack();
								// }
							}else{
								$this.$refs.articleToast.show({message:'删除失败，请稍后再试',type:'error'});
							}
						})
					} else if (res.cancel) {
					}
				}
			});
		},
		toEdit(item){
			uni.navigateTo({
				url:'/pages/plus/editQuestion?value='+JSON.stringify(item)
			})
		},
	},
	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 scoped lang="scss">
	.rowbtn{
		padding: 5px 8px 0px 8px; 
		height: 20px;
		border-radius: 10upx;
	}
	.rowbtn-primary{
		background-color: #ebf3fe;
	}
	.rowbtn-info{
		background-color: #f7f7f7;
	}
	.createTime{
		color:#999;
		font-size: 24upx;
		line-height: 48upx;
	}
	.sea-show{
				// padding: 28rpx;
				padding: 28upx 30upx;
				padding-top: 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;
				}
				
			}
.qa-tit{
	word-break:break-all;
	width: 100%; 
	overflow: hidden; 
	text-overflow: ellipsis;
	-webkit-box-orient: vertical; 
	display: -webkit-box;-webkit-line-clamp: 2; 
	line-height: 35rpx;
	overflow: hidden;text-overflow: ellipsis;
	font-size: 28upx;
}
.title-one {
	font-size: 24rpx;
	color: #666666;
}
.authors {
	font-size: 30rpx;
	color: #444444;
	.authors-title {
		padding-bottom: 30rpx;
	}
}
.qa-answers {
		font-size: 28upx;
		color: #5b5b5b;
		display: flex;
		overflow: hidden;
		line-height: 20upx;
		width: 100%;
		// height: 70upx;
		margin: 10upx 0upx; 
		padding: 10upx 0;
	}
.top-filter {
	.top-content {
		// padding: 5px 5px;
		.top-content-options {
			padding:20upx 30upx  10upx 30upx ;
			height: 40px;
			line-height: 40px;
			margin-bottom: 10upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.textbtn {
				background-color: #ffffff;
				color: #4f4f4f;
				border-radius: 8upx;
				font-size: 24upx;
			}
			.center{
				flex:1;
				margin: 0upx 20upx 0upx 0upx;
				.u-input {
					background: #ffffff;
				}
			}
		}
	}

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

.uni-list {
	// margin-top: 10upx;
	.artical-box {
		margin-bottom: 20upx;
		background-color: #fff;
		color: #151515;
		padding: 20upx 30upx;
		padding-top: 10upx;
		&:last-of-type {
			margin-bottom: 0;
		}
		.artical-box-top {
			// font-weight: 500;
			// // font-size: 30rpx;
			font-weight: bold;
			line-height: 55rpx;
			.artical-tit{
				word-break:break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical; 
				display: -webkit-box;-webkit-line-clamp: 2; 
				font-size: 30upx;
			}
			
		}

		.articl-box-cont {
			font-size: 28rpx;
			line-height: 44rpx;
			color: #454545;
			
			margin-top: 12rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical; 
			display: -webkit-box;-webkit-line-clamp: 1; 
			word-break:break-all;
			
		}
		.articl-box-time {
			font-size: 24rpx;
			color: #999999;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;
		}
		.article_action{
			display: flex;
			justify-content: space-between;
			align-items: center;
			/deep/ .article_btn{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.u-icon__label{
					span{
						font-size: 28rpx;
					}
				}
			}
		}

		/* 	.articl-box-cont :nth-child(3) {
				display: flex;
				justify-content: space-between;
			} */
	}
}

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