import ReactECharts from 'echarts-for-react';
import React, { useEffect, useState, useMemo } from 'react';
import agent from '../Server';
import { useHistory } from 'react-router-dom';
const InvoiceChart = (props: any) => {
    const params = useMemo(() => props.data, [props.data]);
    const [series1, setSeries1] = useState();
    const [series2, setSeries2] = useState();
    const [total, setTotal] = useState(0);
    const history = useHistory();
    const [titles, setTitle] = useState();
    useEffect(() => {
        (async () => {
            const res: any = await agent.post('/web/verifier/dashboard/invoiceAbeyance', params, this);
            if (res.err) {
                return;
            } else {
                const colors = ['#5BC49F', '#FFE384'];
                let titles: any = []
                const zhengchang=res.res.inner.find(item=>item.name==='正常');
                const yichang=res.res.inner.find(item=>item.name==='异常');
                const ascOrdesc = yichang >= zhengchang ? 'asc' : 'desc';
                const data = res.res.inner.map((item, key) => {
                    return {
                        ...item,
                        itemStyle: {
                            color: colors[key]
                        }
                    }
                });
                const count = res.res.inner.reduce((previousValue, currentValue) => {
                    return previousValue + currentValue.value
                }, 0);
                res.res.inner.forEach(item => {
                    titles.push(item.name);
                })
                res.res.outer && res.res.outer.forEach(item => {
                    titles.push(item.name);
                })
                const blankData = {
                    value: zhengchang.value,
                    name: 'ghost',
                    itemStyle: { opacity: 0 },
                    tooltip: { show: false },
                    label: { show: false }
                }
                if (ascOrdesc === 'asc') {
                    res.res.outer && res.res.outer.unshift(blankData);
                } else {
                    res.res.outer && res.res.outer.push(blankData);
                }
                setSeries1(data);
                setSeries2(res.res.outer);
                setTotal(count);
                setTitle(titles);
            }
        })()
    }, [params]);
    const getOption = () => {
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c}'
            },
            legend: {
                data: titles,
                orient: 'vertical',
                left: 0,
                itemWidth: 14,
                icon: 'circle',
            },
            color: ['#FFB91A', '#E13223', '#FF8435', '#FF877D'],
            series: [
                {
                    name: '发票数据',
                    type: 'pie',
                    radius: [0, '50%'],
                    label: {
                        position: 'inner',
                        fontSize: 14,
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    data: series1
                },
                {
                    name: '异常数据',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ["50%", "50%"],
                    selectedMode: false,
                    labelLine: {
                        length: 0,
                        lineStyle: {
                            opacity: 0
                        },
                    },
                    label: {
                        position: 'inside',
                        show: false
                    },
                    data: series2
                }
            ]
        };
        return option
    }
    const onChartClick = (target) => {
        if(target.data.name==='ghost'){
            return ;
        }
        let proveStatus = 1, proveMsg = undefined;
        if (target.data.name === '正常') {
            proveStatus = 1;
        } else if (target.data.name === '异常') {
            proveStatus = 2;

        } else {
            proveStatus = 2;
            proveMsg = target.data.key
        }
        const data = {
            proveStatus,
            proveMsg,
            ...params,
        }
        delete data.createTime;
        history.push({ pathname: '/task/list/invoicelist', state: data })
    }
    const onEvents = {
        'click': onChartClick,
    }
    return (
        <div style={{ display: 'flex', flexDirection: 'column', width: '100%', marginRight: 20, height: 325, padding: '20px 20px', borderRadius: 5, boxShadow: '0 0 7px 0 rgba(0, 0, 0, 0.15)' }}>
            <div style={{ display: 'flex', flex: 0, justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ fontSize: 20 }}>发票明细</div>
                <div style={{ fontSize: 14 }}>数量:{total}张</div>
            </div>
            <ReactECharts style={{ flex: 1, height: '100%' }} option={getOption()} onEvents={onEvents} />
        </div>
    )
}
export default InvoiceChart