<template>
	<view class="spike">
		<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>
		</view>
	</view>
</template>
<script>
import SpecialGoods from "../../components/shop/special-shop/index"
export default {
	data() {
		return {
			spikeList: [],
			page: 0,
			seckillTime: {}
		}
	},
	components: {
		SpecialGoods
	},
	onShow() {
		this.getSpikeList();
	},
	methods: {
		// 全部秒杀
		getSpikeList() {
			this.$u.api.getSpikeList({ page: this.page }).then(res => {
				if(res.errCode == 0) {
					this.spikeList = res.data.list;
					this.seckillTime = {
						bigHour: res.data.bigHour,
						littleHour: res.data.littleHour,
					}
				}
			})
		},
	}
};
</script>
<style lang="scss" scoped>
.spike{
	min-height: calc(100vh - var(--window-top));
	padding: 30rpx;
	border-top: 1rpx solid rgba(236,236,236,1);
	.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: #bfbfbf;
				margin: 0 10rpx;
				padding: 2rpx;
			}
		}
	}
}
</style>