<template>
	<view>
		<navBar leftText="评论回复"></navBar>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
		<view class="tabC fixed flex" :style="'top:'+navH+'px;'">
			<view :class="'item flex1 relative '+(selectTab==index?'select':'')" v-for="(item,index) in tabList" :key="index" @click="clickTabItem(index)">
				{{item}}
				<view v-if="selectTab==index" class="line absolute"></view>
			</view>
		</view>
		<view class="list fixed" :style="'top:'+listTop+'px;'">
			<block v-if="selectTab==0">
				<view class="commentMeItem" v-for="(item,index) in commentList" :key="index">
					<view class="replyContentC">
						<view class="flex">
							<view class="flex1 flex">
								<image class="avatar" src="" mode="aspectFill"></image>
								<view class="flex1">
									<view class="replyNickname">逸尘破晓</view>
									<view class="time">2-15 15:37</view>
								</view>
							</view>
							<view class="reply">回复</view>
						</view>
						<view class="content">
							回复<text class="originNickname">永不落的梦想</text><text>：四部门联合启动的人力资源服务业与制造业融合发展点。</text>
						</view>
					</view>
					<view class="originalTextC">
						<view class="originReply">
							<text class="originNickname">永不落的梦想</text><text>：四部门联合启动的人力资源服务业与制造业融合发展点。</text>
						</view>
						<view class="originEventC">
							<view class="levelTitleC flex">
								<view class="level">{{item.event.importance}}</view>
								<view class="title">{{item.event.title}}</view>
							</view>
							<view class="eventContent">人社部、工信部等四部门印发通知，明确在30个城市开展3年期试点，培育人力资源服务与制造业协同机构...</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="myCommentItem" v-for="(item,index) in commentList" :key="index">
					<view class="replyContentC">
						<view class="flex">
							<image class="avatar" :src="item.commenter.avatar_url" mode="aspectFill"></image>
							<view class="flex1">
								<view class="nickname">{{item.commenter.nickname}}</view>
								<view class="time">{{getLocaleMonthDayHourMinte(item.created_at)}}</view>
							</view>
						</view>
						<view class="content">{{item.content}}</view>
					</view>
					<view class="originEventC" @click.stop="clickEventItem(item.event.id)">
						<view class="levelTitleC flex">
							<view class="level">{{item.event.importance}}</view>
							<view class="title">{{item.event.title}}</view>
						</view>
						<view class="eventContent">{{item.event.description}}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue';
	import { userActivityList } from '@/request/api';
	import { getLocaleMonthDayHourMinte } from '@/utils/util';
	
	export default {
		data() {
			return {
				navH:inject('navHeight'),
				listTop:'',
				tabList:['评论我的','我评论的'],
				selectTab:0,
				commentList:[],
				page:1,
				loadAll:false,
				getLocaleMonthDayHourMinte:getLocaleMonthDayHourMinte
			}
		},
		onLoad() {
			this.listTop = this.navH+(75+10)/750*inject('windowWidth')
			this.getCommentListData()
		},
		onPullDownRefresh() {
			this.page = 1 
			this.getCommentListData()
		},
		onReachBottom() {
			if(!this.loadAll)
			{
				this.page ++ 
				this.getCommentListData()
			}
		},
		methods: {
			/**
			 * 点击选择对应分类
			 * @param {Object} index
			 */
			clickTabItem(index)
			{
				if(this.selectTab!=index)
				{
					this.selectTab = index
					this.getCommentListData()
				}
			},
			/**
			 * 点击查看事件详情
			 * @param {Object} id
			 */
			clickEventItem(id)
			{
				uni.navigateTo({
					url:'/pages/index/eventDetails/eventDetails?id='+id
				})
			},
			/**
			 * 获取评论列表数据
			 */
			getCommentListData()
			{
				let param = {page:this.page,type:this.selectTab==0?'commented':'comments'}
				userActivityList(param).then(res=>{
					if (res.code==200) {
						if(res.data.current_page==1)
						{
							this.commentList = res.data.activities
						}else
							this.commentList = this.followList.concat(res.data.activities)
						if(res.data.current_page==res.data.pages)
						{
							this.loadAll = true
						}
					} else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					
				})
			}
		}
	}
</script>

<style lang="less">
.topBg
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.tabC
{
	background-color: white;
	left: 0;
	right: 0;
	margin-top: 10rpx;
	border-bottom: solid 1rpx #E4E4E4;
	border-radius: 20rpx 20rpx 0 0;
	.item 
	{
		line-height: 74rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #42485B;
		text-align: center;
	}
	.item.select 
	{
		font-weight: bold; 
		color: #F97316; 
	}
	.item.select .line 
	{
		background-color: #F97316;
		left: calc((100% - 50rpx)/2);
		width: 50rpx;
		height: 2rpx;
		bottom: 0;
	}
}
.list 
{
	background-color: white;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	.commentMeItem 
	{
		.replyContentC 
		{
			padding: 40rpx 25rpx 0;
			.avatar
			{
				margin-right: 22rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.replyNickname
			{
				font-size: 28rpx;
				font-weight: bold;
				color: #111;
			}
			.time
			{
				font-size: 26rpx;
				font-weight: 500;
				color: #aaa;
			}
			.reply 
			{
				width: 90rpx;
				height: 52rpx;
				line-height: 50rpx;
				border-radius: 26rpx;
				border: solid 1rpx #DDD;
				font-size: 24rpx;
				text-align: center;
			}
			.content 
			{
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #444;
				.originNickname 
				{
					color: #F97316;
				}
			}
		}
		.originalTextC
		{
			background-color: #F7F7F7;
			margin-top: 20rpx;
			padding: 20rpx 25rpx 25rpx;
			.originReply
			{
				font-size: 24rpx;
				font-weight: 500;
				color: #444;
				.originNickname
				{
					color: #F97316;
				}
			}
			.originEventC 
			{
				background-color: white;
				margin-top: 20rpx;
				padding: 34rpx 16rpx;
				.levelTitleC
				{
					font-size: 30rpx;
					font-weight: bold;
					.level 
					{
						background-color: #FEC44F;
						margin-right: 17rpx;
						width: 50rpx;
						height: 40rpx;
						border-radius: 10rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: white;
						text-align: center;
					}
					.title 
					{
						color: #222;
					}
				}
				.eventContent
				{
					margin-top: 20rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #666;
				}
			}
		}
	}
	.myCommentItem
	{
		.replyContentC
		{
			padding: 40rpx 25rpx 0;
			.avatar
			{
				margin-right: 22rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.nickname
			{
				font-size: 28rpx;
				font-weight: bold;
				color: #111;
			}
			.time
			{
				font-size: 26rpx;
				font-weight: 500;
				color: #aaa;
			}
			.content 
			{
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #444;
			}
		}
		
		.originEventC 
		{
			background-color: #F7F7F7;
			margin-top: 20rpx;
			padding: 20rpx 40rpx;
			.levelTitleC
			{
				font-size: 30rpx;
				font-weight: bold;
				.level 
				{
					background-color: #FEC44F;
					margin-right: 17rpx;
					width: 50rpx;
					height: 40rpx;
					border-radius: 10rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: white;
					text-align: center;
				}
				.title 
				{
					color: #222;
				}
			}
			.eventContent
			{
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #666;
			}
		}
	}
}
</style>
