<template>
	<view>
		<navBar leftText="关注收藏"></navBar>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
		<view class="list fixed" :style="'top:'+navH+'px;'">
			<view class="item" @click="clickEventItem(item.event_id)" v-for="(item,index) in followList" :key="index">
				<view class="flex">
					<view :class="'level '+item.importance">{{item.importance}}</view>
					<view class="title">{{item.event_title}}</view>
				</view>
				<view class="content">{{item.event_description}}</view>
				<scroll-view scroll-x class="increaseRateList">
					<view :class="'rateItem '+(getRateUpOrDown(item.related_avg_chg)?'down':'up')">
						平均涨幅: 
						<image v-if="getRateUpOrDown(item.related_avg_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
						<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
						{{getRateStr(item.related_avg_chg)}}%
					</view>
					<view :class="'rateItem '+(getRateUpOrDown(item.related_max_chg)?'down':'up')">
						最大涨幅: 
						<image v-if="getRateUpOrDown(item.related_max_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
						<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
						{{getRateStr(item.related_max_chg)}}%
					</view>
					<view :class="'rateItem '+(getRateUpOrDown(item.related_week_chg)?'down':'up')">
						周涨幅: 
						<image v-if="getRateUpOrDown(item.related_week_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
						<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
						{{getRateStr(item.related_week_chg)}}%
					</view>
				</scroll-view>
				<scroll-view scroll-x class="stockList">
					<view class="stockItem" v-for="(sitem,sindex) in item.related_stocks" :key="sindex" @click.stop="clickLookRelatedStockItem(item.event_id,sitem.stock_code)">{{sitem.stock_name}} <text class="change">{{(getRateUpOrDown(sitem.daily_change)?'':'+')+sitem.daily_change}}%</text></view>
				</scroll-view>
				<view class="timeToolBarC flex">
					<view class="time flex1">{{getLocaleTime(item.created_at)}}</view> 
					<view class="toolBarC flex">
						<view class="toolItem flex"> 
							<image class="icon" src="/static/icon/home/browser.png" mode="widthFix"></image>
							<text>{{item.view_count}}</text>
						</view>
						<view class="toolItem flex">
							<image class="icon" src="/static/icon/home/comment.png" mode="widthFix"></image>
							<text>{{item.comment_count}}</text>
						</view>
						<view class="toolItem flex" @click.stop="clickFollowEvent(item.event_id,index)">
							<image class="icon" src="/static/icon/home/follow_s.png" mode="widthFix"></image>
							<text>{{item.follower_count}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue';
	import { userActivityList, followEvent } from '@/request/api';
	import { getRateStr, getRateUpOrDown, getLocaleTime } from '@/utils/util.js'
	
	export default {
		data() {
			return {
				navH:inject('navHeight'),
				followList:[],
				page:1,
				loadAll:false,
				getRateStr:getRateStr,
				getRateUpOrDown:getRateUpOrDown,
				getLocaleTime:getLocaleTime
			}
		},
		onLoad() {
			this.getFollowCollectListData()
		},
		onPullDownRefresh() {
			this.page = 1 
			this.getFollowCollectListData()
		},
		onReachBottom() {
			if(!this.loadAll)
			{
				this.page ++ 
				this.getFollowCollectListData()
			}
		},
		methods: {
			/**
			 * 点击相关股票
			 * @param {Object} code
			 */
			clickLookRelatedStockItem(id,code)
			{
				uni.navigateTo({
					url:'/pages/index/stockDetails/stockDetails?type=1&code='+code+'&id='+id
				})
			},
			/**
			 * 点击关注事件
			 * @param {Object} id
			 */
			clickFollowEvent(id,index)
			{
				followEvent(id).then(res=>{
					uni.showToast({
						title:res.message,
						icon:'none'
					})
					this.followList.splice(index,1)
				}).catch(error=>{
					
				})	
			},
			/**
			 * 查看事件详情
			 */
			clickEventItem(id)
			{
				uni.navigateTo({
					url:'/pages/index/eventDetails/eventDetails?id='+id
				})
			},
			/**
			 * 获取关注收藏列表数据
			 */
			getFollowCollectListData()
			{
				let param = {page:this.page,type:'follows'}
				userActivityList(param).then(res=>{
					if (res.code==200) {
						if(res.data.current_page==1)
						{
							this.followList = res.data.activities
						}else
							this.followList = 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;
}
.list 
{
	background-color: white;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 25rpx;
	overflow-y: scroll;
	.item 
	{
		padding: 30rpx 0;
		border-bottom: solid 1rpx #E4E4E4;
		.level
		{
			margin-right: 16rpx;
			width: 50rpx;
			line-height: 40rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: white;
			text-align: center;
		}
		.level.S
		{
			background-color: #CC4C02;
		}
		.level.A
		{
			background-color: #EC7014;
		}
		.level.B
		{
			background-color: #FB9A29;
		}
		.level.C
		{
			background-color: #FEC44F;
		}
		.title 
		{
			font-size: 30rpx;
			font-weight: bold;
			color: #222;
		}
		.content 
		{
			margin-top: 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			text-overflow: ellipsis;
			overflow: hidden;
			font-size: 24rpx;
			font-weight: 500;
			color: #666;
		}
		.increaseRateList
		{
			white-space: nowrap;
			margin-top: 24rpx;
			.rateItem
			{
				display: inline-block;
				margin-right: 15rpx;
				line-height: 44rpx;
				padding: 0 14rpx;
				border-radius: 10rpx;
				font-size: 22rpx;
				font-weight: bold;
				color: white;
				.arrow 
				{
					width: 15rpx;
					height: auto;
				}
			}
			.rateItem.up
			{
				background-color: #C00000;
			}
			.rateItem.down
			{
				background-color: #355422;
			}
		}
		.stockList 
		{
			white-space: nowrap;
			margin-top: 20rpx;
			.stockItem
			{
				background-color: #F8F8F8;
				margin-right: 21rpx;
				display: inline-block;
				padding: 0 20rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #222;
				.change 
				{
					color: #F97316;
				}
			}
			
		}
		.timeToolBarC
		{
			margin-top: 20rpx;
			.time 
			{
				font-size: 22rpx;
				font-weight: 500;
				color: #aaa;
			}
			.toolBarC
			{
				.toolItem
				{
					padding: 0 20rpx;
					font-size: 26rpx;
					font-weight: bold;
					color: #666;
					.icon
					{
						margin-right: 13rpx;
						width: 29rpx;
						height: auto;
					}
				}
				.toolItem:first-child
				{
					.icon 
					{
						margin-right: 15rpx;
						width: 33rpx;
						height: auto;
					}
				}
				
			}
		}
	}
}
</style>
