<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-content">
        <div class="login-header">
          <h2>欢迎登录</h2>
          <p class="sub-title">请输入您的账号信息</p>
        </div>
        
        <a-form 
          ref="loginForm"
          :model="formData"
          :rules="rules"
          layout="vertical"
        >
          <a-form-item label="账号" name="username">
            <a-input
              v-model:value="formData.username"
              placeholder="请输入账号"
              size="large"
            >
              <template #prefix>
                <UserOutlined style="color: rgba(0,0,0,.25)" />
              </template>
            </a-input>
          </a-form-item>
          
          <a-form-item label="密码" name="password">
            <a-input-password
              v-model:value="formData.password"
              placeholder="请输入密码"
              size="large"
            >
              <template #prefix>
                <LockOutlined style="color: rgba(0,0,0,.25)" />
              </template>
            </a-input-password>
          </a-form-item>
          
          <div class="form-options">
            <a-checkbox v-model:checked="rememberMe">记住密码</a-checkbox>
            <a href="#" class="forgot-password">忘记密码？</a>
          </div>
          
          <a-form-item>
            <a-button 
              type="primary" 
              :loading="loading"
              size="large"
              block
              @click="login"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>

        <div class="login-footer">
          <p class="register-tip">
            还没有账号？<a href="/register">立即注册</a>
          </p>
          <div class="other-login">
            <div class="divider">
              <span>其他登录方式</span>
            </div>
            <div class="social-login">
              <a-tooltip title="微信登录">
                <WechatOutlined class="social-icon" />
              </a-tooltip>
              <a-tooltip title="QQ登录">
                <QqOutlined class="social-icon" />
              </a-tooltip>
              <a-tooltip title="钉钉登录">
                <DingdingOutlined class="social-icon" />
              </a-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { 
  UserOutlined, 
  LockOutlined,
  WechatOutlined,
  QqOutlined,
  DingdingOutlined
} from '@ant-design/icons-vue';

export default defineComponent({
  name: 'login',
  components: {
    UserOutlined,
    LockOutlined,
    WechatOutlined,
    QqOutlined,
    DingdingOutlined
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const loginForm = ref();
    const loading = ref(false);
    const rememberMe = ref(false);
    
    const formData = reactive({
      username: '',
      password: ''
    });
    
    const rules = {
      username: [
        { required: true, message: '请输入账号' },
        { min: 4, message: '账号长度不能小于4位' }
      ],
      password: [
        { required: true, message: '请输入密码' },
        { min: 6, message: '密码长度不能小于6位' }
      ]
    };

    const login = async () => {
      try {
        loading.value = true;
        await loginForm.value.validate();
        
        let permission = [
          { type: 'menu', path: '/report', key: '' },
          { type: 'btn', path: '/report', key: 'add' },
          { type: 'btn', path: '/report', key: 'edit' },
          { type: 'btn', path: '/report', key: 'delete' },
          { type: 'btn', path: '/report', key: 'export' },
          { type: 'menu', path: '/setting/user/add' },
          { type: 'menu', path: '/setting/user/edit' },
          { type: 'menu', path: '/setting/user/delete' },
          { type: 'menu', path: '/setting/role' },
          { type: 'menu', path: '/login' },
        ];
        
        const auth = {};
        permission.filter(item => item.type === 'btn').forEach(item => {
          if(auth[item.path]) {
            auth[item.path][item.key] = true;
          } else {
            auth[item.path] = {
              [item.key]: true
            };
          }
        });
        
        store.commit('app/setUser', {
          user: { id: 1186, name: '张三' },
          permission,
          auth
        });
        
        router.push('/');
      } catch (error) {
        console.error('登录失败:', error);
      } finally {
        loading.value = false;
      }
    };

    return {
      loginForm,
      formData,
      rules,
      loading,
      rememberMe,
      login
    };
  }
});
</script>

<style lang="less" scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  .login-container {
    width: 100%;
    max-width: 420px;
    margin: 0 20px;
  }
  
  .login-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(8px);
    animation: slideUp 0.6s ease-out;
  }
  
  .login-header {
    text-align: center;
    margin-bottom: 32px;
    
    h2 {
      font-size: 28px;
      color: #1a1a1a;
      margin-bottom: 8px;
      font-weight: 600;
    }
    
    .sub-title {
      color: #666;
      font-size: 14px;
    }
  }
  
  .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    .forgot-password {
      color: #667eea;
      font-size: 14px;
      transition: color 0.3s;
      
      &:hover {
        color: #764ba2;
      }
    }
  }
  
  .login-footer {
    margin-top: 32px;
    text-align: center;
    
    .register-tip {
      color: #666;
      font-size: 14px;
      margin-bottom: 24px;
      
      a {
        color: #667eea;
        font-weight: 500;
        margin-left: 4px;
        
        &:hover {
          color: #764ba2;
        }
      }
    }
    
    .divider {
      position: relative;
      text-align: center;
      margin: 16px 0;
      
      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 30%;
        height: 1px;
        background: #e8e8e8;
      }
      
      &::before {
        left: 0;
      }
      
      &::after {
        right: 0;
      }
      
      span {
        background: #fff;
        padding: 0 12px;
        color: #999;
        font-size: 12px;
      }
    }
    
    .social-login {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-top: 16px;
      
      .social-icon {
        font-size: 24px;
        color: #666;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
          color: #667eea;
          transform: scale(1.1);
        }
      }
    }
  }
}

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

// 响应式适配
@media (max-width: 480px) {
  .login-content {
    padding: 24px;
  }
  
  .login-header h2 {
    font-size: 24px;
  }
}
</style>
