import React, { useState, useEffect } from 'react';
import apiClient from '../utils/request';

const UserManagement: React.FC = () => {
  const [users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // 从API获取用户数据
  const fetchUsers = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await apiClient.get('/api/users');
      if (response.data.success) {
        setUsers(response.data.data || []);
      } else {
        throw new Error('API返回失败: ' + (response.data.message || '未知错误'));
      }
    } catch (error) {
      console.error('获取用户列表失败:', error);
      setError(error instanceof Error ? error.message : '未知错误');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <div style={{ padding: 24 }}>
      <h1>用户管理</h1>
      <p>这是一个测试页面，用于检查API调用是否正常。</p>
      <button onClick={fetchUsers} disabled={loading}>
        {loading ? '加载中...' : '刷新用户列表'}
      </button>
      {error && (
        <div style={{ marginTop: 10, color: 'red' }}>
          错误: {error}
        </div>
      )}
      <div style={{ marginTop: 20 }}>
        <h2>API返回的数据:</h2>
        <pre>{JSON.stringify(users, null, 2)}</pre>
      </div>
      <div style={{ marginTop: 20 }}>
        <h2>加载状态:</h2>
        <p>{loading ? '加载中...' : '加载完成'}</p>
      </div>
    </div>
  );
};

export default UserManagement;