import { DropboxOutlined, PlusOutlined, DownloadOutlined } from '@ant-design/icons';
import {  message, Modal, Input, Form,  Space, Table, Tag } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import api from './service';
const handlerefund = async (value) => {
    var data = { number: value };
    const hide = message.loading('正在发起退款');
    try {
        api.StartRefund(data);
        hide();
        message.success('发起退款成功，即将刷新');
        return true;
    } catch (error) {
        hide();
        message.error('发起退款失败，请重试');
        return false;
    }
};
const Manage = () => {
    const [row, setRow] = useState();
    //绑定
    const actionRef = useRef();
    const [form] = Form.useForm();
    const [isModalOpen, setIsModalOpen] = useState(false);

    const [thirdOrderInfo, setThirdOrderInfo] = useState(false);


    // 获取店铺分类、商品名称信息
    useEffect(() => {

    }, []);

    const columns = [
        {
            title: '主键',
            dataIndex: 'id',
            tip: '规则名称是唯一的 key',
            hideInSearch: true,
            hideInTable: true,
        },
        {
            title: '订单编号',
            dataIndex: 'orderNum',
        },
        {
            title: '同步时间',
            dataIndex: 'createAt',
            hideInSearch: true,
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            width: 200,
            render: (_, record) => [
                <a
                    key={record.id}
                    onClick={async () => {
                        var data = await api.getThirdOrderInfo(record.id);
                        setThirdOrderInfo(data.data.thirdOrderInfos);
                        setIsModalOpen(true);
                    }} >
                    查看详情
                </a>
            ],
        },
    ];

    const columnInfos = [
        {
            title: '商品名称',
            dataIndex: 'goodsName',
            key: 'goodsName',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '数量',
            dataIndex: 'count',
            key: 'count',
        }
    ];
    return (
        <PageContainer header={{
            title: '',
            breadcrumb: {},
          }}>
            <ProTable
                headerTitle="第三方订单"
                actionRef={actionRef}
                rowKey="orderFlowId"
                search={{
                    labelWidth: 120,
                }}
                // toolBarRender={() => [
                //     <Button type="primary" key="create" onClick={() => { setIsModalOpen(true); }}>
                //         <DownloadOutlined /> 新建
                //     </Button>,
                // ]}
                columns={columns}
                //数据绑定
                request={async (params, sorter, filter) => {
                    const msg = await api.page(params);
                    return {
                        data: msg.data.data,
                        success: true,
                        total: msg.data.total,
                    };
                }}
            ></ProTable>
 
            <>
                <Modal title="详情" open={isModalOpen} onOk={() => { }} onCancel={() => { setIsModalOpen(false); }}>
                <Table columns={columnInfos} dataSource={thirdOrderInfo} />
                </Modal>
            </>
        </PageContainer>
    );
};

export default Manage;
