/** @format */

import * as React from 'react';
import {ColumnProps} from 'antd/es/table';
import moment, {Moment} from 'moment';
import 'antd/es/date-picker/locale/zh_CN';
import {Progress, Typography, Row, Col, Divider, Spin} from 'antd';
import ResultAnalysisModal from './resultAnalysisModal';
import Result from '../../../../components/result';
import Search from '../../../../components/search/search';
import Button from '../../../../components/button';
import ProviderApiSelect from '../../../../components/select/providerApi';
import RangePicker from '../../../../components/datePicker/rangePicker';
import DatePicker from '../../../../components/datePicker/datePicker';
import Table from '../../../../components/table';
import {
    useProvideStatisticsReport,
    ProviderStatisticsRecordProps,
    useProvideUsageStatistics,
} from '../../../../service/report';
import ReportTask from '../components/export-task/provide';
import ViewTask from '../../components/view-task';

const {Title} = Typography;
const startTime = moment('00:00:00', 'HH:mm:ss');
const endTime = moment('23:59:59', 'HH:mm:ss');

const reportMerchant: React.FC = () => {
    const [usageState, requestUseage] = useProvideUsageStatistics({
        start_timestamp: startTime.unix(),
        end_timestamp: endTime.unix(),
        provider_api_id: '',
    });
    const [reportState, requestReport] = useProvideStatisticsReport({
        page_number: 1,
        provider_api_id: '',
        start_timestamp: startTime.unix(),
        end_timestamp: endTime.unix(),
    });
    //请求用量统计
    const handleSearchUsage = (values: {provider_api_id: number | ''; time: Moment}) => {
        requestUseage({
            provider_api_id: values.provider_api_id,
            start_timestamp: values.time.unix(),
            end_timestamp: values.time
                .hour(23)
                .minute(59)
                .second(59)
                .unix(),
        });
    };
    //搜索报表
    const handleSerachReport = (values: {provider_api_id: '' | number; time: [Moment, Moment]}) => {
        requestReport({
            page_number: 1,
            start_timestamp: values.time[0].unix(),
            end_timestamp: values.time[1].unix(),
        });
    };
    const handleRetryStatics = () => {
        requestReport();
    };
    const tableColumns: ColumnProps<ProviderStatisticsRecordProps>[] = React.useMemo(() => {
        return [
            {
                title: '序号',
                key: 'index',
                dataIndex: 'index',
                width: 80,
            },
            {
                title: '接口',
                key: 'provider_api_name',
                dataIndex: 'provider_api_name',
                render: text => {
                    return text || '--';
                },
            },
            {
                title: '供应商',
                key: 'provider_name',
                dataIndex: 'provider_name',
                render: text => {
                    return text || '--';
                },
            },
            {
                title: '调用量',
                key: 'total',
                dataIndex: 'total',
                align: 'right',
                render: text => {
                    return text || text == 0 ? text : '--';
                },
            },
            {
                title: '成功量',
                key: 'success',
                dataIndex: 'success',
                align: 'right',
                render: text => {
                    return text || text == 0 ? text : '--';
                },
            },
            {
                title: '异常量',
                key: 'fail',
                dataIndex: 'fail',
                align: 'right',
                render: text => {
                    return text || text == 0 ? text : '--';
                },
            },
            {
                title: '异常占比',
                key: 'fail_rate',
                dataIndex: 'fail_rate',
                align: 'right',
                render: text => {
                    return text || '--';
                },
            },
            {
                title: '查得量',
                key: 'query',
                dataIndex: 'query',
                align: 'right',
                render: text => {
                    return text || text == 0 ? text : '--';
                },
            },
            {
                title: '查得占比',
                key: 'query_rate',
                dataIndex: 'query_rate',
                width: 100,
                align: 'right',
                render: text => {
                    return text || '--';
                },
            },
            {
                title: '查无量',
                key: 'un_query',
                dataIndex: 'un_query',
                align: 'right',
                render: text => {
                    return text || text == 0 ? text : '--';
                },
            },
        ];
    }, []);

    return (
        <>
            <Title level={4}>用量统计</Title>
            <Search
                preRender={{
                    col: {
                        lg: 3,
                        xxl: 4,
                    },
                    render: (
                        <ResultAnalysisModal>
                            <Button type='primary'>结果分析</Button>
                        </ResultAnalysisModal>
                    ),
                }}
                algin='start'
                handleSubmit={handleSearchUsage}
                dataSource={[
                    {
                        key: 'provider_api_id',
                        component: <ProviderApiSelect />,
                    },
                    {
                        key: 'time',
                        options: {
                            initialValue: startTime,
                        },
                        component: <DatePicker />,
                    },
                ]}
            />
            <Spin spinning={usageState.loading}>
                <Row justify='center' type='flex' align='middle' style={{textAlign: 'center'}}>
                    <Col span={8}>
                        <h4>有效查询情况</h4>
                        <Progress type='circle' percent={usageState.dataSource.left_rate} />
                        <Row gutter={24} justify='center' type='flex' align='middle' style={{marginTop: 15}}>
                            {[
                                {title: '调用量', value: usageState.dataSource.use_count},
                                {title: '剩余用量', value: usageState.dataSource.left_count},
                                {title: '剩余占比', value: usageState.dataSource.left_rate + '%'},
                            ].map((element, index) => {
                                return (
                                    <Col span={6} key={index}>
                                        <p>{element.value}</p>
                                        <span>{element.title}</span>
                                    </Col>
                                );
                            })}
                        </Row>
                    </Col>
                </Row>
            </Spin>
            <Divider />
            <Title level={4}>数据源统计报表</Title>
            <Search
                handleSubmit={handleSerachReport}
                preRender={{
                    col: {
                        xxl: 4,
                        lg: 7,
                    },
                    render: (
                        <>
                            <ReportTask>
                                <Button type='primary' style={{marginRight: 15}}>
                                    导出任务
                                </Button>
                            </ReportTask>
                            <ViewTask export_type={1}>
                                <Button>查看任务</Button>
                            </ViewTask>
                        </>
                    ),
                }}
                algin='start'
                dataSource={[
                    {
                        key: 'provider_api_id',
                        component: <ProviderApiSelect />,
                    },
                    {
                        key: 'time',
                        options: {
                            initialValue: [startTime, endTime],
                        },
                        col: {
                            lg: 11,
                            xxl: 6,
                        },
                        component: <RangePicker showTime />,
                    },
                ]}
            />
            <Result error={reportState.error} onRetry={handleRetryStatics}>
                <Table
                    rowKey='id'
                    pagination={{total: reportState.total, current: reportState.deepData.page_number}}
                    loading={reportState.loading}
                    dataSource={reportState.dataSource}
                    columns={tableColumns}
                />
            </Result>
        </>
    );
};
export default reportMerchant;
