<script setup>
import {computed, ref} from 'vue'
import {Base64} from 'js-base64'
import { useRouter } from 'vue-router'
import {useUserInfo} from '@/hooks/common'
import {useCachedViewsStore} from '@/store/modules/cachedViews'
import {_apiLogin} from '@/api/user'

const cachedViewsStore=useCachedViewsStore()

const cachedViewsList=computed(()=>{
    return cachedViewsStore.cachesList||[]
})
let CompanyName = ref('')

const router=useRouter()

let userInfo=useUserInfo()
let showUserInfo=ref(false)


function handleLoginOut(){
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    router.replace('/login')
}

function goBack(){
    if(window.history.state.back){
        router.back()
    }else{
        router.replace('/tabbar/home')
    }
}

function getCompanyName(){
    _apiLogin.getBaseInfo().then(res=>{
        if(res.Ret == 200){
            CompanyName.value = res.Data.CompanyName.ConfVal;
        }
    })
}
getCompanyName()

</script>

<template>
    <div class="layout-wrap">
        <div class="pad-header-box" v-if="!$route.meta.noHead">
            <div>
                <div 
                    class="back-home-box"
                    @click="goBack"
                    v-if="!$route.meta.noBack"
                >返回上级</div>
            </div>
            <van-popover v-model:show="showUserInfo" placement="bottom-end">
                <div class="userinfo-box_pad" v-if="userInfo">
                    <div class="info-item">
                        <span>姓名：</span>
                        <span>{{userInfo.RealName}}</span>
                    </div>
                    <div class="info-item">
                        <span>ID：</span>
                        <span>{{userInfo.AdminName}}</span>
                    </div>
                    <div class="info-item">
                        <span>公司名称：</span>
                        <span>{{ CompanyName }}</span>
                    </div>
                    <div class="info-item">
                        <span>所属部门：</span>
                        <span>{{userInfo.GroupName || userInfo.DepartmentName}}</span>
                    </div>
                    <div class="info-item">
                        <span>角色：</span>
                        <span>{{userInfo.RoleName}}</span>
                    </div>
                    <van-button class="login_out_btn" block type="primary" round @click="handleLoginOut">退出登录</van-button>
                </div>
                <template #reference>
                    <div class="user-box" v-if="userInfo">
                        <img class="avatar" src="@/assets/imgs/userLogo.png" alt="">
                        <span>{{userInfo.RealName}}，欢迎您！</span>
                    </div>
                </template>
            </van-popover>
        </div>
        <router-view v-slot="{ Component }">
            <keep-alive :include="cachedViewsList">
                <component :is="Component" :key="$route.fullPath"/>
            </keep-alive>
        </router-view>
        <!-- 回到顶部 -->
        <van-back-top v-if="$route.meta.hasBackTop"/>

    </div>
</template>

<style lang="scss">
@media screen and (min-width:650px){
    .userinfo-box_pad{
        padding: 20px;
        .info-item{
            padding: 5px 0;
        }
        .login_out_btn{
            width: 50%;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

</style>

<style lang="scss" scoped>
.layout-wrap{
    overflow:visible;
}
.pad-header-box{
    display: none;
}

@media screen and (min-width:$media-width){
    .pad-header-box{
        display: block;
        height: 60px;
        position: sticky;
        top: 0;
        width: 100%;
        padding:0 30px;
        border-bottom: 1px solid $border-color;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 999;
        background-color: #fff;
        .user-box{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: 16px;
            width: 350px;
            .avatar{
                width: 40px;
                margin-right: 5px;
            }
        }
        .back-home-box{
            color: $theme-color;
            font-size: 16px;
            display: flex;
            align-items: center;
            cursor: pointer;
            &::before{
                content: '';
                display: block;
                width: 20px;
                height: 20px;
                background-image: url('@/assets/imgs/icon_back.png');
                background-size: cover;
                margin-right: 5px;
                position: relative;
                top: -2px;
            }
        }
    }
}
</style>