<template>
    <div class="header flex-wrap">
        <div class="left-header flex-wrap">
            <a-space :size="16">
                <div class="block flex-wrap">
                    <img src="../../assets/images/header-block-icon.png"/>
                </div>
                <div class="logo">
                    <span>{{ block_name }}</span>
                </div>
                <a-divider type="vertical"/>
            </a-space>
        </div>
        <div class="right-header flex-wrap">
            <div class="full-screen" @click="fullScreen">
                <i class="full-screen-icon"></i>
            </div>
            <div class="user-wrap flex-wrap flex-center"
                 @mouseover="isShowMenu=true"
                 @mouseleave="isShowMenu=false"
            >
                <img class="user-icon" src="../../assets/images/default-user-icon.png"/>
                <div class="user-name">{{ user.name || 'admin' }}</div>
                <div class="arrow-down"></div>
                <!--账号信息弹框-->
                <div class="user-menu" v-if="isShowMenu">
                    <div class="menu-item flex-wrap" @click="showUserInfo=true">
                        <span class="ic_user"></span>
                        <span>账户信息</span>
                    </div>
                    <div class="menu-item flex-wrap"
                         @mouseover="isShowVersion=true"
                         @mouseleave="isShowVersion=false">
                        <span class="version-icon"></span>
                        <span>版本信息</span>
                    </div>
                </div>
                <!--版本信息弹出框-->
                <div class="version-info flex-column" v-if="isShowVersion">
                    <div class="info-title">
                        <span class="text">当前版本：</span>
                        <span class="value">{{ version }}</span>
                    </div>
                    <div class="info-split"></div>
                    <div class="info-content flex-wrap">
                        <div class="warn-icon">
                            <i></i>
                        </div>
                        <div class="warn-text">
                            {{ warnText }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a-modal title="账户信息"
                 :visible="showUserInfo"
                 @cancel="showUserInfo=false"
                 :footer="null">
            <div class="user-info-content flex-column">
                <div class="baseInfo flex-wrap">
                    <div class="leftContent">
                        <img src="../../assets/images/default-user-large-icon.png" alt/>
                    </div>
                    <div class="rightContent">
                        <div class="info-wrap flex-wrap">
                            <div class="item">
                                <span class="name">登录账号 ：</span>
                                <span class="value">{{user.username}}</span>
                            </div>
                            <div class="item">
                                <span class="name">手机号码 ：</span>
                                <span class="value">{{ user.mobile }}</span>
                            </div>
                            <div class="item">
                                <span class="name">登录角色 ：</span>
                                <span class="value">{{user.is_super==1?'超级管理员':'普通用户'}}</span>
                            </div>
                            <div class="item time">
                                <span class="name">邮箱 ：</span>
                                <span class="value">{{user.email}}</span>
                            </div>
                            <div class="item time">
                                <span class="name">注册时间 ：</span>
                                <span class="value">{{ user.created_at }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="name">描述</div>
                    <div class="description">
                        <a-input
                            type="textarea"
                            read-only
                            :rows="2"
                            class="mix-input"
                            placeholder
                            :value="user.description"
                            v-model="user.description"
                        />
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import auth from "../../../utils/auth";

export default {
    name: "topHeader",
    data() {
        return {
            showUserInfo: false,
            isShowMenu: false,
            isShowVersion: false,
            user: {},
            routes: [],
            block_name: 'Tableman',
            version: "1.0.0",
            warnText: "本计算机程序受版权法及国际公约的保护，未经授权擅自复制或散布本程序的部分或全部，将承受严厉的民事和刑事处罚，对已知的违反者将给予法律范围内的全面制裁。"
        };
    },
    created() {
        if (auth.getUser()){
            this.user = auth.getUser();
        }
    },

    methods: {
        fullScreen() {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) {
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) {
                document.documentElement.msRequestFullscreen();
            }
        }

    },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
