<template>
	<view class="login">
		<view class="status_bar">
		</view>
		<view class="top">
			<text class="title">设置新密码</text>
		</view>
		<view class="middle">
			<view class="account-block">
				<!-- <text class="label">新密码</text> -->
				<input class="account" type="text" v-model="password" placeholder="请输入新密码"
					placeholder-class='placeholder-text' />
			</view>
			<view class="hint-text">密码8～20位数字、英文组成</view>
		</view>
		<view class="bottom">
			<button class="btn" type="default" @click="goLogin" :class="{ 'btn-disabled': disabled }"
				:disabled="disabled"><text class="btn-text">提交</text></button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	
	
	export default {
		onLoad(option) {
			console.log('option',option)
			this.account = option.phone
		},
		data() {
			return {
				account: '',
				password: '',
				loginType: 'password',
				disabled: false,
			}
		},
		computed:{
			...mapState(['userInfo'])
		},
		watch: {
			password: {
				handler: function(val) {
					if(/((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))(?!^.*[\u4E00-\u9FA5].*$)^\S{8,20}$/.test(this.password) == false){
						this.disabled = true
					}else{
						this.disabled = false
					}
				},
				immediate: true
			}
		},
		methods: {
			...mapMutations(['$uStore']),
			// 登录
			async goLogin() {
				const ispass = await this.validate();
				if (!ispass) return;
				
				const userInfo = {...this.userInfo}
				userInfo.account = this.account
				userInfo.password = this.password
				this.$uStore({
					name: 'userInfo',
					value: userInfo
				});
				uni.navigateTo({
					url: '/pages/login/login?loginType="password"'
				});
			},
			// 校验input
			validate() {
				return new Promise((resolve, reject) => {
					let flag = true;
					if(this.password == '') {
						flag = false;
						uni.showToast({
							title: '输入密码不规范',
							icon: 'none',
							duration: 1500
						});
					}
					resolve(flag);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
	}

	.top {
		padding-left: 24rpx;
		margin-top: 96rpx;
	}

	.title {
		font-size: 24px;
		color: $text-base-color;
	}

	.middle {
		display: flex;
		flex-direction: column;
		margin: 100rpx 0 200rpx;
		padding-left: 24rpx;
	}

	/deep/.placeholder-text {
		font-size: 34rpx;
		color: $wly-palcehold-color;
	}

	.account-block {
		position: relative;
		overflow: hidden;
		height: 100rpx;
	}

	.account {
		flex: 1;
		color: $text-base-color;
		height: 100rpx;
		border-bottom: 1px solid #eee;
		// padding-left: 100rpx;
	}

	.label {
		width: 100rpx;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -24rpx;
		font-size: 14px;
		color: $text-base-color;
		z-index: 10;
	}

	.hint-text {
		color: #999999;
		font-size: 13px;
		margin-top: 24rpx;
	}


	.bottom {
		display: flex;
		flex-direction: column;
	}

	.btn {
		width: 100%;
		height: 92rpx;
		background: $wly-primary-color;
		border-radius: 46rpx;
	}

	.btn-disabled {
		background: rgba(255, 29, 50, 0.50) !important;
		color: #fff !important;
	}

	.btn-text {
		color: #fff;
		font-size: 34rpx;
		font-weight: 400;
	}
</style>
