<template>
    <div class="login-by-code">
      <el-form ref="loginForm" :model="loginForm" :rules="loginFormRules">
        <el-form-item prop="mobile">
          <template name="label">
            <div class="form-title">
              <span>
                手机号码
              </span>
  
              <el-tooltip class="item" effect="dark" placement="top">
                <template slot="content">
                  个人用户及企业（主账号）<br />可通过短信验证码登录
                </template>
                <img src="@/assets/imgs/ic_tips.png" />
              </el-tooltip>
            </div>
          </template>
          <el-input
            v-model="loginForm.mobile"
            autofocus="autofocus"
            placeholder="请输入手机号码"
            @keyup.enter.native="loginAction()"
          />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input
            v-model="loginForm.code"
            placeholder="请输入验证码"
            @keyup.enter.native="loginAction()"
          >
            <template slot="append">
              <a class="input-append disabled" v-if="countDown > 0">
                {{ countDown }}秒后再次获取
              </a>
              <a class="input-append" @click="getMsgCode" v-else>
                获取验证码
              </a>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item style="margin-top: 54px;">
          <el-button type="primary" @click.prevent="loginAction()">
            登 录
          </el-button>
        </el-form-item>
        <el-form-item style="margin-top: 24px;">
          <el-button @click.prevent="$emit('register')">
            还没有账户？立即注册&emsp;<i class="el-icon-arrow-right"></i>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    name: "LoginByCode", // 短信验证码登录
    data() {
      const validatePhone = (rule, value, callback) => {
        const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  
        setTimeout(() => {
          if (!reg.test(value)) {
            callback(new Error("请输入正确的手机号码"));
          } else {
            callback();
          }
        });
      };
  
      return {
        loginForm: {
          mobile: "",
          code: "",
        },
        loginFormRules: {
          mobile: [
            { required: true, message: "请输入手机号码", trigger: "change" },
            { validator: validatePhone, trigger: "blur" },
          ],
          code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        },
        countDown: 0,
        countDownTimer: null,
      };
    },
    methods: {
      getMsgCode() {
        this.$refs.loginForm.validateField("mobile", (errMsg) => {
          if (!errMsg) {
            this.$api.general.getCode(this.loginForm.mobile).then(({ data }) => {
              if (data.success == 1) {
                this.countDownAction();
              }
            });
          }
        });
      }, // 获取验证码
      countDownAction() {
        this.countDown = 60;
  
        if (this.countDownTimer) {
          clearInterval(this.countDownTimer);
        }
  
        this.countDownTimer = setInterval(() => {
          if (this.countDown > 0) {
            this.countDown--;
          } else {
            clearInterval(this.countDownTimer);
          }
        }, 1000);
      },
      loginAction() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.$api.general
              .loginByCode(this.loginForm)
              .then(({ data }) => {
                if (data.success == 1) {
                  let redirect = "/apaas/ui/#/index";
  
                  // GIS重定向使用
                  if (this.$route.query.ReturnUrl) {
                    redirect = this.$route.query.ReturnUrl;
                  }
  
                  // 前端重定向使用
                  else if (this.$route.query.redirect) {
                    redirect = `/apaas/ui/#${this.$route.query.redirect}`;
                  }
  
                  window.location.href = redirect;
                } else {
                  this.$message({
                    message: data.errMsg || data.data || "登陆失败",
                    type: "error",
                  });
                }
              })
              .catch((error) => {
                console.log(error);
              });
          }
        });
      }, // 短信验证码登录
    },
  };
  </script>
  
  <style lang="less" scoped>
  .login-by-code {
    .el-form {
      .form-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        line-height: 20px;
        margin-bottom: 5px;
  
        > img {
          margin-left: 5px;
        }
      }
    }
  }
  </style>
  