import ReactECharts from 'echarts-for-react';
import React, { useEffect, useState, useMemo } from 'react';
import agent from '../Server';
import { useHistory } from 'react-router-dom';
const AppealChart = (props: any) => {
    const params = useMemo(() => props.data, [props.data]);
    const [series, setSeries] = useState();
    const [total, setTotal] = useState(0);
    const history = useHistory();
    useEffect(() => {
        (async () => {
            const res: any = await agent.post('/web/verifier/dashboard/appealAbeyance', params, this);
            if (res.err) {
                return;
            } else {
                const data = res.res.appeal.map(item => {
                    return {
                        ...item,
                    }
                });
                const count = res.res.appeal.reduce((previousValue, currentValue) => {
                    return previousValue + currentValue.value
                }, 0)
                setSeries(data);
                setTotal(count);
            }
        })()
    }, [params]);
    const getProductOption = () => {
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c}'
            },
            grid: {
                left: 5,
                right: '4%',
                bottom: '3%',
                top: '30'
            },
            legend: {
                orient: 'vertical',
                left: 0,
                top: 10,
                itemWidth: 14,
                icon: 'circle',
            },
            color: ['#FA816D', '#FFB919', '#5BC49F'],
            series: [
                {
                    name: '申诉请求',
                    type: 'pie',
                    radius: [0, '70%'],
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    data: series
                }
            ]
        };
        return option
    }
    const onChartClick = (target) => {

        const data = {
            appealStatus: target.data.key,
            ...params,
        }
        delete data.createTime;
        history.push({ pathname: '/task/list/response', state: data })
    }
    const onEvents = {
        'click': onChartClick,
    }
    return (
        <div style={{ display: 'flex', flexDirection: 'column', width: '100%', 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={{ width: '100%', flex: 1, height: '100%' }} option={getProductOption()} onEvents={onEvents} />

        </div>
    )
}
export default AppealChart