<template>
	<view class="seckillGoods">
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
			<view class="uni-scroll-view-content">


				<view class="timelist" :class="seckillIndex==index?'timelistActive':''"
					v-for="(item, index) in timelist" :key="index" @click="seckillDetail(item, index)"
					style="width: 180rpx;">
					<div class="text" v-if="item.seckill_start_time > startDate" style="color:#222222">
						{{ item.name }} 即将开始
					</div>
					<div class="text" v-if="item.seckill_start_time < startDate && item.seckill_end_time > startDate"
						style="color:#21BBF3">
						{{ item.name }} 进行中
					</div>
					<div class="text" v-if="item.seckill_end_time < startDate" style="color:#999999">
						{{ item.name }} 已结束
					</div>
				</view>

			</view>
		</scroll-view>
		<!-- <scroll-view :scroll-x="true"> -->

		<!-- </scroll-view> -->

		<div class="seckillGoods-list">
			<div class="seckillGoods-item" v-for="(item, index) in goodlist" :key="index" @click="goodsDetail(item)">
				<div class="cover">
					<image :src="$util.img(item.sku_image)" class="cover" mode="aspectFill"></image>
					<!-- <div class="time">{{ $util.countDown(item.end_time - item.start_time) }}</div> -->
					<!-- <uni-count-down
						class="time"
						:day="item.discountTimeMachine.d"
						:hour="item.discountTimeMachine.h"
						:minute="item.discountTimeMachine.i"
						:second="item.discountTimeMachine.s"
						splitorColor="#fff"
						color="#fff"
						backgroundColor="none"
						:font-size="12"
					/> -->
				</div>
				<div class="right">
					<div class="title">{{ item.sku_name }}</div>
					<div class="labels-1">
						<div class="label-item">秒杀活动：{{ item.seckill_name}}</div>
						<div class="label-item">库存：{{ item.goods_stock }}</div>

						<!-- <div class="label-item">执行标准：{{ item.execu_content.title?item.execu_content.title:'-'  }}</div> -->
						<!-- <div class="label-item">生产企业：{{ item.business?item.business:'-'  }}</div> -->
					</div>
					<div class="bottom" v-if="userInfo.show_price && token">
						<div class="price">
							秒杀价 ¥
							<span>{{ item.seckill_price }}</span>
							<!-- <div class="y-price">{{ item.price }}</div> -->
						</div>
						<div class="y-price">原价：¥{{ item.price }}</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
	import { mapGetters } from 'vuex';
	export default {
		components: { uniCountDown },
		data() {
			return {
				id: '',
				startDate: '',
				seckillIndex: undefined,
				goodlist: [],
				timelist: [],
				token: uni.getStorageSync('token'),
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			};
		},

		computed: {
			...mapGetters(['userInfo'])
		},
		onShow() {
			let time = new Date().getHours() * 60 * 60;
			let divide = new Date().getMinutes() * 60;
			let s = new Date().getSeconds();
			let startDate = time + divide + s;
			let id = '';
			let _this = this;
			this.startDate = startDate;
			this.$api.sendRequest({
				// url:'/api/goodssku/seckillgoodshomeList',
				url: '/api/goodssku/seckilltimeList',
				data: {},
				success: res => {
					this.timelist = res.data.list;
					console.log(this.timelist);
					// <!-- seckill_start_time开始时间  seckill_end_time结束时间-->
					var arr = '';
					for (var i = 0; i < res.data.list.length; i++) {
						if (
							res.data.list[i].seckill_start_time < startDate &&
							res.data.list[i].seckill_end_time > startDate
						) {
							arr = res.data.list[i].id;
						}
					}
					this.$api.sendRequest({
						url: '/api/goodssku/seckillgoodsList',
						data: {
							seckill_time_id: arr
						},
						success: v => {
							console.log(v);
							this.$api.sendRequest({
								url: '/api/goodssku/seckillgoodsList',
								data: {
									seckill_time_id: v.data.seckill_time_id
								},
								success: res => {
									this.goodlist = res.data.list;
								}
							});
							for (var i = 0; i < v.data.list.length; i++) {
								_this.goodlist = v.data.list;
								console.log(_this.goodlist);
							}
						}
					});
				}
			});
		},
		filters: {
			filterCount(num) {
				return num.substring(0, 5);
			}
		},

		methods: {
			scroll(e) {
				// console.log(e);
				this.old.scrollTop = e.detail.scrollTop;
			},

			seckillDetail(item, index) {
				this.seckillIndex = index;
				this.$api.sendRequest({
					url: '/api/goodssku/seckillgoodsList',
					data: {
						seckill_time_id: item.id
					},
					success: res => {
						this.goodlist = res.data.list;
					}
				});
			},
			goodsDetail(item) {
				uni.navigateTo({
					url: '/page_goods/detail/detail?goods_id=' + item.goods_id
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.seckillGoods {
		padding: 32rpx;
		line-height: 1;

		.seckillGoods-list {
			.seckillGoods-item {
				background-color: #fff;
				margin-bottom: 30rpx;
				padding: 24rpx;
				display: flex;
				line-height: 40rpx;

				border-radius: 16rpx;

				.labels-1 {
					margin-top: 10rpx !important;

					.label-item {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						font-size: 24rpx !important;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999 !important;
						line-height: 40rpx !important;
					}
				}

				.right {
					flex: 1;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 16rpx;

						.price {
							display: flex;
							align-items: center;

							color: #ef6154;

							span {
								font-size: 36rpx;
								font-weight: bold;
								margin: 0 16rpx 0 6rpx;
							}


						}

						.y-price {
							font-weight: bold;
							font-size: 28rpx;
							color: #999;
							text-decoration: line-through;
						}
					}

					.title {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						margin-bottom: 16rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}

				.cover {
					width: 180rpx;
					height: 180rpx;
					border-radius: 8rpx;
					margin-right: 24rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.time {
						width: 100%;
						position: absolute;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #ffffff;
						line-height: 44rpx;
						background-color: rgba(0, 0, 0, 0.4);
						bottom: 0;
						border-radius: 0 0 8rpx 8rpx;
					}

					/deep/ .uni-countdown__number {
						font-size: 24rpx;
						padding: 0;
						border: none;
						margin: 0;
						line-height: 44rpx;
					}

					/deep/.uni-countdown__splitor {
						font-size: 24rpx;
						line-height: 44rpx;
					}
				}
			}
		}

		.times {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 32rpx;

			.itemActive {
				background: #eee;
			}

			.time-item {
				text-align: center;
				flex: 1;
				padding: 16rpx 0;
				border-radius: 16rpx;

				.time {
					font-size: 36rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #222222;
					margin-bottom: 12rpx;
				}

				.text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}
		}
	}

	.scroll-view_H {
		// white-space: nowrap;
		width: 100%;
		display: flex;

		.uni-scroll-view-content /deep/ {
			min-width: 1500rpx;
			display: flex;
			margin-bottom: 30rpx;

			.timelist {
				padding: 16rpx 0;
				width: 300rpx;
				text-align: center;

				.timeName {}
			}

			.timelistActive {
				background: #eee;
				padding: 16rpx 0;
				border-radius: 16rpx;
			}
		}
	}
</style>