<template>
  <div id="login">
    <div id="container">
      <h1 class="title">欢迎注册电点翻译平台</h1>
      <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input
            type="text"
            v-model="ruleForm.username"
            placeholder="手机号(作为登录账号)"
            clearable
          ></el-input>
        </el-form-item>
        <div class="container_code_pic">
          <el-form-item>
            <el-input
              type="text"
              v-model="ruleForm.picCode"
              placeholder="图片验证码"
              clearable
            ></el-input>
          </el-form-item>
          <div class="code_pic">
            <el-image @click="onClickPicCode" :src="picCodeUrl"></el-image>
          </div>
        </div>
        <div class="container_code">
          <el-form-item>
            <el-input
              type="text"
              v-model="ruleForm.phoneCode"
              placeholder="验证码"
              clearable
            ></el-input>
          </el-form-item>
          <div @click="onClickGetPhoneCode" class="code_text">
            {{ phoneCodeTips }}
          </div>
        </div>
        <el-form-item>
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            placeholder="请输入密码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            @click="submitForm('ruleForm')"
            class="block"
            >{{ loginStatus }}</el-button
          >
        </el-form-item>
        <div class="tips" @click="jumpToLogin">已有账号去登录</div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getPicCode, registerUser, getPhoneCode } from "@/api/log/user.js";
import localStore from "@/utils/localstorage.js";
import md5 from "js-md5";
import GlobalConstants from "@/utils/constants.js";
var codeTime = 0;
export default {
  data() {
    return {
      loading: false,
      loginStatus: "注   册",
      phoneCodeTips: "获取验证码",
      picCodeUrl:
        "",
      ruleForm: {
        username: "",
        checkPass: "",
        phoneCode: "",
        picCode: "",
      },
    };
  },
  mounted: function () {
    this.onClickPicCode();
  },
  methods: {
    //获取图片验证码
    onClickPicCode() {
      getPicCode()
        .then((res) => {
          this.picCodeUrl = res.data.data.codeUrl;
        })
        .catch((e) => {});
    },
    //去登录
    jumpToLogin() {
      //登录成功
      this.$router.push({
        path: "/login",
      });
    },
    //获取短信验证码
    onClickGetPhoneCode() {
      if (codeTime > 0) return;
      if (!this.ruleForm.username) {
        this.$message({
          message: "手机号不能为空",
          type: "error",
        });
        return;
      }
      if (!this.ruleForm.picCode) {
        this.$message({
          message: "请输入图片验证码",
          type: "error",
        });
        return;
      }
      var that = this;
      getPhoneCode(this.ruleForm.username, this.ruleForm.picCode)
        .then((res) => {
          this.$message({
            message: "验证码发送成功",
            type: "success",
          });
          codeTime = 60;
          var t = setInterval(function () {
            that.phoneCodeTips = codeTime-- + "S后重新发送";
            if (codeTime == 0) {
              clearInterval(t);
              that.phoneCodeTips = "获取验证码";
            }
          }, 1000);
        })
        .catch((e) => {
          console.log(e);
          this.onClickPicCode();
        });
    },
    submitForm(formName) {
      if (!this.ruleForm.username) {
        this.$message({
          message: "手机号不能为空",
          type: "error",
        });
        return;
      }
      if (!this.ruleForm.phoneCode) {
        this.$message({
          message: "请输入验证码",
          type: "error",
        });
        return;
      }
      if (!this.ruleForm.checkPass) {
        this.$message({
          message: "请输入密码",
          type: "error",
        });
        return;
      }
      this.loading = true;
      this.loginStatus = "注册中...";
      registerUser(
        this.ruleForm.username,
        this.ruleForm.phoneCode,
        md5(this.ruleForm.checkPass)
      )
        .then((res) => {
          this.$message({
            message: "注册成功，自动登录",
            type: "success",
          });
          //存储数据
          localStore.saveStorage(
            GlobalConstants.LOCAL_KEY_TOKEN,
            res.data.data.token
          );
          localStore.saveStorage(
            GlobalConstants.LOCAL_KEY_NICKNAME,
            res.data.data.nickname
          );
          let that = this;
          setTimeout(function () {
            //登录成功
            that.$router.push({
              path: "/translate/projects",
            });
          }, 1000);
          this.loading = false;
          this.loginStatus = "注册成功，自动登录";
        })
        .catch((e) => {
          //登录失败
          this.loading = false;
          this.loginStatus = "注   册";
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#login {
  min-height: 100%;
  height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
  overflow: hidden;
  position: relative;
}
.container_code {
  position: relative;
}
.code_text {
  position: absolute;
  right: 0;
  top: 50%;
  color: #999;
  padding: 10px;
  font-size: 14px;
  transform: translateY(-50%);
  cursor: pointer;
  margin-top: 5px;
}
.el-form-item {
  margin-bottom: 10px !important;
}
#container {
  background: #fff;
  box-shadow: 0 84px 54px -32px rgba($color: #000000, $alpha: 0.1);
  padding: 41px 50px 45px;
  width: 427px;
  height: auto;
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
  left: 50%;
  right: 0;
  top: 50%;
}
.container_code_pic {
  position: relative;
}
.code_pic {
  position: absolute;
  right: 0;
  top: 50%;
  color: #999;
  width: 135px;
  height: 40px;
  margin-right: 6px;
  font-size: 14px;
  transform: translateY(-50%);
  cursor: pointer;
  margin-top: 5px;
}
.title {
  margin: 0;
  padding: 0;
  display: block;
  font-size: 24px;
  color: #000;
  line-height: 1;
  padding-bottom: 16px;
  font-weight: normal;
}
.tips {
  text-align: center;
  width: 400px;
  padding: 10px;
  font-size: 14px;
  color: #1e80ff;
  cursor: pointer;
}
.demo-ruleForm {
  margin: 0 auto;
}
.el-form-item {
  padding-top: 10px;
}
/deep/ .el-input__inner {
  height: 48px !important;
}
.block {
  width: 100%;
  display: block;
}
</style>
