<template>
  <div class="login">
    <div class="position-box">
      <div class="inner-box">
        <img @click="$router.push({path:'/login'})" src="../../static/image/logo.png" class="inner-logo" />
        <div class="inner-line"></div>
        <span>重置密码</span>
      </div>
    </div>
    <div class="login-box">
      <div class="login-content">
        <div class="top-icon">
          重置密码
        </div>
        <div v-loading="isLoading">
          <!-- 密码登录 -->
          <div class="login-password">
            <div class="pass-item">
              <img src="../../static/image/phone-icon.png" class="phone-icon" />
              <el-input placeholder="请输入手机号" v-model="mobile" class="input-phone" :maxlength="11" />
            </div>
            <div class="pass-item">
              <img src="../../static/image/code-icon.png" class="phone-icon" />
              <el-input placeholder="验证码" v-model="code" class="input-phone" :maxlength="4" />
              <div class="get-code" v-if="!showCode" @click.stop="getCode">获取短信验证码</div>
              <div class="get-code" v-else>{{ count }}秒</div>
            </div>
            <div class="pass-item">
              <img src="../../static/image/lock-icon.png" class="lock-icon" />
              <el-input placeholder="新密码" v-model="password" class="input-phone" type="password" />
            </div>
            <div class="pass-item">
              <img src="../../static/image/lock-icon.png" class="lock-icon" />
              <el-input placeholder="确认新密码" v-model="passwordAgian" class="input-phone" type="password" />
            </div>
          </div>
        </div>
        <div class="login-btn" @click.stop="commit">确认</div>
      </div>
    </div>
    <div class="back-login">
      <div class="wrap" @click="$router.push({path:'/login'})">
        <img src="../../static/image/back-login.png" alt="">
        <span>返回登录页</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getPhoneCode, forgotPassword } from "../api/user.js";
export default {
  data() {
    return {
      isLoading: false, // 请求解决展示loading
      activeIndex: 1,
      mobile: "",
      code: "",
      password: "",
      passwordAgian: "",
      showCode: false,
      count: 60,
      timer: null,
    };
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    commit() {
      if (!this.mobile.trim()) {
        return this.$message({
          message: "手机号码不能为空",
          type: "error",
        });
      }
      if (!this.checkPhone(this.mobile)) {
        return this.$message({
          message: "请输入正确的手机号",
          type: "error",
        });
      }
      if (!this.code.trim()) {
        return this.$message({
          message: "验证码不能为空",
          type: "error",
        });
      }
      if (!this.password.trim()) {
        return this.$message({
          message: "密码不能为空",
          type: "error",
        });
      }
      if (!this.passwordAgian.trim()) {
        return this.$message({
          message: "确认密码不能为空",
          type: "error",
        });
      }
      if (this.password.trim() !== this.passwordAgian.trim()) {
        return this.$message({
          message: "两次密码不一致",
          type: "error",
        });
      }
      let params = {
        code: this.code,
        mobile: this.mobile,
        newPassword: this.password,
      };
      forgotPassword(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "密码重置成功！",
            type: "success",
          });
          setTimeout(() => {
            this.$router.push({ path: "/login" });
          }, 2000);
        } else {
          return this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    checkPhone(phone) {
      if (!/^1\d{10}$/.test(phone)) {
        return false;
      } else {
        return true;
      }
    },
    // 获取验证码
    getCode() {
      if (!this.mobile.trim()) {
        return this.$message({
          message: "手机号码不能为空",
          type: "error",
        });
      }
      if (!this.checkPhone(this.mobile)) {
        return this.$message({
          message: "请输入正确的手机号",
          type: "error",
        });
      }
      let params = {
        mobile: this.mobile,
        type: 2,
      };
      this.isLoading = true;
      getPhoneCode(params).then((res) => {
        if (res.code == 200) {
          this.isLoading = false;
          this.showCode = true;
          this.$message({
            message: "验证码发送成功",
            type: "success",
          });
          this.timer = setInterval(() => {
            this.count--;
            if (this.count <= 1) {
              this.showCode = false;
              clearInterval(this.timer);
              this.count = 60;
            }
          }, 1000);
        } else {
          this.isLoading = false;
          return this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  border: none !important;
}
.login {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 100%;
  .position-box {
    // position: absolute;
    flex: 1;
    margin: 20px 0 0 20px;
    .inner-box {
      display: flex;
      align-items: center;
      .inner-logo {
        width: 204px;
        height: 44px;
      }
      .inner-line {
        width: 1px;
        height: 24px;
        background-color: #eee;
        margin: 0 40px;
      }
      span {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }
  .login-box {
    flex: 1;
    position: relative;
    z-index: 200;
    height: 100vh;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    .login-content {
      background-color: #fff;
      border-radius: 14px;
      width: 360px;
      box-sizing: border-box;
      align-self: center;
      padding: 30px;
      .top-icon {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        text-align: center;
      }
      .pass-code {
        display: flex;
        padding-top: 44px;
        .item {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #565656;
          cursor: pointer;
          &:nth-child(1) {
            margin-right: 30px;
          }
          &.active {
            font-weight: bold;
            color: #111111;
            padding-bottom: 10px;
            border-bottom: 3px solid #fc7200;
          }
        }
      }
      .login-password {
        padding-top: 30px;
        .pass-item {
          display: flex;
          align-items: center;
          padding-bottom: 2px;
          border-bottom: 1px solid #eee;
          .phone-icon {
            width: 14px;
            height: 17px;
            margin-right: 16px;
          }
          .lock-icon {
            width: 16px;
            height: 18px;
            margin-right: 14px;
          }
          .input-phone {
            flex: 1;
          }
          .get-code {
            min-width: 120px;
            box-sizing: border-box;
            text-align: center;
            padding: 0 6px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #175199;
            cursor: pointer;
          }
        }
      }
      .forgot-pass {
        text-align: right;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8590a6;
        padding-top: 10px;
        span {
          cursor: pointer;
        }
      }
      .login-btn {
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: #fc7200;
        border-radius: 3px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        margin-top: 40px;
        cursor: pointer;
      }
      .xie-yi {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #808080;
        text-align: center;
        margin-top: 20px;
        a {
          text-decoration: none;
          color: #175199;
        }
      }
    }
  }
  .back-login {
    flex: 1;
    margin-top: 20px;
    .wrap {
      height: 44px;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
}
</style>
