/** @format */
import * as React from 'react';
import {Progress, Empty, List, Row, Col, Spin} from 'antd';
import {Chart, Geom, Axis, Tooltip, Coord, Legend} from 'bizcharts';
import {defaultColors} from '../../../../../const/status';
import {getRandomColor, reduceRate} from '../../../../../utils/operation';
const DataSet = require('@antv/data-set');
const {DataView} = DataSet;

interface Iprops {
    dataSource?: {fildName: string; value: number; [propIndex: string]: any}[];
    loading?: boolean;
}
const colors = defaultColors.slice();

const Result: React.FC<Iprops> = props => {
    const {dataSource = [], loading = false} = props;

    while (colors.length < dataSource.length) {
        const randomColors = getRandomColor();
        if (!colors.includes(randomColors)) {
            colors.push(randomColors);
        }
    }
    const dv = new DataView();
    dv.source(dataSource).transform({
        type: 'percent',
        field: 'value',
        dimension: 'fildName',
        as: 'percent',
    });
    const totalCount = dataSource.reduce((pre, next) => {
        return pre + next.value;
    }, 0);
    return (
        <Spin spinning={loading}>
            {dataSource.length === 0 ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <>
                    <Chart height={400} data={dv} padding='auto' forceFit>
                        <Coord type='theta' radius={0.65} />
                        <Axis name='percent' />
                        <Legend position='right' />
                        <Tooltip showTitle={false} />
                        <Geom
                            type='intervalStack'
                            position='percent'
                            color={['fildName', colors]}
                            tooltip={[
                                'fildName*percent*value',
                                (item, percent, value) => {
                                    percent = reduceRate(percent);
                                    return {
                                        name: item,
                                        value: `调用次数:${value}次`,
                                    };
                                },
                            ]}
                            style={{
                                lineWidth: 1,
                                stroke: '#fff',
                            }}
                        />
                    </Chart>
                    <List
                        size='small'
                        header={null}
                        footer={null}
                        bordered={false}
                        dataSource={dataSource}
                        renderItem={(item, index) => (
                            <Row gutter={24}>
                                <Col span={8}>{`${item.fildName}：${item.msg || ''}`}</Col>
                                <Col span={12}>
                                    <Progress
                                        percent={parseFloat(reduceRate(item.count / totalCount))}
                                        strokeColor={colors[index]}
                                    />
                                </Col>
                                <Col span={4}>{item.count}</Col>
                            </Row>
                        )}
                    />
                </>
            )}
        </Spin>
    );
};
export default Result;
