import { useLocation } from 'react-router-dom';
import './searchList.css'
import { Pagination, Spin, Image, message } from 'antd';
import { get } from "../../util/AjaxUtils.ts";
import { IListPage } from "../../interfaces/listpage/IListPage.ts";
import { useRef, MutableRefObject, useState, useEffect, useContext } from "react";
import { IProj } from "../../interfaces/proj/IProj.ts";
import NoData from "../../assets/no-data.png";
import CardProj from '../../components/card/CardProj.tsx';
import { IndexListContext } from "../../context/IndexListContext.ts";
export default function SearchList() {
    const indexListContext = useContext(IndexListContext);
    const [isLoading, setIsLoading] = useState(false);
    const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
    const domHeight = window.innerHeight - 280;
    const [projs, setProjs] = useState<IProj[]>([]);
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    // const [keywords, setKeywords] = useState('');
    const [messageApi, contextHolder] = message.useMessage();
    const {state} = useLocation()
    // console.log(state);
    
    const reqData = (currentPage: number) => {
        get<IListPage<IProj>>({
            messageApi: messageApi,
            url: '/api/proj/listpage/self',
            config: {
                params: {
                    page: currentPage,
                    rows: 20,
                    keywords: state.keywords,
                    projCategoryId: indexListContext.category,
                    status: indexListContext.status ? indexListContext.status : ''
                }
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess({ data }) {
                setPage(data.page);
                setTotal(data.total);
                setProjs(data.rows);
            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }

    const renderCategory = () => {
    }
    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'
                }}>
                    <Image src={NoData} preview={false} />
                    <span>暂无数据</span>
                </div>
            )
        }
        return projs.map((item) => {
            return <CardProj item={item} key={new Date().getTime() + ':' + item.projId} />;
        });
    }
    useEffect(() => {
        if (indexListContext.categorys) {
            reqData(page);
            renderCategory();
        }
    }, [indexListContext.status, indexListContext.categoryChangeCount, indexListContext.category, state.keywords, page])
    return (
        <div className='searchIndex'>
            {contextHolder}
            <Spin tip="加载中..." spinning={isLoading}>
                <div className="searchlist" ref={listRef} style={{ height: `${domHeight}px` }}>
                    {renderList()}
                </div>
                <div className="SearchListPage">
                    <Pagination defaultCurrent={page} total={total} onChange={(page) => {
                        setPage(page);
                    }} />
                </div>
            </Spin>
        </div>
    )
}