import React, { Component } from 'react'
import { Card, Col, Row } from 'antd'
import * as echarts from 'echarts'

export default class diskCharts extends Component {
    diskInfo = []

    diskChart1 = []
    diskChart2 = []
    diskChart3 = []
    diskChart4 = []

    constructor(props) {
        super(props)

        const { base } = props

        this.diskInfo = base.diskInfo
    }

    componentDidMount() {
        this.diskInfo.forEach(({ size, freeSpace }, i) => {
            const dom = this.refs[`disk-chart-${i}`]
            this[`diskChart${i}`] = echarts.init(dom)

            const usedSpace = size - freeSpace
            const sizeGB = (size / 1024 / 1024 / 1024).toFixed(1)
            const usedGB = (usedSpace / 1024 / 1024 / 1024).toFixed(1)
            const freeGB = (freeSpace / 1024 / 1024 / 1024).toFixed(1)

            const option = {
                tooltip: false,
                series: [
                    {
                        name: '磁盘使用量',
                        type: 'pie',
                        radius: ['70%', '100%'],
                        label: {
                            show: true,
                            fontSize: '14',
                            position: 'center',
                            formatter: `共 ${sizeGB} GB`,
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                formatter: '{b}{c}GB({d}%)',
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            {
                                value: usedGB,
                                name: '已用',
                                itemStyle: {
                                    color: usedGB / sizeGB >= 0.85 ? '#ff4d4f' : '#007bff',
                                },
                            },
                            {
                                value: freeGB,
                                name: '可用',
                                itemStyle: { color: '#e0e0e0' },
                            },
                        ],
                        hoverAnimation: false,
                        animation: false,
                    },
                ],
            }
            this[`diskChart${i}`].setOption(option)
        })

        window.addEventListener('resize', this.onResizeCharts)
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.onResizeCharts)
    }

    onResizeCharts = () => {
        this.diskInfo.forEach((item, i) => {
            this[`diskChart${i}`].resize()
        })
    }

    render() {
        const { diskInfo } = this

        return (
            <>
                {diskInfo.map((item, i) => (
                    <Col key={i} xl={6} lg={12}>
                        <Card bordered={false}>
                            <div className="h4 mb-md">
                                {item.description}({item.name})
                            </div>
                            <div className="h-200" ref={`disk-chart-${i}`}></div>
                        </Card>
                    </Col>
                ))}
            </>
        )
    }
}
