/** @format */

import * as React from 'react';
import monent from 'moment';
import {Alert, Tooltip, Typography} from 'antd';
import {ColumnProps} from 'antd/es/table';
import {PaginationProps} from 'antd/es/pagination';
import Result from '../../../components/result';
import {formatNumer} from '../../../utils/operation';
import {
    useMerchantConsume,
    useRevenue,
    useServerFail,
    ConsumeRecordProps,
    ConsumeRecordDetailProps,
    RevenueRecordProps,
    RevenueRecordDetailProps,
    FailRecordProps,
    FailDetailProps,
} from '../../../service/dashbordMerchant';
import Ranks from '../components/rank';
import Button from '../../../components/button';
import OverviewItem from '../components/overviewItem';
import DataOverview from './components/dataOverview';
const {Paragraph} = Typography;

const formatString = 'YYYY-MM-DD HH:mm:ss';

const getNowTime = () => {
    return monent()
        .minute(0)
        .second(0)
        .millisecond(0);
};
const consumeColumns: ColumnProps<ConsumeRecordProps>[] = [
    {
        title: '客户',
        dataIndex: 'name',
    },
    {
        title: '计费查次',
        dataIndex: 'value',
        align: 'right',
        render: (text: number) => formatNumer(text),
    },
];
const consumeDetaileColumns: ColumnProps<ConsumeRecordDetailProps>[] = [
    {
        title: '接口名称',
        dataIndex: 'api_name',
        key: 'api_name',
        render: text => {
            return (
                <Tooltip placement='topLeft' title={text}>
                    <span>{text}</span>
                </Tooltip>
            );
        },
    },
    {
        title: '占比',
        dataIndex: 'rate',
        key: 'rate',
        align: 'right',
    },
    {
        title: '计费查次',
        dataIndex: 'charge',
        key: 'charge',
        align: 'right',
        render: text => {
            return <span style={{color: 'red'}}>{formatNumer(text)}</span>;
        },
    },
    {
        title: '有效查询',
        dataIndex: 'valid',
        key: 'valid',
        align: 'right',
        render: (text: number) => {
            return text || text === 0 ? formatNumer(text) : '--';
        },
    },

    {
        title: '计费率',
        dataIndex: 'charge_rate',
        key: 'charge_rate',
        align: 'right',
    },
];
//服务营收排行的Columns
const revenueColumns: ColumnProps<RevenueRecordProps>[] = [
    {
        title: '接口',
        dataIndex: 'api_name',
        key: 'api_name',
        render: text => {
            return (
                <Tooltip placement='topLeft' title={text}>
                    <span>{text}</span>
                </Tooltip>
            );
        },
    },
    {
        title: '计费查次',
        dataIndex: 'charge',
        key: 'charge',
        align: 'right',
        render: (text: number) => {
            return text || text === 0 ? formatNumer(text) : '--';
        },
    },
];
//服务营收排行右侧详情的Columns
const revenueDetaileColumns: ColumnProps<RevenueRecordDetailProps>[] = [
    {
        title: '商户',
        dataIndex: 'merchant_name',
        key: 'merchant_name',
        render: text => {
            return text || '--';
        },
    },
    {
        title: '占比',
        dataIndex: 'rate',
        key: 'rate',
        align: 'right',
        render: text => {
            return text || '--';
        },
    },
    {
        title: '计费查次',
        dataIndex: 'charge',
        key: 'charge',
        align: 'right',
        render: (text: number) => {
            return <span style={{color: 'red'}}>{formatNumer(text)}</span>;
        },
    },
    {
        title: '有效查询',
        dataIndex: 'valid',
        key: 'valid',
        align: 'right',
        render: (text: number) => {
            return text || text === 0 ? formatNumer(text) : '--';
        },
    },
];
//服务异常排行Columns
const serverFailColumns: ColumnProps<FailRecordProps>[] = [
    {
        title: '接口',
        dataIndex: 'api_name',
        key: 'api_name',
        render: text => {
            return (
                <Tooltip placement='topLeft' title={text}>
                    <span>{text ? text : '--'}</span>
                </Tooltip>
            );
        },
    },
    {
        title: '异常查次',
        dataIndex: 'fail',
        key: 'fail',
        align: 'right',
        render: (text: number) => {
            return text || text === 0 ? formatNumer(text) : '--';
        },
    },
];
const serverFailDetailColumns: ColumnProps<FailDetailProps>[] = [
    {
        title: '错误码',
        dataIndex: 'code',
        key: 'code',
        render: text => {
            return text || '--';
        },
    },
    {
        title: '错误码含义',
        dataIndex: 'msg',
        key: 'msg',
        width: 200,
        render: text => {
            return (
                <Tooltip placement='topLeft' title={text}>
                    <Paragraph ellipsis style={{marginBottom: 0}}>
                        {text || '--'}
                    </Paragraph>
                </Tooltip>
            );
        },
    },
    {
        title: '占比	',
        dataIndex: 'rate',
        key: 'rate',
        align: 'right',
        render: text => {
            return text || '--';
        },
    },
    {
        title: '异常次数',
        dataIndex: 'fail',
        key: 'fail',
        align: 'right',
        render: (text: number) => {
            return <span style={{color: 'red'}}>{text ? formatNumer(text) : '--'}</span>;
        },
    },
];

const serviceOverview: React.FC = () => {
    const [state, setState] = React.useState({
        nowTime: getNowTime(),
    });
    //商户消费排行的初始数据
    const [consumeState, requestConsume] = useMerchantConsume({
        page_number: 1,
        today_end_timestamp: state.nowTime.unix(),
        time_type: 0,
    });
    //服务营收排行的初始数据
    const [revenueState, requestRevenue] = useRevenue({
        page_number: 1,
        today_end_timestamp: state.nowTime.unix(),
        time_type: 0,
    });
    //服务异常排行的初始数据
    const [serverFailState, requestFail] = useServerFail({
        page_number: 1,
        today_end_timestamp: state.nowTime.unix(),
        time_type: 0,
    });

    // 执行刷新操作(请求所有数据)
    const handleRefresh = () => {
        setState(preState => ({...preState, nowTime: getNowTime()}));
    };
    React.useEffect(() => {
        const params = {
            page_number: 1,
            time_type: 0,
            today_end_timestamp: state.nowTime.unix(),
        };
        requestConsume(params);
        requestRevenue(params);
        requestFail(params);
    }, [state.nowTime]);
    const handleEvent = {
        consume: {
            handleChangeTimeType: (time_type: number) => {
                requestConsume({
                    time_type: time_type,
                    page_number: 1,
                });
            },
            handlaChangeTable: ({current}: PaginationProps) => {
                requestConsume({
                    page_number: current,
                });
            },
        },
        revenue: {
            handleChangeTimeType: (time_type: number) => {
                requestRevenue({
                    time_type: time_type,
                    page_number: 1,
                });
            },
            handlaChangeTable: ({current}: PaginationProps) => {
                requestRevenue({
                    page_number: current,
                });
            },
        },
        serverFail: {
            handleChangeTimeType: (time_type: number) => {
                requestFail({
                    page_number: 1,
                    time_type: time_type,
                });
            },
            handlaChangeTable: ({current}: PaginationProps) => {
                requestFail({
                    page_number: current,
                });
            },
        },
    };
    return (
        <div>
            <Alert message={'数据统计时间截止:' + state.nowTime.format(formatString)} />
            <div style={{textAlign: 'right'}}>
                <Button onClick={handleRefresh} type='primary'>
                    刷新
                </Button>
            </div>

            <OverviewItem name='数据概况' renderRight={null}>
                <DataOverview today_end_timestamp={state.nowTime.unix()} />
            </OverviewItem>
            <OverviewItem name='商户消费排行' onChange={handleEvent.consume.handleChangeTimeType}>
                <Result error={consumeState.error} onRetry={() => requestConsume()}>
                    <Ranks
                        loading={consumeState.loading}
                        dataSource={consumeState.dataSource}
                        columns={consumeColumns}
                        detaileColumns={consumeDetaileColumns}
                        onChange={handleEvent.consume.handlaChangeTable}
                        total={consumeState.total}
                    />
                </Result>
            </OverviewItem>
            <OverviewItem name='服务营收排行' onChange={handleEvent.revenue.handleChangeTimeType}>
                <Result error={revenueState.error} onRetry={() => requestRevenue()}>
                    <Ranks
                        loading={revenueState.loading}
                        dataSource={revenueState.dataSource}
                        columns={revenueColumns}
                        detaileColumns={revenueDetaileColumns}
                        onChange={handleEvent.revenue.handlaChangeTable}
                        total={revenueState.total}
                    />
                </Result>
            </OverviewItem>
            <OverviewItem name='服务异常排行' onChange={handleEvent.serverFail.handleChangeTimeType}>
                <Result error={serverFailState.error} onRetry={() => requestFail()}>
                    <Ranks
                        loading={serverFailState.loading}
                        dataSource={serverFailState.dataSource}
                        columns={serverFailColumns}
                        detaileColumns={serverFailDetailColumns}
                        onChange={handleEvent.serverFail.handlaChangeTable}
                        total={serverFailState.total}
                    />
                </Result>
            </OverviewItem>
        </div>
    );
};
export default serviceOverview;
