<template>
  <div class="register">
    <div class="content">
      <div class="back" @click="goBack">
        X
      </div>
      <!-- 头部logo -->
      <div class="header">
        <img src="@/assets/logo-home.png" alt="logo" />
        <div class="title">农泉财富</div>
      </div>
      <!-- 主体 -->
      <div class="main">
        <wInput
          type="text"
          maxlength="11"
          placeholder="请输入手机号"
          v-model="phoneData"
        ></wInput>
        <wInput
          type="text"
          maxlength="4"
          placeholder="姓名"
          v-model="name"
        ></wInput>
        <wInput
          type="password"
          maxlength="11"
          placeholder="请输入密码"
          v-model="passData"
        ></wInput>
        <wInput
          type="number"
          maxlength="6"
          placeholder="邀请码"
          ref="codeRef"
          v-model="inviteCode"
        ></wInput>
      </div>

      <wButton
        text="注 册"
        :rotate="isRotate"
        @click.native="startReg()"
        class="wbutton"
      ></wButton>

      <!-- 底部信息 -->
      <div class="footer">
        <span
          @tap="isShowAgree"
          class="cuIcon"
          :class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'"
        >同意</span>
        <span>《协议》</span>
      </div>
    </div>
  </div>
</template>

<script>
import wInput from "@/components/watch-login/watch-input.vue";
import wButton from "@/components/watch-login/watch-button.vue";
import { register } from "@/api/login.js";
import { Toast } from "vant";

export default {
  data() {
    return {
      phoneData: "", // 账号
      name: "", // 姓名
      passData: "", // 密码
      inviteCode: "", // 邀请码
      msg: "", // 消息
      code: "", // 验证码
      showAgree: true, // 协议是否选择
      isRotate: false // 是否加载旋转
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    isShowAgree() {
      //是否选择协议
      this.showAgree = !this.showAgree;
    },
    getVerCode() {
      //获取验证码
      if (this.phoneData.length != 11) {
        Toast("手机号不正确");
        return false;
      }
      this.$refs.runCode.$emit("runCode"); //触发倒计时（一般用于请求成功验证码后调用）
      setTimeout(() => {
        this.$refs.runCode.$emit("runCode", 0); //假装模拟下需要 终止倒计时
      }, 60000);
    },
    async startReg() {
      if (this.isRotate) {
        return false;
      }
      if (!this.showAgree) {
        Toast("请先同意《协议》");
        return false;
      }
      if (!this.phoneData) {
        Toast("账号不能为空");
        return false;
      }
      if (!this.name) {
        Toast("姓名不能为空");
        return false;
      }
      if (this.passData.length < 6) {
        Toast("密码长度最少六位");
        return false;
      }
      if (!this.inviteCode) {
        Toast("邀请码不能为空");
        return false;
      }
      this.isRotate = true;
      try {
        const data = {
          account: this.phoneData,
          name: this.name,
          password: this.passData,
          inviteCode: this.inviteCode,
          msg: this.msg,
          code: this.code
        };
        let res = await register(data);
        if(res.code == 1){
          Toast("注册成功");
          this.isRotate = false;
          this.goBack();
        }else{
          Toast(res.msg);
        this.isRotate = false;
        }
      } catch (error) {
        this.isRotate = false;
      }
    }
  },
  components: {
    wInput,
    wButton
  }
};
</script>

<style lang="scss" scoped>
.register {
  height: 100vh;
  width: 100%;
  background: url('~@/assets/dabag.png') no-repeat center center;
  background-size: cover;
  background-position: center;
  position: relative;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.back {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 1;
}

.header {
  width: 100px;
  height: 80px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
  }
}

.title {
  font-size: 24px;
  color: #fff;
  margin-top: 16px;
  font-weight: 500;
}

.main {
  width: 100%;
  max-width: 320px;
  margin: 60px 0 0 0;
}

.wbutton {
  width: 100%;
  max-width: 320px;
}

.footer {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  
  .cuIcon {
    margin-right: 4px;
    font-size: 16px;
  }
  
  span {
    opacity: 0.9;
  }
}
</style>

<style>
@import url("../components/watch-login/css/icon.css");
</style>
