let userOpenTimer, userCloseTimer

let initDropdownHeight

import { PERVIEW_URL } from '@/util/global';

import { doLogout } from '@/common/login'

export default {
    data() {
        return {
            dropdownHeight: 0
        }
    },
    mounted() {
        initDropdownHeight = this.$refs.dropdown.scrollHeight
    },
    methods: {
        onOpen(e) {
            clearTimeout(userCloseTimer)
            e.target.classList.add('open')
            userOpenTimer = setTimeout(() => {
                e.target.classList.add('drop')
                this.dropdownHeight = initDropdownHeight
            }, 300)
        },

        onClose(e) {
            clearTimeout(userOpenTimer)
            e.target.classList.remove('drop')
            this.dropdownHeight = 0
            userCloseTimer = setTimeout(() => {
                e.target.classList.remove('open')
            }, 300)
        },

        onAccountSetting() {
            this.openContentWindow({
                key: 'account-home',
                title: '个人中心',
                icon: 'user',
                path: '/system/account'
            })
        },

        onLogout() {
            this.$confirm({
                title: '提示',
                content: '是否确定退出登录',
                onOk: async () => {
                    await doLogout()
                },
                onCancel() {
                }
            })
        }
    },

    render() {
        return (
            <div onMouseenter={this.onOpen} onMouseleave={this.onClose} class="user-container" >
                <div class="user-container-inner">
                    <div class="user--base">
                        {
                            this.$root.global.info && <yo-image width="32" type="avatar" class="user--avatar" icon="user" id={this.$root.global.info.avatar} />
                        }
                        {
                            this.$root.global.info &&
                            <span
                                class="user--name"
                            >{this.$root.global.info.nickName || this.$root.global.info.name}</span>
                        }
                    </div>
                    <div class="user--dropdown" ref="dropdown" style={{ height: `${this.dropdownHeight}px` }}>
                        <ul class="ant-dropdown-menu ant-dropdown-menu-vertical">
                            <li class="ant-dropdown-menu-item" onClick={this.onAccountSetting}>
                                <a-icon type="user" />
                                个人中心
                            </li>
                            <li class="ant-dropdown-menu-item-divider"></li>
                            <li class="ant-dropdown-menu-item" onClick={this.onLogout}>
                                <a-icon type="logout" />
                                退出登录
                            </li>
                        </ul>
                    </div>
                </div>
            </div >
        )
    }
}