<template>
    <div class="userinfo-container" @mouseover="showDropDown = true" @mouseleave="onLeave">
        
        <!-- 登录人头像-->
        <el-avatar :size="24" :src="userStore.avatarUrl" />
        <div class="ab-m-l-6">
            {{ userStore.userName }}
            <!-- {{ ''===userStore.tenantName||null===userStore.tenantName||undefined===userStore.tenantName?'':'['+userStore.tenantName+']' }}{{ userStore.userName }} -->
        </div>
        <el-icon><ArrowRightBold /></el-icon>
        <Transition name="userdropdown">
            <div v-show="showDropDown" class="menu-list-wrap" @mouseover="onEnter" @mouseleave="showDropDown = false">
                <div class="empty"> </div>

                <div class="menu-list">
                    <div class="top">
                        <el-avatar :size="48" :src="userStore.avatarUrl" />
                        <div class="ab-m-l-8">
                            <div class="name"> {{ userStore.userName }}</div>
                            <div class="dept"> {{ userStore.tenantName }}</div>
                        </div>
                    </div>
                    <div class="item area-menu" v-if="switchBusinessDomainEnable" @mouseover="showUserBD = true" @mouseleave="onBDLeave">
                        <div class="item-content"> 
                            <img :src="icUserSwitchPng" style="width: 28px;height: 28px;" />
                            <span>切换业务域</span>
                        </div>
                        <el-icon><ArrowRightBold /></el-icon>
                        <Transition name="businessdomain">
                            <div class="area-list-wrap" v-show="showUserBD" @mouseover="onBDEnter" @mouseleave="showUserBD = false">
                                <div v-for="bd of businessDomain" :key="bd.id" >
                                    <div class="area-item-choose" v-if="bd.id===currentBusinessDomain.id">
                                        <img :src="icUserBssPng" style="width: 28px;height: 28px;" />
                                        <span>[{{ bd.id }}]{{ bd.name }}</span>
                                    </div>
                                    <div class="area-item" v-else @click="confirmBusinessDomain(bd)">
                                        <img :src="icUserBssPng" style="width: 28px;height: 28px;" />
                                        <span>[{{ bd.id }}]{{ bd.name }}</span>
                                    </div>
                                </div> 
                            </div>
                        </Transition>
                    </div>
                    <div v-if="settingsStore.showPersonalCenter" class="item" @click="personalCenterShow=true">
                        <div class="item-content"> 
                            <img :src="icUserUsercenterPng" style="width: 28px;height: 28px;" />
                            <span>个人中心</span>
                        </div>
                        <el-icon><ArrowRightBold /></el-icon>    
                    </div>
                    <div v-if="settingsStore.showDownloadCenter" class="item" @click="downloadCenterShow=true">
                        <div class="item-content"> 
                            <img :src="icUserFilesPng" style="width: 28px;height: 28px;" />
                            <span>文件中心</span>
                        </div>
                        <el-icon><ArrowRightBold /></el-icon> 
                    </div>
                    <div class="item" @click="logout">
                        <div class="item-content"> 
                            <img :src="icUserlogoutPng" style="width: 28px;height: 28px;" />
                            <span>退出登录</span>
                        </div>
                        <el-icon><ArrowRightBold /></el-icon> 
                    </div>
                </div>
            </div>
        </Transition>
    </div>
    
    <el-dialog v-model="sbdDialogVisible" title="切换业务域" width="30%" >
        <div style="display: flex;justify-content: center; align-items: center;">
            <el-text type="primary" size="large">[{{ tempBusinessDomain.id }}]{{ tempBusinessDomain.name }}</el-text>
        </div>
        <div><el-text type="warning">提示：确认切换后，将关闭其他标签页，并刷新当前页</el-text></div>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="sbdDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="switchBusinessDomain()">确认</el-button>
        </span>
        </template>
    </el-dialog>

    <!--个人中心-->
    <el-drawer v-model="personalCenterShow" append-to-body direction="rtl" size="85%" title="个人中心">
        <PersonalCenter v-if="personalCenterShow"></PersonalCenter>
    </el-drawer>
    <!--文件中心-->
    <el-drawer v-model="downloadCenterShow" append-to-body direction="rtl" size="85%" title="文件中心">
        <DownloadCenter v-if="downloadCenterShow"></DownloadCenter>
    </el-drawer>

</template>

<script setup lang="ts">
import PersonalCenter from "@/framework/layoutpublic/PersonalCenter/index.vue"
import DownloadCenter from "@/framework/layoutpublic/DownloadCenter/index.vue"
import icUserSwitchPng from '@/assets/img/icon/ic_user_switch.png'
import icUserBssPng from '@/assets/img/icon/ic_user_bss.png'
import icUserUsercenterPng from '@/assets/img/icon/ic_user_usercenter.png'
import icUserdownloadcenterPng from '@/assets/img/icon/ic_user_downloadcenter.png'
import icUserFilesPng from '@/assets/img/icon/ic_user_files.png'
import icUserlogoutPng from '@/assets/img/icon/ic_user_logout.png'
import { useSettingsStore } from "@/framework/store/modules/settings";
import { useUserStore,setCurrentBusinessDomain,getCurrentBusinessDomain } from "@/framework/store/modules/user";
import { getBusinessDomain } from '@/framework/api/acas/index'
import { useTagsViewStore } from "@/framework/store/modules/tagsView";
import { useRouter } from "vue-router";

const userStore = useUserStore()

const settingsStore = useSettingsStore()

const showDropDown=ref(false)
let timer:number = 0
const onEnter = ()=>{
    clearTimeout(timer)
}
const onLeave = ()=>{
    timer = window.setTimeout(()=>{
        showDropDown.value = false
    },200)
}

const showUserBD=ref(false)
let bdtimer:number = 0
const onBDEnter = ()=>{
    clearTimeout(bdtimer)
}
const onBDLeave = ()=>{
    bdtimer = window.setTimeout(()=>{
        showUserBD.value = false
    },200)
}

const bgColor=ref(settingsStore.currentLayoutColor.userBackgroundColor)
const bgChooseColor=ref(settingsStore.currentLayoutColor.userChooseColor)


const switchBusinessDomainEnable=ref(false)//切换业务域功能开关
const businessDomain=ref([])//业务域列表
const currentBusinessDomain=ref({})//当前业务域

const personalCenterShow=ref(false)//显示个人中心页面
const downloadCenterShow=ref(false)//显示下载中心页面



/**退出登录 */
const logout = () =>{
    userStore.logout()
}

/**加载业务域 */
const loadBusinessDomain = () => {
    getBusinessDomain().then((data: any) => {
        if(data.length>0){
            switchBusinessDomainEnable.value=true
            businessDomain.value=data
            for (const bd of businessDomain.value) {
                if(bd.defstatus&&1===bd.defstatus&&!currentBusinessDomain.value.id)
                    currentBusinessDomain.value=setCurrentBusinessDomain(bd)
            }
            
        }
    })
}
/**切换业务域 */
const router = useRouter();
const tagsViewStore = useTagsViewStore();
const sbdDialogVisible =ref(false)
const tempBusinessDomain =ref({})
//确认切换业务域
const confirmBusinessDomain = (row:Object) => {
    sbdDialogVisible.value=true
    tempBusinessDomain.value=row
}
//切换业务域
const switchBusinessDomain = () => {
    if(undefined===tempBusinessDomain.value.id){
        ElMessage.error('业务域不存在');
        return false
    }
    currentBusinessDomain.value=setCurrentBusinessDomain(tempBusinessDomain.value)
    sbdDialogVisible.value = false
    tempBusinessDomain.value={}
    /**清空路由缓存，并刷新当前标签页 */
    tagsViewStore.delAllViews().then((res: any) => {
        router.replace({ path: "/redirect"+router.currentRoute.value.fullPath  })
    });
}
onMounted(() => {
    currentBusinessDomain.value=getCurrentBusinessDomain()
    loadBusinessDomain()
});
</script>

<style lang="scss" scoped>
.userinfo-container{
    display: flex;
    align-items: center;
    font-size: 14px;

    background-color: v-bind(bgColor);
    border-radius: 30px;
    padding: 10px 10px;
    cursor: pointer;
    position: reactive;

    .menu-list-wrap{
        // display: none;
        width: 240px;
        position: absolute;
        top: 50px;
        right: 20px;
        z-index: 9999;

        .empty{
            height: 8px;
            background-color: transparent;
        }
        .menu-list{
            background-color: v-bind(bgColor);
            border-radius: 16px;
            padding-bottom: 10px;
            user-select: none;
            .top{
                height: 84px;
                display: flex;
                align-items: center;
                padding-left: 20px;
    
                .dept{
                    font-size: 14px;
                    color: rgba(255,255,255,0.5);
                }
            }
    
            .item{
                height: 44px;
                line-height: 44px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 14px 0 4px;
                // margin: 0 4px;
    
                .item-content{
                    display: flex;
                    align-items: center;
    
                    img{
                        margin-left: 14px;
                        margin-right: 12px
                    }
                }
    
    
                &:hover{
                    background: v-bind(bgChooseColor);
                    border-radius: 8px;
                }
            }
    
            .area-menu{
                position: reactive;
    
                .area-list-wrap{
                    // display: none;
                    width: 240px;
                    position: absolute;
                    top: 80px;
                    right:240px;
                    z-index: 9999;
                    background-color: v-bind(bgColor);
                    border-radius: 16px;
                    padding: 10px 4px;
    
                    .area-item{
                        display: flex;
                        align-items: center;
                        padding-left: 16px;
    
                        img{
                            margin-right: 8px;
                        }
    
                        &:hover{
                            background: v-bind(bgChooseColor);
                            border-radius: 8px;
                        }
                    }
    
                    .area-item-choose{
                        display: flex;
                        align-items: center;
                        padding-left: 16px;
                        background: v-bind(bgChooseColor);
                            border-radius: 8px;
    
                        img{
                            margin-right: 8px;
                        }
                    }
    
                }
    
                &:hover .area-list-wrap{
                    display: block;
                }
            }
        }
    }

    &:hover .menu-list-wrap{
        display: block;
    }
}

.businessdomain-enter-active,
.businessdomain-leave-active,
.userdropdown-enter-active,
.userdropdown-leave-active {
    transition: all 0.3s ease-out;
}

.userdropdown-enter-from,
.userdropdown-leave-to {
    transform: translateY(-10px);
    opacity: 0;
}
.businessdomain-enter-from,
.businessdomain-leave-to {
    transform: translateX(5px);
    opacity: 0;
}
</style>