import React, { useState, useEffect, useRef } from 'react';
import {
    Modal,
    Table
} from 'antd';
import {
    ProFormInstance,
    ProTable,
    ActionType
} from '@ant-design/pro-components';


import { findOrdersRealtimeDataByOrderId } from '@/services/order/index';

export default ({ values, modalOpenState, onModalOpenState }) => {
    const actionRef = useRef<ActionType>();
    useEffect(() => {
        if (actionRef.current) {
            actionRef.current.reload();
        }
    }, [values]);


    const columns = [
        {
            "title": "ID",
            "dataIndex": "id",
            search: false,
        },
        {
            "title": "订单ID",
            "dataIndex": "orderId",
            search: false,
        },
        {
            title: '订单号',
            dataIndex: 'orderNo',
            search: false,
        },
        {
            "title": "交易记录编号",
            "dataIndex": "transactionNo",
            search: false,
        },
        {
            "title": "实时状态",
            "dataIndex": "realtimeStatusName",
            search: false,
        },
        {
            "title": "归还状态",
            "dataIndex": "returnStatusName",
            search: false,
        },
        {
            "title": "插枪状态",
            "dataIndex": "insertStatusName",
            search: false,
        },
        {
            "title": "输出电压",
            "dataIndex": "outputVoltage",
            search: false,
        },
        {
            "title": "输出电流",
            "dataIndex": "outputCurrent",
            search: false,
        },
        {
            "title": "枪线温度",
            "dataIndex": "wireTemperature",
            search: false,
        },
        {
            "title": "SOC",
            "dataIndex": "soc",
            search: false,
        },
        {
            "title": "电池组温度",
            "dataIndex": "batteryTemperature",
            search: false,
        },
        {
            "title": "累计充电时间(分钟)",
            "dataIndex": "cumulativeTime",
            search: false,
        },
        {
            "title": "剩余充电时间(分钟)",
            "dataIndex": "residueTime",
            search: false,
        },
        {
            "title": "充电度数",
            "dataIndex": "chargingDegree",
            search: false,
        },
        {
            "title": "当前金额",
            "dataIndex": "currentAmount",
            search: false,
        },
        {
            "title": "故障码",
            "dataIndex": "faultCode",
            search: false,
        },
        {
            "title": "创建时间",
            "dataIndex": "createTime",
            search: false,
        }
    ];


    return (
        <>
            <Modal width={1200} title="订单-实时数据" open={modalOpenState} onOk={async () => {
                onModalOpenState(false)
            }} onCancel={async () => {
                onModalOpenState(false)
            }}>
                <ProTable
                    rowKey="id"
                    key="logList"
                    actionRef={actionRef}
                    scroll={{ x: 2500 }}
                    search={{
                        labelWidth: 120,
                        defaultCollapsed: false,
                    }}
                    request={async (params, sorter, filter) => {
                        params.orderId = values
                        let { data } = await findOrdersRealtimeDataByOrderId(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </Modal>
        </>
    );
};