<template>
  <div class="login-page">
    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 返回按钮 -->
      <div class="back-button" @click="goBack">
        <img src="@/assets/images/arrow_left.png" class="back-icon" />
      </div>

      <!-- 标题区域 -->
      <div class="header">
        <div class="title">Log in.</div>
        <p class="subtitle">Redefine the styling experience with AI.</p>
        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
      </div>

      <div class="login-container">
        <div class="login-form">
          <Mail v-if="step === 'mail'" @nextStep="mailData => handleStep('verify', mailData)" />
          <Verify
            :email="email"
            v-else-if="step === 'verify'"
            :ct="emailCode"
            @nextStep="handleStep('password')"
          />
          <Password v-else-if="step === 'password'" @sucess="handleSuccess"/>
        </div>
      </div>
    </div>

    <div class="footer">
      <p>Powered by AiDLab for Lane Crawford</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import Mail from './components/Mail.vue'
import Verify from './components/Verify.vue'
import Password from './components/Password.vue'

const router = useRouter()
const step = ref<'mail' | 'verify' | 'password'>('mail')
const emailCode = ref(['', '', '', '', ''])
const email = ref('')

// 加载状态
const isLoading = ref(false)

// 返回上一页
const goBack = () => {
  router.go(-1)
}

const handleStep = (type: 'mail' | 'verify' | 'password', data?: any) => {
  if (step.value === 'mail') {
    email.value = data.email
  }
  step.value = type
}

const handleSuccess = () => {
  router.push('/login')
}

</script>

<style scoped lang="less">
.login-page {
  position: relative;
  color: #fff;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-image: url('@/assets/images/login_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 12rem;
  font-family: 'satoshiRegular';
}

.back-button {
  // position: absolute;
  // top: 2rem;
  // left: 2rem;
  margin-top: 2.4rem;
  margin-left: 6.1rem;
  width: 2rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  font-size: 3.4rem;
  .back-icon {
    width: 2.83rem;
    height: 3.47rem;
  }
}

.header {
  margin-top: 1.42rem;
  padding-left: 15.5rem;
  color: white;
  font-family: 'satoshiRegular';
  .title {
    font-size: 11rem;
    font-weight: bold;
    margin-bottom: 0.8rem;
    color: white;
    font-family: 'satoshiBold';
  }

  .subtitle {
    font-size: 3rem;
    color: white;
    font-weight: 400;
    line-height: 141%;
    letter-spacing: 0.08rem;
  }
}

.content {
  position: relative;
  // z-index: 2;
  flex: 1;
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 7.2rem;
  .login-form {
    position: relative;
    width: calc(100% - 28.4rem);
    height: 107.8rem;
    background: radial-gradient(
      100% 100% at 0% 0%,
      rgba(115, 115, 115, 0.4) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    backdrop-filter: blur(35px);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 4.79rem;
    padding: 6.8rem 5.9rem 6.2rem 7.18rem;
    box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 2px solid #fff;
    font-size: 3.83rem;
  }
}

.footer {
  position: relative;
  text-align: center;
  color: white;
  font-size: 3rem;
  margin-bottom: 15.5rem;
}
</style>
