<template>
	<view class="seckill-product-wrap" :data-theme="theme()" :class="theme() || ''">
		<!--活动广告-->
		<view class="top-box">
			<!--活动类别-->
			<view class="active-top-tab">
				<scroll-view scroll-X="true" show-scrollbar="false" class="scroll-X  mb30">
					<view class="tab-list d-s-c">
						<view class="tab-item" :class="{ active: type_active == index }" v-for="(item, index) in activeList" :key="index" @click="tabTypeFunc(index)">
							{{ item.title }}
						</view>
					</view>
				</scroll-view>
				<view class="ad-activity" v-if="listData.detail"><image :src="listData.detail.file_path" mode=""></image></view>
				<!--活动时间-->
				<view class="ad-datetime ww100 pt40 pb10 d-c-c" v-if="listData.detail">
					<Countdown ref="countdown" :config="countdownConfig" @returnVal="returnValFunc"></Countdown>
				</view>
				<view class="every-day-time d-c-c mb20" v-if="listData.list.length > 0">
					<text>每日活动时间：{{ currActive.day_start_time }}至{{ currActive.day_end_time }}</text>
				</view>
				<view v-if="!listData.detail" class="p30 pt200 d-c-c d-c gray6 f26">
					<image style="width: 532rpx;margin-bottom: 80rpx;" src="/static/active-null.png" mode="widthFix"></image>
					<view class="tc gray9">暂无活动~~</view>
				</view>
			</view>
		</view>
		<view class="seckill-list-wrap" v-if="!loading">
			<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50">
				<!--列表-->
				<view class="list p-0-20">
					<view class="item d-stretch" v-for="(item, index) in listData.list" :key="index">
						<view class="product-cover"><image :src="item.product.file_path" mode="aspectFit"></image></view>
						<view class="d-b-c d-c flex-1 ml26">
							<view class="product-title ww100">{{ item.product.product_name }}</view>
							<view class="price ww100 red">
								<text class="f24">秒杀价：￥</text>
								<text class="num f36 fb">{{ item.seckill_price }}</text>
								<text class="ml20 text-d-line gray9 f24">￥{{ item.product_price }}</text>
							</view>
							<view class="slider-box ww100 d-b-c">
								<view class="left flex-1">
									<text class="already-sale">已抢购{{ item.product_sales }}件</text>
									<view class="slider">
										<view class="slider-inner" :style="'width:' + (item.product_sales / (item.product_sales + item.stock)) * 100 + '%;'"></view>
									</view>
								</view>
								<view class="right-btn ml30">
									<button v-if="status == 0 && item.stock > 0" type="primary" @click="gotoDetail(item.product_id)">马上抢</button>
									<button v-if="status == 1 && item.stock > 0" type="default" class="btn-gray">未开始</button>
									<button v-if="status == 2 && item.stock > 0" type="default" class="btn-gray">已结束</button>
									<button v-if="item.stock == 0" type="default" class="btn-gray">已抢光</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30" v-if="listData.list.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Countdown from '@/components/countdown/countdown.vue';
export default {
	components: {
		Countdown
	},
	data() {
		return {
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*活动列表*/
			activeList: [],
			/*当前活动角标*/
			type_active: 0,
			/*类别选中*/
			currActive: {},
			/*产品列表*/
			listData: {
				list: [],
				detail: null
			},
			/*活动详情*/
			detailData: {},
			/*是否正在加载*/
			loading: true,
			/*倒计时配置*/
			countdownConfig: {
				/*开始时间*/
				startstamp: 0,
				/*结束时间*/
				endstamp: 0
			},
			status: -1 //1未开始 2已过期 0进行中
		};
	},
	computed: {},
	onShow() {
		this.getActive();
	},
	mounted() {
		this.init();
	},
	onPullDownRefresh() {},
	methods: {
		/*初始化*/
		init() {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phoneHeight = res.windowHeight;
					// 计算组件的高度
					let view = uni.createSelectorQuery().select('.top-box');
					view.boundingClientRect(data => {
						let h = _this.phoneHeight - data.height + 43;
						_this.scrollviewHigh = h;
					}).exec();
				}
			});
		},

		/*类别切换*/
		tabTypeFunc(e) {
			this.type_active = e;
			this.currActive = this.activeList[e];
			this.getData();
		},
		goback() {
			uni.navigateBack({});
		},
		/*获取活动类别*/
		getActive() {
			let self = this;
			let param = {};
			self.loading = true;
			self._get(
				'plus.seckill.product/active',
				{
					param
				},
				function(res) {
					self.activeList = res.data.list;
					if (self.activeList && self.activeList.length > 0) {
						self.currActive = self.activeList[0];
						self.getData();
					}
				}
			);
		},

		/*获取数据*/
		getData() {
			let self = this;
			self.loading = true;
			self._get(
				'plus.seckill.product/product',
				{
					seckill_activity_id: self.currActive.seckill_activity_id
				},
				function(res) {
					self.listData = res.data;
					self.countdownConfig.endstamp = res.data.detail.end_time;
					self.countdownConfig.startstamp = res.data.detail.start_time;
					uni.hideLoading();
					self.loading = false;
				}
			);
		},

		/*跳转产品详情*/
		gotoDetail(e) {
			this.$refs.countdown.clear();
			this.gotoPage('/pages/product/detail/detail?product_id=' + e);
		},

		/*跳转搜索页面*/
		gotoSearch() {
			this.getData();
		},

		/*倒计时返回值*/
		returnValFunc(e) {
			this.status = e;
			// 如果原来未开始变成已开始
			if (this.listData.detail.status_text == '未开始' && e == 0) {
				this.countdownConfig.endstamp = this.listData.detail.end_time;
				this.countdownConfig.startstamp = this.listData.detail.start_time;
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f2f2f2;
}

.top-box {
	position: relative;
}

.seckill-product-wrap .tab-item {
	flex: 0;
	padding: 0 30rpx;
	font-size: 33rpx;
	height: 86rpx;
	line-height: 86rpx;
	white-space: nowrap;
	color: #333333;
}

.seckill-product-wrap .tab-item.active {
	color: #f6220c;
	font-size: 33rpx;
	opacity: 1;
	position: relative;
}

.seckill-product-wrap .tab-item.active::after {
	content: '';
	width: 120rpx;
	height: 4rpx;
	background: #f6220c;
	border-radius: 2rpx;
	position: absolute;
	border: 30rpx;
}

.seckill-product-wrap .every-day-time text {
	padding: 8rpx 16rpx;
	font-size: 26rpx;
	color: #333;
	opacity: 0.5;
}

.seckill-product-wrap .ad-activity {
	position: relative;
	overflow: hidden;
}

.seckill-product-wrap .ad-activity image {
	width: 750rpx;
	height: 367rpx;
	border-radius: 12rpx;
}

.seckill-list-wrap {
}

.seckill-list-wrap .list .item {
	padding: 30rpx;
	display: flex;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	background: #ffffff;
}

.seckill-list-wrap .product-cover,
.seckill-list-wrap .product-cover image {
	width: 200rpx;
	height: 200rpx;
}

.active-top-tab .ad-datetime::v-deep .box {
	height: 40rpx;
	padding: 4rpx;
	line-height: 40rpx;
	text-align: center;
	border-radius: 8rpx;
	font-size: 28rpx;
	background: #f6220c;
	color: #ffffff;
}

.active-top-tab .ad-datetime::v-deep text {
	color: #333;
	font-size: 28rpx;
}

.seckill-list-wrap .product-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 26rpx;
}

.seckill-list-wrap .already-sale {
	padding: 4rpx 0;
	color: #8228eb;
	font-size: 22rpx;
}

.seckill-list-wrap .slider-box .slider {
	margin-top: 11rpx;
	height: 8rpx;
	background: #f2f2f2;
	border-radius: 5rpx;
}

.seckill-list-wrap .slider-box .slider-inner {
	height: 8rpx;
	background: linear-gradient(-90deg, #cb2bff 0%, #7727e7 100%);
	border-radius: 4rpx;
}

.seckill-list-wrap .right-btn button {
	background: linear-gradient(90deg, #ff6b6b 4%, #f6220c 100%);
	color: #ffffff;
	height: 60rpx;
	border-radius: 30rpx;
	line-height: 60rpx;
}

.seckill-list-wrap .right-btn button.btn-gray {
	background: #cccccc;
	color: #ffffff;
}

.reg180 {
	padding-right: 20rpx;
	text-align: right;
	transform: rotateY(180deg);
	position: absolute;
	bottom: 0;
}

.icon-jiantou {
	color: #ffffff;
	font-size: 30rpx;
}

.head_top {
	position: absolute;
	top: 0;
	z-index: 20;
	padding-top: var(--status-bar-height);
	height: 30px;
	line-height: 30px;
	color: #ffffff;
	font-size: 28rpx;
}

.tab-item.active::after {
	content: '';
	width: 60%;
	height: 4rpx;
	background: #f2f2f2;
	border-radius: 2rpx;
	position: absolute;
	bottom: 5rpx;
}
</style>
