<template>
	<view class="tui-rolling-news">
		<view class="title">
			<u-icon name="bell-fill" size="26" color='#fff'></u-icon>
			<text class="text">最新消息</text>
		</view>
		<swiper vertical autoplay circular interval="3000" class="tui-swiper">
			<swiper-item v-for="(item,index) in newsList" :key="index" class="tui-swiper-item">
				<view class="tui-news-item">{{item}}</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import sheep from '@/sheep';
	export default {
		components: {
			
		},
		props: {
			
		},
		data() {
			return {
				
			}
		},
		computed: {
			newsList() {
				var giftList = sheep.$store('sys').giftList;
				var newsList = [];
				var that = this;
				giftList.forEach(function(item){
					var news = "【"+item.nickname+"】收到了好友赠送 "+ that.fen2yuan(item.payMoney)+" 颗"
					if(item.rewardType){
						news = "【"+item.nickname+"】收到好友赠送 "+item.name+" x"+item.count;
					}
					newsList.push(news);
				})
				return newsList;
			},
		},
		methods: {
			fen2yuan(price) {
			  var f = 0;
			  var p = (price / 100.0).toFixed(0);
			  var p1 = (price / 100.0).toFixed(1);
			  var p2 = (price / 100.0).toFixed(2);
			  if(p*100 == price){
				f = 0;  
			  }else if(p1*100 == price){
				  f = 1;
			  }else if(p2*100 == price){
				  f = 2;
			  }
			  return (price / 100.0).toFixed(f)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tui-rolling-news {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		background-color: #fff;
		border-radius: 40px;
		height: 30px;
		
		.title {
			background-color: var(--ui-BG-Main);
			height: 30px;
			display: flex;
			align-items: center;
			color: #fff;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			border-bottom-left-radius: 20px;
			padding: 10px;
			margin-right: 10px;
			font-size: 24rpx;
			
			.text {
				margin-left: 4px;
			}
		}
	}
	
	.tui-swiper {
		font-size: 24rpx;
		height: 50rpx;
		flex: 1;
	}
	
	.tui-swiper-item {
		display: flex;
		align-items: center
	}
	
	.tui-news-item {
		line-height: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #666;
	}
</style>