import './agent-result.css'
import {Link, useParams} from "react-router-dom";
import {
    Breadcrumb, Button,
    Spin,
    Table,
    TableProps,
} from "antd";
import {useEffect, useState} from "react";
import {get, put} from "../../util/AjaxUtils.ts";
import {IListPage} from "../../interfaces/listpage/IListPage.ts";
import useMessage from "antd/es/message/useMessage";
import useModal from "antd/es/modal/useModal";

type TableDataType = {
    creator: string;
    gmtCreate: string;
    isSure: number;
    isUpload: number;
    orderId: string;
    orderNumber: string;
    orderResultExplain: string;
    orderResultFile: string;
    orderResultId: string;
    sureDate: string;
    sureExplain: string;
}

export default function AgentResult() {
    const pathParams = useParams();
    const [messageApi, contextHolder] = useMessage();
    const [modal, modalContext] = useModal();
    const [isLoading, setIsLoading] = useState(false);
    const [isConfirmLoading, setIsConfirmLoading] = useState(false);
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [dataArray, setDataArray] = useState<TableDataType[]>([]);

    const domHeight = window.innerHeight - 180;

    const columns: TableProps<TableDataType>['columns'] = [
        {
            title: '说明',
            dataIndex: 'orderResultExplain',
            key: 'orderResultExplain',
            align: 'center',
        },
        {
            title: '上传时间',
            dataIndex: 'gmtCreate',
            key: 'gmtCreate',
            align: 'center',
            width: 180
        },
        {
            title: '资料',
            dataIndex: 'orderResultFile',
            key: 'orderResultFile',
            align: 'center',
            width: 200,
            render: (value) => {
                return <a href={value} download>证书下载</a>
            }
        },
        {
            title: '确认时间',
            dataIndex: 'sureDate',
            key: 'sureDate',
            align: 'center',
            width: 180,
            render: (value) => {
                if (!value) {
                    return '-';
                }
                return value;
            }
        },
        {
            title: '操作',
            dataIndex: 'option',
            key: 'option',
            align: 'center',
            width: 120,
            render: (_value, record) => {
                if (record.isSure == 1) {
                    return <>-</>;
                }
                return <Button size="small" type="primary" style={{backgroundColor: 'var(--color-primary)'}}
                               onClick={() => {
                                   modal.confirm({
                                       title: '提示',
                                       content: '确定确认吗？确认后订单将会结束',
                                       okText: '确认',
                                       cancelText: '取消',
                                       okButtonProps: {
                                           style: {
                                               backgroundColor: 'var(--color-primary)'
                                           }
                                       },
                                       onOk: () => {
                                           put<any>({
                                               messageApi,
                                               url: `/api/agent/order/result/update`,
                                               body: {
                                                   orderResultId: record.orderResultId,
                                               },
                                               onBefore() {
                                                   setIsConfirmLoading(true);
                                               },
                                               onSuccess() {
                                                   messageApi.success('确认成功');
                                                   getData();
                                               },
                                               onFinally() {
                                                   setIsConfirmLoading(false);
                                               }
                                           })
                                       }
                                   })
                               }}>确认结果</Button>
            }
        },
    ];

    const getData = () => {
        get<IListPage<TableDataType>>({
            messageApi,
            url: `/api/agent/order/result/listpage/order-id/${pathParams.orderId}`,
            onBefore() {
                setIsLoading(true)
            },
            onSuccess({data}) {
                setDataArray([
                    ...data.rows
                ])
                setPage(data.page);
                setTotal(data.total);
            },
            onFinally() {
                setIsLoading(false)
            }
        })
    }

    useEffect(() => {
        getData();
    }, [page])

    return (
        <>
            <Breadcrumb
                items={[
                    {title: <Link to="/?type=agent">首页</Link>},
                    {title: '结果列表'},
                ]}
            />
            <div className="result-container" style={{height: `${domHeight}px`}}>
                <Spin tip="加载中..." spinning={isLoading}>
                    <Table columns={columns} dataSource={dataArray} rowKey="orderResultId" scroll={{y: domHeight - 105}}
                           bordered pagination={{
                        current: page,
                        pageSize: 20,
                        total: total,
                        onChange: (page) => {
                            setPage(page);
                        }
                    }}/>
                </Spin>
            </div>
            <Spin tip="正在提交..." spinning={isConfirmLoading} fullscreen/>
            {contextHolder}
            {modalContext}
        </>
    )
}