import dayjs from 'dayjs';
import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
import ReactECharts from 'echarts-for-react';
import { useEffect, useState, useMemo } from 'react';
import { httppost } from '../../../../utils/request';
import apiurl from '../../../../service/apiurl';

let obj= {  0:'当事人自动履行',1: '行政强制执行'}
const Page = ({ title = '标题' }) => {
    const [echart2, setEchart2] = useState(Object())
    const [inspectordata, setInspectorData] = useState([{}])
    const [plandata, setPlanData] = useState(Object())
    const [problemdata, setProblemData] = useState(Object())
    const [sumTotal, setSum] = useState(0)

    const getPlanOption = useMemo((name, data) => {
        // let total = 0
        // for (let i = 0; i < data.length; i++) {
        //     total = total + Number(data[i].value)
        // }
        return {
            title: {},
            tooltip: {},
            legend: {
                data: Object.values(obj)
            },
            graphic: {
                type: 'text',
                top: 'center',
                left: 'center',
                style: {
                    text: `总计\n${sumTotal}`,
                    fontSize: 20,
                    fontWeight: 'bold',
                    textAlign: 'center'
                }
            },
            series: {
                name: '执行情况',
                type: 'pie',
                // center: ['50%', '50%'],
                // radius: ['35%', '50%'],
                // hoverAnimation: true,
                data: plandata,
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        formatter: '{c}',
                      
                    }
                },
                itemStyle:{
                    color: function (colors) {
                        var colorList = [
                                   '#5b8ff9',
                                   '#5ad8a6',
                                   '#5d7092',
                                   '#f6bd16',
                                   '#6f5ef9',
                                 ];
                        return colorList[colors.dataIndex];
                      }
                }
            }


        }
    }, [plandata])
    console.log(getPlanOption);

    const onOk = (event, index) => {
        if (event !== null) {
            let params = {
                stm: dayjs(new Date(event[0])).format('YYYY-MM-DD HH:mm:ss'),
                etm: dayjs(new Date(event[1])).format('YYYY-MM-DD HH:mm:ss'),
            }
            // getStm(params, index)
            getInfo(params)
        }
    }
    const getInfo=(params)=>{
        let obj1=[]
        let sum=0
        httppost(apiurl.szzf.ajtj.info+2,params).then(res=>{
            res.data.map(item=>{
                obj1.push({value:item.count,name:obj[item.type]})
                sum=sum+item.count
            })
            // debugger;
            setPlanData(obj1)
            setSum(sum)

        })
    }
    useEffect(() => {
        let params = {
            stm: dayjs().startOf("year").format('YYYY-MM-DD HH:mm:ss'),
            etm: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        }
        getInfo(params)
        
    },[])
    return (
        <>
            <div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 20, fontWeight: 'bold', display: 'flex', alignItems: 'center' }}>
                    <div style={{ width: 5, height: 25, backgroundColor: '#259def', marginRight: 10 }}></div>
                    执行情况
                </div>
                <DatePicker.RangePicker
                    style={{ width: 220, }}
                    onChange={(e, index) => onOk(e, 2)}
                    defaultValue={[dayjs().startOf("year"), dayjs()]}
                ></DatePicker.RangePicker>
            </div>
            <ReactECharts
                ref={(e) => setEchart2(e)}
                option={getPlanOption}
                style={{ height: 350 }}
            />
        </>
    )
}
export default Page