<template>
  <div class="page-container flex items-center justify-center">
    <div class="login-card round-16 p-20 bg-fff">
      <div class="flex items-start justify-between gap-12 mb-20">
        <div>
          <h2 class="fs-18 fw-700 color-333 mb-0">登录</h2>
          <p class="color-999 fs-13 mt-8">未注册手机号将自动创建账号</p>
        </div>
        <button v-if="false" type="button" class="w-30 h-30 border-none round-4 fs-24 pointer close-btn" @click="onClose">×</button>
      </div>

      <el-form :model="form" ref="loginForm" status-icon label-position="top">
        <el-form-item label="手机号" prop="phone" class="mb-18">
          <div class="flex items-center gap-10 w-full">
            <el-input v-model="form.phone" placeholder="请输入手机号" autocomplete="tel" class="w-full" size="large">
              <template #prefix>
                <span class="color-aaa fs-14">+86</span>
              </template>
            </el-input>
          </div>
        </el-form-item>

        <el-form-item label="验证码" prop="code" class="mb-18">
          <div class="flex items-center gap-10 w-full">
            <el-input v-model="form.code" placeholder="请输入验证码" maxlength="6" class="w-full" size="large" />
            <el-button class="code-button px-16" size="large" @click="sendCode">获取验证码</el-button>
          </div>
        </el-form-item>

        <el-form-item class="mb-18">
          <div class="flex gap-10 color-aaa fs-13">
            <el-checkbox v-model="agree">我已阅读并同意</el-checkbox>
            <div class="flex flex-wrap items-center gap-6">
              <a href="#" style="color: #9022fd">《用户协议》</a>
              <span class="color-333">和</span>
              <a href="#" style="color: #9022fd">《隐私政策》</a>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="w-full py-12 fs-16 round-999" size="large" :disabled="!disabled" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '../store'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
const loginForm = ref()
const form = ref({ phone: '', code: '' })
const agree = ref(false)

const regular = /^1[3-9]\d{9}$/
const disabled = computed(()=>{
  let phoneValid = regular.test(form.value.phone)
  let codeValid = form.value.code.length === 6
  return phoneValid && codeValid && agree.value
})

function sendCode() {
  let phoneValid = regular.test(form.value.phone)
  if (!phoneValid) {
    ElMessage.warning('请输入手机号后获取验证码')
    return
  }
  ElMessage.success('验证码已发送')
}

function onSubmit() {
  if (!agree.value) {
    ElMessage.warning('请先同意用户协议和隐私政策')
    return
  }
  loginForm.value.validate((valid: boolean) => {
    if (!valid) return
    authStore.login(form.value.phone)
    const redirect = (route.query.redirect as string) || authStore.getSavedRedirect() || '/'
    authStore.clearSavedRedirect()
    ElMessage.success('登录成功')
    router.push(redirect)
  })
}

function onClose() {
  router.back()
}
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
}

.login-card {
  width: min(400px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.close-btn {
  background: rgba(255, 255, 255, 0);
  color: #d1d9e6;
  &:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
  }
}

.el-form-item__label {
  color: #d1d9e6;
  font-size: 14px;
}

.phone-prefix {
  min-width: 72px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
</style>
