import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux';
import { getFundamental } from '../actions/data';
import * as echarts from "echarts"
import "../style.less"

const DateModal = (props) => {
    const { dispatch } = props
    const [lists, setLists] = useState([])
    const [keys, setKeys] = useState([])
    const [days, setDays] = useState()
    const [unkeys, setUnkeys] = useState([])
    const [num, setNum] = useState(1)
    useEffect(() => {
        // 获取数据
        dispatch(getFundamental()).then(res => {
            setDays(res.payload.data.date)

        })
    }, [true])

    const op = () => {
        // 把获取的数据进行加工
        if (days && num == 1) {

            var daysValues = Object.values(days)
            var daysKeys = Object.keys(days)
            var list = []
            var arr = []
            var months = []
            for (let index = 6; index >= 0; index--) {
                list.push(daysValues[index])
            }
            setLists(list)
            for (let index = 6; index >= 0; index--) {
                arr.push(daysKeys[index].substring(8))
            }
            for (let index = 6; index >= 0; index--) {
                months.push(daysKeys[index].charAt(5) + "" + daysKeys[index].charAt(6))
            }
            setUnkeys(months)
            setKeys(arr)
            setNum(2)
        }
    }
    op()
    useEffect(() => {
        let a = ([...keys])
        let list = []
        for (let index = 0; index < 7; index++) {
            list.push(a[index])
        }
        for (let index = 0; index < 7; index++) {
            list[index] = list[index] + "日"
        }
        var myChart = echarts.init(document.getElementById('echarts'));
        // window.onresize在重复使用过程中会被覆盖
        // window.onresize = myChart.resize;
        // addEventListener来添加监听resize的事件，将能避免onresize的覆盖问题，并能实现对窗口的监听操作
        window.addEventListener("resize", function () {
            myChart.resize()
        })
        var option = {
            title: {
                text: '近七日填报数量',
                left: "7%"
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var htmlStr = `填报数量:${params.value}条<br/>${unkeys[params.dataIndex] + "月" + params.name}<br/>`
                    return htmlStr;
                }
            },
            xAxis: {
                type: 'category',
                data: list,
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    name: '填报数量',
                    type: 'bar',
                    data: lists,
                    barWidth: 40
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }, [lists])
    return (
        <div id='echarts'></div>
    )
}
function mapStateToProps(state) {
    const { auth, depMessage, depUser, global } = state;
    return {
        user: auth.user,
        clientHeight: global.clientHeight,
        loading: depMessage.isRequesting,
        depMessage: depMessage.data || [],
        depUser: depUser.data || []
    };
}
export default connect(mapStateToProps)(DateModal)