<template>
  <div class="register">
    <div class="content">
      <div class="back" @click="goBack">
        X
      </div>
      <!-- 头部logo -->
      <div class="header">
        <img src="@/assets/hongqi.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"
          :isShowPass="true"
        ></wInput>
        <wInput
          type="number"
          maxlength="6"
          placeholder="邀请码"
          ref="codeRef"
          v-model="inviteCode"
        ></wInput>
        <div class="captcha-box">
          <input v-model="captchaInput" maxlength="4" placeholder="验证码" style="width:216px;margin-right:8px;" />
          <canvas ref="captchaCanvas" width="80" height="32" @click="generateCaptcha" style="cursor:pointer;vertical-align:middle;"></canvas>
        </div>
      </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, // 是否加载旋转
      captcha: '', // 当前验证码内容
      captchaInput: '' // 用户输入的验证码
    };
  },
  mounted() {
    this.generateCaptcha();
  },
  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);
    },
    generateCaptcha() {
      const chars = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
      let code = '';
      for (let i = 0; i < 4; i++) {
        code += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      this.captcha = code;
      this.$nextTick(() => {
        this.drawCaptcha();
      });
    },
    drawCaptcha() {
      const canvas = this.$refs.captchaCanvas;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 80, 32);
      ctx.font = '24px Arial';
      ctx.fillStyle = '#333';
      ctx.fillText(this.captcha, 10, 26);
      // 添加雪花点干扰
      for (let i = 0; i < 20; i++) {
        ctx.beginPath();
        ctx.arc(
          Math.random() * 80,
          Math.random() * 32,
          Math.random() * 2 + 1,
          0,
          2 * Math.PI
        );
        ctx.fillStyle = this.randomColor();
        ctx.fill();
      }
    },
    randomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r},${g},${b})`;
    },
    checkCaptcha() {
      return this.captchaInput.trim().toLowerCase() === this.captcha.toLowerCase();
    },
    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;
      }
      if (!this.checkCaptcha()) {
        Toast("验证码错误");
        this.generateCaptcha();
        this.captchaInput = '';
        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: 144px;
  height: 104px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 50px 50px 50px 50px;
  img {
    width: 80px;
    width: 80px;
    object-fit: cover;
    
  }
}


.title {
  font-size: 10px;
  color: #000;
  margin-top: 16px;
  font-weight: 500;
  letter-spacing: 4px;
}

.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;
  }
}

.captcha-box {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.captcha-box input {
  height: 44px;
  border-radius: 22px;
  border: none;
  background: #fff;
  padding-left: 16px;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
  margin-right: 8px;
  width: 180px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.captcha-box canvas {
  height: 44px;
  width: 90px;
  // border-radius: 22px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: inline-block;
}
</style>

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