<template>
	<view class="float-window-page">
		<template v-for="(item,index) in timeItems">
			<view class="consumption" v-if="item.source === 'PREFERENTIAL_DAY' && item.remainingTime !== 'Expired'" @click="handleDiscounts(item.source)">
				<!-- <view class="activity-dian"></view> -->
				
				<image src="@/static/home/7.png" mode="" class="activity-dian"></image>
				<view class="activity-bg">每日优惠</view>
				<view class="time">{{ item.remainingTime || '00:00:00' }}</view>
			</view>
			<view class="discounts" v-if="item.source === 'ROOKIE' && item.remainingTime !== 'Expired'" @click="handleDiscounts(item.source)">
				<!-- <view class="activity-dian"></view> -->
				<image src="@/static/home/7.png" mode="" class="activity-dian"></image>
				<view class="activity-bg" style="padding-top: 44rpx;">{{item.price.settlement || 0}}元</view>
				<view class="time">{{item.remainingTime || '00:00:00'}}</view>
			</view>
			<view class="discounts" v-if="item.source === 'SPECIAL_PRICE' && item.remainingTime !== 'Expired'" @click="handleDiscounts(item.source)">
				<!-- <view class="activity-dian"></view> -->
				
				<image src="@/static/home/7.png" mode="" class="activity-dian"></image>
				<view class="activity-bg activity-y-bg">0.01元</view>
				<view class="time">{{item.remainingTime || '00:00:00'}}</view>
			</view>
		</template>

		<!-- <view class="discounts" @click="rankingCk">
			<view class="item">
				<image src="@/static/new/rank12.png" mode="aspectFit" class="new-icon"></image>
			</view>
			<view class="time" style="margin-top: 10rpx;">排行榜</view>
		</view> -->
		<!-- <image src="@/static/index/kf.png" mode="" class="customer" @click="handleCustomer" v-if="isCustomer"></image> -->
	</view>
</template>

<script>
	import {
		customerApi
	} from '@/API/user.js'
	export default {
		props: {
			isCustomer: {
				type: Boolean,
				default: false
			}, //客服
			isConsumption: {
				type: Boolean,
				default: false
			}, //每日优惠
			consumptionTime: {
				type: String,
				default: '11:11:12'
			}, //
			isDiscounts: {
				type: Boolean,
				default: false
			}, //
			discountsTime: {
				type: Number,
				default: 0
			},
			source: {
				type: String,
				default: '', //PREFERENTIAL_DAY每日优惠  ROOKIE新手盲恶化
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				customer: '',
				discountsTimeTxt: '',
				remainingTime: '00:00:00',
				isNo: true,
				intervalId: null,
				timeItems: []
			}
		},
		watch: {
			list() {
				this.timeItems = this.list
			}
		},
		mounted() {

			this.startCountdown()
			// this.list.forEach(item => {

			// 	const currentTime = Math.floor(Date.now() / 1000);
			// 	const countdown = item.expireTime - currentTime;
			// 	if(countdown <= 0){
			// 		this.isNo = false
			// 	}
			// 	const hours = Math.floor(countdown / 3600);
			// 	const minutes = Math.floor((countdown % 3600) / 60);
			// 	const seconds = countdown % 60;
			// 	setInterval(() => {
			// 		if(!isNaN(hours)){
			// 			item.remainingTime = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
			// 		}
			// 	}, 1000);

			// })
			// if (this.discountsTime) {
			// 	this.updateRemainingTime(this.discountsTime);
			// 	setInterval(() => {
			// 		this.updateRemainingTime(this.discountsTime);
			// 	}, 1000);
			// }
			// if (this.consumptionTime) {
			// 	this.updateRemainingTime(this.consumptionTime);
			// 	setInterval(() => {
			// 		this.updateRemainingTime(this.consumptionTime);
			// 	}, 1000);
			// }
		},
		methods: {
			updateRemainingTime() {
				const currentTime = Math.floor(Date.now() / 1000);
				this.timeItems.forEach((item,index) => {
					const targetTime = item.expireTime;
					const countdown = targetTime - currentTime;
					if (countdown <= 0) {
						this.$set(this.timeItems[index],'remainingTime','Expired')
					} else {
						const hours = Math.floor(countdown / 3600);
						const minutes = Math.floor((countdown % 3600) / 60);
						const seconds = countdown % 60;
						this.$set(this.timeItems[index],'remainingTime',`${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`)
					}
				});
			},
			startCountdown() {
				this.updateRemainingTime()
				setInterval(() => {
					this.updateRemainingTime()
				},1000)
				// this.intervalId = setInterval(this.updateRemainingTime(), 1000); // 每秒更新一次
			},
			rankingCk() {
				uni.navigateTo({
					url: `/pages/index/ranking`
				})
			},
			// updateRemainingTime(targetTime = 0) {
			// 	const currentTime = Math.floor(Date.now() / 1000);
			// 	const countdown = targetTime - currentTime;
			// 	if(countdown <= 0){
			// 		this.isNo = false
			// 	}
			// 	const hours = Math.floor(countdown / 3600);
			// 	const minutes = Math.floor((countdown % 3600) / 60);
			// 	const seconds = countdown % 60;
			// 	if(!isNaN(hours)){
			// 		this.remainingTime = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
			// 	}

			// },
			padZero(num) {
				return num.toString().padStart(2, '0');
			},
			handleCustomer() {
				window.open(this.customer)
			},
			handleConsumption() {
				this.$emit('click', 'PREFERENTIAL_DAY')
			},
			handleDiscounts(type) {
				this.$emit('click', type)
			}
		}
	}
</script>

<style lang="scss">
	.float-window-page {
		position: fixed;
		right: 0;
		top: 205rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		z-index: 10;

		.consumption {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;

			.activity-dian {
				position: absolute;
				bottom: 0rpx;
				right: 13rpx;
				width: 28rpx;
				height: 28rpx;
				background: #FF0000;
				border-radius: 50%;
			}

			// margin-top: 32rpx;
			.activity-bg {
				width: 84rpx;
				height: 84rpx;
				background-image: url('@/static/home/xrfl.png');
				background-size: 100%;
				background-repeat: no-repeat;
				font-size: 15rpx;
				color: #fff;
				text-align: center;
				padding-top: 52rpx;
			}

			// .item {
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// 	flex-direction: column;

			// 	.red-icon {
			// 		width: 64rpx;
			// 		height: 64rpx;

			// 	}

			// 	.item-txt {
			// 		width: 120rpx;
			// 		height: 48rpx;
			// 		margin-top: -10rpx;
			// 	}
			// }

			.consumption-icon {
				width: 112rpx;
				height: 127rpx;
			}

			.time {
				width: 109rpx;
				text-align: center;
				font-size: 24rpx;
				color: #000;
			}
		}

		.discounts {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin: 9rpx 0;
			position: relative;

			.activity-dian {
				position: absolute;
				bottom: 34rpx;
				right: 13rpx;
				width: 28rpx;
				height: 28rpx;
				background: #FF0000;
				border-radius: 50%;
			}

			// .item {
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// 	flex-direction: column;

			// 	.new-icon {
			// 		width: 72rpx;
			// 		height: 72rpx;

			// 	}

			// 	.item-txt {
			// 		width: 120rpx;
			// 		height: 48rpx;
			// 		margin-top: -10rpx;
			// 	}
			// }
			.activity-bg {
				width: 84rpx;
				height: 84rpx;
				background-image: url('@/static/home/53.png');
				background-size: 100%;
				background-repeat: no-repeat;
				font-size: 24rpx;
				color: #fff;
				font-weight: bold;
				text-align: center;
				padding-top: 26rpx;
			}

			.activity-y-bg {
				background-image: url('@/static/home/71.png');
			}

			.consumption-icon {
				width: 112rpx;
				height: 127rpx;
			}

			.time {
				width: 109rpx;
				text-align: center;
				font-size: 24rpx;
				color: #000;
			}
		}

		.customer {
			width: 109rpx;
			height: 101rpx;
		}
	}
</style>