<template>
	<view class="changePassword-box">
		<navbar class="navbarSticky" bg="#F6F6F6">
			<view class="changePassword-header-box flex">
				<van-icon class="changePassword-header-left" name="arrow-left" @click="back"/>
				<text class="changePassword-header-title">修改密码</text>
			</view>
		</navbar>
        <view class="changePassword-background"></view>
        <view class="changePassword-content">
            <view class="changePassword-title">
                旧密码
            </view>
            <view class="main">
                <van-cell-group>
                    <van-field :value="OldPassword"  password placeholder="请输入当前密码" 
					clearable input-align="center" @input="passwordInput">
                    </van-field>
                </van-cell-group>
            </view>
			<view class="changePassword-title" style="margin-top: 20rpx;">
                新密码<text class="text" v-show="show">(密码至少6位数字)</text>
            </view>
			<view class="main">
                <van-cell-group>
                    <van-field :value="NewPassword1" password placeholder="请输入新密码" 
					clearable input-align="center" 
					@input="passwordInput1">
                    </van-field>
					<van-field :value="NewPassword2" password placeholder="请再次输入新密码" 
					clearable input-align="center" 
					@input="passwordInput2">
                    </van-field>
                </van-cell-group>
            </view>
            <view class="btnBox" @click="EditNow">
                <van-loading color="#f5f5f5" v-if="loading" />
				<text v-else>立即修改</text>
            </view>
        </view>
	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		inject,
	} from "vue";
	export default {
		components:{
			navbar
		},
		setup(props, context) {
			let {
				proxy
			} = getCurrentInstance();
			let Toast = inject("$toast");
			let msg = reactive({
				Account: "",
				OldPassword: "",
				NewPassword1: "",
				NewPassword2: ""
			});
			let data = reactive({
				userData:{},
				show: false,
				loading:false
			});

			let methods = {
				back() {
					uni.navigateBack({
                        delta: 1
                    });
				},
				passwordInput(val){
					msg.OldPassword = val.detail;
				},
				// 验证密码长度
				passwordInput1(val) {
					console.log(val.detail)
					if(val.detail.length<6){
						data.show = true
						return
					}else{
						data.show = false
						msg.NewPassword1 = val.detail;
					}
				},
				passwordInput2(val) {
					if(val.detail.length<6){
						data.show = true
						return
					}else{
						data.show = false
						msg.NewPassword2 = val.detail;
					}
				},
				// 确定修改
				EditNow() {
					if (!msg.OldPassword) {
						uni.showToast({
                            title:'请输入旧密码',
                            icon:'none',
	                        duration: 500
                        })
						return;
					}
					if (!msg.NewPassword1) {
						uni.showToast({
                            title:'请输入新密码',
                            icon:'none',
	                        duration: 500
                        })
						return;
					}
					if (!msg.NewPassword2) {
						uni.showToast({
                            title:'请再次输入新密码',
                            icon:'none',
	                        duration: 500
                        })
						return;
					}
					if(data.show){
						uni.showToast({
                            title:'密码至少6位数字',
                            icon:'none',
	                        duration: 500
                        })
						return
					}
					if(msg.NewPassword1!==msg.NewPassword2){
						uni.showToast({
                            title:'两次密码不一致,请重新输入',
                            icon:'none',
	                        duration: 500
                        })
						return;
					}
					data.loading=true
					proxy.$request("/Login/UpdatePwd", msg).then(res => {
						if(res.Code==1){
							that.back()
						}
						data.loading=false
					}).catch(e=>{
						data.loading=false
					})
				},
			};
			onMounted(() => {
				data.userData = uni.getStorageSync('userInfo')
				msg.Account = data.userData.Account
			});
			let that = methods;
			return {
				...toRefs(msg),
				...toRefs(data),
				...methods,
			};
		},
		onLoad() {
			
		}
	};
</script>

<style scoped>
	.changePassword-header-title{
        font-size: 32rpx;
        font-weight: 500;
        color: #282828;
		flex:1;
        text-align: center;
        padding-right: 40rpx;
    }
    .changePassword-header{
        margin: 50rpx 50rpx 0 50rpx;
        align-items: center;
    }
    .changePassword-header-left{
        font-size: 40rpx;
        position: relative;
        z-index: 3;
    }
	.changePassword-header-box{
        padding: 20rpx 42rpx;
		flex-direction: row;
		align-items: center;
    }
    .changePassword-title{
        font-size:  40rpx;
        font-family: PingFang-SC;
        font-weight: bold;
        margin-bottom: 43rpx;		
        color: #282828;
    }
	.changePassword-title .text{
		font-size: 26rpx;
		font-weight: 100;
		color: #A5A5A5;
	}
    .changePassword-content{
        position: relative;
        padding: 40rpx 66rpx 66rpx 66rpx;
    }
    .changePassword-background{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		background: #F6F6F6;
	}
    .main {
		box-sizing: border-box;
		vertical-align: middle;
		padding: 0 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	/deep/.van-cell {
		height: 88rpx;
        border-radius: 44rpx;
        margin-bottom: 45rpx;
	}

	.btnBox {
		width: 280rpx;
		height: 88rpx;
		border-radius: 44rpx;
		overflow: hidden;
		margin: 0 auto;
        margin-top: 46rpx;
		margin-bottom: 30rpx;
		background-color: #C91727;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		/* line-height: 88rpx; */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
</style>
