<template>
    <div class="user-wrapper" :class="theme">
        <a-dropdown>
            <span class="action action-full ant-dropdown-link user-dropdown-menu">
                <span v-if="isDesktop()">欢迎您，{{ userInfo().currentUser }}</span>
            </span>
            <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
                <a-menu-item key="2" @click="updatePassword">
                    <a-icon type="key"/>
                    <span>密码修改</span>
                </a-menu-item>
            </a-menu>
        </a-dropdown>
        <span class="action">
            <a class="logout_title" href="javascript:;" @click="handleLogout">
                <a-icon type="logout"/>
                <span v-if="isDesktop()">注销</span>
            </a>
        </span>
        <a-tooltip placement="topLeft">
            <template slot="title">
                <span>查看版本信息</span>
            </template>
            <span class="action" v-if="isDesktop()" @click="visible = true">
                <a-icon type="deployment-unit"/>
            </span>
        </a-tooltip>
        <user-password ref="userPassword"></user-password>
        <depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>
        <version-model :visible.sync="visible"></version-model>
    </div>
</template>

<script>
    import HeaderNotice from './HeaderNotice'
    import UserPassword from './UserPassword'
    import DepartSelect from './DepartSelect'
    import {mapActions, mapGetters} from 'vuex'
    import {mixinDevice} from '@/utils/mixin.js'
    import VersionModel from "./VersionModel";

    export default {
        name: "UserMenu",
        mixins: [mixinDevice],
        components: {
            VersionModel,
            HeaderNotice,
            UserPassword,
            DepartSelect
        },
        props: {
            theme: {
                type: String,
                required: false,
                default: 'dark'
            }
        },
        data() {
            return {
                visible: false
            }
        },
        methods: {
            ...mapActions(["Logout"]),
            ...mapGetters(["nickname", "avatar", "userInfo"]),
            getAvatar() {
                //console.log('url = '+ window._CONFIG['imgDomainURL']+"/"+this.avatar())
                let url = "../../assets/img/previewAvatar.jpg"
                // if(this.avatar){
                //   url = window._CONFIG['imgDomainURL']+"/"+this.avatar()
                // }
                return url;
            },
            handleLogout() {
                const that = this

                this.$confirm({
                    title: '提示',
                    content: '真的要注销登录吗 ?',
                    onOk() {
                        return that.Logout({}).then(() => {
                            window.location.href = "/";
                            //window.location.reload()
                        }).catch(err => {
                            that.$message.error({
                                title: '错误',
                                description: err.message
                            })
                        })
                    },
                    onCancel() {
                    },
                });
            },
            updatePassword() {
                let username = this.userInfo().account
                this.$refs.userPassword.show(username)
            },
            updateCurrentDepart() {
                this.$refs.departSelect.show()
            }
        }
    }
</script>

<style scoped>
    .logout_title {
        color: inherit;
        text-decoration: none;
    }
</style>
