<template>
  <view class="content1">
    <view class="change-password">
      <u--form labelPosition="top" :model="form" :rules="rules" ref="form" labelWidth="100%"
               :labelStyle="{color:'#333',  fontSize:'34rpx', fontWeight:'bold'}">
        <u-form-item label="用户名" prop="USERNAME" borderBottom>
          <u--input v-model="form.USERNAME" border="none"></u--input>
        </u-form-item>
        <u-form-item label="新密码" prop="PASSWORD" borderBottom>
          <u--input v-model="form.PASSWORD" type="password" border="none"></u--input>
        </u-form-item>
        <u-form-item label="确认新密码" prop="confirmPwd" borderBottom>
          <u--input v-model="form.confirmPwd" type="password" border="none"></u--input>
        </u-form-item>
        <u--text type="error" text="密码长度8~32位，须包含数字、字母、符号至少2种或以上元素"></u--text>
        <u-form-item>
          <u-button type="primary" shape="circle" text="确定" @click="$u.debounce(submitPassword, 1000, true)">
          </u-button>
        </u-form-item>
      </u--form>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>

import {setForgotPassword} from "../../api";

export default {
  data() {
    return {
      form: {
        USERNAME: '',
        PASSWORD: '',
        confirmPwd: '',
      },
      rules: {
        USERNAME: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        ],
        PASSWORD: [{
          required: true,
          message: '请输入新密码',
          trigger: 'blur'
        },
          {
            pattern: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,32}$/,
            message: '密码格式不正确',
            trigger: ['blur']
          },
        ],
        confirmPwd: [{
          required: true,
          message: '请再次输入新密码',
          trigger: 'blur'
        },
          {
            validator: (rule, value, callback) => {
              return value === this.form.PASSWORD
            },
            message: '两次输入密码不一致',
            trigger: 'blur',
          }
        ],
      },
    }
  },
  methods: {
    submitPassword() {
      this.$refs.form.validate().then(async () => {
        await setForgotPassword({
          ...this.form
        })
        this.$refs.uToast.show({
          message: '修改成功',
          type: 'success',
          complete: () => {
            uni.reLaunch({
              url: '/pages/login/login'
            })
          }
        })
      }).catch(() => {
        this.$refs.uToast.error('请填写完整')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.change-password {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
}
</style>