<template>
  <div class="login">
    <div class="body">
      <div class="middle">
        <div class="right">
          <div class="tab">
            <h2 class="active" @click="currIndex = 0">注册</h2>
          </div>
          <el-form :model="form" label-position="top" ref="form" label-width="100px" class="form">
            <el-form-item
              prop="name"
              :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
              <el-input  placeholder="请输入姓名" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item
              prop="phone"
              :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }, { validator: phoneReg, trigger: 'blur' }]">
              <el-input maxlength="11" placeholder="请输入手机号" v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item
              prop="password"
              :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
              <el-input  placeholder="请输入密码" type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item
              prop="repassword"
              :rules="[{ required: true, message: '请再次输入密码', trigger: 'blur' }]">
              <el-input  placeholder="请再次输入密码" type="password" v-model="form.repassword"></el-input>
            </el-form-item>
            <el-form-item label="" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
              <div class="code-item">
                <el-input style="width: 300px;" maxlength="4" placeholder="请输入验证码" v-model="form.code"></el-input>
                <span @click="getCode" :loading="btnLoading">{{ isStart ? time + ' S' : '发送验证码' }}</span>
              </div>
            </el-form-item>
            <el-button type="primary" style="width: 100%" @click="login" :loading="btnLoading">立即注册</el-button>
          </el-form>
          <div class="login-footer">
            <div class="left">
              <span>有账号？</span>
              <i class="hover" @click="$router.back()">返回登录</i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          name: '',
          password: '',
          repassword: '',
          code: '',
          phone: ''
        },
        phoneReg: (rule, value, callback) => {
          if (/^1[0-9]{10,10}$/.test(value)) {
            return callback()
          }

          callback(new Error('手机号格式错误'))
        },
        timer: null,
        time: 60,
        isSend: false,
        isStart: false,
        isLoading: false,
        currIndex: 0,
        btnLoading: false,
        loginType: '0'
      }
    },

    mounted () {
    },

    methods: {
      login () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.form.password != this.form.repassword) {
              this.$message.success('两次密码输入不一致');
              return;
            }
            this.btnLoading = true
            this.$http.post(`/api/malluser/reg`, {
              ...this.form
            }, {
              headers: {
                Authorization: 'Basic cGM6cGM='
              }
            }).then(res => {
              if (res.code === 0) {
                this.$message.success('注册成功')

                setTimeout(() => {
                  this.$router.replace('/login')
                }, 500)
              }

              this.btnLoading = false
            }).catch(() => {
              this.btnLoading = false
            })
          } else {
            console.log('error submit!!')
            return false;
          }
        })
      },

      getCode () {
        if (this.isSend) {
          return this.$message.error('验证码已发送')
        }

        this.$refs.form.validateField('phone', e => {
          if (!e) {
            this.isSend = true
            this.btnLoading = true
            this.$http.post(`/api/sms/getRegSmsCode?phone=${this.form.phone}`, {}, {
              withoutToken: true
            }).then(res => {
              if (res.code === 0) {
                this.$message.success('验证码发送成功')
                this.isStart = true
                this.timer = setInterval(() => {
                  if (this.time === 0) {
                    this.isSend = false
                    this.isStart = false
                    this.time = 60
                    clearInterval(this.timer)

                    return false
                  }

                  this.time = this.time - 1
                }, 1000)
              }

              this.btnLoading = false
              this.isSend = false
            }).catch(() => {
              this.isSend = false
              this.btnLoading = false
            })
          }
        })
      },

      onChange (e) {
        this.$emit('change', e)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .body {
      position: relative;
      flex: 1;
      width: 100%;
      background-color: #cdc8c8;
      // background: url(../../assets/images/login/login.png) no-repeat;
      background-size: 100% 100%;

      .middle {
        position: absolute;
        display: flex;
        justify-content: flex-end;
        top: 50%;
        left: 50%;
        z-index: 11;
        width: 1280px;
        transform: translate(-50%, -50%);

        & > .left {
          padding-top: 42px;
          font-family: MicrosoftYaHei;

          p {
            line-height: 24px;
            margin-top: 12px;
            margin-bottom: 13px;
            font-size: 18px;
            color: #fff;
          }

          span {
            color: #fff;
          }
        }

        & > .right {
          width: 500px;
          padding: 63px 40px 42px;
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
          background: #fff;
          border-radius: 16px;
          backdrop-filter: blur(6px);
          overflow: hidden;

          .tab {
            display: flex;
            position: relative;
            align-items: center;
            margin-bottom: 36px;
            padding-bottom: 17px;
            border-bottom: 1px solid #DCDFE6;

            &::after {
              position: absolute;
              bottom: -1px;
              left: 0;
              z-index: 1;
              width: 81px;
              height: 2px;
              background: #1FBAD6;
              content: ' ';
              transition: all ease-in-out 0.3s;
            }

            &.tab-active:after {
              transform: translateX(138px);
            }

            h2 {
              width: 81px;
              line-height: 24px;
              text-align: center;
              font-size: 20px;
              font-family: SJsuqian;
              color: #000000;
              cursor: pointer;
              user-select: none;
              transition: all ease 0.4s;

              &.active, &:hover {
                color: #1FBAD6;
              }

              &:first-child {
                margin-right: 58px;
              }
            }
          }

          .login-type {
            font-size: 14px;
            font-family: SJsuqian;
            text-align: center;
            color: #54657D;
            cursor: pointer;
            transition: all ease-in-out 0.4s;

            &:hover {
              color: #1FBAD6;
            }
          }

          .login-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 21px;
            margin-bottom: 38px;

            div {
              display: flex;
              align-items: center;

              span {
                font-family: SJsuqian;
                color: #54657D;
              }

              i {
                font-family: SJsuqian;
                color: #1FBAD6;
              }
            }
          }
        }
      }

      ::v-deep .el-form {
        .el-input__inner {
          height: 48px;
          border-color: #DCDFE6;
          background-color: transparent;

          &:focus, &:hover {
            border-color: #1FBAD6;
          }

          &::placeholder {
            color: #666666;
          }
        }

        .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus {
          border-color: #F56C6C;
        }

        .el-form-item {
          margin-bottom: 20px;
        }

        .el-button {
          height: 48px;
          margin-top: 28px;
          font-size: 16px;
        }

        .code-item {
          display: flex;
          align-items: center;
          justify-content: space-between;


          span {
            width: 110px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            user-select: none;
            border-radius: 4px;
            transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
            border: 1px solid #DCDFE6;

            &:hover {
              border-color: #1FBAD6;
            }
          }

          .el-form-item {
            width: 300px;
          }
        }
      }

      .copyright {
        position: fixed;
        bottom: 24px;
        left: 50%;
        font-size: 14px;
        font-weight: 400;
        color: #fff;
        letter-spacing: 1px;
        transform: translateX(-50%);
      }
    }
  }
</style>
