import ReactECharts from 'echarts-for-react';
import React, { useEffect, useState, useMemo } from 'react';
import agent from '../Server';
import { useHistory } from 'react-router-dom';
const TaskChart = (props: any) => {
    const params = useMemo(() => props.data, [props.data]);
    const [series, setSeries] = useState();
    const [total, setTotal] = useState(0);
    const [daichuli, setDai] = useState(0);
    const [yichuli, setYI] = useState(0);
    const [yijiezhi, setJie] = useState(0);
    const history = useHistory();
    useEffect(() => {
        (async () => {
            const res: any = await agent.post('/web/verifier/dashboard/taskAbeyance', params, this);
            if (res.err) {
                return;
            } else {
                res.res.task.forEach(item => {
                    if (item.name === '待处理') {
                        setDai(item);
                    } else if (item.name === '已处理') {
                        setYI(item);
                    } else if (item.name === '已截止') {
                        setJie(item);
                    }
                })
                const count = res.res.task.reduce((previousValue, currentValue) => {
                    return previousValue + currentValue.value
                }, 0)
                setSeries(res.res.task);
                setTotal(count);
            }
        })()
    }, [params]);
    const getOption = () => {
        const option = {
            legend: {
                data: ['已完成', '待处理', '已截止',],
                left: 0,
                itemWidth: 14,
                icon: 'circle',
            },
            xAxis: {
                type: 'value',
                show: false
            },
            yAxis: {
                type: 'category',
                show: false
            },
            grid: {
                left: 5,
                right: '10%',
                bottom: '3%',
                top: '30'
            },
            barWidth: 8,
            barGap: '240%',
            series: [
                {
                    name: '已完成',
                    type: 'bar',
                    stack: 'one',
                    data: [yichuli],
                    itemStyle: { color: '#02A0FC', borderRadius: 5 },
                    label: {
                        show: true,
                        position: 'inside'
                    },
                },
                {
                    name: '待处理',
                    type: 'bar',
                    stack: 'two',
                    data: [daichuli],
                    itemStyle: { color: '#0A00BE', borderRadius: 5 },
                    showBackground: true,
                    backgroundStyle: {
                        color: '#A9A3ED',
                        borderRadius: 5
                    },
                    label: {
                        show: true,
                        position: 'inside'
                    },
                },
                {
                    name: '已截止',
                    type: 'bar',
                    stack: 'two',
                    data: [yijiezhi],
                    showBackground: true,
                    backgroundStyle: {
                        color: '#A9A3ED',
                        borderRadius: 5
                    },
                    itemStyle: { color: '#A9A3ED ', borderRadius: 5 },
                    label: {
                        show: true,
                        position: 'inside'
                    },
                },
            ]
        };
        return option
    }
    const onChartClick = (target) => {
        const data = {
            status: target.data.key,
            ...params,
        }
        history.push({ pathname: '/task/list/task', state: data })
    }
    const onEvents = {
        'click': onChartClick,
    }
    return (
        <div style={{ display: 'flex', width: '100%', height: 142, padding: '20px 30px', marginRight: 20, 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: 40 }}>{total}</div>
            </div>
            <ReactECharts style={{ flex: 1, height: '100%' }} option={getOption()} onEvents={onEvents} />
        </div>
    )
}
export default TaskChart;