<template>
	<view class="float-window-page" :class="{'is-bg':isClick}" :style="{zIndex:zIndex}">
		<view class="activity" @click="handleActivity" v-if="isShow">
			<image src="@/static/home/7.png" mode="" class="activity-dian" style="top: 100rpx;"></image>
			<image :src="activityObj.icon.coverResource.url" mode="aspectFit" v-if="activityObj.icon.coverResource" style="width: 114rpx;height: 114rpx;" class="look-zoom"></image>
			<view class="time">{{endTime}}</view>
		</view>
		
		<template v-for="(item,index) in timeItems">
			<!-- 周期活动 -->
			<view class="activity" v-if="item.source === 'PERIOD' && item.remainingTime !== 'Expired'"
				@click="handleDiscounts(item.source)">
				<image src="@/static/home/7.png" mode="" class="activity-dian" style="top: 104rpx;"></image>
				<image :src="item.icon.coverResource.url" mode="aspectFit" v-if="item.icon.coverResource"
					style="width: 124rpx;height: 124rpx;margin-left: -44rpx;"></image>
				<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)">
				<image src="@/static/home/7.png" mode="" class="activity-dian"></image>
				<view class="activity-bg activity-y-bg"
					:style="{'background-image':`url(${item.icon.coverResource.url})`}"></view>
				<view class="time">{{item.remainingTime || '00:00:00'}}</view>
			</view>
			<!-- 九连抽 -->
			<view class="activity" v-if="item.source === 'NINE' && item.remainingTime !== 'Expired'"
				@click="handleDiscounts(item.source)">
				<image src="@/static/home/7.png" mode="" class="activity-dian"></image>
				<image :src="item.icon.coverResource.url" mode="aspectFit" v-if="item.icon.coverResource"
					style="width: 94rpx;height: 94rpx;"></image>
				<view class="time">{{item.remainingTime || '00:00:00'}}</view>
			</view>
			<view class="consumption" @click="handleDiscounts(item.source)"
				v-if="item.source === 'PREFERENTIAL_DAY' && item.remainingTime !== 'Expired'">
				<image src="@/static/home/7.png" mode="" class="activity-dian"></image>
				<view class="activity-bg" :style="{'background-image':`url(${item.icon.coverResource.url})`}">每日优惠
				</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)">
				<image src="@/static/home/7.png" mode="" class="activity-dian" style="bottom: 30rpx;"></image>
				<view class="activity-bg" style="padding-top: 38rpx;"
					:style="{'background-image':`url(${item.icon.coverResource.url})`}"></view>
				<view class="time">{{item.remainingTime || '00:00:00'}}</view>
			</view>
		</template>
		
		<!-- <view class="activity" style="margin-top: 10rpx;" @click="handleActivityTopLast" v-if="icon">
			<image src="@/static/home/7.png" mode="" class="activity-dian"></image>
			<image :src="icon" mode="aspectFit" style="width: 94rpx;height: 94rpx;"
				class="look-zoom"></image>
		</view> -->
		
		<popup-view v-model="isModal" mode="center" border-radius="15" z-index="9999" centerBoxBgColor='transparent'>
			<view>
				<image src="@/static/home/gy1.png" mode="" style="width: 601rpx;height: 903rpx;"></image>
				<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="modalClose"></image>
			</view>
		</popup-view>
		<!-- <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> -->
		<!-- <image src="@/static/guidance-index/sz.png" mode="" class="finger-icon" v-if="isClick"></image> -->
	</view>
</template>

<script>
	import {
		customerApi
	} from '@/API/user.js'

	import {
		activityIconApi
	} from '@/API/index.js'
	import reportClickFn from '@/utils/report.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: () => []
			},
			activityObj: {
				type: Object,
				default: () => {}
			},
			zIndex: {
				type: Number,
				default: 10
			}, //层级
			isClick: {
				type: Boolean,
				default: false
			}, //是否不可点击
			icon:{
				type: String,
				default: '',
			},//有值代表显示活动排行榜
		},
		data() {
			return {
				customer: '',
				discountsTimeTxt: '',
				remainingTime: '00:00:00',
				isNo: true,
				intervalId: null,
				timeItems: [],
				// activityObj:{
				// 	endTime: "",
				// 	icon: {
				// 		cover: "",
				// 		coverResource: {path: "",url:''},
				// 		type: "",
				// 	},
				// 	id: ""
				// },
				endTime: '00:00:00',
				isShow: false,
				isModal: false
			}
		},
		watch: {
			list() {
				console.log("this.list:",this.list)
				this.timeItems = this.list
			},
			activityObj() {
				this.startCountdownIcon()
			},
		},
		mounted() {
			
			this.startCountdown()
			this.startCountdownIcon()
			// this.getActivityIcon()
		},
		methods: {
			modalClose() {
				this.isModal = false
			},
			handleActivityTopLast(){
				this.$emit('handleActivityTopLast')
			},
			handleActivity() {
				// this.isModal = true
				// return
				if (this.isClick) {
					return
				}
				reportClickFn(`activity_float_clk_${this.activityObj.id}`)
				uni.navigateTo({
					url: `/pages/index/activity`
				})
			},
			startCountdownIcon() {
				let activityObj = JSON.parse(JSON.stringify(this.activityObj))
				console.log("aaaaaaaa:", activityObj)
				let endTime = activityObj.endTime

				setInterval(() => {
					if (activityObj.endTime) {
						const secondsPerDay = 86400; // 1天有86400秒
						// 将时间戳除以每天的秒数
						const currentTime = Math.floor(Date.now() / 1000);
						const targetTime = Math.floor(new Date(endTime).getTime() / 1000);

						if (isNaN(targetTime)) {
							// console.error('Invalid endTime:', endTime);
							this.isShow = true
							this.endTime = '';
							// return;
						} else {
							const countdown = targetTime - currentTime;
							if (countdown <= 0) {
								this.isShow = false
								this.endTime = 'Expired'
								// this.$set(this.activityObj,'endTime','Expired')
							} else if (countdown > secondsPerDay) {
								const days = parseInt(countdown / secondsPerDay);
								this.endTime = `${days}天`
								this.isShow = true
							} else {
								this.isShow = true
								const hours = Math.floor(countdown / 3600);
								const minutes = Math.floor((countdown % 3600) / 60);
								const seconds = countdown % 60;
								this.endTime =
									`${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`
								// this.$set(this.activityObj,'endTime',`${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`)
							}
						}



					}
				}, 1000)
			},
			getActivityIcon() {
				activityIconApi().then(res => {
					console.log(res)
					if (res.code === 200) {
						this.activityObj = res.data
						let endTime = res.data.endTime

						setInterval(() => {
							if (this.activityObj.endTime) {
								const currentTime = Math.floor(Date.now() / 1000);
								const targetTime = new Date(endTime).getTime() / 1000;
								const countdown = targetTime - currentTime;
								if (countdown <= 0) {
									this.isShow = false
									this.endTime = 'Expired'
									// this.$set(this.activityObj,'endTime','Expired')
								} else {
									this.isShow = true
									const hours = Math.floor(countdown / 3600);
									const minutes = Math.floor((countdown % 3600) / 60);
									const seconds = countdown % 60;
									this.endTime =
										`${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`
									// this.$set(this.activityObj,'endTime',`${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`)
								}
							}
						}, 1000)


					} else {}
				})
			},
			updateRemainingTime() {
				const currentTime = Math.floor(Date.now() / 1000);
				this.timeItems.forEach((item, index) => {
					const targetTime = item.expireTime;
					const countdown = targetTime - currentTime;


					const secondsPerDay = 86400; // 1天有86400秒
					// 将时间戳除以每天的秒数



					if (countdown > secondsPerDay) {
						const days = parseInt(countdown / secondsPerDay);
						this.$set(this.timeItems[index], 'remainingTime', `${days}天`)
					} else 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)
			},
			rankingCk() {
				uni.navigateTo({
					url: `/pages/index/ranking`
				})
			},
			padZero(num) {
				return num.toString().padStart(2, '0');
			},
			handleCustomer() {
				window.open(this.customer)
			},
			handleConsumption() {
				this.$emit('click', 'PREFERENTIAL_DAY')
			},
			handleDiscounts(type) {
				if (this.isClick) {
					return
				}
				this.$emit('click', type)
			}
		}
	}
</script>

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

		.activity {
			width: 114rpx;
			text-align: center;
			position: relative;

			.activity-dian {
				position: absolute;
				top: 76rpx;
				right: 10rpx;
				width: 28rpx;
				height: 28rpx;
				z-index: 3;
				// background: #FF0000;
				// border-radius: 50%;
			}

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

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

			.activity-dian {
				position: absolute;
				bottom: 26rpx;
				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-image: url('@/static/activity-icon/mryh.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');

				// background-image: url('@/static/activity-icon/hym.png');
			}

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

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

		.customer {
			width: 109rpx;
			height: 101rpx;
		}
	}

	.is-bg {
		// background-image: url('@/static/guidance-index/active-gl.png');
		// background-size: 100%;
		// background-repeat: no-repeat;
		background-color: #FEFEFE;
		border: 8rpx solid #778E93;
		border-radius: 35rpx;
		padding: 10rpx 0;
		// position: relative;
	}

	.finger-icon {
		width: 79rpx;
		height: 85rpx;
		position: absolute;
		bottom: -90rpx;
		left: 40rpx;
		animation: pressAnimation 1s ease-in-out infinite;
	}

	@keyframes pressAnimation {
		0% {
			transform: translateX(0) translateY() rotate(0deg);
		}

		//  25% {
		// transform: translateX(0px) translateY(0rpx) rotate(0deg); /* 向左上方移动10px */
		//  }
		50% {
			transform: translateX(0rpx) translateY(-15rpx) rotate(0deg);
		}

		100% {
			transform: translateX(0) translateY() rotate(0deg);
		}
	}

	.look-zoom {
		animation: zoomAnimation 0.7s infinite alternate;
	}

	@keyframes zoomAnimation {
		0% {
			transform: scale(1) rotate(-8deg);
		}

		100% {
			transform: scale(1.2) rotate(15deg);
		}
	}

	.dlg-close-img {
		display: block;
		width: 81rpx;
		height: 81rpx;
		z-index: 9999;
		margin: 55rpx auto 0 auto;
	}
	// .special-icon{
	// 	width: 114rpx;
	// 	height: 114rpx;
	// }
</style>