import React, { Component } from 'react'
import { Card, Col, Descriptions, Row, Statistic } from 'antd'
import { api } from 'common/api'
import { Container } from 'components'
import { isEqual } from 'lodash'
import moment from 'moment'

import Base from './base'
import UseCharts from './use-charts'
import DiskCharts from './disk-charts'

export default class index extends Component {
    state = {
        loading: true,
        base: {},
        network: {},
    }

    shouldComponentUpdate(props, state) {
        return !isEqual(this.state, state) || this.props.paneActived !== props.paneActived
    }

    async componentDidMount() {
        try {
            const { data: base } = await api.sysMachineBase()
            this.setState({ loading: false, base })
        } catch {}
    }

    render() {
        const { paneActived } = this.props

        const { loading } = this.state

        return (
            <Container mode="fluid">
                <br />
                <Row gutter={16}>
                    {!loading && <Base {...this.state} />}
                    {!loading && <UseCharts {...this.state} actived={paneActived} />}
                    {!loading && <DiskCharts {...this.state} />}
                </Row>
            </Container>
        )
    }
}
