<template>
	<!--我的文章-->
	<view class="article">
		<u-toast ref="articleToast"></u-toast>
		<page-title :showBack="true" goPgae="/pages/plus/addArticle">
			我的文章
		  <template #right>
		      <p style="width: 100upx;margin-top: 18upx;">去发表</p>  
		    </template>
		</page-title>
		<view class="top-filter">
			<view class="top-content">
			<!-- 	<view class="put-articles" @click="toAdd()">
					去发表
				</view> -->
				
				<view class="top-content-options">
					<view class="input-search">
						<u-search 
						@search="findData(true)"
						:showAction="false"
						@clear="findData(true)"
						:clearabled="true"
						:height="36"
						v-model="articleList.keyword" 
						placeholder="搜索">
							<!-- <template slot="suffix">
								<u-icon @click="findData(true)" name="search"></u-icon>
							</template> -->
						</u-search>
						
						
					</view>
					<view class="addition">
						<view class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">
							<text>筛选</text> 
							<u-icon style="margin-left: 18upx;" name="arrow-down"></u-icon>
						</view>
						<view class="sea-show" v-show="statusSelectShow">
							<view  v-for="(status,index) in selectData" :key="index" :class="[articleList.status == status.value? 'sea-active':'','sea-index']" @click="chooseStatus(status)">
								{{status.label}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="uni-list">
			<!-- <view v-show="statusSelectShow" class="sea-show">
				<text :class="[articleList.status == status.value? 'sea-active':'','sea-index']" v-for="(status,index) in selectData" :key="index" @click="chooseStatus(status)">{{status.label}}</text>
			</view> -->
			<view v-if="articleList.list.length == 0 && loadStatus == 'noMore'" style="text-align: center;margin-top: 100upx;color: #666;">
				暂未搜索到内容
			</view>
			<view style="padding-top: 14upx;">
				<!-- 文章内容 下面需要把样式提到class中-->
				<view class="article_one" v-for="(item, index) of articleList.list" :key="item.id">
					<view >
						<view class="article-center">
							<author-info :avatar="item.avatar" :name="item.name" :info="item.orgInfo" :sex="item.sex"></author-info>
							<view class="article-status" >
								<view @click="toDetail(item)" v-html="$keywordActiveShow(item.title, articleList.keyword)" class="article-top"></view>
							</view>
							<view class="article-bot">
								<text class="article-wz" @click="toDetail(item)" v-html="$keywordActiveShow(item.summary, articleList.keyword)"></text>
								<view class="article-img" @click="toDetail(item)" v-if="item.coverurl">
									<img style="width: 182upx;height:124upx"  :src="$config.fileUrl+item.coverurl" alt=""/>
								</view>
							</view>
							<!--自己不需要显示作者信息呀-->
							<view style="display: flex;justify-content: space-between;">
								<view style="display: flex;">
									<view class="rowbtn" @click="toEdit(item)">
										<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="del(item)">
										<image class="btn-img" src="../../static/images/icon/del.png" size="24"></image><text class="btn-text">删除</text>
									</view>
								</view>
								<view style="margin-right: -30upx;">
									<interact-bar :views="false" :data="item"></interact-bar>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-show="articleList.count>0" :status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
import apiArticle from '@/api/modules/article.js';
import apiUser from '@/api/system/user.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			flagLoading:false,
			statusArray: [
				[
					{
						name: '全部',
						value: null
					},
					{
						name: '待解决',
						value: false
					},
					{
						name: '已解决',
						value: true
					}
				]
			],
			articleList: {
				pageIndex: 1,
				pageSize: 4,
				keyword:'',
				status: null,
				count: 0,
				list: []
			},
			editId:'',
			loadStatus: 'more',
			statusSelectShow: false,
			statusBtn: '全部',
			selectData: [
				// [
					{ label: '全部', value: null },
					{ label: '草稿', value: 1 },
					{ label: '待审核', value: 2 },
					{ label: '未通过', value: 3 },
					// { label: '已通过', value: 5 },
					{ label: '已下架', value: 8 },
					{ label: '已发布', value: 9 },
				]
			// ]
		};
	},
	computed: {
	  ...mapGetters(['userInfo'])
	},
	methods: {
		setEditId(item){
			this.editId=item.id;
		},
		findData(flag) {
			if(this.flagLoading) {
				return;
			}
			this.flagLoading = true;
			//是否重置列表
			if (flag) {
				this.articleList.list = [];
			}
			uni.showLoading({ title: '加载中...' });
			//查询条件
			let params = {
				pageIndex: this.articleList.pageIndex,
				pageSize: this.articleList.pageSize,
				status: this.articleList.status,
				keyword:this.articleList.keyword,
				sysCreateAid:this.userInfo.aid
			};
			apiArticle.myPageList(params).then(async rs => {
				this.flagLoading = false;
				uni.hideLoading();
				if (rs.status == 200) {
					this.articleList.count = rs.result.count;
				
					if (rs.result.list.length != 0) {
						let userIds = [];
						rs.result.list.forEach(item => {
							item.name=''
							item.aid = '';
							item.orgInfo = '';
							item.code = '';
							item.avatar = '';
							item.sex = null;
							this.articleList.list.push(item);
							userIds.push(item.sysCreateAid);
						});
						await this.loadUserInfos(rs.result.list, userIds);
						if (this.articleList.list.length < this.articleList.count) {
							this.loadStatus = 'more';
						} else {
							this.loadStatus = 'noMore';
						}
					}else{
						this.loadStatus = 'noMore';
						// uni.showToast({
						// 	title: '查无数据',
						// 	icon: 'none'
						// });
					}
				}
				// 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;
								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'
					});
				}
				// this.$nextTick(function(){
				// 	uni.hideLoading();
				// })
				//原本想用async await等数据请求完成后使用hideLoading,但是页面渲染需要时间，关闭太早了，有考虑用nexeTick()
				setTimeout(function() {
					uni.hideLoading();
				}, 100);
			});
		},
		chooseStatus(e) {
			if(this.flagLoading) {
				return;
			}
			this.statusSelectShow = false;
			// this.statusBtn = e.value[0].label;
			this.articleList.pageIndex = 1;
			this.articleList.status = e.value;
			this.findData(true);
		},
		toAdd() {
			uni.navigateTo({
				url: '/pages/plus/addArticle'
			});
		},
		toDetail(item) {
			if(item.status==1){
				return uni.navigateTo({
					url: '/pages/plus/addArticle?value=' + JSON.stringify(item)
				});
			}
			uni.navigateTo({
				url: '/pages/resource/articeDetail?id=' + item.id
			});
		},
		statusDisplay(status){
			let obj={
				1:'<span style="color:#999">[草稿]<span>',
				2:'<span style="color:#3E7FFF">[待审核]<span>',
				3:'<span style="color:#FF3E3E">[未通过]<span>',
				8:'<span style="color:#2AB28B">[已下架]<span>',
				9:'<span style="color:#3E7FFF">[已发布]<span>'
			}
			return obj[status]
		},
		del(item){
			const $this=this
			uni.showModal({
				title: '提示',
				content: '您确定要删除此文章吗？',
				success: function (res) {
					if (res.confirm) {
						//$this.del();
						apiArticle.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/editArticle?id='+item.id
			})
		},
	},
	onLoad: function(options) {
		this.findData(true);
	},
	onPullDownRefresh() {
		this.onReachBottom();
	},
	async onReachBottom() {
		if (this.articleList.list.length < this.articleList.count) {
			this.loadStatus = 'loading'; //more,loading,noMore
			this.articleList.pageIndex++;
			await this.findData(false);
			this.loadStatus = 'more';
		} else {
			this.loadStatus = 'noMore';
		}
	}
}
</script>

<style lang="scss" scoped>
	.article{
		background-color: #fff;
		padding: 36upx;
	}
	.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;
		}
	}
	.rowbtn-info{
		background-color: #f7f7f7;
	}
.top-filter {
	.top-content {
		// position: relative;
		.put-articles{
			text-align: right;
			// float: right;
			// position: absolute;
			// right:0;
			// top:-60upx;
			font-size: 32upx;
			font-weight: 600;
			color: #387DF7;
		}
		// padding: 5px 5px;
		.top-content-options {
			// height: 40px;
			display: flex;
			line-height: 40px;
			.input-search {
				flex: 1;
				// padding: 28upx 20upx;
				margin: 0upx 20upx 0upx 0;
				.u-input {
					background: #ffffff;
				}
			}
		}
	}

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


.addition {
	width: 108upx;
	margin-left: 90rpx;
	position: relative;
	
	.textbtn {
		display: flex;
		width: 108upx;
		color: #4f4f4f;
		font-size: 28upx;
	}
	.sea-show{
		width: 130upx;
		position: absolute;
		top: 80upx;
		right: 0;
		background: #FFFFFF;
		box-shadow: 0px 2upx 8upx 4upx rgba(0,0,0,0.07);
		border-radius: 12upx;
		padding: 20upx 60upx;
		z-index: 99;
		.sea-active{
			color: #387DF7 !important;
		}
		.sea-index{
			font-size: 28upx;
			color: #666666;
			line-height: 60upx;
			text-align: center;
		}
		.sea-index:last-child{
			margin-right: 0;
		}
		
	}
}

.uni-list {
	
	
	.article_one{
		// padding: 20upx 30upx;
		// padding-top: 10upx;
		// margin-bottom: 20upx;
		background-color: #ffffff;
		// &:last-of-type{
		// 	margin-bottom: 0;
		// }
		// .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: 12px;
		// 			}
		// 		}
		// 	}
		// }
	}
	.article-center {
		background: #ffffff;
		//border-radius: 5px;
		padding-top: 20upx;
		padding-bottom: 40upx;
		border-bottom: 20upx solid #F9F9F9;
		.article-status{
			// display: flex;
			// font-weight: bold;
			// justify-content: flex-start;
			// align-items: center;
			font-size: 30rpx;
			.article-top {
				line-height: 50upx;
				font-weight: 600;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical; 
				display: -webkit-box;-webkit-line-clamp: 2; 
				word-break:break-all;
				color: #333333;
				// text-align: left;
				// flex-shrink: 10000;
				// margin-left: 4px;
			}
		}
		.article-bot {
			display: flex;
			justify-content: space-between;
			.article-wz {
				font-size: 28upx;
				color: #666666;
				height: 80upx;
				line-height: 40upx;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical; 
				display: -webkit-box;-webkit-line-clamp: 2; 
				word-break:break-all;
				margin: 16upx 0px 0;
			}
			.article-img{
				margin-left:26upx;
				width: 182upx;
				height: 124upx;
				border-radius: 8upx;
			}
		}
		.item-author{
			margin: 20upx 0;
		}
		.art-bottom{
			.createTime{
				padding-bottom: 30upx;
				color:#999;
				font-size: 20upx;
				
			}
			.article_btn{
				float: right;
				font-size: 12px;
				margin-top: 5rpx;
				.u-icon__label{
					font-size: 12rpx;
							span{
								font-size: 12rpx;
							}
						}
			}
		}
		
		
	}
	.createTime{
		color:#999;
		font-size: 24upx;
		line-height: 48upx;
	}
}
</style>