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';

const Page = ({title}) => {
    const [echart2, setEchart2] = useState(Object())
    const [inspectordata, setInspectorData] = useState([{}])
    const [plandata, setPlanData] = useState(Object())
    const [problemdata, setProblemData] = useState(Object())
    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: name
            // },
            graphic: {
                type: 'text',
                top: 'center',
                left: 'center',
                style: {
                    text: `总计\n${0}`,
                    fontSize: 20,
                    fontWeight: 'bold',
                    // textAlign: 'center'
                }
            },
            series: {
                name: '圆环图系列名称',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['60%', '80%'],
                hoverAnimation: true,
                data: plandata,
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        formatter: '{c}'
                    }
                }
            }


        }
    },[plandata])
    console.log(getPlanOption);
    
    const onOk = (event, index) => {
        if (event !== null) {
            let params = {
                stm: dayjs(new Date(event[0])).format('YYYY-MM-DD'),
                etm: dayjs(new Date(event[1])).format('YYYY-MM-DD'),
            }
            // getStm(params, index)
        }
    }
    useEffect(()=>{
        let data = [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
          setPlanData(data)
    })
    return (
        <>
            <div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</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