<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">为保障您的积分安全，请先设置支付密码</view>
			<view class="item first-item">
				<view>设置支付密码：</view>
				<view class="input-content">
					<input class="input" :password="!firstOpen" v-model="firstPwd" placeholder="请输入6位数字密码" placeholder-style="color:#999999" maxlength="6" />
					<image class="eye" @click="clickEye(1)" :src="firstOpen?'../../static/eye-open.png':'../../static/eye-off.png'" mode=""></image>
				</view>
			</view>
			<view class="item">
				<view>确认支付密码：</view>
				<view class="input-content">
					<input class="input" :password="!secondOpen" v-model="secondPwd" placeholder="再次输入密码" placeholder-style="color:#999999" maxlength="6" />
					<image class="eye" @click="clickEye(2)"  :src="secondOpen?'../../static/eye-open.png':'../../static/eye-off.png'" mode=""></image>
				</view>
			</view>
			<view @click="submit()" class="buy-bottom" :style="{'background-color':firstPwd===secondPwd&&secondPwd!=''?'#FF0520':''}">确认支付密码</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"setPwdAlert",
		data() {
			return {
				firstPwd: '',
				secondPwd: '',
				firstOpen: false,
				secondOpen: false
			};
		},
		props: {
			closeName: {
				type: String
			}
		},
		methods: {
			clickEye(index) {
				if (index === 1) {
					this.firstOpen = !this.firstOpen
				} else {
					this.secondOpen = !this.secondOpen
				}
			},
			submit() {
				if (this.firstPwd.length<6) {
					this.toast('请输入6位数密码')
					return
				}
				if (this.firstPwd !== this.secondPwd) {
					this.toast('两次输入密码不一致')
					return
				}
				this.$net.post('/staff/password/setting', {'from': 'order', 'pwd': this.firstPwd}).then(res => {
					if (res.code === 200) {
						this.getUserInfo()
					} else {
						this.toast(res.message)
					}
				})
			},
			close() {
				this.firstPwd = ''
				this.secondPwd = ''
				console.log(this.firstPwd);
				this.$parent[this.closeName] = false
			},
			getUserInfo() {
				this.$net.get('/staff/detail').then(res => {
					if (res.code === 200) {
						this.$store.commit('refreshUserInfo', res.data)
						this.toast('设置密码成功')
						this.close()
					} else {
						this.toast(res.message)
					}
				})
			}
		},
		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% 28rpx;
		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: 16rpx;
			font-size: 24rpx;
			color: #666666;
			line-height: 34rpx;
			text-align: center;
		}
		.first-item {
			margin-top: 48rpx;
		}
		.item {
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #333333;
			.input-content {
				padding-left: 16rpx;
				margin-top: 24rpx;
				height: 80rpx;
				width: 100%;
				border-radius: 8rpx;
				background-color: #F8F8F8;
				position: relative;
				.input {
					height: 100%;
					width: 100%;
				}
				.eye {
					position: absolute;
					top: 16rpx;
					right: 16rpx;
					height: 48rpx;
					width: 48rpx;
					z-index: 9999;
				}
			}
		}
		.buy-bottom {
			margin: 64rpx 0 48rpx;
			border-radius: 40rpx;
			height: 80rpx;
			background-color: #FF0520;
			line-height: 82rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			z-index: 99999;
		}
	}
}
</style>
