import './list-proj-agent.css';
import CardProjAgent from "../card/CardProjAgent.tsx";
import {useRef, MutableRefObject, useEffect, useState, useContext} from "react";
// import {Image, Pagination, Spin, Tag} from 'antd';
import {Image, Pagination, Spin} from 'antd';
import {get} from "../../util/AjaxUtils.ts";
import useMessage from "antd/es/message/useMessage";
import {IListPage} from "../../interfaces/listpage/IListPage.ts";
import {IndexListContext} from "../../context/IndexListContext.ts";
import {IAgent} from "../../interfaces/agent/IAgent.ts";
import NoData from "../../assets/no-data.png";
// import { Empty } from 'antd';
// const {Search} = Input;

export default function ListProjAgent() {
    const indexListContext = useContext(IndexListContext);
    console.log(indexListContext.status);

    const [messageApi, messageApiHolder] = useMessage();
    const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
    const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);


    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [agents, setAgents] = useState<IAgent[]>([]);
    const [isLoading, setIsLoading] = useState(false);
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [keywords] = useState('');
    const domHeight = window.innerHeight - 280;

    useEffect(() => {
        get<IListPage<IAgent>>({
            messageApi,
            url: `/api/agent/order/listpage`,
            config: {
                params: {
                    page: page,
                    rows: 20,
                    keywords: keywords,
                    status: indexListContext.status ? indexListContext.status : ''
                }
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess({data}) {
                setPage(data.page);
                setTotal(data.total);
                setAgents(data.rows);
            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }, [indexListContext.status, keywords, page])

    // 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 <></>
    // }

    const renderList = () => {
        if(agents.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 agents.map(item => <CardProjAgent key={item.orderNumber}
                                                 projId={item.projId}
                                                 projName={item.projName}
                                                 projOrderNo={item.projOrderNo}
                                                 agentBasicsId={item.agentBasicsId}
                                                 basicsName={item.basicsName}
                                                 isAgreement={item.isAgreement}
                                                 isOver={item.isOver}
                                                 isResult={item.isResult}
                                                 isTake={item.isTake}
                                                 materialAmendApplyCount={item.materialAmendApplyCount}
                                                 orderId={item.orderId}
                                                 orderNote={item.orderNote}
                                                 orderNumber={item.orderNumber}
                                                 orderShoppingAmount={item.orderShoppingAmount}
                                                 orderType={item.orderType}
                                                 orderTypeAmount={item.orderTypeAmount}
                                                 orderTypeName={item.orderTypeName}
                                                 overTime={item.overTime}
                                                 gmtCreate={item.gmtCreate}
                                                 orderAgreementStatus={item.orderAgreementStatus}
            />
        )
    }

    return (
        <>
            <div className="list-proj-agent" ref={listProjRef}>
                {/* <div className="top">
                    {renderStatus()}
                    <Search placeholder="按项目名搜索" onSearch={(value) => {
                        setKeywords(value)
                    }} style={{width: 200}}/>
                </div> */}
                <div className="body">
                    <Spin tip="加载中..." spinning={isLoading}>
                        <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>{renderList()}</div>
                    </Spin>
                    <div className="page">
                        <Pagination defaultCurrent={page} total={total}/>
                    </div>
                </div>
            </div>
            {messageApiHolder}
        </>
    )
}