<template>
	<text class="niu-sendcode component" :class="[border?'border_p10':'']" :disabled="isStart"
		:style="{color:color,fontSize:fontSize}">
		{{text}}
	</text>
</template>

<script>
	export default {
		name: 'NiuSendCode',
		data() {
			return {
				timer: null,
				isStart: false,
				text: '获取短信验证码'
			};
		},
		props: {
			initText: {
				type: String,
				default: '获取验证码'
			},
			second: {
				default: 60,
				validator(val) {
					return /^\d*$/.test(val);
				}
			},
			border: {
				type: Boolean,
				default: false
			},
			color: {
				type: String,
				default: '#FFA63C'
			},
			fontSize: {
				type: String,
				default: ''
			},
			runText: {
				type: String,
				default: '重新发送 {%s}s'
			},
			resetText: {
				type: String,
				default: '重新获取'
			},
			value: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			run() {
				let second = this.second;
				this.text = this.getText(this.second);
				this.timer = setInterval(() => {
					second--;
					this.text = this.getText(second);
					second <= 0 && this.stop();
				}, 1000);
			},
			stop: function() {
				this.text = this.resetText;
				this.$emit('input', false);
				this.$emit('stop', false);
				clearInterval(this.timer);
			},
			getText(second) {
				return this.runText.replace(/\{([^{]*?)%s(.*?)\}/g, second);
			}
		},
		watch: {
			value: function(val) {
				this.isStart = val;
				val && this.run();
			}
		},
		mounted() {
			if (this.initText) {
				this.text = this.initText;
			}
		},
		destroyed() {
			this.stop();
		}
	};
</script>

<style lang="scss" scoped>
	.niu-sendcode {

		// margin-bottom: 10rpx;
		&.border_p10 {
			line-height: normal;
			border: 1px solid #FFA63C;
			border-radius: 60px;
			padding: 10rpx;
		}
	}
</style>