<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	
	<view class="password-page">
		<view class="title">找回密码</view>
		<view class="subtitle">输入手机号获取验证码设置新密码</view>

		<u--form labelPosition="top" :model="form" ref="uForm">
		  <u-form-item label="手机号" prop="phone" leftIconStyle="font-size: 22px" labelWidth="80">
			<u--input
			  v-model="form.phone"
			  placeholder="请输入手机号"
			  border="none" :maxlength="11"
			  clearable
			></u--input>
		  </u-form-item>

		  <u-form-item label="验证码" prop="code" leftIconStyle="font-size: 22px" labelWidth="80">
			<u-input
			  v-model="form.code"
			  placeholder="请输入验证码"
			  border="none"
			  clearable
			>
			  <template slot="suffix">
				<span
				  class="verify-code"
				  :class="{ disabled: counting }"
				  @click="getVerifyCode"
				>
				  {{ counting ? `${counter}s后重新获取` : '获取验证码' }}
				</span>
			  </template>
			</u-input>
		  </u-form-item>
		  
		  <u-form-item label="新密码" prop="newPassWord" leftIconStyle="font-size: 22px" labelWidth="80">
			<u--input
			  v-model="form.newPassWord"
			  placeholder="请输入新密码"
			  border="none" :maxlength="20"
			  clearable
			></u--input>
		  </u-form-item>
		  
		  <u-form-item label="确认密码" prop="confirmPassWord" leftIconStyle="font-size: 22px" labelWidth="80">
			<u--input
			  v-model="form.confirmPassWord"
			  placeholder="请再次输入新密码"
			  border="none" :maxlength="20"
			  clearable
			></u--input>
		  </u-form-item>
		  
		  
		  
		</u--form>

		<view class="button-wrap">
		  <u-button
			type="warning"
			text="完成"
			shape="circle"
			style="font-size: 28rpx;font-weight: bold;"
			@click="handleResetPwd"
			:customStyle="{
			  width: '100%',
			  height: '90rpx',
			  background: '#3888FF',
			  border: 'none'
			}"
		  ></u-button>
		</view>
	</view>
</template>

<script>

import { getTextCode,forgetPwdByCodeApi } from '@/api/login';
import AES from '@/utils/aes';
import { encryptWithSM4 } from '@/utils/sm'
export default {
  data() {
    return {
		fontValue:uni.getStorageSync('fontSize') || 8,
      form: {
        phone: '',
        code: '',
		newPassWord:'',
		confirmPassWord:''
      },
      counter: 60,
      counting: false
    }
  },
  methods: {
    getVerifyCode() {
      if (this.counting) return
      // 验证手机号
      if (!this.form.phone) {
        uni.$u.toast('请输入手机号')
        return
      }
	  const regex = /^1[3-9]\d{9}$/;
	  if(!regex.test(this.form.phone)){
		  uni.$u.toast('请输入正确手机号')
		return ;
	  } 
      this.counting = true
      this.counter = 60
      const timer = setInterval(() => {
        if (this.counter > 0) {
          this.counter--
        } else {
          this.counting = false
          clearInterval(timer)
        }
      }, 1000)
	  let param = {
		"phone": this.form.phone,
		// "verificationCodeType": "LOGIN"
	  }
	  getTextCode(param).then(res => {
	    if(res.code==200){
			 uni.$u.toast('验证码已发送')
		}
	  })
      // 发送验证码请求
      // uni.$u.toast('验证码已发送')
    },
	//重置密码
    handleResetPwd() {
		const regex = /^1[3-9]\d{9}$/;
		if(!regex.test(this.form.phone)){
			uni.$u.toast('请输入正确手机号')
			return ;
		} 
		if (!this.form.phone || !this.form.code || !this.form.newPassWord || !this.form.confirmPassWord) {
			uni.$u.toast('请填写完整信息')
			return
		}
		if(this.form.newPassWord!=this.form.confirmPassWord){
			uni.$u.toast('两次密码输入不一致！')
			return
		}
	  
		// 验证通过
		let param = {
	  		"phone": this.form.phone,
	  		"code": this.form.code,
			// "newPassword":AES.encrypt(this.form.newPassWord)
			"newPassword":encryptWithSM4(this.form.newPassWord)
			// "newPassword":this.form.newPassWord
		}
		forgetPwdByCodeApi(param).then(res => {
			if(res.code==200){
				uni.$u.toast('密码重置成功！')
				uni.navigateTo({
				url: '/pages/login'
				})
			}
		})
    }
  }
}
</script>

<style lang="scss" scoped>
.password-page {
  padding: 40rpx;
  background-color: #ffffff;
  min-height: 100vh;

  .title {
    font-size: 40rpx;
    font-weight: 550;
    color: #333;
    margin-bottom: 20rpx;
  }

  .subtitle {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 60rpx;
  }

  .verify-code {
    color: #3c9cff;
    font-size: 28rpx;
    padding-left: 24rpx;

    &.disabled {
      color: #999;
    }
  }

  .button-wrap {
    margin-top: 80rpx;
  }
}

::v-deep .u-form-item {
  margin-bottom: 30rpx;

  &__body {
    padding: 24rpx 0;
    border-bottom: 1px solid #eee;
  }
}

::v-deep .u-input {
  &__content__prefix-icon {
    margin-right: 10rpx;
  }
}
</style>