/** @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';
const {Paragraph} = Typography;

import {
    useServerCostRank,
    CostRecordProps,
    CostRecordDetailProps,
    useServerFail,
    ServerFailRecordDetailProps,
    ServerFailRecordProps,
} from '../../../service/dashbordProvide';

import Ranks from '../components/rank';
import Button from '../../../components/button';
import OverviewItem from '../components/overviewItem';
import DataOverview from './components/dataOverview';

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

const getNowTime = () => {
    return monent()
        .minute(0)
        .second(0)
        .millisecond(0);
};
const consumeColumns: ColumnProps<CostRecordProps>[] = [
    {
        title: '供应商',
        dataIndex: 'provider_name',
    },
    {
        title: '计费查次',
        dataIndex: 'charge',
        align: 'right',
        render: (text: number) => {
            return text || text === 0 ? formatNumer(text) : '--';
        },
    },
];
const consumeDetaileColumns: ColumnProps<CostRecordDetailProps>[] = [
    {
        title: '接口名称',
        dataIndex: 'provider_api_name',
        key: 'provider_api_name',
    },
    {
        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 serverFailColumns: ColumnProps<ServerFailRecordProps>[] = [
    {
        title: '接口',
        dataIndex: 'provider_api_name',
        key: 'provider_api_name',
        width: 158,
        render: text => {
            return (
                <Tooltip placement='topLeft' title={text}>
                    {text}
                </Tooltip>
            );
        },
    },
    {
        title: '供应商',
        dataIndex: 'provider_name',
        key: 'provider_name',
    },
    {
        title: '异常查次',
        dataIndex: 'fail',
        key: 'fail',
        align: 'right',
        width: 90,
        render: (text: number) => {
            return text || text === 0 ? formatNumer(text) : '--';
        },
    },
];
const serverFailDetailColumns: ColumnProps<ServerFailRecordDetailProps>[] = [
    {
        title: '错误码',
        dataIndex: 'code',
        key: 'code',
    },
    {
        title: '错误码含义',
        dataIndex: 'msg',
        key: 'msg',
        width: 200,
        render: text => {
            return text ? (
                <Tooltip placement='topLeft' title={text}>
                    <Paragraph style={{marginBottom: 0}} ellipsis>
                        {text}
                    </Paragraph>
                </Tooltip>
            ) : (
                '--'
            );
        },
    },
    {
        title: '占比	',
        dataIndex: 'rate',
        key: 'rate',
        align: 'right',
    },
    {
        title: '异常次数',
        dataIndex: 'fail',
        key: 'fail',
        align: 'right',
        render: (text: number) => {
            return <span style={{color: 'red'}}>{formatNumer(text)}</span>;
        },
    },
];

const serviceOverview: React.FC = () => {
    const [state, setState] = React.useState({
        nowTime: getNowTime(),
    });
    //服务成本排行
    const [costState, requestCost] = useServerCostRank();

    //服务异常排行的初始数据
    const [serverFailState, requestFail] = useServerFail();

    // 执行刷新操作(请求所有数据)
    const handleRefresh = () => {
        setState(preState => ({...preState, nowTime: getNowTime()}));
    };
    React.useEffect(() => {
        const params = {
            page_number: 1,
            time_type: 0,
            today_end_timestamp: state.nowTime.unix(),
        };
        requestCost(params);
        requestFail(params);
    }, [state.nowTime]);
    const handleEvent = {
        cost: {
            handleChangeTimeType: (time_type: number) => {
                requestCost({
                    time_type: time_type,
                    page_number: 1,
                });
            },
            handlaChangeTable: ({current}: PaginationProps) => {
                requestCost({
                    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.cost.handleChangeTimeType}>
                <Result error={costState.error} onRetry={() => requestCost()}>
                    <Ranks
                        loading={costState.loading}
                        dataSource={costState.dataSource}
                        columns={consumeColumns}
                        detaileColumns={consumeDetaileColumns}
                        onChange={handleEvent.cost.handlaChangeTable}
                        total={costState.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;
