<template>
  <view class="content">
    <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="nowPwd" borderBottom>
          <u--input v-model="form.nowPwd" type="password" border="none" placeholder="请输入新密码"></u--input>
        </u-form-item>
        <u-form-item label="确认新密码" prop="confirmPwd" borderBottom>
          <u--input v-model="form.confirmPwd" type="password" border="none" placeholder="请确认新密码"></u--input>
        </u-form-item>
        <u--text type="error" text="*密码规则：密码长度为8-16位，必须由大写字母，小写字母，数字，特殊符号(!#@*&.)组成"></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 { changePasswordFirstLogin } from "@/api";
import { encrypt } from "@/utils/aes_secret";

export default {
  data() {
    return {
      form: {
        nowPwd: '',
        confirmPwd: '',
      },
      testPassword: /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.].*.{8,16}$/,
      rules: {
        nowPwd: [
          {
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          },
          {
            min: 8,
            max: 16,
            message: '长度最少8个字符最多16个字符',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              return this.testPassword.test(value)
            },
            message: '新密码格式不对，请重新输入',
            trigger: 'blur',
          }
        ],
        confirmPwd: [
          {
            required: true,
            message: '请再次输入新密码',
            trigger: 'blur'
          },
          {
            min: 8,
            max: 16,
            message: '长度最少8个字符最多16个字符',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              return value === this.form.nowPwd
            },
            message: '两次输入密码不一致',
            trigger: 'blur',
          }
        ],
      },
    }
  },
  methods: {
    submitPassword() {
      this.$refs.form.validate().then(async () => {
        await changePasswordFirstLogin({
          newPassword: encrypt(this.form.nowPwd)
        })
        this.$refs.uToast.show({
          message: '密码修改成功，请重新登录',
          type: 'success',
          complete: () => {
            uni.reLaunch({
              url: '/pages/login/login'
            })
          }
        })
      }).catch(() => {
        this.$refs.uToast.error('请填写完整')
      })
    }
  }
}
</script>

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