import React, { useEffect, useState } from 'react'
import ReactECharts from 'echarts-for-react'

import { ChartsHeader } from '../../components'
import { useStateContext } from '../../contexts/ContextProvider'
import { getDayScreenUseTime } from '../../service/getDayScreenUseTime/index'

const Line2 = () => {
    const { currentColor, currentMode } = useStateContext()
    let [option, setOption] = useState({})

    /* 生成本周日期, 格式为 MM-DD */
    function convertDate(date) {
        // 格式化日期
        var yyyy = date.getFullYear().toString()
        var mm = (date.getMonth() + 1).toString()
        var dd = (date.getDate() + 1).toString()

        var mmChars = mm.split('')
        var ddChars = dd.split('')

        return (mmChars[1] ? mm : '0' + mmChars[0]) + '-' + (ddChars[1] ? dd : '0' + ddChars[0])
    }

    let currentWeekDates = new Array(7)
    for (let i = 0; i < 7; i++) {
        const curr = new Date()
        currentWeekDates[i] = convertDate(new Date(curr.setDate(curr.getDate() - curr.getDay() + i)))
    }

    let currentWeekFirstScreenTime = new Array(7)
    let bgColor = '#fff'
    let color = ['#0090FF', '#36CE9E', '#FFC005', '#FF515A', '#8B5CFF', '#00CA69']
    let echartData = [
        {
            name: '周一',
            value1: 100
        },
        {
            name: '周二',
            value1: 138
        },
        {
            name: '周三',
            value1: 350
        },
        {
            name: '周四',
            value1: 173
        },
        {
            name: '周五',
            value1: 180
        },
        {
            name: '周六',
            value1: 150
        },
        {
            name: '周日',
            value1: 180
        }
    ]
    let xAxisData = echartData.map(v => v.name)
    for (let i = 0; i < 7; i++) {
        xAxisData[i] = xAxisData[i] + ' ' + currentWeekDates[i]
    }

    const hexToRgba = (hex, opacity) => {
        let rgbaColor = ''
        let reg = /^#[\da-f]{6}$/i
        if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
        }
        return rgbaColor
    }

    useEffect(async () => {
        for (let i = 0; i < 7; i++) {
            let receivedJson = await getDayScreenUseTime('2022-' + currentWeekDates[i])
            let firstScreenTimeH = parseInt(receivedJson.data.lastScreenTime.substring(0, 2))
            let firstScreenTimeM = parseInt(receivedJson.data.lastScreenTime.substring(3, 5))
            let firstScreenTimeS = parseInt(receivedJson.data.lastScreenTime.substring(6, 8))
            if (firstScreenTimeH !== NaN && firstScreenTimeM !== NaN && firstScreenTimeS !== NaN) {
                currentWeekFirstScreenTime[i] = 3600 * firstScreenTimeH + 60 * firstScreenTimeM + firstScreenTimeS
            } else {
                currentWeekFirstScreenTime[i] = NaN
            }
        }

        setOption({
            backgroundColor: bgColor,
            color: color,
            legend: {
                right: 10,
                top: 10
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    let html = ''
                    params.forEach(v => {
                        if (!isNaN(v.value)) {
                            html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                            ${v.seriesName}
                            <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${Math.floor(v.value / 3600) + '时' + Math.floor((v.value % 3600) / 60) + '分钟' + Math.floor(v.value % 60) + '秒'}</span>
                            `
                        } else {
                            html = `<div style="color: #666;font-size: 14px;line-height: 24px">
                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                    ${v.seriesName}
                    <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">该天还尚未开始</span>
                    `
                        }
                    })
                    return html
                },
                extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                        color: '#ffffff',
                        shadowColor: 'rgba(225,225,225,1)',
                        shadowBlur: 5
                    }
                }
            },
            grid: {
                top: 100,
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#333'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#D9D9D9'
                        }
                    },
                    data: xAxisData.map(function (str) {
                        return str.replace(' ', '\n')
                    })
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    // name: '单位：万千瓦时',
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        },
                        formatter: (value, index, format) => {
                            return Math.floor(value / 3600) + '时'
                        }
                    },
                    max: 86400,
                    nameTextStyle: {
                        color: '#666',
                        fontSize: 12,
                        lineHeight: 40
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#E9E9E9'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '最后一次屏幕使用时刻',
                    type: 'line',
                    smooth: true,
                    // showSymbol: false,/
                    symbolSize: 8,
                    zlevel: 3,
                    lineStyle: {
                        normal: {
                            color: color[0],
                            shadowBlur: 3,
                            shadowColor: hexToRgba(color[0], 0.5),
                            shadowOffsetY: 8
                        }
                    },
                    areaStyle: {
                        // normal: {
                        //     color: new echarts.graphic.LinearGradient(
                        //         0,
                        //         0,
                        //         0,
                        //         1,
                        //         [
                        //             {
                        //                 offset: 0,
                        //                 color: hexToRgba(color[0], 0.3)
                        //             },
                        //             {
                        //                 offset: 1,
                        //                 color: hexToRgba(color[0], 0.1)
                        //             }
                        //         ],
                        //         false
                        //     ),
                        shadowColor: hexToRgba(color[0], 0.1),
                        shadowBlur: 10
                    },
                    data: currentWeekFirstScreenTime
                }
            ]
        })
    }, [])

    return (
        <div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl">
            <ChartsHeader category="Line" title="最后屏幕使用时刻" />
            <div className="w-full">
                <ReactECharts option={option} style={{ height: '600px' }}></ReactECharts>
            </div>
        </div>
    )
}

export default Line2