import React, { Component } from 'react'
import { Row, Col, Divider } from 'antd'
import { isEqual } from 'lodash'
import store from 'store'
import Components from 'components'
import moment from 'moment'
import './index.less'

const { getState, subscribe } = store

const { Container, Image, AntIcon } = Components

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>
            </>
        )
    }
}