import React, { Component } from 'react'
import { Row, Col, Divider } from 'antd'
import { isEqual } from 'lodash'
import store from 'store'
import { Container, Image, AntIcon, Auth } from 'components'
import moment from 'moment'

import Statistics from './statistics'
import Task from './task'
import List from './list'
import Notice from './notice'
import Charts from './charts'

import Inspection from './business/inspection'

const { getState, subscribe } = store

const storePath = 'user'

export default class index extends Component {
    state = {
        [storePath]: getState(storePath),
    }

    constructor(props) {
        super(props)

        this.unsubscribe = subscribe(storePath, () => {
            this.setState(getState(storePath))
        })
    }

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

    componentWillUnmount() {
        this.unsubscribe()
    }

    render() {
        return (
            <>
                <div className="home-header">
                    <Container mode="fluid">
                        <Row align="middle" justify="space-between" type="flex">
                            <Col>
                                <div className="home-header-row">
                                    <div className="home-header-avatar">
                                        <Image
                                            id={this.state.user.avatar}
                                            size={64}
                                            icon={<AntIcon type="UserOutlined" />}
                                            type="avatar"
                                        />
                                    </div>
                                    <div className="home-header-content">
                                        <h4>
                                            {moment().format('A')}好，
                                            <span>
                                                {this.state.user.nickName || this.state.user.name}
                                            </span>
                                            ，欢迎您登录系统！
                                        </h4>
                                        <div>
                                            <span>上次IP：{this.state.user.lastLoginIp}</span>
                                            <Divider type="vertical" />
                                            <span>
                                                上次登录时间：{this.state.user.lastLoginTime}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </Col>
                            <Col>
                                <AntIcon
                                    type="MailOutlined"
                                    style={{ fontSize: '20px', color: '#f80000' }}
                                    className="mr-xs"
                                />
                                您有<a href="/">0</a>封未读邮件，请尽快查收！
                            </Col>
                        </Row>
                    </Container>
                </div>
                <Container mode="fluid" className="home-container">
                    <Row gutter={16}>
                        <Auth auth="inspectionOrg:registerStatus" force>
                            <Col span={24}>
                                <Inspection />
                            </Col>
                        </Auth>
                        <Col span={24}>
                            <Statistics />
                        </Col>
                        <Col lg={12} md={24} xl={16}>
                            <Task />
                            <List />
                        </Col>
                        <Col lg={12} md={24} xl={8}>
                            <Notice />
                            <Charts />
                        </Col>
                    </Row>
                </Container>
            </>
        )
    }
}
