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 {
            angleAxis: {
                type: 'category',
                data: ['应用服务中心', '技术管理', '综合管理', '进度管理', '质量管理', '安全管理', '其它']
            },
            radar: [
                {
                    indicator: [
                        { text: '' },
                        { text: '' },
                        { text: '' },
                        { text: '' },
                        { text: '' },
                        { text: '' },
                        { text: '' },
                    ],
                    radius: '80%',
                    splitNumber: 12,
                    shape: 'circle',
                    splitArea: {
                        areaStyle: {
                            color: '#fff',
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#d4d4d4'
                        }
                    },
                },
            ],
            radiusAxis: {
                min: 0,
                max: 20,
                interval: 2,
                // 刻度
                axisTick: {
                    show: false
                },
                //刻度数值
                axisLabel: {
                    show: false
                },
                // 线
                axisLine: {
                    show: false
                },
            },
            polar: {},
            series: [
                {
                    stack: 'a',
                    type: 'pie',
                    center: ['50%', '50%'],
                    selectedOffset: 0,
                    radius: [0, 140],
                    roseType: 'area',
                    itemStyle: {　 //去除饼图的指示折线label
                        normal: {
                            label: {
                                show: false,
                            },
                            borderRadius: 8
                        },
                    },
                    data: [
                        { value: 40, name: '应用服务中心' },
                        { value: 32, name: '技术管理' },
                        { value: 30, name: '综合管理' },
                        { value: 30, name: '进度管理' },
                        { value: 28, name: '质量管理' },
                        { value: 28, name: '安全管理' },
                        { value: 18, name: '其它' },
                    ]
                }
            ]
        }
    }, [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', display: 'flex', alignItems: 'center' }}>
                    <div style={{ width: 5, height: 25, backgroundColor: '#259def', marginRight: 10 }}></div>
                    {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