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';
import { defaults } from 'lodash';
const SalesTop10 = (props: any) => {
    const params = useMemo(() => props.data, [props.data]);
    const [series, setSeries] = useState();
    const [titles, setTitle] = useState();
    const history = useHistory();
    useEffect(() => {
        (async () => {
            let titles: any = []
            const res: any = await agent.post('/web/verifier/dashboard/goodsRanking', { ...params, topNum: 10 }, this);
            if (res.err) {
                return;
            } else {
                const data = res.res.goodsList.map(item => {
                    titles.push(item.name);
                    return {
                        ...item,
                        value: item.total
                    }
                });
                setTitle(titles);
                setSeries(data);
            }
        })()
    }, [params]);
    const getOption = () => {
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c}'
            },
            title: {
                text: '畅销商品top10'
            },
            grid: {
                left: '5',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            barWidth: 40,
            xAxis: {
                type: 'category',
                data: titles,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: { interval: 0, width: 100, hideOverlap: false, overflow: 'truncate', ellipsis: '...' }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [
                {
                    data: series,
                    type: 'bar',
                    itemStyle: {
                        color: '#60ACFC'
                    }
                }
            ]
        };
        return option
    }
    const onChartClick = (target) => {
        const data = {
            goodsName: 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)' }}>
       <ReactECharts style={{ flex: 1, height: '100%' }} option={getOption()} onEvents={onEvents} />
    </div>)
}
export default SalesTop10;