<template lang="">
  <div>
    <div class="title_div" @click="test">
      <el-icon><ArrowLeftBold /></el-icon>
      <div style="margin-left: 0.3125rem">重置密码</div>
    </div>
    <el-form
      v-if="!resetSuccess"
      ref="formRef"
      style="max-width: 37.5rem"
      :model="resetPasswordForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item prop="phoneNumber">
        <el-input
          v-model="resetPasswordForm.phoneNumber"
          type="string"
          autocomplete="off"
          placeholder="请输入手机号"
          maxlength="11"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="resetPasswordForm.password"
          type="password"
          autocomplete="on"
          placeholder="新密码密码"
          show-password
        />
      </el-form-item>
      <el-form-item prop="confPassword">
        <el-input
          v-model="resetPasswordForm.confPassword"
          type="password"
          autocomplete="on"
          placeholder="密码确认"
          show-password
        />
      </el-form-item>
      <el-form-item prop="verifyCode">
        <el-input
          v-model="resetPasswordForm.verifyCode"
          type="string"
          placeholder="请输入验证码"
        >
        </el-input>
        <el-button
          type="primary"
          @click="sendVerifyCode"
          :disabled="countdown != 60"
          class="button-verify"
        >
          {{
            countdown > 0 && countdown < 60
              ? `${countdown}秒后重试`
              : '发送验证码'
          }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="el-button_one" @click="resetPassword">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <div class="reset" v-else>
      <el-button type="success" :icon="Check" circle class="el-button_two" />
    <div> 密码修改成功</div>
    </div>
    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
  </div>
</template>
<script setup>
import { defineEmits, ref, reactive, onUnmounted } from 'vue'
import { Check } from '@element-plus/icons-vue'
import Vcode from 'vue3-puzzle-vcode'
const countdown = ref(60)
const formRef = ref(null)
const isShow = ref(false)
const intervalId = ref(null)
const resetSuccess = ref(false)
const resetPasswordForm = reactive({
  phoneNumber: '',
  password: '',
  confPassword: '',
  verifyCode: '',
})

const emit = defineEmits(['reset'])
//点击返回
const test = () => {
  console.log('reset')
  emit('reset')
}
const sendVerifyCode = () => {
  onShow()
}

//动态验证码
const onShow = () => {
  isShow.value = true
}

const onClose = () => {
  isShow.value = false
}

const onSuccess = () => {
  console.log('验证成功')
  onClose()
  startCountdown()
}
const startCountdown = () => {
  intervalId.value = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    } else {
      clearInterval(intervalId.value)
      intervalId.value = null
      countdown.value = 60
    }
  }, 1000)
}
const rules = {
  phoneNumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur',
    },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '密码长度在6-16位', trigger: 'blur' },
  ],
  confPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatePass2, trigger: 'blur' },
  ],

  verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
}
function validatePass2(rule, value, callback) {
  if (value !== resetPasswordForm.password) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

const resetPassword = () => {
  formRef.value.validate(valid => {
    if (valid) {
      alert('表单验证成功！')
      backLogin()
    } else {
      alert('表单验证失败！')
      return false
    }
  })
}
const backLogin = () => {
  resetSuccess.value = true
  setTimeout(() => {
    //重置成功返回登录页
    emit('reset')
  }, 3000)
}
</script>
<style scoped lang="scss">
.title_div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  color: #1d2129;
  font-size: 1.375rem;
  margin-bottom: 34px;
  font-weight: bold;
}
.reset{
  margin: 50px auto;
  width: 300px;
  font-size: 16px;
  color: #1D2129;
  font-weight: bold;
  text-align: center;
  div{
    margin-top: 20px;
  }
}
.el-button_two {
  border-radius: 50%;
  padding: 8px;
  width: 60px;
  height: 60px;
  background-color: #e6f4ec;
  border: none;
  :deep(.el-icon) {
    color: #51ae6e;
    font-size: 28px;
    font-weight: bold;
  }
}
</style>
