<script setup>
import {Base64} from 'js-base64'
import  {ref} from 'vue'
import { useRouter } from 'vue-router'
import {useUserInfo} from '@/hooks/common'
import {_apiLogin} from '@/api/user'
const router=useRouter()
let CompanyName = ref('')
let userInfo=useUserInfo()

function handleLoginOut(){
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    router.replace('/login')
}
const getSetTitle=()=>{
    _apiLogin.getBaseInfo().then(res=>{
        if(res.Ret == 200){
            CompanyName.value = res.Data.CompanyName.ConfVal;
            document.title=res.Data.TabNameMobile?res.Data.TabNameMobile.ConfVal:''
        }
    })
}

getSetTitle()
</script>

<template>
    <div class="user-page" v-if="userInfo">
        <div class="top-box">
            <img class="avatar" src="@/assets/imgs/userLogo.png" alt="">
            <div>
                <div class="real-name">{{userInfo.RealName}}</div>
                <div  class="admin-name">ID:{{userInfo.AdminName}}</div>
            </div>
        </div>
        <div class="info-list">
            <div class="item">
                <span>{{ $t('my.company_name') }}：</span>
                <span>{{ CompanyName }}</span>
            </div>
            <div class="item">
                <span>{{ $t('my.department') }}：</span>
                <span>{{userInfo.GroupName || userInfo.DepartmentName}}</span>
            </div>
            <div class="item">
                <span>{{ $t('my.role') }}：</span>
                <span>{{userInfo.RoleName}}</span>
            </div>
        </div>
        <van-button 
            class="login_out_btn"
            round 
            block 
            type="primary"
            @click="handleLoginOut"
        >{{ $t('my.log_out') }}</van-button>
    </div>
</template>

<style lang="scss" scoped>
.top-box{
    padding: 80px 40px;
    display: flex;
    align-items: center;
    border-bottom: 10px solid #F2F6FA;
    .avatar{
        width: 136px;
        height: 136px;
        margin-right: 24px;
    }
    .real-name{
        font-size: 32px;
    }
    .admin-name{
        font-size: 32px;
        color: $font-grey;
        margin-top: 18px;
    }
}

.info-list{
    padding: 40px;
    .item{
        padding: 30px 0;
        border-bottom: 1px solid $border-color;
        color: $font-grey;
    }
}
.login_out_btn{
    width: 590px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
}
</style>