<template>
  <div class="w-full h-full flex items-center justify-center relative">
    <!-- 背景图 -->
    <div class="absolute inset-0 bg-cover bg-center"></div>

    <!-- 白色内容区域 - 增加内边距让背景更多露出 -->
    <div class="bg-white rounded-lg w-[420px] shadow-lg z-10 relative p-8">
      <h2 class="text-2xl font-bold text-center text-gray-800 mb-8">
        登录开启创作之旅
      </h2>

      <!-- 账号密码登录表单 -->
      <div class="space-y-6">
        <!-- 用户名输入框 -->
        <el-input
          v-model="formData.username"
          placeholder="请输入用户名"
          :prefix-icon="User"
          class="rounded-md"
          size="large"
        ></el-input>

        <!-- 密码输入框 -->
        <el-input
          v-model="formData.password"
          type="password"
          placeholder="请输入密码"
          :prefix-icon="Lock"
          show-password
          class="rounded-md"
          size="large"
        ></el-input>

        <!-- 验证码输入框 -->
        <div class="flex gap-3">
          <el-input
            v-model="formData.verificationCode"
            placeholder="请输入验证码"
            :prefix-icon="Key"
            class="flex-1 rounded-md"
            size="large"
          ></el-input>
          <el-button type="primary" class="w-28 !h-10 text-sm rounded-md"
            >获取验证码</el-button
          >
        </div>

        <!-- 登录按钮 -->
        <el-button
          type="primary"
          class="w-full !h-11 text-base rounded-lg mt-8"
          @click="handleLogin"
          >登录</el-button
        >
      </div>

      <!-- 底部链接区域 -->
      <div class="mt-8 text-center">
        <!-- 注册链接 -->
        <!-- <div class="text-center text-sm">
          <span class="text-gray-600">还没有账号？</span>
          <a href="javascript:;" class="text-blue-500 ml-1" @click="handleRegister">立即注册</a>
        </div> -->

        <!-- 用户协议 -->
        <div class="text-center text-xs text-gray-400 mt-4">
          <span>登录即表示已阅读并同意</span>
          <a href="javascript:;" class="text-blue-500">《用户协议》</a>
          <span>和</span>
          <a href="javascript:;" class="text-blue-500">《隐私协议》</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { User, Lock, Key } from '@element-plus/icons-vue';

// 表单数据
const formData = reactive({
  username: '',
  password: '',
  verificationCode: '',
});

// 登录方法
const handleLogin = async () => {
  try {
    // 表单校验
    if (!formData.username) {
      ElMessage.warning('请输入用户名');
      return;
    }

    if (!formData.password) {
      ElMessage.warning('请输入密码');
      return;
    }

    if (!formData.verificationCode) {
      ElMessage.warning('请输入验证码');
      return;
    }

    // 模拟登录请求
    // TODO: 实现实际登录逻辑
    ElMessage.success('登录成功');
  } catch (error) {
    ElMessage.error('登录失败，请稍后再试');
    console.error(error);
  }
};

// 注册方法
const handleRegister = () => {
  // TODO: 实现注册逻辑
  ElMessage.info('正在开发中...');
};
</script>
<style lang="scss" >
.login-dialog{
  background: url('../../assets/imgs/login.png') no-repeat;
  background-size: cover;
  .el-dialog__close{
    color: #333;
  }
}
</style>