<template>
  <el-form class="mx-form" ref="form" :model="model" :rules="rules" label-width="80px" label-position="left">
    <el-form-item prop="mobile" label="手机号码" required>
      <div class="mx-mobile-send">
        <el-input v-model="model.mobile" auto-complete="off" placeholder="请输入手机号码">
        </el-input>
        <el-button type="primary" class="mx-send" :class="{'inactive':countdown>0}" @click="sendValidateCode">{{countdown>0?`(${countdown})s`:'发送'}}</el-button>
      </div>
    </el-form-item>
    <el-form-item prop="smsCode" label="验证码" required>
      <el-input v-model="model.smsCode" auto-complete="off" placeholder="请输入验证码">
      </el-input>
    </el-form-item>
    <el-form-item prop="newPassword" label="新密码" required>
      <el-input type="password" v-model="model.newPassword" auto-complete="new-password" placeholder="请输入新密码">
      </el-input>
    </el-form-item>
    <el-form-item prop="newPwdRepeat" label="确认密码" required>
      <el-input type="password" v-model="model.newPwdRepeat" auto-complete="new-password" placeholder="请确认新密码">
      </el-input>
    </el-form-item>
    <div class="mx-buttons">
      <el-button type="primary" @click="submitAction">确认修改</el-button>
    </div>
  </el-form>
</template>

<script>
import {
  sendSmsNoValidation,
  resetCardPassword
} from "@/api/login";

export default {
  name: "forgetPassword",
  data() {
    return {
      countdown: 0,
      model: {
        mobile: '',
        smsCode: '',
        newPassword: '',
        newPwdRepeat: ''
      },
      rules: {
        mobile: [{
          required: true,
          message: '手机号码必填',
        }, {
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: '手机号码格式不正确',
        }],
        smsCode: [{
          required: true,
          message: '验证码必填',
        }],
        newPassword: [{
          required: true,
          message: '新密码必填',
        }, {
          min: 6,
          max: 20,
          message: '新密码长度在6-20个字符之间',
        }],
        newPwdRepeat: [{
          required: true,
          message: '确认密码必填',
        }, {
          validator: (rule, value, callback) => {
            const valid = value == this.model.newPassword
            const params = valid ? undefined : new Error(rule.message)
            callback(params)
          },
          message: '确认密码与新密码不一致',
        }]
      }
    }
  },
  methods: {
    sendValidateCode: function () {
      if (this.countdown > 0) return
      this.$refs.form.validateField('mobile', (error) => {
        // validate success
        if (!error) {
          sendSmsNoValidation({
            mobile: this.model.mobile,
            smsType: 1
          }).then(res => {
            // send code success
            this.msgSuccess('发送成功')
            this.beginCountDown()
          })
        } else {
          this.msgError(error)
        }
      })
    },
    submitAction: function () {
      this.$refs.form.validate(valid => {
        console.log('submitAction', valid)
        if (valid) {
          resetCardPassword(this.model).then(res => {
            this.msgSuccess('新密码修改成功')
            this.$emit('resetPwdSuccess')
          })
        }
      })
    },
    goBack: function () {
      uni.navigateBack({
        delta: 1
      })
    },
    beginCountDown() {
      this.countdown = 90
      const timer = setInterval(_ => {
        if (this.countdown == 0) clearInterval(timer)
        else this.countdown -= 1
      }, 1000)
    }
  }
}
</script>

<style scoped>
.mx-form {
  padding: 40px 20px;
  margin-left: 220px;
  margin-right: 25px;
  border-radius: 16px;
}

.mx-back {
  font-size: 24px;
  margin-top: 20px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #999999;

  display: flex;
  justify-content: center;
  align-items: center;
}

.mx-mobile-send {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mx-send {
  width: 60px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mx-send.inactive {
  background-color: #aaaaaa;
  border-color: #aaaaaa;
}

.mx-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
</style>