<template>
	<view class="container">
		<view class="content">
			<image class="close" src="../../static/close-gray.png" mode="" @click="close()"></image>
			<view class="title">短信验证</view>
			<view class="subTitle">已向<text>{{getPhone}}</text>手机号发送了一条验证短信,请将验证码填写进输入框中。</view>
			<view class="code-content">
				<validCode ref="code" :maxlength="4" @finish="getPwd" @inputChange="inputChange"></validCode>
			</view>
			<view @click="submit()" class="buy-bottom" :style="{'background-color':btnActive?'#FF0520':''}">确认</view>
		</view>
	</view>
</template>

<script>
	import validCode from '../validCode/validCode'
	export default {
		name:"setPwdAlert",
		components: {validCode},
		data() {
			return {
				phone: this.$store.state.userInfo.mobile,
				code: ''
			};
		},
		props: {
			closeName: {
				type: String
			}
		},
		computed: {
			getPhone() {
				let middle = this.phone.substr(3, 4)
				return this.phone.replace(middle,'****');
			},
			btnActive() {
				return this.code.length === 4
			}
		},
		methods: {
			getPwd(e) {
				this.code = e
			},
			inputChange(e) {
				this.code = e
			},
			submit() {
				if (!this.btnActive) {
					return
				}
				this.$emit('smsCodeSubmit', this.code)
				this.close()
			},
			close() {
				this.code = ''
				this.$refs.code.clear()
				this.$parent[this.closeName] = false
			}
		},
		watch: {
			firstOpen(newVal, oldVal) {
				console.log(newVal);
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba($color: #000000, $alpha: 0.7);
	z-index: 99999;
	.content {
		margin: 50% 55rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		padding: 48rpx 40rpx;
		// width: 640rpx;
		position: relative;
		.close {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			height: 36rpx;
			width: 36rpx;
		}
		.title {
			font-size: 32rpx;
			font-weight: bolder;
			color: #333333;
			line-height: 44rpx;
			text-align: center;
		}
		.subTitle {
			margin-top: 24rpx;
			font-size: 32rpx;
			color: #666666;
			line-height: 48rpx;
			text-align: center;
			text {
				color: #338AFF;
			}
		}
		.code-content {
			margin-top: 48rpx;
			padding: 0 60rpx;
		}
		.buy-bottom {
			margin-top: 64rpx;
			border-radius: 40rpx;
			height: 80rpx;
			width: 560rpx;
			background-color: rgba($color: #FF0520, $alpha: 0.5);
			line-height: 82rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			z-index: 99999;
			margin-bottom: 32rpx;
		}
	}
}
</style>
