import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Modal, message as Message, Dropdown, Button, Menu, Popover, Tag, Row, Col } from 'antd'
import { isEqual } from 'lodash'
import store from 'store'
import { api } from 'common/api'
import { token } from 'common/token'
import { AntIcon, Image } from 'components'

const { getState, dispatch, subscribe } = store

const storePath = 'user'

class User extends Component {
    state = {
        user: getState(storePath),
    }

    constructor(props) {
        super(props)

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

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

    componentWillUnmount() {
        this.unsubscribe()
    }

    onAccountSetting = () => {
        window.openContentWindow({
            id: 'account-home',
            title: '个人设置',
            icon: '',
            path: '/system/account',
        })
    }

    onLogout = () => {
        Modal.confirm({
            title: '提示',
            content: '是否确定退出登录',
            onOk: async () => {
                const { success, message } = await api.logout()
                if (success) {
                    token.value = ''
                    dispatch({ type: 'RESET_USER_ACCOUNT' })
                    dispatch({ type: 'RESET_NAV' })
                    this.props.history.replace('/login')
                } else {
                    Message.error(message)
                }
            },
        })
    }

    renderMenu() {
        const { user } = this.state

        return (
            <>
                <div className="p-md pb-xs">
                    <Row align="bottom" justify="space-between">
                        <Col>
                            <b className="h5">{user.nickName || user.name}</b>
                        </Col>
                        <Col>
                            <span className="text-gray">{user.account}</span>
                        </Col>
                    </Row>
                    <p className="text-gray">上次登录时间：{user.lastLoginTime}</p>
                    {user.adminType === 1 && (
                        <Tag color="pink" className="mb-xs">
                            超级管理员
                        </Tag>
                    )}
                    {user.roles &&
                        user.roles.map(role => (
                            <Tag key={role.id} color="purple" className="mb-xs">
                                {role.name}
                            </Tag>
                        ))}
                </div>
                <Menu selectable={false}>
                    <Menu.Divider />
                    <Menu.Item key="1" onClick={() => this.onAccountSetting()}>
                        <AntIcon type="user" className="mr-sm" />
                        个人中心
                    </Menu.Item>
                    <Menu.Item key="2">
                        <AntIcon type="file-text" className="mr-sm" />
                        操作手册
                    </Menu.Item>
                    <Menu.Divider />
                    <Menu.Item key="-1" onClick={() => this.onLogout()}>
                        <AntIcon type="logout" className="mr-sm" />
                        退出登录
                    </Menu.Item>
                </Menu>
            </>
        )
    }

    render() {
        const { user } = this.state

        return (
            <div className="user-container">
                <div className="user-container-inner">
                    <Popover
                        arrowPointAtCenter={true}
                        overlayClassName="yo-user-popover"
                        placement="bottomRight"
                        content={this.renderMenu()}
                    >
                        <div className="user--base">
                            <Image
                                width="32"
                                type="avatar"
                                className="user--avatar"
                                icon={<AntIcon type="user" />}
                                id={user.avatar}
                            />
                        </div>
                    </Popover>
                </div>
            </div>
        )
    }
}

export default withRouter(User)
