<template>
    <el-dropdown size="large">
        <div class="hc-user-info-bar">
            <!-- img :alt="userInfo?.account" :src="userInfo?.avatar || avatarPng" class="user-avatar" -->
            <img :alt="userInfo?.account" :src="avatarPng" class="user-avatar">
            <div class="user-name">{{ userInfo?.real_name || '还未登录' }}</div>
            <hc-icon fill name="more-2" ui="arrow-icon" />
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in options" :key="item.key">
                    <div class="hc-dropdown-item" @click="handleSelect(item.key)">
                        <hc-icon :name="item.icon" class="icon" />
                        <span class="label">{{ item.label }}</span>
                    </div>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '~src/store'
import { calcDate, isNullES } from 'js-fast-way'
import website from '~src/config/index'
import { LogOut, RefreshToken } from '~store/user'
import avatarPng from '~src/assets/images/avatar.png'
import { getStore } from '~src/utils/storage'

//事件
const emit = defineEmits(['load'])

//变量
const router = useRouter()
const store = useAppStore()
const userInfo = ref(store.userInfo)
const refreshLock = ref(false)

//监听
watch(() => store.userInfo, (info) => {
    userInfo.value = info
    emit('load', info)
})

//渲染完成
onMounted(() => {
    getRefreshToken()
    emit('load', userInfo.value)
})

//刷新token
const getRefreshToken = () => {
    setInterval(() => {
        const token = getStore('access-token', true) || {}
        const date = calcDate(token.datetime, new Date().getTime())
        if (isNullES(date)) return
        if (date.seconds >= website.tokenTime && !refreshLock.value) {
            refreshLock.value = true
            console.log('刷新token')
            RefreshToken().then(() => {
                refreshLock.value = false
            }).catch(() => {
                refreshLock.value = false
                router.push({ name: 'login' })
            })
        }
    }, 10000)
}

const options = [{ key: 'logout', label: '退出登录', icon: 'login-box' }]

const handleSelect = (key) => {
    if (key === 'logout') {
        LogOut()
        window.$message?.info('退出成功')
        router.push({ name: 'login' })
    }
}
</script>

<style lang="scss" scoped>
.hc-user-info-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    cursor: pointer;
    outline: none;
    width: 100%;
    padding: 0 10px;
    .user-avatar {
        width: 26px;
        height: 26px;
        border-radius: 5px;
        background: white;
        object-fit: cover;
    }
    .user-name {
        flex: 1;
        font-size: 16px;
        margin-left: 10px;
        color: white;
    }
    .arrow-icon {
        margin-left: 5px;
        font-size: 20px;
        color: white;
    }
}
.hc-dropdown-item {
    display: flex;
    align-items: center;
    .icon {
        font-size: 14px;
        margin-right: 8px;
    }
}
</style>
