<template>
    <view class="main">
        <!-- nav -->
        <navigation>{{ i18n.ChangeLoginPassword }}</navigation>
			<!-- #ifdef APP-PLUS -->
			  <view class="bodyApp">
				<!-- #endif -->
			<!-- #ifdef H5 -->
			  <view class="body">
				<!-- #endif -->
			
            <u-input class="input" type="password" v-model="oldPassword" color="#A1A0A8" fontSize="28rpx" border="none"
                :placeholder="i18n.PleaseEnterTheOldPassword">
            </u-input>
            <u-input class="input" type="password" v-model="password" color="#A1A0A8" fontSize="28rpx" border="none"
                :placeholder="i18n.CreateNewLoginPassword">
            </u-input>
			<u-input class="input" type="password" v-model="confirmPassword" color="#A1A0A8" fontSize="28rpx" border="none"
			    :placeholder="i18n.confirmPassword">
			</u-input>
            <!-- 修改登录密码按钮  :disabled="disabled"-->
            <u-button class="button" color="#00E8A2" throttleTime="500" @click="changePassword()" :throttleTime="500">
                {{ i18n.Confirm }}
            </u-button>
        </view>
    </view>
</template>

<script>
import api from '@/utils/api'
import md5 from 'js-md5'
export default {
    name: "changeLoginPassword",
    data() {
        return {
				oldPassword: '',
				password: '',
				confirmPassword:'',
         
            disabled: true,
			// 密码格式对不对
			isCanPassword: false,
        };
    },
    computed: {
        i18n() {
            return this.$t("me");
        },
    },
	watch: {
		'password': {
			handler(newValue) {
				const numberReg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[A-Za-z0-9 _]{6,20}$/
				this.isCanPassword = numberReg.test(newValue)
			}
		},
	},
    onLoad() {
    },
    onShow() { },
    methods: {
       // 输入密码
       changePassword() {
		   if (!this.password) {
		   	uni.$u.toast(this.$t("login").passwordInputMessage)
		   	return
		   }
       	if (!this.isCanPassword) {
			let message = this.$t("login").passwordRule
       		uni.$u.toast(message)
       		return
       	}
       	// 验证重复输入的密码
       	if (this.password !== this.confirmPassword) {
       		uni.$u.toast(this.$t("login").passwordConfirm)
       		return
       	}
	
		if (!this.oldPassword) {
			uni.$u.toast(this.$t("login").PleaseEnterTheOldPassword)
			return
		}
       		let userInfo = {
				oldPassword:md5(this.oldPassword),
       			password: md5(this.password),
       			confirmPassword: md5(this.confirmPassword),
       		}
       		api.updatePassword(userInfo).then(res => {
       			setTimeout(() => {
       				uni.showToast({
       					title: this.$t("me").ModifiedSuccessfully
       				})
       			}, 600)
				uni.setStorageSync('ticket',null)
       			uni.reLaunch({
       				url: '/pages/login/index'
       			})
       		})
     
       
       },
    },
}
</script>

<style lang="scss" scoped>
.main {

    .body {
        overflow: hidden;
        margin-top: 200rpx;
        padding: 0 64rpx;

        .input {
            height: 112rpx;
            line-height: 112rpx;
            background: #211F32;
            margin: 32rpx 0;
            border-radius: 32rpx;
            padding-left: 32rpx !important;
        }


        .button {
            position: relative;
            height: 112rpx;
            // margin-top: 680rpx;
            border-radius: 32rpx;
            font-weight: 600;
            color: #15141F !important;
            font-size: 32rpx !important;
        }



    }
	
	.bodyApp{
	    overflow: hidden;
	    margin-top: 200rpx !important;
	    padding: 0 64rpx;
	
	    .input {
	        height: 112rpx;
	        line-height: 112rpx;
	        background: #211F32;
	        margin: 32rpx 0;
	        border-radius: 32rpx;
	        padding-left: 32rpx !important;
	    }
	
	
	    .button {
	        position: relative;
	        height: 112rpx;
	        // margin-top: 680rpx;
	        border-radius: 32rpx;
	        font-weight: 600;
	        color: #15141F !important;
	        font-size: 32rpx !important;
	    }
	
	
	
	}

}
</style>
