/**
 * 服务概况 里面的每项实际内容
 * @format */

import * as React from 'react';
import {Row, Col, Badge, Spin} from 'antd';
import {reduceRate} from '../../../utils/operation';
import {ColumnProps, SorterResult, TableCurrentDataSource} from 'antd/es/table';
import {PaginationProps} from 'antd/es/pagination';
import {Chart, Geom, Axis, Tooltip, Coord} from 'bizcharts';
import Table from '../../../components/table';
import {getRandomColor} from '../../../utils/operation';
import {defaultColors} from '../../../const/status';
const DataSet = require('@antv/data-set');
const {DataView} = DataSet;

export interface RankColumnProps<T> extends ColumnProps<T> {
    detail: ColumnProps<any>[];
}
interface RankRecordProps {
    id: number;
    detail: any[];
}
interface RankProps {
    dataSource: RankRecordProps[];
    columns?: ColumnProps<any>[];
    detaileColumns: ColumnProps<any>[];
    loading?: boolean;
    total?: number;
    onChange?: (
        pagination: PaginationProps,
        filters: Record<string | number | symbol, string[]>,
        sorter: SorterResult<any>,
        extra: TableCurrentDataSource<any>,
    ) => void;
}
const colors = defaultColors.slice();
interface RankState {
    detail: any[];
    selected: number[] | string[];
}

const Rank: React.FC<RankProps> = props => {
    const {columns, dataSource, detaileColumns, loading = false, onChange, total} = props;
    const [state, setState] = React.useState<RankState>({
        detail: [],
        selected: [],
    });
    React.useEffect(() => {
        if (dataSource.length > 0) {
            setState(preState => ({
                ...preState,
                selected: [dataSource[0].id],
                detail: dataSource[0].detail.map(element => ({...element, key: element.id + element.filesName})),
            }));
        } else {
            setState(preState => ({...preState, detail: []}));
        }
    }, [dataSource]);

    React.useEffect(() => {
        while (state.detail.length > colors.length) {
            const randomColor: string = getRandomColor();
            if (!colors.includes(randomColor)) {
                colors.push(randomColor);
            }
        }
    }, [state.detail.length]);
    //生成颜色
    React.useEffect(() => {
        detaileColumns.forEach((element, index) => {
            if (index === 0) {
                element.render = (text: string, _: any, index: number) => {
                    return <Badge color={colors[index]} text={text} />;
                };
            }
        });
    }, [detaileColumns]);
    const dv = new DataView();
    dv.source(state.detail).transform({
        type: 'percent',
        field: 'value',
        dimension: 'key',
        as: 'percent',
    });
    //点击切换数据
    const handleChangeRow = (selectedRowKeys: number[] | string[], selectedRows: any[]) => {
        setState(preState => ({
            ...preState,
            selected: selectedRowKeys,
            detail: selectedRows[0].detail.map((element: any) => ({...element, key: element.id + element.filesName})),
        }));
    };
    return (
        <Spin spinning={loading}>
            <Row gutter={24}>
                <Col span={6}>
                    <Table
                        onChange={onChange}
                        bordered={false}
                        rowKey='id'
                        size='small'
                        rowSelection={{selectedRowKeys: state.selected, onChange: handleChangeRow, type: 'radio'}}
                        dataSource={dataSource}
                        columns={columns}
                        pagination={{total: total}}
                        scroll={{x: false}}
                    />
                </Col>
                <Col span={8}>
                    <Chart height={400} data={dv} forceFit>
                        <Coord type={'theta'} />
                        <Axis name='percent' />
                        <Tooltip showTitle={false} />
                        <Geom
                            type='intervalStack'
                            position='percent'
                            color={['key', colors]}
                            tooltip={[
                                'filesName*percent*value',
                                (item, percent, value) => {
                                    return {
                                        name: item,
                                        value: value,
                                    };
                                },
                            ]}
                            style={{
                                lineWidth: 1,
                                stroke: '#fff',
                            }}
                        />
                    </Chart>
                </Col>
                <Col span={10}>
                    <Table
                        bordered={false}
                        rowKey='id'
                        size='small'
                        pagination={false}
                        dataSource={state.detail}
                        columns={detaileColumns}
                        scroll={{x: false, y: 400}}
                    />
                </Col>
            </Row>
        </Spin>
    );
};
export default Rank;
