<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="seckill">
		<!--顶部内容-->
		<view class="seckill-top">
			<image class="top-background-image" :src="$util.img('public/static/img/futures/seckill-bg.png')" mode="widthFix"></image>
			<view class="seckill-gz"  @click="openPopup()">规则</view>
			<view class="tip">
				<view class="title">商品全部实物销售</view>
				<view class="content">本区域销售的商品均为商家已经生产并承诺全额补货</view>
			</view>
			<view class="seckill-count-down" v-if="h > 0 || i > 0 || s > 0">
				<text v-if="parseInt(activity_status) === 1">距开始</text>
				<text v-else>距结束</text>
				<text class="count-down-time">{{ h }}</text>
				时
				<text class="count-down-time">{{ i }}</text>
				分
				<text class="count-down-time">{{ s }}</text>
				秒
			</view>
		</view>
		<!--商品列表-->
		<mescroll-uni ref="mescroll" @getData="getList" top="350">
			<block slot="list">
				<!--活动正常进行中 商品列表-->
				<view class="goods-list" v-if="list.length > 0 && parseInt(activity_status) === 3">
					<view class="goods-block" v-for="(item, index) in list" :key="index">
						<view class="left">
							<image class="goods-image" :src="$util.img(item.goods_image)" mode="widthFix"></image>
							<view class="goods-status" v-if="parseInt(item.status) === 2">正在销售</view>
							<view class="goods-status" v-else>{{ status_text[item.status] }}</view>
						</view>
						<view class="right">
							<view class="goods-title">{{ item.goods_name }}</view>
							<view class="goods-sell">
								<view class="goods-sell-item">销售商：{{ item.seller_nickname }}</view>
								<view class="goods-sell-item">采购数量：{{ item.total }}件</view>
							</view>
							<view class="goods-bottom">
								<view class="price">
									<view class="price-item">单价:￥{{ item.market_price }}/{{ item.unit || '件' }}</view>
									<view class="price-item">
										采购价:
										<text class="purchase_price">￥{{ item.price }}</text>
									</view>
								</view>
								<view class="buy-button">
									<view class="buy-btn" @click="ToBuy(item)">前去采购</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--秒杀活动未正常进行时的内容-->
				<view class="not-list" v-else>
					<image
						class="not-list-image"
						v-if="parseInt(activity_status) === 1"
						:src="$util.img('public/static/img/futures/futures_not_started.png')"
						mode="widthFix"></image>
					<image
						class="not-list-image"
						v-if="parseInt(activity_status) === 2"
						:src="$util.img('public/static/img/futures/futures_not_goods.png')"
						mode="widthFix"
					></image>
					<view class="back-buttons"><view class="back-buttons-btn" @click="$util.goBack()">返回</view></view>
				</view>
			</block>
		</mescroll-uni>
		<!--登录弹框-->
		<ns-login ref="login"></ns-login>
		<!--加载动画-->
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
	<view @touchmove.prevent>
		<uni-popup ref="registerPopup" type="center" :maskClick="false">
			<view class="conten-box">
				<view class="close"><text class="iconfont icon-close" @click="toClose"></text></view>
				<view class="title">{{ regisiterAgreement.title }}</view>
				<view class="con">
					<scroll-view scroll-y="true" class="con"><rich-text :nodes="regisiterAgreement.content"></rich-text></scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [],
			activity_status: 1, // 活动状态：1=活动未开始，2=活动已开始无商品，3=活动正常进行中
			status_text: {
				1: '库存',
				2: '正在销售',
				3: '已售出',
				4: '提货中',
				5: '提货完成',
				6: '待支付',
				7: '捡漏'
			},
			// 倒计时
			setInterval_time: 0, // 倒计时计算时间
			diff_time: 0,
			h: '00',
			i: '00',
			s: '00',
			interval: '',
			regisiterAgreement: {
				// 注册协议
				title: '',
				content: ''
			}
		};
	},
	components: {},
	mixins: [],
	onLoad(option) {
		this.getRegisiterAggrement();
	},
	onReady() {
		// 判断是否登录
		if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_rush/futures/seckill');
	},
	onShow() {},
	methods: {
		ToBuy(data){
		  uni.setStorage({
		    key: 'futuresOrderCreateData',
		    data: {
		      futures_id: data.id,
		      order_remarks: ''
		    },
		    success: () => {
		      this.$util.redirectTo('/pages_rush/futures/details',{ id: data.id });
		    }
		  });
		},
		/**
		 * 获取注册协议
		 */
		getRegisiterAggrement() {
			this.$api.sendRequest({
				url: '/futures/api/futures/aggrement',
				success: res => {
					if (res.code >= 0) {
						this.regisiterAgreement = res.data;
					}
				}
			});
		},
		// 获取商品列表
		getList(mescroll) {
			this.$api.sendRequest({
				url: '/futures/api/futures/list',
				data: {
					page: mescroll.num,
					page_size: mescroll.size,
					status: 'miaosha'
				},
				success: res => {
					if (parseInt(res.code) === 0) {
						// 活动正常进行中
						mescroll.endSuccess(Object.keys(res.data.list).length);
						//设置列表数据
						if (parseInt(mescroll.num) === 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.data.list); //追加新数据
						this.setInterval_time = parseInt(res.data.end_time);
						// 判断状态
						this.activity_status = 3; // 正常进行中
						if (Object.keys(this.list).length <= 0) this.activity_status = 2; // 已开始无商品
					} else if (parseInt(res.code) === -801) {
						// 未到秒杀时间 res.code：-801=未到秒杀时间
						mescroll.endSuccess(0);
						this.activity_status = 1; // 活动未开始
						this.setInterval_time = res.data.miaosha_start_time;
					}
					// 开启倒计时
					this.countDown();
					this.$refs.loadingCover.hide();
					// setTimeout(() => {
					//   if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					// }, 1000);
				},
				fail: res => {
					mescroll.endErr();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		// 倒计时
		countDown() {
			this.interval = setInterval(() => {
				// 获取距离结束时间的毫秒数
				let nowTime = Math.ceil(new Date().getTime() / 1000);
				this.diff_time = this.setInterval_time - nowTime;
				// 计算时间
				let result = this.$util.countDown(this.diff_time);
				this.h = parseInt(result.d) * 24 + parseInt(result.h);
				this.i = parseInt(result.i);
				this.s = parseInt(result.s);
			}, 1000);
		},
		/**
		 * 展示注册协议
		 */
		openPopup() {
			this.$refs.registerPopup.open();
		},
		/**
		 * 点击关闭协议
		 */
		toClose() {
			this.$refs.registerPopup.close();
		}
	},
	onBackPress(options) {
		if (options.from === 'navigateBack') return false;
		this.$util.redirectTo('/pages/member/index');
		return true;
	}
};
</script>

<style lang="scss" scoped>
.seckill {
	background: #fafcff;
	min-height: 100vh;
	.seckill-top {
		width: 100vw;
		position: relative;
		.top-background-image {
			width: 100%;
		}
		.seckill-gz{
			   color: rgb(255, 255, 255);
			    font-size: 20px;
			    top: 2px;
			    margin-left: 10px;
			    position: absolute;
			    display: flex;
			    flex-direction: column;
			    align-items: flex-end;
			    width: 100%;
			    -webkit-transform: scale(0.85);
			    transform: scale(0.85);
		}
		.seckill-count-down {
			position: absolute;
			top: 260rpx;
			left: 0;
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			color: #f7dee1;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: center;
			align-items: center;
			height: 60rpx;
			.count-down-time {
				--size--: 45rpx;
				background: #ffffff;
				color: #fe7671;
				min-width: calc(var(--size--) - 20rpx);
				height: var(--size--);
				border-radius: 10rpx;
				display: inline-flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: center;
				align-items: center;
				margin: 0 6rpx;
				font-size: 26rpx;
				padding: 0 10rpx;
			}
		}
		.tip {
			position: absolute;
			top: 130rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			transform: scale(0.85);
			z-index: 500;
			.title {
				width: 520rpx;
				font-weight: 900;
				font-size: 60rpx;
				color: #f4de38;
				border-bottom: solid 2rpx;
				border-top: solid 2rpx;
				line-height: 82rpx;
				text-align: center;
			}
			.content {
				font-size: 32rpx;
				color: #fff;
			}
		}
	}
	.goods-list {
		margin: 0 30rpx;
		.goods-block {
			--size--: calc((100vw - 100rpx) / 3);
			border-radius: 20rpx;
			background: #ffffff;
			padding: 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 2rpx 10rpx #eeeff2;
			width: calc(100% - 40rpx);
			display: inline-flex;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: center;
			justify-content: center;
			align-items: center;
			height: var(--size--);
			.left {
				margin-right: 20rpx;
				height: var(--size--);
				width: var(--size--);
				position: relative;
				border-radius: 20rpx;
				overflow: hidden;
				.goods-image {
					max-width: 100% !important;
					max-height: 100% !important;
				}
				.goods-status {
					position: absolute;
					bottom: 0;
					width: 100%;
					background: #fc4740;
					color: #febebc;
					font-size: 24rpx;
					text-align: center;
					height: 30rpx;
					line-height: 30rpx;
				}
			}
			.right {
				width: calc((var(--size--) * 2) - 20rpx);
				display: inline-flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-content: flex-start;
				justify-content: flex-start;
				align-items: flex-start;
				height: 100%;
				.goods-title {
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 30rpx;
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.goods-sell {
					width: 100%;
					display: inline-flex;
					height: 50rpx;
					line-height: 50rpx;
					color: #b5b7c0;
					.goods-sell-item {
						width: 50%;
						color: #b5b7c0;
						font-size: 24rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 50rpx;
					}
					.goods-sell-item:nth-of-type(1) {
						text-align: left;
					}
					.goods-sell-item:nth-of-type(2) {
						text-align: right;
					}
				}
				.goods-bottom {
					width: 100%;
					height: calc(var(--size--) - 100rpx);
					display: inline-flex;
					align-items: flex-end;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;

					.price {
						height: 100%;
						display: inline-flex;
						flex-direction: column;
						flex-wrap: nowrap;
						justify-content: flex-end;
						align-items: flex-start;
						width: calc(100% - 140rpx);

						.price-item {
							width: 100%;
							color: #b5b7c0;
							font-size: 24rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							height: 40rpx;
							line-height: 40rpx;
							.purchase_price {
								color: #fe7e79;
								font-size: 30rpx;
								font-weight: bold;
							}
						}
					}
					.buy-button {
						height: 100%;
						display: inline-flex;
						align-items: flex-end;
						justify-content: flex-end;
						.buy-btn {
							width: 140rpx;
							height: 70rpx;
							line-height: 70rpx;
							color: #fef5f5;
							background: #ff2724;
							font-size: 26rpx;
							border-radius: 100rpx;
							text-align: center;
							margin-bottom: 8rpx;
						}
					}
				}
			}
		}
	}
	.not-list {
		width: 100%;
		padding-top: 200rpx;
		display: inline-flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		.not-list-image {
			max-width: 60vw !important;
			max-height: 60vw !important;
		}
		.back-buttons {
			width: 100%;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;
			.back-buttons-btn {
				background: linear-gradient(90deg, #f5877b, #e93e3d);
				height: 70rpx;
				line-height: 70rpx;
				font-size: 34rpx;
				color: #fffefe;
				width: 300rpx;
				text-align: center;
				border-radius: 100rpx;
				letter-spacing: 6rpx;
				text-indent: 6px;
			}
		}
	}
}
.conten-box {
	padding: 0 30rpx 30rpx;
	.title {
		text-align: center;
		margin-top: 50rpx;
		margin-bottom: 10rpx;
	}
	.close {
		position: absolute;
		right: 30rpx;
		top: 10rpx;
	}
	.con {
		height: 500rpx;
	}
}
</style>
