<template>
  <div class="login_bg">
    <div class="logo">
      <a href="/">
        <span class="logo_text">
          <img src="../assets/logo.png" height="40px" />
        </span>
      </a>
    </div>

    <div class="login_content">
      <h2 style="text-align: center">用户注册</h2>
      <el-form
        size="medium"
        :model="registerForm"
        :rules="rules"
        ref="registerForm"
        :inline="true"
        class="login_form">
        <el-form-item prop="email" label="">
          <el-input
            v-model="registerForm.email"
            prefix-icon="el-icon-postcard"
            style="width: 300px; background: #fff"
            placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="code" label="">
          <el-input
            v-model="registerForm.code"
            style="width: 180px; background: #fff"
            prefix-icon="el-icon-message"
            placeholder="请输入验证码"></el-input>
          <el-button
            class="get-code-button"
            style="width: 112px"
            :disabled="getCodeDisabled"
            :class="getCodeDisabled ? 'disabled' : 'code-btn'"
            @click="verCode">
            {{ codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒` }}
          </el-button>
        </el-form-item>
        <el-form-item prop="password" label="">
          <el-input
            type="password"
            v-model="registerForm.password"
            prefix-icon="el-icon-lock"
            style="width: 300px; background: #fff"
            placeholder="请输入密码"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass" label="">
          <el-input
            type="password"
            prefix-icon="el-icon-lock"
            v-model="registerForm.checkPass"
            style="width: 300px; background: #fff"
            placeholder="请再次输入密码"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="companyName" label="">
          <el-input
            v-model="registerForm.companyName"
            prefix-icon="el-icon-s-home"
            style="width: 300px; background: #fff"
            placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item prop="job" label="">
          <el-input
            v-model="registerForm.job"
            prefix-icon="el-icon-s-order"
            style="width: 300px; background: #fff"
            placeholder="请输入职务"></el-input>
        </el-form-item>
      </el-form>
      <div class="agree-terms" :class="agreeAnimate ? 'agree-animate' : ''">
        <el-checkbox v-model="isRead" label="" :indeterminate="false" />
        <span class="tos-link">
          阅读并同意
          <a class="link" href="/protocol" target="_blank">九猫ERP条款与协议</a>
        </span>
      </div>
      <div style="text-align: center; padding: 0 20px">
        <button class="register-btn" type="primary" @click="onRegister">
          立即注册
        </button>
      </div>
      <div style="margin-top: 20px; font-size: 14px; text-align: center">
        已有账号？
        <router-link class="link" to="/login">马上登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from '../utils/axios'
import md5 from 'js-md5'
export default {
  name: 'register',
  components: {},
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {},
      isRead: false,
      agreeAnimate: false,
      codeCountDown: 0,
      rules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        checkPass: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' },
        ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        job: [{ required: true, message: '请输入职务', trigger: 'blur' }],
      },
      showPwd: false,
    }
  },
  computed: {
    getCodeDisabled() {
      return this.codeCountDown > 0
    },
  },
  methods: {
    async verCode() {
      try {
        await new Promise((resolve, reject) => {
          this.$refs.registerForm.validateField('email', (m) => {
            m ? reject() : resolve()
          })
        })
      } catch {
        return
      }
      try {
        const res = await get('business/user/emailcode', {
          email: this.registerForm.email,
        })
        this.codeCountDown = 60
        this.timer = setInterval(() => {
          this.codeCountDown--
          if (this.codeCountDown <= 0) {
            clearInterval(this.timer)
          }
        }, 1000)
        this.$message.success(res.message)
      } catch (e) {
        console.error(e)
      }
    },
    onRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          if (!this.isRead) {
            this.agreeAnimate = true
            setTimeout(() => {
              this.agreeAnimate = false
            }, 700)
            return
          }
          const { code, companyName, email, job, password } = this.registerForm
          const hash = md5.create()
          hash.update(password)

          const passwordHash = hash.hex()
          post('business/user/register', {
            code: code,
            companyName: companyName,
            email: email,
            job: job,
            password: passwordHash,
          }).then((res) => {
            this.$message.success(res.message)
            if (res.code === 200) {
              this.registerForm = {}
              this.$router.push('/')
            }
          })
        }
      })
    },
  },
}
</script>
<style scoped>
.login_bg {
  width: 100%;
  height: 100%;
  position: relative;
  background: url(../assets/register.jpg) center / cover no-repeat;
}

.el-form--inline .el-form-item {
  margin-right: 0px;
}
.login_content {
  padding: 18px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  position: absolute;
  top: 50%;
  left: 75%;
  /* height: 600px; */
  /* width: 600px; */
  border-radius: 6px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background-position: top right, center;
  background-repeat: no-repeat;
}

.login_content::v-deep .el-form-item__content {
  white-space: nowrap;
}

.login_form {
  padding: 20px 20px 0px 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.agree-terms {
  margin-bottom: 30px;
  margin-left: 20px;
}

.get-code-button:disabled:hover {
  background-color: #d0d2d8;
  color: #666;
}

.tos-link {
  font-size: 14px;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2.57rem);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(2.57rem);
  }
  100% {
    transform: translateX(0);
  }
}
.agree-animate {
  animation: shake 0.4s;
}

.register-btn {
  width: 100%;
  height: 38px;
  display: block;
  margin: 0 auto;
  background: #006eff;
  box-shadow: 0 4px 8px 0 rgb(26 90 216 / 32%);
  border-radius: 4px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

.code-btn {
  margin-left: 10px;
  background: linear-gradient(180deg, #319af2 0%, #2386ee 100%);
  color: #fff;
}
.disabled {
  background-color: #d0d2d8;
  color: #666;
  margin-left: 10px;
}

.logo {
  position: absolute;
  top: 60px;
  left: 80px;
}

</style>
