<template>
	<view @click="getCaptcha">
		<slot :prohibit="prohibit" :disabled="disabled">
			<button :disabled="prohibit">{{tempFrozen}}</button>
		</slot>
	</view>
</template>

<script>
	const frozen = 60
	const interval = 1000

	export default {
		props: {
			preheatingOn: Boolean,
			disabled: Boolean,
			offFrozen: {
				type: Boolean,
				default () {
					return false
				}
			},
			interval: {
				type: Number,
				default () {
					return interval
				}
			},
			maxFrozen: {
				type: Number,
				default () {
					return frozen
				}
			}
		},
		data() {
			return {
				tempFrozen: 0
			}
		},
		computed: {
			prohibit() {
				return this.disabled || !!this.tempFrozen
			}
		},
		created() {
			if (this.preheatingOn) {
				this.startInterval()
			}
		},
		methods: {
			startInterval() {
				if (!this.offFrozen) {
					this.tempFrozen = (this.maxFrozen || frozen)
					const intervalTemp = setInterval(() => {
						if (this.tempFrozen <= 0) {
							clearInterval(intervalTemp)
						} else {
							this.tempFrozen--
						}
						this.$emit('intervalCaptcha', this.tempFrozen)
					}, this.interval || interval)
				}
			},
			getCaptcha() {
				if (this.prohibit) return
				this.$emit('getCaptcha')
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
