/** @format */

import * as React from 'react';
import {Modal, Spin} from 'antd';
import Table, {ExpandedRow} from '../../../../components/table';
import {useSourceContent} from '../../../../service/controlPanel';
import JsonView from '../../../../components/jsonview';
import {ColumnProps} from 'antd/es/table';
interface Isource {
    visible?: boolean;
    name: string;
    id: number;
    create_time?: string;
    handleUpdateVisible: () => void;
}
const sourceContentModal: React.FC<Isource> = props => {
    const {visible = false, name, id, create_time, handleUpdateVisible} = props;
    const [sourceState, requestSource] = useSourceContent();

    React.useEffect(() => {
        console.log('create_time', create_time);
        if (id && visible) {
            requestSource(id, create_time || '');
        }
    }, [id]);
    const columns: ColumnProps<any>[] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 80,
        },
        {
            title: '接口',
            dataIndex: 'provider_api_name',
            key: 'provider_api_name',
        },
        {
            title: '接口地址',
            dataIndex: 'remote_addr',
            key: 'remote_addr',
            width: 110,
        },
        {
            title: '供应商',
            dataIndex: 'provider_name',
            key: 'provider_name',
        },
        {
            title: '调用时间',
            dataIndex: 'create_time',
            key: 'create_time',
            width: 95,
        },
        {
            title: '响应时长(s)',
            dataIndex: 'elapsed',
            key: 'elapsed',
            width: 96,
        },
        {
            title: '错误码',
            dataIndex: 'raw_code',
            key: 'raw_code',
            width: 70,
        },
        {
            title: '错误码含义',
            dataIndex: 'msg',
            key: 'msg',
            width: 300,
        },
        {
            title: '结果状态',
            dataIndex: 'state',
            key: 'state',
            width: 90,
            render: text => {
                return text ? '成功' : '失败';
            },
        },
    ];
    return (
        <Modal
            onCancel={handleUpdateVisible}
            visible={visible}
            title={`数据源内容(${name})`}
            width={1200}
            footer={null}
            maskClosable
        >
            <Table
                loading={sourceState.loading}
                expandedRowRender={record => {
                    return (
                        <ExpandedRow
                            left={<JsonView src={record.request_params} />}
                            right={<JsonView src={record.response_params} />}
                        />
                    );
                }}
                pagination={false}
                rowKey='id'
                columns={columns}
                dataSource={sourceState.dataSource}
                scroll={{x: false}}
            />
        </Modal>
    );
};
export default sourceContentModal;
