import './refun.css';
import { useState, useEffect, } from 'react';
import {
    // Table,
    Pagination,
    Modal,
    //  Tag, 
    message, Spin,
    Empty,
    Dropdown
} from 'antd';
import { useSelector, useDispatch } from 'react-redux'
import { get, put, downloadUrl } from '../../util/AjaxUtils'
// import type { TableProps } from 'antd';
import { useLocation } from 'react-router-dom';
// import { useNavigate } from "react-router-dom";
// interface DataType {
//     projName: string;
//     projPayment: number;
//     refundReason: string;
//     gmtCreate: string;
//     refundVoucherFileKVs: any;
//     projRefundApplyId: string;
//     gmtReview: string;
//     applyStatus: string;
//     reviewReason: string;
//     projId: string;
//     authorName: string;
// }
import revokeImg from '../../static/revoke.png'
import logoImg from '../../static/projBox/logo.png'
import reason from '../../static/projBox/reson.png'
import green from '../../static/projBox/green.png'
import red from '../../static/projBox/red.png'
import blue from '../../static/projBox/blue.png'
import black from '../../static/projBox/black.png'
export default function Refun() {
    const { state } = useLocation()
    const height = window.innerHeight - 180;
    const [messageApi, contextHolder] = message.useMessage();
    const [isLoading, setIsLoading] = useState(false)
    const [page, setPage] = useState(1)     // 分页
    // const [total, setTotal] = useState(0)   // 数据总数
    // const [data, setData] = useState<any[]>([])
    const [revokeModal, setRevokeModal] = useState(false) //撤销弹窗
    const [projRefundApplyId, setprojRefundApplyId] = useState('') //要撤销的id
    const keyWords = state ? state.keywords : ''
    const applyStatus = state ? state.applyStatus : ''
    const authorId = state ? state.authorId : ''
    // setMenuActive(type)
    // {state.type}
    // const columns: TableProps<DataType>['columns'] =
    //     // 撤销状态
    //     applyStatus == 'CANCELED' ? [
    //         {
    //             title: '序号',
    //             dataIndex: 'index',
    //             align: 'center',
    //             width: 80,
    //             fixed: 'left',
    //             render: (_text, _record, index) => (page - 1) * 20 + index + 1, // 显示序号，从1开始
    //         },
    //         {
    //             title: '系统名称',
    //             dataIndex: 'projName',
    //             align: 'center',
    //             key: 'projName',
    //             width: 150,
    //             fixed: 'left',
    //             render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //         },
    //         {
    //             title: '产权所属者',
    //             dataIndex: 'authorName',
    //             align: 'center',
    //             key: 'authorName',
    //             width: 150,
    //             render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //         },
    //         {
    //             title: '金额',
    //             dataIndex: 'projPayment',
    //             key: 'projPayment',
    //             align: 'center',
    //             width: 100,
    //             render: (text) => <div style={{ color: 'red', fontWeight: 700 }}>{(text / 100).toFixed(2)}</div>

    //         },
    //         {
    //             title: '退款原因',
    //             dataIndex: 'refundReason',
    //             key: 'refundReason',
    //             align: 'center',
    //             width: 150,
    //             render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //         },
    //         {
    //             title: '申请退款时间',
    //             dataIndex: 'gmtCreate',
    //             key: 'gmtCreate',
    //             align: 'center',
    //             width: 200,
    //         },

    //         {
    //             title: '审核状态',
    //             dataIndex: 'applyStatus',
    //             key: 'applyStatus',
    //             align: 'center',
    //             width: 100,
    //             render: (text) => <Tag
    //                 color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
    //             >{text == "APPROVED" ? '已通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
    //         },

    //         {
    //             title: '退款凭证',
    //             dataIndex: 'refundVoucherFileKVs',
    //             key: 'refundVoucherFileKVs',
    //             width: 150,
    //             align: 'center',
    //             render: (_, record) => (
    //                 (record.refundVoucherFileKVs).map((item: any, index: number) => (

    //                     <div style={{ cursor: 'pointer', color: 'var(--color-blue)' }}
    //                         className='ellipsis-text' title={item.value}
    //                         key={index} onClick={() => {
    //                             window.open(downloadUrl(item.key, false), '_blank')
    //                         }}>{item.value}</div>


    //                 ))

    //             ),
    //         },

    //     ]
    //         : applyStatus == 'PENDING' ?
    //             // PENDING待审核状态
    //             [
    //                 {
    //                     title: '序号',
    //                     dataIndex: 'index',
    //                     align: 'center',
    //                     width: 80,
    //                     fixed: 'left',
    //                     render: (_text, _record, index) => (page - 1) * 20 + index + 1, // 显示序号，从1开始
    //                 },
    //                 {
    //                     title: '系统名称',
    //                     dataIndex: 'projName',
    //                     align: 'center',
    //                     key: 'projName',
    //                     fixed: 'left',
    //                     width: 150,
    //                     render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //                 },
    //                 {
    //                     title: '产权所属者',
    //                     dataIndex: 'authorName',
    //                     align: 'center',
    //                     key: 'authorName',
    //                     width: 150,
    //                     render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //                 },
    //                 {
    //                     title: '金额',
    //                     dataIndex: 'projPayment',
    //                     key: 'projPayment',
    //                     align: 'center',
    //                     width: 100,
    //                     render: (text) => <div style={{ color: 'red', fontWeight: 700 }}>{(text / 100).toFixed(2)}</div>,
    //                 },
    //                 {
    //                     title: '退款原因',
    //                     dataIndex: 'refundReason',
    //                     key: 'refundReason',
    //                     align: 'center',
    //                     width: 150,
    //                     render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //                 },
    //                 {
    //                     title: '申请退款时间',
    //                     dataIndex: 'gmtCreate',
    //                     key: 'gmtCreate',
    //                     align: 'center',
    //                     width: 200,
    //                 },
    //                 {
    //                     title: '审核状态',
    //                     dataIndex: 'applyStatus',
    //                     key: 'applyStatus',
    //                     align: 'center',
    //                     width: 100,
    //                     render: (text) => <Tag
    //                         color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
    //                     >{text == "APPROVED" ? '通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
    //                 },
    //                 {
    //                     title: '退款凭证',
    //                     dataIndex: 'refundVoucherFileKVs',
    //                     key: 'refundVoucherFileKVs',
    //                     width: 150,
    //                     align: 'center',
    //                     render: (_, record) => (
    //                         // {record.name}
    //                         // <div className='refunBtn' onClick={() => {
    //                         //     console.log(record.refundVoucherFileKVs);
    //                         // }}> 预览</div>
    //                         (record.refundVoucherFileKVs).map((item: any, index: number) => (

    //                             <div style={{ cursor: 'pointer', color: 'var(--color-blue)' }}
    //                                 className='ellipsis-text' title={item.value}
    //                                 key={index} onClick={() => {
    //                                     window.open(downloadUrl(item.key, false), '_blank')
    //                                 }}>{item.value}</div>


    //                         ))

    //                     ),

    //                 },
    //                 {
    //                     title: '操作',
    //                     fixed: 'right',
    //                     align: 'center',
    //                     width: 100,
    //                     render: (_, record) => (
    //                         // {record.name}
    //                         <div className='refunBtn' onClick={() => {
    //                             // console.log(record.projRefundApplyId);
    //                             setRevokeModal(true)
    //                             setprojRefundApplyId(record.projRefundApplyId)
    //                         }}> 撤销</div>

    //                     ),
    //                 },
    //             ]
    //             : applyStatus == 'APPROVED' || applyStatus == 'REJECTED' ?
    //                 // 已通过 和未通过 状态
    //                 [
    //                     {
    //                         title: '序号',
    //                         dataIndex: 'index',
    //                         align: 'center',
    //                         width: 80,
    //                         fixed: 'left',
    //                         render: (_text, _record, index) => (page - 1) * 20 + index + 1, // 显示序号，从1开始
    //                     },
    //                     {
    //                         title: '系统名称',
    //                         dataIndex: 'projName',
    //                         align: 'center',
    //                         key: 'projName',
    //                         fixed: 'left',
    //                         width: 150,
    //                         render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //                     },
    //                     {
    //                         title: '产权所属者',
    //                         dataIndex: 'authorName',
    //                         align: 'center',
    //                         key: 'authorName',
    //                         width: 150,
    //                         render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //                     },
    //                     {
    //                         title: '金额',
    //                         dataIndex: 'projPayment',
    //                         key: 'projPayment',
    //                         align: 'center',
    //                         width: 100,
    //                         render: (text) => <div style={{ color: 'red', fontWeight: 700 }}>{(text / 100).toFixed(2)}</div>,
    //                     },
    //                     {
    //                         title: '退款原因',
    //                         dataIndex: 'refundReason',
    //                         key: 'refundReason',
    //                         align: 'center',
    //                         width: 150,
    //                         render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //                     },
    //                     {
    //                         title: '申请退款时间',
    //                         dataIndex: 'gmtCreate',
    //                         key: 'gmtCreate',
    //                         align: 'center',
    //                         width: 200,
    //                     },
    //                     {
    //                         title: '审核时间',
    //                         dataIndex: 'gmtReview',
    //                         key: 'gmtReview',
    //                         align: 'center',
    //                         width: 200,
    //                         render: (text) => <div>
    //                             {text ? text : '—'}
    //                         </div>
    //                     },
    //                     {
    //                         title: '审核状态',
    //                         dataIndex: 'applyStatus',
    //                         key: 'applyStatus',
    //                         align: 'center',
    //                         width: 100,
    //                         render: (text) => <Tag
    //                             color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
    //                         >{text == "APPROVED" ? '通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
    //                     },
    //                     {
    //                         title: '审核意见',
    //                         dataIndex: 'reviewReason',
    //                         key: 'reviewReason',
    //                         align: 'center',
    //                         width: 150,
    //                         render: (text) => <div className='ellipsis-text' title={text}>{text ? text : '—'}</div>,
    //                     },
    //                     {
    //                         title: '退款凭证',
    //                         dataIndex: 'refundVoucherFileKVs',
    //                         key: 'refundVoucherFileKVs',
    //                         width: 150,
    //                         align: 'center',
    //                         render: (_, record) => (

    //                             (record.refundVoucherFileKVs).map((item: any, index: number) => (

    //                                 <div className='ellipsis-text' title={item.value} style={{ cursor: 'pointer', color: 'var(--color-blue)' }} key={index} onClick={() => {
    //                                     window.open(downloadUrl(item.key, false), '_blank')
    //                                 }}>{item.value}</div>

    //                             ))

    //                         ),
    //                     },
    //                 ] : [
    //                     {
    //                         title: '序号',
    //                         dataIndex: 'index',
    //                         align: 'center',
    //                         width: 80,
    //                         render: (_text, _record, index) => (page - 1) * 20 + index + 1, // 显示序号，从1开始
    //                         fixed: 'left',
    //                     },
    //                     {
    //                         title: '系统名称',
    //                         dataIndex: 'projName',
    //                         align: 'center',
    //                         key: 'projName',
    //                         fixed: 'left',
    //                         width: 150,
    //                         render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //                     },
    //                     {
    //                         title: '产权所属者',
    //                         dataIndex: 'authorName',
    //                         align: 'center',
    //                         key: 'authorName',
    //                         width: 150,
    //                         render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //                     },
    //                     {
    //                         title: '金额',
    //                         dataIndex: 'projPayment',
    //                         key: 'projPayment',
    //                         align: 'center',
    //                         width: 100,
    //                         render: (text) => <div style={{ color: 'red', fontWeight: 700 }}>{(text / 100).toFixed(2)}</div>,
    //                     },
    //                     {
    //                         title: '退款原因',
    //                         dataIndex: 'refundReason',
    //                         key: 'refundReason',
    //                         align: 'center',
    //                         width: 150,
    //                         render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
    //                     },
    //                     {
    //                         title: '申请退款时间',
    //                         dataIndex: 'gmtCreate',
    //                         key: 'gmtCreate',
    //                         align: 'center',
    //                         width: 200,
    //                     },
    //                     {
    //                         title: '审核时间',
    //                         dataIndex: 'gmtReview',
    //                         key: 'gmtReview',
    //                         align: 'center',
    //                         width: 200,
    //                         render: (text) => <div>
    //                             {text ? text : '—'}
    //                         </div>
    //                     },
    //                     {
    //                         title: '审核状态',
    //                         dataIndex: 'applyStatus',
    //                         key: 'applyStatus',
    //                         align: 'center',
    //                         width: 100,
    //                         render: (text) => <Tag
    //                             color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
    //                         >{text == "APPROVED" ? '通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
    //                     },
    //                     {
    //                         title: '审核意见',
    //                         dataIndex: 'reviewReason',
    //                         key: 'reviewReason',
    //                         align: 'center',
    //                         width: 150,
    //                         render: (text) => <div className='ellipsis-text' title={text}>{text ? text : '—'}</div>,
    //                     },
    //                     {
    //                         title: '退款凭证',
    //                         dataIndex: 'refundVoucherFileKVs',
    //                         key: 'refundVoucherFileKVs',
    //                         width: 150,
    //                         align: 'center',
    //                         render: (_, record) => (
    //                             // {record.name}
    //                             // <div className='refunBtn' onClick={() => {
    //                             //     console.log(record.refundVoucherFileKVs);
    //                             // }}> 预览</div>
    //                             (record.refundVoucherFileKVs).map((item: any, index: number) => (

    //                                 <div style={{ cursor: 'pointer', color: 'var(--color-blue)' }}
    //                                     className='ellipsis-text' title={item.value}
    //                                     key={index} onClick={() => {
    //                                         window.open(downloadUrl(item.key, false), '_blank')
    //                                     }}>{item.value}</div>


    //                             ))

    //                         ),

    //                     },
    //                     {
    //                         title: '操作',
    //                         align: 'center',
    //                         width: 100,
    //                         fixed: 'right',
    //                         render: (_, record) => (
    //                             // {record.applyStatus}PENDING
    //                             <div>{record.applyStatus == 'PENDING' ? (
    //                                 <div className='refunBtn' onClick={() => {
    //                                     // console.log(record.projRefundApplyId);
    //                                     setRevokeModal(true)
    //                                     setprojRefundApplyId(record.projRefundApplyId)
    //                                 }}> 撤销</div>
    //                             ) : (<>—</>)
    //                             }</div >
    //                             // <div className='refunBtn' onClick={() => {
    //                             //     // console.log(record.projRefundApplyId);
    //                             //     setRevokeModal(true)
    //                             //     setprojRefundApplyId(record.projRefundApplyId)
    //                             // }}> 撤销</div>

    //                         ),
    //                     },

    //                 ]
    const dispath = useDispatch()
    const redxuState: any = useSelector(state => state)
    const refunArray = redxuState.refunArray
    const total = redxuState.refunTotal
    const newRefun = redxuState.newRefun
    const getData = (page: number) => {
        get({
            messageApi,
            url: `/api/proj/refund/apply/listpage/self`,
            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
            config: {
                params: {
                    page: page,
                    rows: 20,
                    applyStatus: applyStatus,
                    projName: keyWords,
                    authorId: authorId
                }
            },
            onBefore() {
                setIsLoading(true)
            },
            onSuccess(data: any) {
                // console.log(data.data.rows);
                // setData(data.data.rows)
                dispath({
                    type: 'upRefunArray',
                    val: data.data.rows
                })
                dispath({
                    type: 'upRefunTotal',
                    val: data.data.total
                })
                // setTotal(data.data.total)
            },
            onFinally() {
                setIsLoading(false)
            },
        })
    }
    // 撤销退款
    const projRefund = () => {
        put<any>({
            messageApi,
            url: `/api/proj/refund/apply/cancel/self/${projRefundApplyId}`,

            onBefore() {

            },
            onSuccess() {
                setRevokeModal(false)
                messageApi.success('已撤销');
                get({
                    messageApi,
                    url: `/api/proj/refund/apply/listpage/self`,
                    // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
                    config: {
                        params: {
                            page: page,
                            rows: 20,
                            applyStatus: applyStatus,
                            projName: keyWords,
                            authorId: authorId
                        }
                    },
                    onSuccess(data: any) {
                        // console.log(data.data.rows);
                        // setData(data.data.rows)

                        // setTotal(data.data.total)
                        if (data.data.rows.length == 0 && page > 1) {
                            getData(page - 1)
                        } else {
                            dispath({
                                type: 'upRefunArray',
                                val: data.data.rows
                            })
                            dispath({
                                type: 'upRefunTotal',
                                val: data.data.total
                            })
                        }
                    }
                })
            },
            onFinally() {
                // setIsProjIntroductionLoading(false)
                // renderData()
            }
        })
    }
    // useEffect(() => {
    //     if (!state) {
    //         nav('/home')
    //     }
    // }, [state])
    useEffect(() => {
        // getData(1)
        setPage(1)
        getData(1)
        // console.log(authorId);

    }, [keyWords, applyStatus, authorId])
    useEffect(() => {
         // 获取id为refun的元素
         const refun: any = document.getElementById('refun');
         // 当更换页码时候滚动到最上面
         refun.scrollTop = 0;

    }, [refunArray])
    useEffect(() => {
        // getData(1)
        if (newRefun) {
            setPage(1)
            getData(1)
            dispath({
                type: 'newRefun',
                val: false
            })
        }


    }, [newRefun])


    return (
        <div>
            {contextHolder}

            <div className='refun' id='refun' style={{ height: `${height - 60}px`, overflow: 'auto' }}>

                {/* {state.type} */}
                <Spin tip="加载中..." spinning={isLoading}>
                    {/* <Table columns={columns} dataSource={refunArray}
                        style={{
                            // height: height - 80,
                            // height: 620,
                            // background: 'skyblue'
                        }}
                        scroll={{ x: 2000, y: height - 160 }}
                        // pagination={false} // 不显示分页
                        pagination={
                            {
                                pageSize: 20,
                                total: total,
                                onChange: (currentPage) => {
                                    setPage(currentPage);
                                    getData(currentPage)
                                },
                                showSizeChanger: false,
                                current: page

                            }

                        }
                        locale={{
                            emptyText: <Empty
                                description="暂无数据"
                            />,
                        }}
                        // scroll={{  }}
                        rowKey="projRefundApplyId"
                    /> */}
                    {refunArray.length == 0 ?
                        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: `${height - 60}px` }}>
                            <Empty description="暂无数据" />
                        </div>
                        : <>

                            {refunArray.map((item: any, index: any) => {
                                const voucherItems = item.refundVoucherFileKVs.map((item: any) => ({
                                    key: item.key,
                                    label: (
                                        <div
                                            style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
                                            title={item.value}
                                            onClick={() => {
                                                window.open(downloadUrl(item.key, false), '_blank')
                                            }}
                                        >
                                            {item.value}
                                        </div>
                                    ),
                                }));
                                return (
                                    <div className='projBox' key={item.projRefundApplyId}>
                                        {/* <div className='numImg'>
                                            <div style={{ marginTop: 15 }}>{(page - 1) * 20 + index + 1}</div>
                                        </div> */}
                                        <div className='timeImg'>
                                            <div>申请时间 : {item.gmtCreate}</div>
                                        </div>

                                        <div className='projBoxTop'>
                                            <div className='projName' title={item.projName}>
                                                {item.projName}
                                            </div>
                                            <div>

                                            </div>
                                        </div>
                                        <div className='projBoxBot'>
                                            <div className='boxTopL'>
                                                <div className='numImg'>
                                                    {(page - 1) * 20 + index + 1}
                                                </div>
                                                <div className='projlogo'>
                                                    <img src={logoImg} className='projlogo' alt="" />
                                                </div>
                                                <div className='projInfo'>
                                                    <div className='projPeople' title={item.authorName}>
                                                        {item.authorName}
                                                    </div>
                                                    <div className='projImg'>
                                                        <div> 退款凭证</div>
                                                        <Dropdown menu={{
                                                            items: voucherItems,
                                                        }}
                                                            arrow
                                                            placement="bottomLeft">
                                                            <div className='lookImg'

                                                            >(查看)


                                                            </div>
                                                        </Dropdown>
                                                    </div>
                                                </div>


                                            </div>

                                            <div className='projReason'>
                                                <div className='projReasonTop'>
                                                    <img src={reason} className='reasonImg' alt="" />
                                                    <div className='yellowTitle'>退款原因</div>
                                                </div>
                                                <div className='projBoxText' title={item.refundReason}>
                                                    {item.refundReason}
                                                </div>
                                            </div>

                                            <div className='projStatus'>
                                                <div className='projStatusTop'>

                                                    <img className='projStatusImg' src={item.applyStatus == 'PENDING' ? blue : item.applyStatus == 'CANCELED' ? black : item.applyStatus == 'APPROVED' ? green : item.applyStatus == 'REJECTED' ? red : ''} alt="" />
                                                    {/* <div>{item.applyStatus}</div> */}
                                                    <div
                                                        style={{ color: item.applyStatus == 'PENDING' ? '#1890FF' : item.applyStatus == 'CANCELED' ? '#979797' : item.applyStatus == 'APPROVED' ? '#52C41A' : item.applyStatus == 'REJECTED' ? '#FF0000' : '#FF0000' }}

                                                    >{item.applyStatus == 'PENDING' ? '待审核' : item.applyStatus == 'CANCELED' ? '已撤销' : item.applyStatus == 'APPROVED' ? '已通过' : item.applyStatus == 'REJECTED' ? '未通过' : '未知状态'}</div>
                                                    <div style={{ display: item.gmtReview ? 'block' : 'none', fontWeight: 400, marginLeft: 5 }}>{item.gmtReview}</div>
                                                </div>
                                                <div className='projBoxText statusprojBoxText' style={{ display: item.reviewReason ? 'block' : 'none' }} title={item.reviewReason}>
                                                    审核意见 : {item.reviewReason}
                                                </div>
                                            </div>

                                            <div className='zwBox'>

                                            </div>
                                            <div className='projBtn'>
                                                {/* <div className='priceNum'>金额:{(item.projPayment / 100).toFixed(2)}元</div> */}
                                                <div className='priceNum'>金额:{(item.projPayment / 100)}元</div>
                                                <div className='setProj' onClick={() => {
                                                    setRevokeModal(true)
                                                    setprojRefundApplyId(item.projRefundApplyId)
                                                }}
                                                    style={{ display: item.applyStatus == 'PENDING' ? 'block' : 'none' }}
                                                >撤销退款</div>


                                            </div>



                                        </div>
                                    </div>
                                )
                            })}
                        </>}




                </Spin>



            </div>

            <div className='pagination'>
                <Pagination current={page} total={total} pageSize={20} showSizeChanger={false} onChange={(page) => {
                    setPage(page)
                    getData(page)
                  

                }} />
            </div>

            <Modal
                title="确认撤销"
                okText="撤销"
                cancelText="取消"
                destroyOnClose={true}
                open={revokeModal}
                onOk={() => {
                    // setRevokeModal(false)
                    projRefund()
                }}
                onCancel={() => {
                    setRevokeModal(false)
                }}
                okButtonProps={{ style: { background: 'red', color: 'white' } }}
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    height: `${height}px`,
                }}>
                <div style={{ width: 384, display: 'flex', height: 50, alignItems: 'center' }}>
                    <img src={revokeImg} alt="" style={{ width: 32, height: 32, marginLeft: 10 }} />
                    <div style={{ marginLeft: 10, fontSize: 18 }}>
                        是否撤销该条退款申请
                    </div>

                </div>
            </Modal>
        </div>
    )
}