<template>
	<scroll-view class="spike" scroll-y @scrolltolower="onreachBottom">
		<view class="title">
      <view class="name">全部秒杀</view>
			<view class="time">
				<text class="num">{{ seckillTime.littleHour || '00' }}</text>
				<text class="mah">:</text>
				<text class="num">00</text>
				<text class="mah">:</text>
				<text class="num">00</text>
				<text>-</text>
				<text class="num">{{ seckillTime.bigHour || '00' }}</text>
				<text class="mah">:</text>
				<text class="num">00</text>
				<text class="mah">:</text>
				<text class="num">00</text>
			</view>
		</view>
		<view class="spike-list">
			<SpecialGoods v-for="(item, index) in spikeList" :key="index" :item="item" type='spike'></SpecialGoods>
			<u-empty mode="list" v-if="!spikeList.length" :margin-top="240"></u-empty>
			<u-loadmore :status="loadStatus" bgColor="#FFF" margin-top="20" margin-bottom="20" @loadmore="onreachBottom"></u-loadmore>
		</view>
	</scroll-view>
</template>
<script>
import SpecialGoods from "@/components/shop/special-shop/index"
export default {
	data() {
		return {
			spikeList: [],
			page: 0,
			seckillTime: {},
			timer: true, // 限制下拉刷新
			loadStatus: 'loadmore',
		}
	},
	components: {
		SpecialGoods
	},
	onShow() {
		this.getSpikeList({ load: "reload" });
	},
	methods: {
		// 全部秒杀
		async getSpikeList({ load }) {
			const res = await this.$u.api.getSpikeList({
				page: this.page,
			})
			this.timer = true;
			if (res.errCode == 0) {
				this.seckillTime = {
					bigHour: res.data.bigHour,
					littleHour: res.data.littleHour,
				}
				if(load == 'reload') this.spikeList = res.data.list;
				else if(load == 'loadmore') this.spikeList.push(...res.data.list);
			}
			this.$forceUpdate();
			return res.data.list.length;
		},
		onreachBottom() {
			if(!this.timer) return false;
			this.loadStatus = "loading";
			this.page++;
			this.getSpikeList({ load: "loadmore" }).then(length => {
				// console.log(length);
				if(length == 0) {
					this.page--;
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			}).catch(() => {
				this.loadStatus = "nomore";
				this.page--;
			})
		},
	}
};
</script>
<style lang="scss" scoped>
.spike{
	height: calc(100vh - var(--window-top));
	padding: 30rpx;
	border-top: 1rpx solid rgba(236,236,236,1);
	box-sizing: border-box;
	.title{
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		.name{
			font-size: 30rpx;
			color: #333;
		}
		.time{
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
			> text {
				text-align: center;
				line-height: 26rpx;
			}
			.num{
				// box-sizing: content-box;
				width: 26rpx;
				// height: 25rpx;
				background-color: #000;
				color: #ffffff;
				margin: 0 10rpx;
				padding: 2rpx;
			}
			.mah {
				color: #999999;
			}
		}
	}
}
</style>