<!--
 * @Date: 2024-10-18 18:00:47
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-25 16:00:00
 * @FilePath: /hager/src/views/user/reset.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-reset-page">
    <div class="input-title">密码重置</div>
    <div style="padding: 1rem 1.5rem 1rem 1rem;">
      <hagerInput type="email" required reset @send="onSend" v-model="email" placeholder="请输入邮箱地址" />
      <hagerInput type="code" required v-model="sms" placeholder="请输入验证码" />
      <hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" />
    </div>
    <div class="reset-footer">
      <div class="edit-box">
        <div class="cancel btn" @click="goBack">取消</div>
        <div class="confirm btn" @click="onSubmit">重置</div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerInput from '@/components/common/hagerInput.vue';
import $ from 'jquery';
import { getCodeAPI, editPasswordAPI } from "@/api/hager.js";
import { MessageBox, Message, Loading } from 'element-ui';

export default {
  mixins: [mixin.init],
  data () {
    return {
      email: '',
      pwd: '',
      sms: '',
      checked: false,
      fullscreenLoading: false
    }
  },
  mounted () {
    if ($('#router-view').outerHeight() < $('.user-box').height()) {
      $('#router-view').height($('.user-box').outerHeight())
    }
  },
  methods: {
    async onSend (val) {
      if (!val) {
        Message({
          type: 'error',
          message: '邮箱地址不能空'
        });
        return;
      }

      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val)) { // 检验邮箱地址有效性
        Message({
          type: 'error',
          message: '邮箱地址格式不正确'
        });
        return;
      }
      let loadingInstance = Loading.service({ fullscreen: true, background: 'rgba(0, 0, 0, 0.3)' });
      const { code, msg } = await getCodeAPI({ email: val });
      if (code) {
        Message({
          type: 'success',
          message: '发送成功'
        });
        this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
          loadingInstance.close();
        });
      } else {
        this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
          loadingInstance.close();
        });
      }
    },
    async onSubmit () {
      if (!this.email) {
        Message({
          type: 'error',
          message: '邮箱地址不能空'
        });
        return;
      }
      // 检验邮箱地址有效性
      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
        Message({
          type: 'error',
          message: '邮箱地址格式不正确'
        });
        return;
      }
      if (!this.sms) {
        Message({
          type: 'error',
          message: '验证码不能空'
        });
        return;
      }
      if (!this.pwd) {
        Message({
          type: 'error',
          message: '登录密码不能空'
        });
        return;
      }
      const { code, msg } = await editPasswordAPI({ email: this.email, password: this.pwd, code: this.sms });
      if (code) {
        Message({
          showClose: true,
          message: '重置成功',
          type: 'success'
        });
        this.$router.push('/user/login');
      }
    },
    goBack () {
      this.$router.go(-1);
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-reset-page {
    padding: 2rem 0.5rem 0;
    .input-title {
      color: @secondary-color;
      font-weight: bold;
      font-size: 1.25rem;
      text-align: center;
    }
    .pwd-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 1rem;
      font-size: 0.85rem;
      padding-left: 1rem;
      span {
        color: @primary-color;
        font-weight: bold;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .submit-btn {
      background-color: @secondary-color;
      color: #FFF;
      padding: 0.5rem 1rem;
      text-align: center;
      border-radius: 5px;
      &:hover {
        cursor: pointer;
      }
    }
    .reset-footer {
      padding: 0 1rem 1rem 2rem;
      .edit-box {
        display: flex;
        justify-content: space-between;
        .cancel {
          color: @secondary-color;
        }
        .confirm {
          background-color: @secondary-color;
          color: #FFF;
        }
        .btn {
          flex: 1;
          text-align: center;
          padding: 0.5rem 1rem;
          border-radius: 5px;
          border: 1px solid @secondary-color;
          margin: 0 0.5rem; /* 添加左右间隔 */
          &:hover {
            cursor: pointer;
          }
        }
        .btn:first-child {
          margin-left: 0; /* 第一个按钮左边不加间隔 */
        }
        .btn:last-child {
          margin-right: 0; /* 最后一个按钮右边不加间隔 */
        }
      }
    }
  }

  :deep(.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background-color: #009FE5;
    border-color: #009FE5;
  }

  :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
    color: #009FE5;
  }
</style>