system-copyright-react/src/components/list/ListProj.tsx

import './list-proj.css'
import CardProj from "../card/CardProj.tsx";
import { useRef, MutableRefObject, useState, useEffect, useContext } from "react";
import { Pagination, message, Spin, Empty } from 'antd';
import { get } from "../../util/AjaxUtils.ts";
import { IndexListContext } from "../../context/IndexListContext.ts";
import { IListPage } from "../../interfaces/listpage/IListPage.ts";
import { IProj } from "../../interfaces/proj/IProj.ts";
// import NoData from "../../assets/no-data.png";
import { useLocation } from 'react-router-dom';
import syminga from '../../static/homeimg/homeimga.png'
import symingb from '../../static/homeimg/homeimgb.png'
import symingc from '../../static/homeimg/homeimgc.png'
import symingd from '../../static/homeimg/homeimgd.png'
import { getMenuActive } from '../../util/cache.ts';

// import gpsImg from '../../static/right/gps.png'
// import { Link } from "react-router-dom";
// import { Breadcrumb } from 'antd';
// import backImg from '../../static/right/back.png'
// const { Search } = Input;

export default function ListProj() {
    const indexListContext = useContext(IndexListContext);
    const { state } = useLocation()
    // console.log('传递过来的参数',state.keyword);
    // if(state){
    //     console.log('传递过来的参数',state.keyword);
    //     // setKeywords(state.keyword)
    // }
    const keywords = state ? state.keyword : ''
    // console.log(keywords);
    const images  = [syminga,symingb,symingc,symingd]
    const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
    const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);

    const [messageApi, contextHolder] = message.useMessage();
    const [page, setPage] = useState(1);
    const [showPage, setShowPage] = useState(true);

    const [total, setTotal] = useState(0);
    const [projs, setProjs] = useState<IProj[]>([]);
    const [isLoading, setIsLoading] = useState(false);
    // const [keywords, setKeywords] = useState('');
    const domHeight = window.innerHeight - 250;
    // const navigate = useNavigate()
    const reqData = (currentPage: number) => {
        setProjs([])

        get<IListPage<IProj>>({
            messageApi: messageApi,
            url: '/api/proj/listpage/self',
            config: {
                params: {
                    page: currentPage,
                    rows: 10,
                    keywords: keywords,
                    projCategoryId: indexListContext.category,
                    status: indexListContext.status ? indexListContext.status : getMenuActive()
                }
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess({ data }) {
                console.log('看看结果', data);
                setPage(data.page);
                setTotal(data.total);
                // setProjs(data.rows);
                const updatedArr = (data.rows).map((item, index) => ({
                    ...item,
                    img: images[index % images.length] // 利用取余来循环填充图片
                }));
                console.log('循环数组',updatedArr);
                setProjs(updatedArr);
    
            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }

    const renderList = () => {
        if (projs.length == 0) {
            return (
                <div className="no-data" style={{
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'var(--color-light)',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                   <Empty description='暂无内容' />
                </div>
            )
        }
        return projs.map((item) => {
            return (
                <div className='projListBox' key={new Date().getTime() + ':' + item.projId}>
                    <CardProj item={item} />
                </div>
            )
        });
    }

    const renderCategory = () => {
    }

    useEffect(() => {
        setShowPage(false)
        setPage(1)
        if (indexListContext.categorys) {
            reqData(1);
            renderCategory();
        }
        console.log(page);
        
        setTimeout(() => {
            setShowPage(true)
        }, 0);
    }, [indexListContext.status,keywords])

    useEffect(() => {
        if (indexListContext.categorys) {
            
            reqData(page);
            renderCategory();
        }
    }, [indexListContext.categoryChangeCount, indexListContext.category])

    // const renderStatus = () => {
    //     if (indexListContext.status == 'ALL') {
    //         return <Tag color="blue">项目：全部项目</Tag>
    //     } else if (indexListContext.status == 'PROCESSING') {
    //         return <Tag color="blue">项目：进行中的</Tag>
    //     } else if (indexListContext.status == 'COMPLETE') {
    //         return <Tag color="blue">项目：已完成的</Tag> 
    //     }
    //     return <></>
    // }

    return (
        <>
            {contextHolder}
            <div className="list-proj" ref={listProjRef}>

                <div className="body">
                    <Spin tip="加载中..." spinning={isLoading}>
                        <div className="list" ref={listRef} style={{ height: `${domHeight}px` }}>
                            {renderList()}
                        </div>
                        <div className="page" >
                            {/* defaultCurrent: 默认当前页数  total:数据总数  */}
                            {showPage?<Pagination defaultCurrent={page} total={total} defaultPageSize={10} onChange={(page) => {
                                reqData(page);
                            }} /> : null} 
                        </div>
                    </Spin>
                </div>
            </div>
        </>
    )
}