<template>
	<view class="trumpet">
		<image src="@/static/zy/index/trumpet.png" mode="aspectFit" class="trumpet-icon"></image>
		<swiper vertical="true" class="trumpet-swiper" circular autoplay disable-touch>
			<swiper-item class="trumpet-swiper-item" v-for="(item,index) in boxResultList" :key="index">
				<view class="trumpet-txt">{{item}}</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		boxResultApi
	} from '@/API/index.js'
	export default {
		data() {
			return {
				boxResultTimer: null,
				boxResultList: []
			}
		},
		mounted() {
			this.getBoxResult()
			this.boxResultTimer = setInterval(() => {
				this.getBoxResult()
			}, 6000)
		},
		methods: {
			// 获取滚动公告
			getBoxResult() {

				boxResultApi().then(res => {
					if (res.code === 200) {
						let arr = []
						res.data.forEach(item => {
							let time = ''
							const date = new Date(item.time * 1000);
							const now = new Date();
							const diffInSeconds = Math.floor((now - date) / 1000);
							if (diffInSeconds === 0) {
								time = `刚刚`
							} else {
								time = `${diffInSeconds}秒前`
							}
							arr.unshift(`${item.nickName}在${time}开启${item.boxName}得到了${item.productName}`)
						})

						arr.forEach(item => {
							const match = this.boxResultList.find(bItem => bItem === item);
							if (!match) {
								this.boxResultList.unshift(item);
							}
						})
						if (this.boxResultList.length > 20) {
						  this.boxResultList = this.boxResultList.slice(0, 20);
						}
						// console.log(this.boxResultList)
					} else {
						this.$api.msg(res.message)
					}
				})
			},
		},
		beforeDestroy() {
			clearInterval(this.boxResultTimer)
		}
	}
</script>

<style lang="scss" scoped>
	.trumpet {
		display: flex;
		align-items: center;
		margin-top: 45rpx;
		margin-left: 67rpx;
		width: 617rpx;
		height: 64rpx;
		background: #F26378;
		border-radius: 32rpx;
		border: 0px solid #AFA08D;
		padding: 0 20rpx;

		.trumpet-icon {
			width: 35rpx;
			height: 35rpx;
		}

		.trumpet-swiper {
			margin-left: 23rpx;
			margin-top: 4rpx;
			width: 503rpx;
			height: 60rpx;

			.trumpet-swiper-item {
				width: 503rpx;
				height: 60rpx;

				.trumpet-txt {
					width: 503rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>