<template>
  <div class="register">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <button class="back-btn" @click="goBack">
        <svg class="back-icon" viewBox="0 0 24 24" fill="none">
          <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>返回</span>
      </button>
    </div>

    <!-- 主要内容 -->
    <div class="main-wrapper">
      <!-- 头部信息 -->
      <div class="header-info">
        <div class="brand-badge">
          <img src="@/assets/hongqi.png" alt="logo" class="brand-logo" />
        </div>
        <h1 class="page-title">创建新账户</h1>
        <!-- <p class="page-subtitle">加入智慧政务平台</p> -->
      </div>

      <!-- 注册表单卡片 -->
      <div class="register-form-card">
        <div class="form-content">
          <!-- 基本信息组 -->
          <div class="input-section">
            <h3 class="section-title">基本信息</h3>
            <div class="input-row">
              <div class="modern-input">
                <input 
                  type="text"
                  v-model="phoneData"
                  class="input-control"
                  :class="{ 'filled': phoneData }"
                  maxlength="11"
                  placeholder=" "
                />
                <label class="input-placeholder">手机号码</label>
                <div class="input-border"></div>
              </div>
            </div>
            
            <div class="input-row">
              <div class="modern-input">
                <input 
                  type="text"
                  v-model="name"
                  class="input-control"
                  :class="{ 'filled': name }"
                  maxlength="4"
                  placeholder=" "
                />
                <label class="input-placeholder">真实姓名</label>
                <div class="input-border"></div>
              </div>
            </div>
          </div>

          <!-- 安全信息组 -->
          <div class="input-section">
            <h3 class="section-title">安全设置</h3>
            <div class="input-row">
              <div class="modern-input">
                <input 
                  type="password"
                  v-model="passData"
                  class="input-control"
                  :class="{ 'filled': passData }"
                  maxlength="20"
                  placeholder=" "
                />
                <label class="input-placeholder">登录密码</label>
                <div class="input-border"></div>
              </div>
            </div>
            
            <div class="input-row">
              <div class="modern-input">
                <input 
                  type="text"
                  v-model="inviteCode"
                  class="input-control"
                  :class="{ 'filled': inviteCode }"
                  maxlength="6"
                  placeholder=" "
                />
                <label class="input-placeholder">邀请码</label>
                <div class="input-border"></div>
              </div>
            </div>
          </div>

          <!-- 验证码区域 -->
          <div class="input-section">
            <h3 class="section-title">安全验证</h3>
            <div class="captcha-group">
              <div class="modern-input captcha-input">
                <input 
                  type="text"
                  v-model="captchaInput"
                  class="input-control"
                  :class="{ 'filled': captchaInput }"
                  maxlength="4"
                  placeholder=" "
                />
                <label class="input-placeholder">验证码</label>
                <div class="input-border"></div>
              </div>
              <div class="captcha-display" @click="generateCaptcha">
                <canvas ref="captchaCanvas" width="100" height="50" class="captcha-canvas"></canvas>
                <div class="refresh-hint">点击刷新</div>
              </div>
            </div>
          </div>

          <!-- 协议和按钮 -->
          <div class="form-footer">
            <div class="agreement-section">
              <div class="custom-checkbox" @click="isShowAgree">
                <input type="checkbox" v-model="showAgree" class="checkbox-native">
                <div class="checkbox-custom">
                  <svg v-if="showAgree" class="check-icon" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                  </svg>
                </div>
                <span class="checkbox-text">我已阅读并同意《用户协议》和《隐私政策》</span>
              </div>
            </div>
            
            <button 
              class="submit-button"
              :class="{ 'loading': isRotate }"
              @click="startReg"
              :disabled="isRotate"
            >
              <span v-if="!isRotate">创建账户</span>
              <div v-else class="button-spinner"></div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
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;
    },
    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, 100, 50);
      
      // 渐变背景
      const gradient = ctx.createLinearGradient(0, 0, 100, 50);
      gradient.addColorStop(0, '#f8fffe');
      gradient.addColorStop(1, '#f0fdfb');
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 100, 50);
      
      // 绘制验证码文字
      ctx.font = 'bold 20px Arial';
      ctx.fillStyle = '#2f9580';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      
      // 添加字符变形效果
      for (let i = 0; i < this.captcha.length; i++) {
        const char = this.captcha[i];
        const x = 20 + i * 15;
        const y = 25 + (Math.random() - 0.5) * 6;
        const angle = (Math.random() - 0.5) * 0.3;
        
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.fillText(char, 0, 0);
        ctx.restore();
      }
      
      // 添加干扰线
      for (let i = 0; i < 3; i++) {
        ctx.strokeStyle = `rgba(47, 149, 128, ${0.2 + Math.random() * 0.3})`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(Math.random() * 100, Math.random() * 50);
        ctx.lineTo(Math.random() * 100, Math.random() * 50);
        ctx.stroke();
      }
      
      // 添加干扰点
      for (let i = 0; i < 20; i++) {
        ctx.fillStyle = `rgba(47, 149, 128, ${Math.random() * 0.4})`;
        ctx.beginPath();
        ctx.arc(Math.random() * 100, Math.random() * 50, Math.random() * 2, 0, 2 * Math.PI);
        ctx.fill();
      }
    },
    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;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.register {
  min-height: 100vh;
  background: linear-gradient(to bottom, #2f9580 0%, #4fb3a1 100%);
  position: relative;
}

.register * {
  box-sizing: border-box;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: rgba(47, 149, 128, 0.95);
  backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-bar .back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px 8px 8px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.nav-bar .back-btn .back-icon {
  width: 20px;
  height: 20px;
}

.nav-bar .back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.main-wrapper {
  padding: 80px 20px 20px;
  max-width: 480px;
  margin: 0 auto;
}

.header-info {
  text-align: center;
  margin-bottom: 32px;
}

.header-info .brand-badge {
  width: 80px;
  height: 80px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.header-info .brand-badge .brand-logo {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

.header-info .page-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-info .page-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  margin: 0;
}

.register-form-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.register-form-card .form-content {
  padding: 32px;
}

.input-section {
  margin-bottom: 28px;
}

.input-section .section-title {
  color: #2f9580;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f1f5f9;
  position: relative;
}

.input-section .section-title:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #2f9580, #4fb3a1);
}

.input-section .input-row {
  margin-bottom: 20px;
}

.input-section .input-row:last-child {
  margin-bottom: 0;
}

.modern-input {
  position: relative;
}

.modern-input .input-control {
  width: 100%;
  height: 54px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 16px 8px;
  font-size: 16px;
  color: #2d3748;
  background: #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  box-sizing: border-box;
}

.modern-input .input-control:focus,
.modern-input .input-control.filled {
  border-color: #2f9580;
  box-shadow: 0 0 0 3px rgba(47, 149, 128, 0.1);
}

.modern-input .input-control:focus + .input-placeholder,
.modern-input .input-control.filled + .input-placeholder {
  transform: translateY(-8px) scale(0.8);
  color: #2f9580;
  font-weight: 500;
}

.modern-input .input-placeholder {
  position: absolute;
  left: 16px;
  top: 18px;
  font-size: 16px;
  color: #9ca3af;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left center;
  background: #ffffff;
  padding: 0 4px;
}

.modern-input .input-border {
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: linear-gradient(90deg, #2f9580, #4fb3a1);
  transition: all 0.3s ease;
}

.modern-input.captcha-input {
  flex: 1;
}

.captcha-group {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.captcha-group .captcha-display {
  position: relative;
  cursor: pointer;
}

.captcha-group .captcha-display .captcha-canvas {
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  transition: border-color 0.3s ease;
}

.captcha-group .captcha-display .captcha-canvas:hover {
  border-color: #2f9580;
}

.captcha-group .captcha-display .refresh-hint {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #9ca3af;
  white-space: nowrap;
}

.form-footer {
  margin-top: 32px;
}

.form-footer .agreement-section {
  margin-bottom: 24px;
}

.form-footer .agreement-section .custom-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.form-footer .agreement-section .custom-checkbox .checkbox-native {
  display: none;
}

.form-footer .agreement-section .custom-checkbox .checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.form-footer .agreement-section .custom-checkbox .checkbox-custom .check-icon {
  width: 14px;
  height: 14px;
  color: #ffffff;
}

.form-footer .agreement-section .custom-checkbox .checkbox-text {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

.form-footer .agreement-section .custom-checkbox:hover .checkbox-custom {
  border-color: #2f9580;
}

.form-footer .agreement-section input:checked + .checkbox-custom {
  background: linear-gradient(135deg, #2f9580, #4fb3a1);
  border-color: #2f9580;
}

.form-footer .submit-button {
  width: 100%;
  height: 54px;
  background: linear-gradient(135deg, #2f9580 0%, #4fb3a1 100%);
  border: none;
  border-radius: 27px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(47, 149, 128, 0.3);
}

.form-footer .submit-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(47, 149, 128, 0.4);
}

.form-footer .submit-button:active:not(:disabled) {
  transform: translateY(0);
}

.form-footer .submit-button.loading {
  pointer-events: none;
}

.form-footer .submit-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-footer .button-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .nav-bar {
    height: 50px;
    padding: 0 16px;
  }
  
  .nav-bar .back-btn {
    font-size: 14px;
    padding: 6px 12px 6px 6px;
  }
  
  .main-wrapper {
    padding: 70px 16px 16px;
    max-width: 100%;
  }
  
  .header-info {
    margin-bottom: 24px;
  }
  
  .header-info .brand-badge {
    width: 70px;
    height: 70px;
    margin-bottom: 16px;
  }
  
  .header-info .brand-badge .brand-logo {
    width: 40px;
    height: 40px;
  }
  
  .header-info .page-title {
    font-size: 22px;
  }
  
  .register-form-card .form-content {
    padding: 24px;
  }
  
  .input-section {
    margin-bottom: 24px;
  }
  
  .input-section .section-title {
    font-size: 15px;
    margin-bottom: 12px;
  }
  
  .input-section .input-row {
    margin-bottom: 16px;
  }
  
  .modern-input .input-control {
    height: 50px;
    font-size: 15px;
    padding: 18px 14px 8px;
    box-sizing: border-box;
  }
  
  .modern-input .input-placeholder {
    font-size: 15px;
    top: 16px;
    left: 14px;
  }
  
  .captcha-group {
    gap: 10px;
  }
  
  .captcha-group .captcha-display .captcha-canvas {
    width: 90px;
    height: 45px;
  }
  
  .form-footer {
    margin-top: 24px;
  }
  
  .form-footer .submit-button {
    height: 50px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .main-wrapper {
    padding: 70px 12px 12px;
  }
  
  .register-form-card .form-content {
    padding: 20px;
  }
  
  .captcha-group {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .captcha-group .captcha-display {
    align-self: center;
  }
  
  .captcha-group .captcha-display .captcha-canvas {
    width: 120px;
    height: 50px;
  }
}
</style>

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