import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import React, { useCallback, useEffect, useState, useMemo } from 'react';
import agent from '../../Server';
import { useHistory } from 'react-router-dom';
const Buystop5 = (props: any) => {
    const params = useMemo(() => props.data, [props.data]);
    const [series, setSeries] = useState();
    const [titles, setTitle] = useState();
    const [total, setTotal] = useState(0);
    const history = useHistory();
    useEffect(() => {
        (async () => {
            let titles: any = []
            const res: any = await agent.post('/web/verifier/dashboard/purchaseRanking', { ...params, topNum: 5 }, this);
            if (res.err) {
                return;
            } else {
                const data = res.res.purchaseList.map(item => {
                    titles.push(item.name);
                    return {
                        ...item,
                        value: item.total
                    }
                });
                const count = res.res.purchaseList.reduce((previousValue, currentValue) => {
                    return previousValue + currentValue.value
                }, 0)
                setTotal(count);
                setTitle(titles);
                setSeries(data);
            }
        })()
    }, [params]);
    const getOption = () => {
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c}'
            },
            title: {
                text: '采购top5'
            },
            grid: {
                left: '5',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            barWidth: 14,
            barGap: '240%',
            xAxis: {
                type: 'value',
                show: false
            },

            yAxis: {
                type: 'category',
                data: titles,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: { interval: 0, width: 100, hideOverlap: false, overflow: 'truncate', ellipsis: '...' }
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: series,
                    label: {
                        show: true,
                        position: 'outside'
                    },
                    itemStyle: {
                        borderRadius: 8,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: '#99D6FE' },
                            { offset: 1, color: '#60ACFC' }
                        ])
                    },
                },
            ]
        };
        return option
    }
    const onChartClick = (target) => {
        const data = {
            buyerName: target.data.name,
            includeManyEffectiveStatus:[1],
            ...params,
        }
        delete data.createTime;
        history.push({ pathname: '/task/list/product', state: data })
    }
    const onEvents = {
        'click': onChartClick,
    }
    return (<div style={{ display: 'flex',width: '100%',height: 325, padding: '20px 30px', borderRadius: 5, boxShadow: '0 0 7px 0 rgba(0, 0, 0, 0.15)' }}>
        {series && <ReactECharts style={{ flex: 1, width: '100%', height: '100%' }} option={getOption()} onEvents={onEvents} />}
    </div>
    )
}
export default Buystop5