import { DropboxOutlined, PlusOutlined, DownloadOutlined } from '@ant-design/icons';
import { Button, Modal, Form, Input, Drawer, Popconfirm, TreeSelect, Card, Descriptions, Divider } 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 Manage = () => {
    const [row, setRow] = useState();
    //绑定
    const actionRef = useRef();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [orderInfo, setOrderInfo] = useState(false);
    const [data, setData] = useState({});
    const [dataGoods, setDataGoods] = useState([]);
    const [dataDiningPlate, setDataDiningPlate] = useState([]);


    useEffect(() => {

    }, []);

    const columns = [
        {
            title: '主键',
            dataIndex: 'id',
            tip: '规则名称是唯一的 key',
            hideInSearch: true,
            hideInTable: true,
        },
        {
            title: '订单编号',
            dataIndex: 'orderNumber',
            hideInSearch: true,
        },
        {
            title: '订单标题',
            dataIndex: 'subject',
            hideInSearch: true,
        },
        {
            title: '订单金额',
            dataIndex: 'totalAmount',
            hideInSearch: true,
        },
        {
            title: '状态',
            dataIndex: 'states',
            valueEnum: {
                0: {
                    text: '选菜中',
                    status: 'Processing',
                },
                1: {
                    text: '已完成',
                    status: 'Success',
                },
            },
        },
        {
            title: '支付状态',
            dataIndex: 'payStates',
            valueEnum: {
                0: {
                    text: '待支付',
                    status: 'Processing',
                },
                1: {
                    text: '已支付',
                    status: 'Success',
                },
            },
        },
        {
            title: '创建时间',
            dataIndex: 'createAt',
            ellipsis: {
                showTitle: false,
            },
            valueType: 'textarea',
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            width: 200,
            render: (_, record) => [
                <a
                    key={record.id}
                    onClick={async () => {
                        setData(record);
                        setDataGoods(record.goodsInfo);
                        setDataDiningPlate(record.diningPlateInfo);
                        setIsModalOpen(true);
                    }} >
                    查看详情
                </a>
            ],
        },
    ];

    const goodsColumns = [
        {
            title: '商品名称',
            dataIndex: 'goodsName',
            key: 'goodsName',
        },
        {
            title: '重量',
            dataIndex: 'goodsWeight',
            key: 'goodsWeight',
        },
        {
            title: '价格',
            dataIndex: 'totalAmount',
            key: 'totalAmount',
        }
    ];

    const diningPlateColumns = [
        {
            title: '二维码',
            dataIndex: 'qrCode',
            key: 'qrCode',
        },
        {
            title: '芯片码',
            dataIndex: 'chipCode',
            key: 'chipCode',
        }
    ];


    return (
        <PageContainer header={{
            title: '',
            breadcrumb: {},
        }}>
            <ProTable
                // headerTitle="第三方订单"
                actionRef={actionRef}
                rowKey="orderFlowId"
                search={{
                    labelWidth: 120,
                }}
                columns={columns}
                //数据绑定
                request={async (params, sorter, filter) => {
                    const msg = await api.GetWeighOrderPage(params);
                    return {
                        data: msg.data.data,
                        success: true,
                        total: msg.data.total,
                    };
                }}
            ></ProTable>

            <>
                <Modal title="详情" width={800} open={isModalOpen}
                    footer={[
                        <Button key="back" onClick={() => { setIsModalOpen(false) }}>
                            关闭
                        </Button>
                    ]}
                    onCancel={() => { setIsModalOpen(false); }}>
                    <Card bordered={false}>
                        <Descriptions
                            title="订单信息"
                            style={{
                                marginBottom: 32,
                            }}
                        >
                            <Descriptions.Item label="订单编号">{data.orderNumber}</Descriptions.Item>
                            <Descriptions.Item label="OpenId">{data.createId}</Descriptions.Item>
                            <Descriptions.Item label="总额">{data.totalAmount}</Descriptions.Item>
                            <Descriptions.Item label="订单状态">{data.states == 0 ? "选菜中" : "已完成"}</Descriptions.Item>
                            <Descriptions.Item label="支付状态">{data.payStates == 0 ? "待支付" : "已支付"}</Descriptions.Item>
                            <Descriptions.Item label="创建时间">{data.createAt}</Descriptions.Item>
                        </Descriptions>
                        <Divider
                            style={{
                                marginBottom: 32,
                            }}
                        />
                        <div >餐盘信息</div>
                        <ProTable
                            style={{
                                marginBottom: 24,
                            }}
                            pagination={false}
                            search={false}
                            options={false}
                            toolBarRender={false}
                            dataSource={dataDiningPlate}
                            columns={diningPlateColumns}
                            rowKey="id"
                        />
                        <div >商品信息</div>
                        <ProTable
                            style={{
                                marginBottom: 24,
                            }}
                            pagination={false}
                            search={false}
                            options={false}
                            toolBarRender={false}
                            dataSource={dataGoods}
                            columns={goodsColumns}
                            rowKey="id"
                        />
                    </Card>
                </Modal>
            </>
        </PageContainer>
    );
};

export default Manage;
