import ReactECharts from 'echarts-for-react';
import React, { useEffect, useState, useMemo } from 'react';
import { useHistory } from 'react-router-dom';
import agent from '../Server';
const ProductChart = (props: any) => {
    const params = useMemo(() => props.data, [props.data]);
    const [series, setSeries] = useState();
    const [total, setTotal] = useState(0);
    const history = useHistory();
    const [isLarge, setLarge] = useState(false);
    useEffect(() => {
        (async () => {
            let res: any = await agent.post('/web/verifier/dashboard/goodsAbeyance', params, this);
            if (res.err) {
                return;
            } else {
                // res.res.goods=[
                //     {
                //         "key":1,
                //         "name":"有效",
                //         "value":"55"
                //     },
                //     {
                //         "key":2,
                //         "name":"无效",
                //         "value":"61.73"
                //     }
                // ]
                let count = res.res.goods.reduce((previousValue, currentValue) => {
                    return Number(previousValue) + Number(currentValue.value)
                }, 0).toFixed(2);

                let unit = '';
                if (count > 100000) {
                    count = (count / 10000).toFixed(2);
                    setLarge(true);
                    unit = '万'
                }
                const data = res.res.goods.map((item) => {
                    if (item.value > 100000) {
                        item.value = (item.value / 10000).toFixed(2);
                    }
                    return {
                        ...item,
                        data: [{ ...item, value: Number(item.value) }],
                        id: item.key,
                        itemStyle: { borderRadius: 5 },
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: `{c}${unit}`
                        },
                    }
                })
                setSeries(data);
                setTotal(count);
            }
        })()
    }, [params]);
    const getProductOption = () => {

        const option = {
            xAxis: {
                type: 'value',
                show: false
            },
            yAxis: {
                type: 'category',
                show: false
            },
            grid: {
                left: 5,
                right: '10%',
                bottom: '3%',
                top: '30'
            },
            legend: {
                left: 0,
                itemWidth: 14,
                icon: 'circle',
            },
            barWidth: 8,
            barGap: '240%',
            color: ['#34B53A', '#FFC500'],
            series: series
        };
        return option
    }
    const onChartClick = (target) => {
        const data = {
            includeManyEffectiveStatus: [target.data.key],
            ...params,
        }
        delete data.createTime;
        history.push({ pathname: '/task/list/product', state: data })
    }
    const onEvents = {
        'click': onChartClick,
    }
    return (
        <div style={{ display: 'flex', width: '100%', height: 142, padding: '20px 30px', borderRadius: 5, boxShadow: '0 0 7px 0 rgba(0, 0, 0, 0.15)' }}>
            <div style={{ paddingRight: 20, height: '100%', flex: 'none', flexDirection: 'column' }}>
                <div style={{ fontSize: 20 }}>商品总数量</div>
                <div style={{ fontSize: isLarge ? 30 : 40 }}>{total}{isLarge ? '万' : ''}</div>
            </div>
            <ReactECharts style={{ width: '100%', flex: 1, height: '100%' }} option={getProductOption()} onEvents={onEvents} />

        </div>
    )
}
export default ProductChart