<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { login, getCaptcha } from '@/api/system'
import type { LoginInfo } from '@/api/system/model'
import type { Rule } from 'ant-design-vue/es/form';
import { setToken } from '@/utils/auth';

const router = useRouter()

// 表单数据
const formData = reactive<LoginInfo>({
  username: '',
  password: '',
  uuid: '',
  code: ''
})

// 验证码图片
const captchaImg = ref('')
const loading = ref(false)
const captchaLoading = ref(false)

// 表单验证规则
const rules: Record<string, Rule[]> = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'change' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'change' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'change' }
  ]
}

// 获取验证码
const refreshCaptcha = async () => {
  try {
    captchaLoading.value = true
    await getCaptcha().then((res: any) => {
      if (res.captchaOnOff) {
        captchaImg.value = "data:image/gif;base64," + res.img
      }
      formData.uuid = res.uuid
      formData.code = '' // 清空验证码输入
    })
  } catch (error) {
    message.error('获取验证码失败')
    console.error('获取验证码失败:', error)
  } finally {
    captchaLoading.value = false
  }
}

// 登录处理
const handleLogin = async () => {
  try {
    loading.value = true
    await login(formData).then(async (res: any) => {
      if (res.code === 200) {
        message.success('登录成功')
        setToken(res.token)
        // 可以在这里保存用户信息到store
        // 跳转到主页
        router.push('/')
      } else {
        message.error(res.msg || '登录失败')
        // 登录失败后重新获取验证码
        await refreshCaptcha()
      }
    }) 
  } catch (error: any) {
    message.error(error.message || error.msg || '登录失败，请检查网络连接')
    console.error('登录失败:', error)
    // 登录失败后重新获取验证码
    await refreshCaptcha()
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取验证码
refreshCaptcha()
</script>

<template>
  <div class="login-container">
    <!-- 背景图 -->
    <div class="login-background"></div>
    
    <!-- 登录框 -->
    <div class="login-box">
      <div class="login-header">
        <h2 class="login-title">
          <i-lucide-cpu class="title-icon" />
          工业控制系统 HMI
        </h2>
        <p class="login-subtitle">请登录您的账户</p>
      </div>
      
      <a-form
        :model="formData"
        :rules="rules"
        @finish="handleLogin"
        class="login-form"
        layout="vertical"
      >
        <!-- 用户名 -->
        <a-form-item name="username" class="form-item">
          <a-input
            v-model:value="formData.username"
            placeholder="请输入用户名"
            size="large"
            class="login-input"
          >
            <template #prefix>
              <i-lucide-user class="input-icon" />
            </template>
          </a-input>
        </a-form-item>
        
        <!-- 密码 -->
        <a-form-item name="password" class="form-item">
          <a-input-password
            v-model:value="formData.password"
            placeholder="请输入密码"
            size="large"
            class="login-input"
          >
            <template #prefix>
              <i-lucide-lock class="input-icon" />
            </template>
          </a-input-password>
        </a-form-item>
        
        <!-- 验证码 -->
        <a-form-item name="code" class="form-item">
          <div class="captcha-container">
            <a-input
              v-model:value="formData.code"
              placeholder="请输入验证码"
              size="large"
              class="login-input captcha-input"
            >
              <template #prefix>
                <i-lucide-shield-check class="input-icon" />
              </template>
            </a-input>
            <div class="captcha-image-container" @click="refreshCaptcha">
              <img
                v-if="captchaImg"
                :src="captchaImg"
                alt="验证码"
                class="captcha-image"
              />
              <div v-else class="captcha-loading">
                <i-lucide-loader class="loading-icon" />
              </div>
              <div class="captcha-refresh-hint">
                <i-lucide-refresh-cw class="refresh-icon" />
                点击刷新
              </div>
            </div>
          </div>
        </a-form-item>
        
        <!-- 登录按钮 -->
        <a-form-item class="form-item">
          <a-button
            type="primary"
            html-type="submit"
            size="large"
            :loading="loading"
            class="login-button"
            block
          >
            {{ loading ? '登录中...' : '登录' }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 变量定义
$primary-color: #4a90e2;
$primary-light: #5ba0f2;
$primary-dark: #3a7bd5;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #ff4d4f;
$white: #ffffff;
$text-light: #b8d4f0;
$text-dark: #333333;
$bg-overlay: rgba(255, 255, 255, 0.1);
$bg-glass: rgba(255, 255, 255, 0.15);
$border-light: rgba(255, 255, 255, 0.3);
$shadow-light: rgba(0, 0, 0, 0.1);
$shadow-medium: rgba(0, 0, 0, 0.2);
$border-radius: 8px;
$border-radius-lg: 12px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$transition: all 0.3s ease;

.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.login-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(2px);
  z-index: 1;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      135deg,
      rgba(74, 144, 226, 0.3) 0%,
      rgba(58, 123, 213, 0.4) 50%,
      rgba(91, 160, 242, 0.3) 100%
    );
  }
}

.login-box {
  position: relative;
  z-index: 2;
  width: 420px;
  padding: $spacing-xl;
  background: $bg-glass;
  backdrop-filter: blur(20px);
  border: 1px solid $border-light;
  border-radius: $border-radius-lg;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-header {
  text-align: center;
  margin-bottom: $spacing-xl;
  
  .login-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: $spacing-sm;
    font-size: 24px;
    font-weight: 600;
    color: $white;
    margin: 0 0 $spacing-sm 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    
    .title-icon {
      font-size: 28px;
      color: $primary-light;
    }
  }
  
  .login-subtitle {
    font-size: 14px;
    color: $text-light;
    margin: 0;
    opacity: 0.9;
  }
}

.login-form {
  .form-item {
    margin-bottom: $spacing-lg;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .login-input {
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: $border-radius;
    transition: $transition;
    
    &:hover {
      border-color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.15);
    }
    
    &:focus-within {
      border-color: $primary-light;
      background: rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }
    
    :deep(.ant-input) {
      background: transparent;
      border: none;
      color: $white;
      font-size: 14px;
      
      &::placeholder {
        color: rgba(255, 255, 255, 0.6);
      }
    }
    
    :deep(.ant-input-password-icon) {
      color: rgba(255, 255, 255, 0.6);
      
      &:hover {
        color: $white;
      }
    }
  }
  
  .input-icon {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
  }
}

.captcha-container {
  display: flex;
  gap: $spacing-md;
  align-items: stretch;
  
  .captcha-input {
    flex: 1;
  }
  
  .captcha-image-container {
    position: relative;
    width: 120px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: $border-radius;
    overflow: hidden;
    cursor: pointer;
    transition: $transition;
    background: rgba(255, 255, 255, 0.1);
    
    &:hover {
      border-color: $primary-light;
      
      .captcha-refresh-hint {
        opacity: 1;
      }
    }
    
    .captcha-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    .captcha-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      
      .loading-icon {
        color: $white;
        font-size: 20px;
        animation: spin 1s linear infinite;
      }
    }
    
    .captcha-refresh-hint {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: $white;
      font-size: 12px;
      opacity: 0;
      transition: $transition;
      
      .refresh-icon {
        font-size: 16px;
        margin-bottom: 2px;
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.login-button {
  height: 48px;
  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
  border: none;
  border-radius: $border-radius;
  font-size: 16px;
  font-weight: 600;
  transition: $transition;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
  
  &:hover {
    background: linear-gradient(135deg, $primary-light 0%, $primary-color 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
  }
  
  &:active {
    transform: translateY(0);
  }
  
  .button-icon {
    margin-right: $spacing-sm;
    font-size: 18px;
  }
  
  :deep(.ant-btn-loading-icon) {
    margin-right: $spacing-sm;
  }
}

// 表单验证错误样式
:deep(.ant-form-item-has-error) {
  .login-input {
    border-color: $error-color;
    
    &:focus-within {
      box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
    }
  }
  
  .captcha-image-container {
    border-color: $error-color;
  }
}

:deep(.ant-form-item-explain-error) {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 77, 79, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 4px;
  font-size: 12px;
}

// 响应式设计
@media (max-width: 768px) {
  .login-box {
    width: 90%;
    max-width: 380px;
    padding: $spacing-lg;
  }
  
  .captcha-container {
    flex-direction: column;
    
    .captcha-image-container {
      width: 100%;
      height: 60px;
    }
  }
}

@media (max-width: 480px) {
  .login-box {
    padding: $spacing-md;
  }
  
  .login-header .login-title {
    font-size: 20px;
    
    .title-icon {
      font-size: 24px;
    }
  }
}
</style>