<!-- 直冲会员重复领取 -->
<template>
	<van-overlay :show="value" :duration="0.1">
		<div class="member-modal memberModal" @click.stop>
			<div class="title">
				<div class="titleText"> 提示</div>
			</div>
			<div class="text-box">
				会员自动领取失败，请3秒后重试手动领取
			</div>
			<div class="btn-box">
				<div class="btn left" @click="$emit('change', false)">
					取消
				</div>
				<div class="btn right" @click="retry" :class="timeCode > 0 ? 'btnDisabled' : ''">重试 <span v-if="timeCode > 0">（{{
					timeCode
				}}）</span>
				</div>
			</div>
		</div>
	</van-overlay>
</template>

<script>
export default {
	name: "memberModal",
	model: { prop: "value", event: "change" },
	props: { value: Boolean },
	data () {
		return {
			timeCode: 3
		}
	},
	watch: {
		value (val) {
			if (val) {
				setInterval(() => {
					if (this.timeCode > 0) {
						this.timeCode--
					} else if (this.timeCode == 0) {
						clearInterval()
					}
				}, 1000)
			}
		}
	},
	methods: {
		retry () {
			if (this.timeCode == 0) {
				this.$emit('change', false)
				this.$parent.giveMember()
				this.$parent.memberNum = 1
			}


		}

	}
}
</script>

<style lang="scss" scoped>
.member-modal {
	top: 412px;
	padding: 60px 51px;
	font-size: 28px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #222222;

	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;

		// margin: 0 auto;
		.successImg {
			width: 30px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #909090;
			border-radius: 50%;
			display: inline-block;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.titleText {
			font-size: 36px;
			font-weight: 700;
			text-align: center;
			margin-left: 10px;
		}
	}

	.text-box {
		line-height: 48px;
		// text-align: center;
	}

	.btn-box {
		display: flex;
		justify-content: space-between;

		.btn {
			// width: 100%;
			width: 200px;
			margin-top: 60px;
			height: 80px;
			line-height: 80px;
			border-radius: 40px;
			font-size: 28px;
			font-weight: bold;
			text-align: center;
		}

		.left {
			border: 1px #909090 solid;
			color: #0d0d0d;
			background-color: #ffffff;
		}

		.right {
			color: #fff;
			background: #fdc51b;
		}

		// .btnRow {
		// 	width: 100%;
		// 	margin-top: 60px;
		// 	height: 80px;
		// 	line-height: 80px;
		// 	border-radius: 40px;
		// 	font-size: 30px;
		// 	font-weight: bold;
		// 	text-align: center;
		// 	color: #0d0d0d;
		// 	background: #fdc51b;
		// }

		.btnDisabled {
			color: #909090;
			background: #ccc;
		}
	}
}

.memberModal {
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 333px;
	transform: translateX(-50%);
	width: 520px;
	background-color: #fff;
	border-radius: 8px;

}
</style>