<template>
  <div class="register-page">
    <h1>注册账号</h1>
    <el-form class="register-form">
      <el-form-item>
        <el-input v-model="form.username" placeholder="请输入账号" size="large">
          <template #prefix>
            <div class="input-prefix">
              <el-icon :size="16">
                <User />
              </el-icon>
              <span>账号</span>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.phone" placeholder="请输入手机号" size="large">
          <template #prefix>
            <div class="input-prefix">
              <el-icon :size="16">
                <Iphone />
              </el-icon>
              <span>手机号</span>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.code" placeholder="请输入验证码" size="large">
          <template #prefix>
            <div class="input-prefix">
              <el-icon :size="16">
                <CircleCheck />
              </el-icon>
              <span>验证码</span>
            </div>
          </template>
          <template #append>
            <el-button type="primary" class="code-btn">获取验证码</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.password" type="password" placeholder="请输入密码" size="large" show-password>
          <template #prefix>
            <div class="input-prefix">
              <el-icon :size="16">
                <Lock />
              </el-icon>
              <span>密码</span>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <div class="form-end">
        <el-button size="large" style="width:100%" type="primary" class="is-gradient">立即注册</el-button>
        <div class="form-links">
          <span class="link-text">已有账号？</span>
          <span class="link-btn" @click="handleLogin">去登录</span>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { User, Lock, Iphone, CircleCheck } from '@element-plus/icons-vue'

const emit = defineEmits<{
  (e: 'switch', component: 'login'): void
}>()

const form = reactive({
  username: '',
  phone: '',
  code: '',
  password: ''
})

function handleLogin() {
  emit('switch', 'login')
}
</script>

<style lang="scss" scoped>
.register-page {
  margin-top: 242px;
  width: 400px;
  display: flex;
  flex-direction: column;
  color: #fff;
}


.register-form {
  :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 8px;

    &.is-focus {
      border-color: #7c3aed;
    }
  }

  :deep(.el-input__inner) {
    color: #fff;

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

  :deep(.el-input__icon) {
    color: #999;
  }

  :deep(.el-input__password) {
    color: #fff;
  }

  :deep(.el-input-group__append) {
    background: transparent;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 0;

    .code-btn {
      color: #8077FF;
      border: none;
      background: transparent;
      padding: 0 15px;
      height: 100%;
      border-radius: 0 8px 8px 0;

      &:hover {
        color: #9f95ff;
      }
    }
  }

  .input-prefix {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
  }
}

.form-end {
  margin-top: 30px;
}

.form-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;

  .link-text {
    color: #999;
  }

  .link-btn {
    color: #8077FF;
    cursor: pointer;
    margin-left: 4px;

    &:hover {
      color: #9f95ff;
    }
  }
}
</style>
