import React from 'react';
import {Container, Segment, Divider, Grid, Label, List} from 'semantic-ui-react';
import {getRequest} from '../../actions';
import {convertTime} from '../../tools';
import AlertItem from './AlertItem';

class DashBoardUnit extends React.Component {
    state = {
        timeOffset: 0,
        timeStr: '',
        show: false
    }

    tick = null;

    runTick = () => {
        let time = Date.now();
        if(Math.floor(time/1000)%5 == 0){
            this.props.getDashboard();
        }
        this.setState({
            timeStr: convertTime((time + this.state.timeOffset), true)
        })
    }

    componentDidMount(){
        this.checkRunTick();
        fetch('/api/system/gettime', getRequest())
            .then(response => response.json())
            .then(json => {
                if(json.status != 1) return this.props.showDialog(json.message);
                let t = Date.now();
                let timeOffset = t - (json.data.record[0].time * 1000);
                this.setState({
                    timeOffset
                })
            })
    }

    componentWillReceiveProps (np) {
        if(np.show != this.state.show) {
            this.setState({
                show: np.show
            }, ()=>{
                this.checkRunTick();
            })
        }
    }

    checkRunTick = () => {
        if(this.state.show){
            this.tick = setInterval(this.runTick, 1000)
        }else{
            clearInterval(this.tick);
            this.props.clearList();
        }
    }

    componentWillUnmount() {
		clearInterval(this.tick);
        this.props.clearList();
	}

    render(){
        let {i18n, data} = this.props;
        if(!this.state.show) return null;
        return (
            <Container style={{fontSize: '20px', marginBottom: '30px'}}>
                <Segment>
                    <Divider horizontal>{i18n&&i18n.t ? i18n.t('dashboard.sysinfo') : ''}</Divider>
                    <Grid columns={3}>
                        <Grid.Column textAlign="center">
                            <Label basic size="large" content={i18n&&i18n.t?i18n.t('dashboard.systime') : ''} />
                            <br />
                            {this.state.timeStr}
                        </Grid.Column>
                        <Grid.Column textAlign="center">
                            <Label basic size="large" content={i18n&&i18n.t?i18n.t('dashboard.sysip') : ''} />
                            <br />
                            {data.ip}
                        </Grid.Column>
                        <Grid.Column textAlign="center">
                            <Label basic size="large" content={i18n&&i18n.t?i18n.t('dashboard.sysversion') : ''} />
                            <br />
                            {data.version}
                        </Grid.Column>
                    </Grid>
                    <Divider horizontal>{i18n&&i18n.t ? i18n.t('dashboard.devstats') : ''}</Divider>
                        <Grid>
                            {
                                data.di.map((t,idx)=>(
                                    <AlertItem key={`di${idx}`} i18n={i18n} name={t.diname} type="di" />
                                ))
                            }
                            {
                                data.leone.map((t,idx)=>(
                                    <AlertItem key={`le${idx}`} i18n={i18n} name={t.leonename} type="leone" />
                                ))
                            }
                        </Grid>
                </Segment>
            </Container>
        )
    }
}

export default DashBoardUnit;