import {useEffect, useState} from "react";
import {Avatar} from '@nutui/nutui-react-taro'
import {User} from "@/api/system/user/model";
import navTo from "@/utils/common";
import Taro from '@tarojs/taro'
import {getUserInfo} from "@/api/layout";

function UserCard() {
    const [IsLogin, setIsLogin] = useState<boolean>(false)
    const [userInfo, setUserInfo] = useState<User>()


    useEffect(() => {
        reload().then()
    }, []);

    const reload = async () => {
        if (Taro.getStorageSync('UserId')) {
            setUserInfo(await getUserInfo())
            setIsLogin(true)
        }
    };

    return (
        <>
            <div className={'p-4 bg-[#BE1717]'}>
                <div
                    className={'user-card w-full  flex flex-col justify-center rounded-xl'}
                    style={{
                        // background: 'linear-gradient(to bottom, #ff0000, #f3f2f7)', // 这种情况建议使用类名来控制样式（引入外联样式）
                        // width: '720rpx',
                        // margin: '10px auto 0px auto',
                        height: '144px',
                        // borderRadius: '22px 22px 0 0',
                    }}
                >
                    <div className={'user-card-header flex w-full justify-between items-center'}>
                        <div className={'flex items-center mx-1'}>
                            {
                                IsLogin && (
                                    <Avatar size="large" src={userInfo?.avatar} shape="round"/>
                                )
                            }
                            {
                                !IsLogin && (
                                    <Avatar size="large"
                                            src={userInfo?.avatar} shape="round"/>
                                )
                            }
                            <div className={'user-info flex flex-col px-1'}>
                                {!IsLogin ? (
                                        <div className={'p-1 text-sm text-white'}></div>
                                    ) :
                                    <div className={'p-1 text-sm text-white'}>{userInfo?.mobile}</div>
                                }
                            </div>
                        </div>
                        <div
                            className={'mx-4 text-sm px-3 py-1 text-white border-gray-200 border-solid border-2 rounded-3xl'}
                            onClick={() => navTo('/user/profile/profile', true)}>
                            {'个人资料'}
                        </div>
                    </div>
                </div>
            </div>
        </>

    )
}

export default UserCard;
