<!--
 * @Description: 登录页
 * @Author: 空白格
 * @Date: 2022-08-10 11:45:16
 * @LastEditors: 空白格
 * @LastEditTime: 2023-04-25 11:47:31
 * @FilePath: \veterans_client_web\src\views\Login\LoginIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="login">
    <div class="login-box">
      <div class="login-box-form">
        <div class="login-box-form-title">退役军人职业教育基地</div>
        <div class="login-box-form-subtitle">用户登录</div>
        <el-form
          :model="form"
          :rules="rules"
          ref="loginForm"
          class="login-box-form-main"
        >
          <el-form-item prop="mobile">
            <el-input
              v-model="form.mobile"
              :maxlength="11"
              type="tel"
              placeholder="请输入手机号"
            >
              <el-image
                class="el-input__icon"
                slot="prefix"
                :src="require('@/assets/images/user-icon.svg')"
                style="width: 27px; height: 58px"
              ></el-image>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div class="code-verify">
              <div class="code-verify-input">
                <el-input
                  v-model="form.code"
                  :maxlength="4"
                  placeholder="请输入验证码"
                  :disabled="!form.accessToken"
                >
                  <el-image
                    class="el-input__icon"
                    slot="prefix"
                    :src="require('@/assets/images/key-icon.svg')"
                    style="width: 27px; height: 58px"
                  ></el-image>
                </el-input>
              </div>
              <div class="code-verify-btn">
                <template v-if="!validCode.msg">
                  <el-button
                    class="code-verify-btn-code"
                    :disabled="!form.mobile"
                    @click="getPhoneCode"
                    >获取验证码</el-button
                  >
                </template>
                <template v-else>
                  <span>{{ validCode.seconds }}秒后可重新获取</span>
                </template>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              :disabled="!form.code || !form.accessToken"
              :loading="subLoading"
              @click="submitCode"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginIndex",
  data() {
    return {
      form: {
        mobile: "",
        code: "",
        accessToken: "",
        userId: "",
      },
      subLoading: false,
      validCode: {
        seconds: 60,
        msg: false,
        timer: null,
      },
      rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    /**
     * 获取手机验证码
     * @date 2022-08-17
     * @returns {any}
     */
    getPhoneCode() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("GetLoginCode", { mobile: this.form.mobile })
            .then((res) => {
              if (res.code === 200) {
                this.form.accessToken = res.data.accessToken;
                this.form.userId = res.data.userId;
                this.codeCountDown();
              }
            });
        }
      });
    },
    /**
     * 验证码
     * @date 2022-08-17
     * @returns {any}
     */
    submitCode() {
      if (this.form.code && this.form.accessToken) {
        this.subLoading = true;
        this.$store
          .dispatch("Login", {
            accessToken: this.form.accessToken,
            userId: this.form.userId,
            code: this.form.code,
          })
          .then((res) => {
            if (res.code === 200) {
              this.$store
                .dispatch("GetUserInfo")
                .then((res) => {
                  if (res.code === 200) {
                    this.validateEducCheck(res.data);
                  } else {
                    this.subLoading = false;
                  }
                })
                .catch(() => {
                  this.subLoading = false;
                });
            } else {
              this.$message.error(res.msg || "登录失败!");
            }
          })
          .catch(() => {
            this.subLoading = false;
          });
      }
    },
    /**
     * 判断是否进行认证
     * @date 2022-08-17
     * @returns {any}
     */
    validateEducCheck(data) {
      if (data.auditStatus === 1 || data.auditStatus === 3 || data.auditStatus === 9) {
        this.$router.push({
          path: "/applyeducationauth",
        });
      } else {
        this.jumpPage();
      }
      this.subLoading = false;
    },
    /**
     * 跳转指定页面
     * @date 2022-08-17
     * @returns {any}
     */
    jumpPage() {
      this.$router.push({
        path: "/",
      });
    },
    /**
     * 倒计时
     * @date 2022-08-17
     * @returns {any}
     */
    codeCountDown() {
      this.validCode.msg = true;
      this.validCode.timer = setInterval(() => {
        this.validCode.seconds--;
        if (this.validCode.seconds === 0) {
          clearInterval(this.validCode.timer);
          this.validCode.seconds = 60
          this.validCode.msg = false;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  min-width: 750px;
  height: 100vh;
  background-image: url("./../../assets/images/login-bg.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  &-box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -263px;
    padding: 62px 50px;
    background-color: #fff;
    box-shadow: 5px 5px 28px -17px rgba(120, 120, 120, 0.3);
    border-radius: 12px;
    width: 500px;
    &-form {
      &-title {
        font-size: 42px;
        text-align: center;
        color: #1c163f;
        margin-bottom: 20px;
      }
      &-subtitle {
        font-size: 31px;
        text-align: center;
        color: #1c163f;
        margin-bottom: 20px;
      }
      &-main {
        :deep(.el-input__inner) {
          height: 58px;
          line-height: 58px;
          padding-left: 60px;
          border-radius: 0;
        }
        :deep(.el-input__prefix) {
          left: 20px;
          line-height: 58px;
        }
        .code-verify {
          display: flex;
          width: 100%;
          &-input {
            width: calc(100% - 132px);
            margin-right: 10px;
          }
          &-btn {
            line-height: 58px;
            color: #e6a23c;
            &-code {
              width: 122px;
              background-color: #5e9c7c;
              height: 58px;
              color: #fff;
              font-size: 14px;
            }
          }
        }
        .login-btn {
          width: 100%;
          height: 64px;
          margin-top: 40px;
          font-size: 21px;
        }
      }
    }
  }
}
</style>
