<template>
	<view style="display: flex;align-items: center;" :class="!isDown?'red':''">
		<view class="box" id="box_minute" @click="chongzhi()">
			<view class="top child text" id="top">{{ Math.floor(topTime / 60)  }}</view>
			<view class="flip child" id="flip" :style="{ transform: transformInfomin?transformInfo:'' }">
				<view class="flip_face child text" :style="{ zIndex: faceZindexmin || 0 }" id="flip_face">
					{{ Math.floor(bottomTime / 60) }}
				</view>

				<view class="flip_back child text" :style="backZindex&&transformInfomin ? { zIndex: backZindex } : {}"
					id="flip_back">
					{{ Math.floor(topTime / 60) }}
					<text>MIN</text>
				</view>
			</view>
			<view class="bottom child text" id="bottom">
				{{ Math.floor(bottomTime / 60) }}
				<text>MIN</text>
			</view>
		</view>
		<text style="color: #959595;font-size: 1.9vw;padding: 0 5rpx;">:</text>
		<view class="box" id="box_minute" :class="!isDown?'red':''">
			<view class="top child text" id="top">{{ (topTime % 60)<10?'0'+(topTime % 60) : (topTime % 60) }}</view>
			<view class="flip child" id="flip" :style="{ transform: transformInfo }">
				<view class="flip_face child text" :style="{ zIndex: faceZindex || 0 }" id="flip_face">
					{{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60)}}
				</view>
				
				<view class="flip_back child text" :style="backZindex ? { zIndex: backZindex } : {}" id="flip_back">
					{{ (topTime % 60)<10?'0'+(topTime % 60) : (topTime % 60) }}
					<text>SEC</text>
				</view>
			</view>
			<view class="bottom child text" id="bottom">
				{{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60) }}
				<text>SEC</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			initTime: {
				// 初始时间
				type: Number,
				default: 185,
			},
			// isDown: {
			//   // 是否是倒计时
			//   type: Boolean,
			//   default: true,
			// },
			threshold: {
				// 阈值
				type: Number,
				default: 0,
			},
			timeoutDuration: {
				// 超时时间多少停止
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				topTime: Math.abs(this.initTime),
				bottomTime: Math.abs(this.initTime),
				faceZindex: 1,
				backZindex: 0,
				transformInfo: "perspective(500rpx) rotateX(0deg)",
				transformInfomin: false,
				faceZindexmin: 1,
				backZindexmin: 0,
				mintime: 0,
				timer: null,
				timerTwo: null,
				isDown: true
			};
		},
		mounted() {
			this.cycle();
		},
		methods: {
			OneCycle(n) {
				// 一次翻页的周期
				let num = 0;
				this.transformInfo = "perspective(500rpx) rotateX(0deg)";
				this.faceZindex = 1;
				this.backZindex = 0;
				this.bottomTime = this.isDown ? n : n - 1;
				let minutes = Math.floor(n / 60);
				if (this.timer) {
					clearInterval(this.timer);
				}
				this.timer = setInterval(() => {
					num++;
					if (num > 50) {
						num = 0;
						clearInterval(this.timer);
						return;
					}
					if (num === 1) {
						if (this.isDown) {
							this.topTime = n - 1 < this.threshold ? n : n - 1; // 60 和 0 在时间里，其实是一样的
							this.mintime = Math.floor(this.topTime / 60)
							if (minutes != this.mintime && !this.transformInfomin) {
								this.transformInfomin = true;
							} else {
								this.transformInfomin = false;
							}
						} else {
							this.topTime = n + 1 > this.threshold ? n : n + 1;
							this.mintime = Math.floor(this.topTime / 60)
							if (minutes != this.mintime && !this.transformInfomin) {
								this.transformInfomin = true;
							} else {
								this.transformInfomin = false;
							}
						}
					}

					this.faceZindex = num <= 25 ? 1 : 0;
					this.backZindex = num <= 25 ? 0 : 1;

					this.transformInfo = `perspective(500rpx) rotateX(-${(180 * num) / 50}deg)`;

				}, 10); // 将一秒钟分成50份。
			},
			cycle() {
				// console.log(this.initTime)
				let minutes = Math.floor(this.initTime / 60);
				this.isDown = this.initTime > 0 ? true : false
				let time = Math.abs(this.initTime);
				// console.log(minutes,time)
				if(time==0){
					this.topTime = 0;
					// this.OneCycle(0);
					return
				}
				this.timerTwo = setInterval(() => {
					const flag = this.isDown ? time - 1 : time + 1;
					if (flag === this.threshold) {
						this.isDown = false
						// clearInterval(this.timerTwo);
						// clearInterval(this.timer);
					}
					if (flag >= this.timeoutDuration + 2 && this.isDown == false) {
						clearInterval(this.timerTwo);
						clearInterval(this.timer);
						// this.$emit('timeend')
					}
					this.OneCycle(time);
					this.isDown ? time-- : time++;
				}, 1000);
			},
		},
	};
</script>

<style scoped lang="less">
	.red {
		color: red !important;

		view {
			color: red !important;
		}
	}

	.box {
		position: relative;
		box-sizing: border-box;
	}

	.box .child {
		min-width: 5.1vw;
		height: 2.5vw;
		overflow: hidden;
	}

	.box>.top {
		background-color: #eaeaea;
		line-height: 5vw;
		border-bottom: 2rpx solid #fff;
		border-radius: 8px 8px 0 0;
	}

	.box .flip {
		position: absolute;
		top: 0rpx;
		z-index: 1;
		transform-origin: bottom;
		border-radius: 8rpx 8rpx 0 0;
	}

	.box .flip .flip_face {
		position: absolute;
		background: #eaeaea;
		line-height: 5vw;
		z-index: 1;
		border-bottom: 2rpx solid #fff;
	}

	.box .flip .flip_back {
		position: absolute;
		background-color: #eaeaea;
		line-height: 0rpx;
		transform: perspective(500rpx) rotateX(0deg) rotateY(-180deg) rotate(180deg);
		border-top: 2rpx solid #fff;
	}

	.box .bottom {
		background-color: #f4f4f4;
		line-height: 0rpx;
		border-top: 1rpx solid #fff;
		border-radius: 0 0 8px 8px;
	}

	.text {
		text-align: center;
		font-size: 3.4vw;
		font-weight: 900;
		color: #666;
		position: relative;

		>text {
			position: absolute;
			width: 100%;
			text-align: center;
			bottom: 0vw;
			line-height: 1vw;
			left: 0;
			font-size: 0.7vw;
		}
	}

</style>