import './refun.css';
import { useState,useEffect } from 'react';
import { Table,
    //  Pagination,
      Modal, Tag, message } from 'antd';
import { get } from '../../util/AjaxUtils'
import type { TableProps } from 'antd';
interface DataType {
    title: string;
    price: string;
    reason: string;
    time: string;
    img: string;
    id: string;
    examineTime: string;
    examineStatus: string;
    examineText: string;
}
import revokeImg from '../../static/revoke.png'
import { useLocation } from 'react-router-dom'
export default function Refun() {
    const height = window.innerHeight - 180;
    const [messageApi, contextHolder] = message.useMessage();
    const [page, setPage] = useState(1)     // 分页
    const [total, setTotal] = useState(50)   // 数据总数
    const [revokeModal, setRevokeModal] = useState(false) //撤销弹窗
    const { state } = useLocation()
    // {state.type}
    const columns: TableProps<DataType>['columns'] = state.type == 'CANCELED' ? [
        {
            title: '序号',
            dataIndex: 'index',
            align: 'center',
            width: 80,
            render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始
        },
        {
            title: '系统名称',
            dataIndex: 'title',
            align: 'center',
            key: 'title',
            render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
        },
        {
            title: '金额',
            dataIndex: 'price',
            key: 'price',
            align: 'center',
            width: 150,
        },
        {
            title: '退款原因',
            dataIndex: 'reason',
            key: 'reason',
            align: 'center',
            render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
        },
        {
            title: '申请退款时间',
            dataIndex: 'time',
            key: 'time',
            align: 'center',
            width: 150,
        },
        {
            title: '审核时间',
            dataIndex: 'examineTime',
            key: 'examineTime',
            align: 'center',
            width: 150,
        },
        {
            title: '审核状态',
            dataIndex: 'examineStatus',
            key: 'examineStatus',
            align: 'center',
            width: 100,
            render: (text) => <Tag
                color={text == "PASS" ? '#87d068' : text == "NOPASS" ? '#f50' : text == "WAIT" ? '#2db7f5' : ''}
            >{text == "PASS" ? '通过' : text == "NOPASS" ? '未通过' : text == "WAIT" ? '待审核' : '未知'}</Tag>,
        },
        {
            title: '审核意见',
            dataIndex: 'examineText',
            key: 'examineText',
            align: 'center',
            // width: 150,
            render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
        },
        {
            title: '退款凭证',
            dataIndex: 'img',
            key: 'img',
            width: 100,
            align: 'center',
            render: (_, record) => (
                // {record.name}
                <div className='refunBtn' onClick={() => {
                    console.log(record.img);
                }}> 预览</div>

            ),
        },

    ] : [
        {
            title: '序号',
            dataIndex: 'index',
            align: 'center',
            width: 80,
            render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始
        },
        {
            title: '系统名称',
            dataIndex: 'title',
            align: 'center',
            key: 'title',
            render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
        },
        {
            title: '金额',
            dataIndex: 'price',
            key: 'price',
            align: 'center',
            width: 150,
        },
        {
            title: '退款原因',
            dataIndex: 'reason',
            key: 'reason',
            align: 'center',
            render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
        },
        {
            title: '申请退款时间',
            dataIndex: 'time',
            key: 'time',
            align: 'center',
            width: 150,
        },
        {
            title: '审核时间',
            dataIndex: 'examineTime',
            key: 'examineTime',
            align: 'center',
            width: 150,
        },
        {
            title: '审核状态',
            dataIndex: 'examineStatus',
            key: 'examineStatus',
            align: 'center',
            width: 100,
            render: (text) => <Tag
                color={text == "PASS" ? '#87d068' : text == "NOPASS" ? '#f50' : text == "WAIT" ? '#2db7f5' : ''}
            >{text == "PASS" ? '通过' : text == "NOPASS" ? '未通过' : text == "WAIT" ? '待审核' : '未知'}</Tag>,
        },
        {
            title: '审核意见',
            dataIndex: 'examineText',
            key: 'examineText',
            align: 'center',
            // width: 150,
            render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
        },
        {
            title: '退款凭证',
            dataIndex: 'img',
            key: 'img',
            width: 100,
            align: 'center',
            render: (_, record) => (
                // {record.name}
                <div className='refunBtn' onClick={() => {
                    console.log(record.img);
                }}> 预览</div>

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

            ),
        },
    ];
    const getData = (page:number) => {
        get({
            messageApi,
            url: `/api/proj/refund/apply/listpage`,
            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
            config: {
                params: {
                    page: page,
                    rows: 10,
                    applyStatus:state.type
                }
            },
            onSuccess({data}) {
                console.log(data);
                
            }
        })
    }
    // useEffect(()=>{
    //     getData(page)
    // },[])
    useEffect(()=>{
        // getData(1)
        setPage(1)
        getData(1)
    },[state.type])
    const data: DataType[] = [
        {
            title: 'xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统',
            price: '100',
            reason: '没钱',
            img: 'xxxx-xxx.img',
            time: '2024-8-20  13:10',
            id: '1',
            examineTime: '2024-8-20  12:00',
            examineStatus: 'PASS',
            examineText: '额呵呵呵',
        },
        {
            title: 'xxx系统',
            price: '100',
            reason: '没钱',
            img: 'xxxx-xxx.img',
            time: '2024-8-20  13:10',
            id: '2',
            examineTime: '2024-8-20  12:00',
            examineStatus: 'NOPASS',
            examineText: '额呵呵呵',
        },
        {
            title: 'xxx系统',
            price: '100',
            reason: '没钱',
            img: 'xxxx-xxx.img',
            time: '2024-8-20  13:10',
            id: '3',
            examineTime: '2024-8-20  12:00',
            examineStatus: 'WAIT',
            examineText: '额呵呵呵',
        },
        {
            title: 'xxx系统',
            price: '100',
            reason: '没钱',
            img: 'xxxx-xxx.img',
            time: '2024-8-20  13:10',
            id: '4',
            examineTime: '2024-8-20  12:00',
            examineStatus: 'NOPASS',
            examineText: '额呵呵呵',
        },
        {
            title: 'xxx系统',
            price: '100',
            reason: '没钱',
            img: 'xxxx-xxx.img',
            time: '2024-8-20  13:10',
            id: '5',
            examineTime: '2024-8-20  12:00',
            examineStatus: 'PASS',
            examineText: '额呵呵呵',
        },
        {
            title: 'xxx系统',
            price: '100',
            reason: '没钱',
            img: 'xxxx-xxx.img',
            time: '2024-8-20  13:10',
            id: '6',
            examineTime: '2024-8-20  12:00',
            examineStatus: 'PASS',
            examineText: '额呵呵呵',
        },
        {
            title: 'xxx系统',
            price: '100',
            reason: '没钱',
            img: 'xxxx-xxx.img',
            time: '2024-8-20  13:10',
            id: '7',
            examineTime: '2024-8-20  12:00',
            examineStatus: 'PASS',
            examineText: '额呵呵呵',
        },
        {
            title: 'xxx系统',
            price: '100',
            reason: '没钱',
            img: 'xxxx-xxx.img',
            time: '2024-8-20  13:10',
            id: '8',
            examineTime: '2024-8-20  12:00',
            examineStatus: 'PASS',
            examineText: '额呵呵呵',
        },
        {
            title: 'xxx系统',
            price: '100',
            reason: '没钱',
            img: 'xxxx-xxx.img',
            time: '2024-8-20  13:10',
            id: '9',
            examineTime: '2024-8-20  12:00',
            examineStatus: 'PASS',
            examineText: '额呵呵呵',
        },
        {
            title: 'xxx系统',
            price: '100',
            reason: '没钱',
            img: 'xxxx-xxx.img',
            time: '2024-8-20  13:10',
            id: '10',
            examineTime: '2024-8-20  12:00',
            examineStatus: 'PASS',
            examineText: '额呵呵呵',
        },
        

    ];

    return (
        <div>
            {contextHolder}
            <div className='refun' style={{ height: `${height}px`, overflow: 'auto' }}>
                {/* {state.type} */}
                <Table columns={columns} dataSource={data}
                    style={{
                        // height: height - 80,
                        // height: 620,
                        // background: 'skyblue'
                    }}
                    // pagination={false} // 不显示分页
                    pagination={
                        {
                            pageSize: 10,
                            total: total,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                                getData(currentPage)
                            },
                            showSizeChanger: false,
                            current: page

                        }

                    }
                    scroll={{ y: height - 128 }}
                    rowKey="id"
                />
                {/* <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 15 ,width:'100%'}}>
                    <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false} onChange={(page) => {
                        setPage(page)
                        // getData(page)
                    }} />
                </div> */}
            </div>
            <Modal
                title="确认撤销"
                okText="撤销"
                cancelText="取消"
                destroyOnClose={true}
                open={revokeModal}
                onOk={() => {
                    setRevokeModal(false)
                }}
                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>
    )
}