src/pages/Relation/index.tsx

import { useEffect, useState } from 'react';
import { Card, List, Button, message, Carousel, Modal } from 'antd';
import { getUserInfo } from '@/services/session';
import { getPlanetList, updateUserPlanet, getUserPlanet, getPlanetInfo, PlanetEntity, getRandomUserPlanets } from '@/services/planets/api';
import { useRequest } from '@umijs/max';
import { getUser } from '@/services/system/user';

const RelationPage = () => {
    const [planetList, setPlanetList] = useState<PlanetEntity[]>([]);
    const [relatedUsers, setRelatedUsers] = useState<any[]>([]);
    const [selectedUser, setSelectedUser] = useState<any>(null);
    const [userModalVisible, setUserModalVisible] = useState(false);
    //  获取用户信息
    const { data: userInfo, loading: userLoading } = useRequest(async () => {
        const userRes = await getUserInfo();
        // 假设 userId 为字符串类型，需要将其转换为数字类型，同时处理可能的 undefined 情况
        const userId = userRes.user.userId ? parseInt(userRes.user.userId, 10) : 1;
        const UserplanetRes = await getUserPlanet({ userId });
        console.log(UserplanetRes);
        const planetId = UserplanetRes.planetId || 1;
        const planetRes = await getPlanetInfo({ planetId });

        return {
            data: {
                ...userRes.user,
                planet: planetRes
            }
        };
    });




    console.log(userInfo);
    const [listLoading, setListLoading] = useState(false);
    // 获取所有GIF列表
    const fetchPlanetList = async () => {
        try {
            setListLoading(true);
            const res = await getPlanetList({ pageNum: 1, pageSize: 100 });
            console.log(res);
            setPlanetList(res);
        } catch (error) {
            message.error('获取GIF列表失败');
        } finally {
            setListLoading(false);
        }
    };

    // 获取相关用户信息
    const fetchRelatedUsers = async () => {
        try {
            // 获取随机用户星球列表
            const randomPlanetsNo = await getRandomUserPlanets();
            const userId = userInfo?.userId ? parseInt(userInfo.userId, 10) : 1;
            const randomPlanets = randomPlanetsNo.filter((item) => item.userId !== userId);
            // 获取完整用户信息并关联星球数据
            const usersWithPlanets = await Promise.all(
                randomPlanets.map(async (item) => {

                    // 确保 item.userId 为 number 类型，若为 undefined 则使用默认值 1
                    const userIdToUse = typeof item.userId === 'number' ? item.userId : 1;
                    const userRes = await getUser(userIdToUse);
                    const planetRes = await getPlanetInfo({ planetId: item.planetId });
                    return {
                        user: userRes.data,
                        planet: planetRes
                    };
                })
            );

            setRelatedUsers(usersWithPlanets);
            console.log(usersWithPlanets);
        } catch (error) {
            message.error('获取相关用户失败');
            console.error(error);
        }
    };

    useEffect(() => {
        fetchPlanetList();
        fetchRelatedUsers();
    }, []);
    // 显示用户详情
    const showUserDetails = (user: any) => {
        setSelectedUser(user);
        setUserModalVisible(true);
    };
    console.log(planetList);
    // 更新用户形象
    const handleUpdateAvatar = async (id: number | undefined) => {
        if (!id) {
            message.error('无效的星球ID');
            return;
        }
        try {
            console.log(id);
            // 处理 userInfo.userId 可能为 undefined 的情况，若为 undefined 则使用默认值 '1'
            const userIdStr = userInfo?.userId || '1';
            console.log(userIdStr);
            await updateUserPlanet({ planetId: id, userId: parseInt(userIdStr, 10) });
            message.success('更新形象成功');
            window.location.reload();
        } catch (error) {
            message.error('更新形象失败');
        }
    };
    if (userLoading) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <Card title="当前形象" style={{ background: 'transparent', borderColor: '#3a3a5c' }}>
                {userInfo?.planet && (
                    <div style={{ textAlign: 'center' }}>
                        <img
                            src={`/images/planets/${userInfo.planet.filename}.gif`}
                            alt="用户形象"
                            style={{
                                width: 200,
                                height: 200,
                                borderRadius: '50%',
                                border: '2px solid #4a4a7a',
                                boxShadow: '0 0 15px #6a5acd'
                            }}
                        />
                        <div style={{
                            marginTop: 16,
                            color: '#a8b2d1',
                            fontSize: 16
                        }}>
                            当前形象: {userInfo.planet.name}
                        </div>
                    </div>
                )}
            </Card>

            <Card title="选择新形象" style={{
                marginTop: 24,
                background: 'transparent',
                borderColor: '#3a3a5c'
            }}>
                <Carousel
                    dots={false}
                    arrows={true}
                    style={{ width: '100%', maxWidth: 800, margin: '0 auto' }}
                >
                    {planetList.map((item) => (
                        <div key={item.planetId} style={{ textAlign: 'center', padding: '0 40px' }}>
                            <div style={{ marginBottom: 16 }}>
                                <img
                                    src={`/images/planets/${item.filename}.gif`}
                                    alt={item.name}
                                    style={{
                                        width: 200,
                                        height: 200,
                                        borderRadius: '50%',
                                        border: '2px solid #4a4a7a',
                                        boxShadow: '0 0 15px #6a5acd',
                                        marginTop: 16,
                                        margin: '0 auto'
                                    }}
                                />
                            </div>
                            <div style={{
                                color: '#a8b2d1',
                                marginBottom: 16
                            }}>
                                <div style={{ fontSize: 18, fontWeight: 'bold' }}>{item.name}</div>
                                <div style={{ margin: '8px 0' }}>{item.description}</div>
                                <div>创建时间: {item.createTime}</div>
                            </div>
                            <Button
                                type="primary"
                                onClick={() => handleUpdateAvatar(item.planetId)}
                                style={{
                                    background: 'linear-gradient(45deg, #6a5acd, #9370db)',
                                    border: 'none'
                                }}
                            >
                                选择
                            </Button>
                        </div>
                    ))}
                </Carousel>
            </Card>

            <Card title="与你相关的人" style={{
                marginTop: 24,
                background: 'transparent',
                borderColor: '#3a3a5c'
            }}>
                <Carousel
                    dots={false}
                    arrows={true}
                    style={{ width: '100%', maxWidth: 800, margin: '0 auto' }}
                >
                    {relatedUsers.map((item) => (
                        <div key={item.userId} style={{ textAlign: 'center', padding: '0 40px' }}>
                            <div style={{ marginBottom: 16 }}>
                                <img
                                    src={`/images/planets/${item.planet.filename}.gif`}
                                    alt={item.planet.name}
                                    style={{
                                        width: 200,
                                        height: 200,
                                        borderRadius: '50%',
                                        border: '2px solid #4a4a7a',
                                        boxShadow: '0 0 15px #6a5acd',
                                        margin: '0 auto'
                                    }}
                                />
                            </div>
                            <div style={{
                                color: '#a8b2d1',
                                marginBottom: 16
                            }}>
                                <div style={{ fontSize: 18, fontWeight: 'bold' }}>昵称：{item.user.nickName}</div>
                                <div style={{ margin: '8px 0' }}>邮箱：{item.user.email}</div>
                                <div>星球形象：{item.planet.name}</div>
                            </div>
                            <Button
                                type="primary"
                                onClick={() => showUserDetails(item.user)}
                                style={{
                                    background: 'linear-gradient(45deg, #6a5acd, #9370db)',
                                    border: 'none'
                                }}
                            >
                                查看详情
                            </Button>
                        </div>
                    ))}
                </Carousel>
            </Card>

            <Modal
                title="用户详情"
                visible={userModalVisible}
                onCancel={() => setUserModalVisible(false)}
                footer={null}
                style={{ color: '#a8b2d1' }}
            >
                {selectedUser && (
                    <div>
                        <p>昵称: {selectedUser.nickName}</p>
                        <p>邮箱: {selectedUser.email}</p>
                        <p>电话: {selectedUser.phonenumber}</p>

                    </div>
                )}
            </Modal>
        </div>
    );
};

export default RelationPage;