<template>
    <el-dropdown @command="onMenuClick" :hide-on-click="true" class="user-el-dropdown" :disabled="!userInfo.name">
        <div class="name" @click="(e) => e.preventDefault()">
            <!-- show & if 的vue指令 仅用于适配移动端 -->
            <div v-show="settingStore.getWindowWidth > 425">
                <span>{{ $t(`${userInfo.name ? userInfo.name : '游客'}`) }}</span>
                <span>{{ initInfo?.department?.name }}</span>
            </div>
            <el-avatar
                v-if="settingStore.device === 'mobile'"
                :style="{
                    'font-size': fontSizeObj.baseFontSize,
                    'background-color': 'var(--el-color-primary)',
                    'margin-top': '8px'
                }"
                :src="userInfo.avator ? userInfo.avator : ''"
            >
                {{ userInfo.loginName ? userInfo.loginName : '游' }}
            </el-avatar>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="personalCenter">
                    <div
                        class="el-dropdown-item"
                        :style="{ 'font-size': fontSizeObj.baseFontSize, 'line-height': fontSizeObj.lineHeight }"
                    >
                        <i class="ri-user-line"></i>{{ $t('个人中心') }}
                    </div>
                </el-dropdown-item>
                <el-dropdown-item command="signIn">
                    <div
                        class="el-dropdown-item"
                        :style="{ 'font-size': fontSizeObj.baseFontSize, 'line-height': fontSizeObj.lineHeight }"
                    >
                        <i class="ri-calendar-check-line"></i>{{ $t('已签到') }}
                    </div>
                </el-dropdown-item>
                <el-dropdown-item command="signOut">
                    <div
                        class="el-dropdown-item"
                        :style="{ 'font-size': fontSizeObj.baseFontSize, 'line-height': fontSizeObj.lineHeight }"
                    >
                        <i class="ri-bookmark-line"></i>{{ $t('已签退') }}
                    </div>
                </el-dropdown-item>
                <el-divider style="padding-bottom: 12px; margin: 0px; margin-top: 6px"></el-divider>
                <el-dropdown-item command="changeDept">
                    <div
                        class="el-dropdown-item"
                        :style="{ 'font-size': fontSizeObj.baseFontSize, 'line-height': fontSizeObj.lineHeight }"
                    >
                        <i class="ri-route-line"></i>{{ $t('选择切换部门') }}
                    </div>
                </el-dropdown-item>
                <el-dropdown-item>
                    <div
                        class="el-dropdown-item"
                        :style="{ 'font-size': fontSizeObj.baseFontSize, 'line-height': fontSizeObj.lineHeight }"
                        v-for="item in departmentMapList"
                        :key="item.departmentId"
                        style="text-align: center"
                        @click="changeDept(item.departmentId)"
                        >{{ item.departmentName }}</div
                    >
                </el-dropdown-item>
                <el-divider style="padding-bottom: 5px; margin: 0px"></el-divider>
                <el-dropdown-item command="logout">
                    <div
                        class="el-dropdown-item"
                        :style="{ 'font-size': fontSizeObj.baseFontSize, 'line-height': fontSizeObj.lineHeight }"
                    >
                        <i class="ri-logout-box-r-line"></i>{{ $t('退出') }}
                    </div>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
    <!-- <PersonInfo ref="personInfo"/> -->
</template>
<script lang="ts">
    import { ref, watch, inject, defineComponent } from 'vue';
    import { useRouter } from 'vue-router';
    import { useSettingStore } from '@/store/modules/settingStore';
    import y9_storage from '@/utils/storage';
    import IconSvg from './IconSvg';
    import { $y9_SSO } from '@/main';
    // import PersonInfo from '@/views/personal/personInfo.vue';
    interface RightTopUserSetupData {
        settingStore?: any;
        userInfo: Object;
        initInfo: Object;
        departmentMapList: Object;
        onMenuClick: (event: any) => Promise<void>;
        fontSizeObj: Object;
    }
    export default defineComponent({
        name: 'RightTopUser',
        components: {
            IconSvg
            // PersonInfo
        },
        setup(): RightTopUserSetupData {
            const settingStore = useSettingStore();
            // 注入 字体变量
            const fontSizeObj: any = inject('sizeObjInfo');
            const router = useRouter();
            // const personInfo = ref();
            // 获取当前登录用户信息
            const userInfo = y9_storage.getObjectItem('ssoUserInfo');
            const initInfo = y9_storage.getObjectItem('initInfo');
            const departmentMapList = y9_storage.getObjectItem('departmentMapList');
            // 点击菜单
            const onMenuClick = async (command: string) => {
                switch (command) {
                    case 'personalCenter':
                        // personInfo.value.show(userInfo.personId);
                        router.push({ name: 'personInfo' });
                        break;
                    case 'signIn':
                        break;
                    case 'signOut':
                        break;
                    case 'changeDept':
                        break;
                    case 'logout':
                        try {
                            // const loginOut = await this.$store.dispatch("user/logout");
                            const params = {
                                to: { path: window.location.pathname },
                                logoutUrl: import.meta.env.VUE_APP_SSO_LOGOUT_URL + import.meta.env.VUE_APP_NAME + '/',
                                __y9delete__: () => {
                                    // 删除前执行的函数
                                    console.log('删除前执行的函数');
                                }
                            };
                            $y9_SSO.ssoLogout(params);
                        } catch (error) {
                            this.$message.error(error.message || 'Has Error');
                        }
                        break;

                    default:
                        break;
                }
            };
            return {
                settingStore,
                userInfo,
                initInfo,
                departmentMapList,
                onMenuClick,
                fontSizeObj
                // personInfo
            };
        }
    });
</script>
<style lang="scss" scoped>
    @import '@/theme/global-vars.scss';
    .user-el-dropdown {
        z-index: 9999;
        height: $headerHeight;
        outline: none;

        :deep(.el-dropdown--default) {
            display: flex;
            align-items: center;
        }
    }
    .name {
        color: var(--el-text-color-primary);
        font-size: v-bind('fontSizeObj.baseFontSize');
        display: flex;
        & > div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            span {
                line-height: 20px;
                text-align: end;
            }
        }
        i {
            color: var(--el-color-primary);
            font-size: 48px;
            margin-left: 8px;
        }
    }

    .el-dropdown-item {
        width: 100%;
        display: flex;
    }
</style>
