<template>
    <el-dropdown size="large">
        <div class="header-bar user-info-bar">
            <img :alt="userInfo['account']" :src="userInfo['avatar'] || avatarPng" class="user-avatar">
            <span class="user-name">{{ userInfo['real_name'] }}</span>
            <HcIcon name="arrow-down-s" ui="arrow-icon"/>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in options">
                    <div class="hc-dropdown-item" @click="handleSelect(item.key)">
                        <HcIcon :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 website from "~src/config/index";
import avatarPng from '~src/assets/images/avatar.png';
import {RefreshToken, LogOut} from "~sto/user";
import {getStoreData} from '~src/utils/storage'
import {calcDate, isValueNull} from "vue-utils-plus"

//变量
const router = useRouter()
const userStore = useAppStore()
const userInfo = ref(userStore.getUserInfo);
const refreshLock = ref(false);

//监听
watch(() => [
    userStore.getUserInfo
], ([info]) => {
    userInfo.value = info
})

onMounted(() => {
    getRefreshToken()
})

//刷新token
const getRefreshToken = () => {
    setInterval(() => {
        const token = getStoreData("token", true) || {};
        const date = calcDate(token.datetime, new Date().getTime());
        if (isValueNull(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: "my",
        label: "个人中心",
        icon: 'user-3'
    },
    {
        key: "logout",
        label: "退出登录",
        icon: 'login-box'
    }
];

//事件
const emit = defineEmits(['change'])
const handleSelect = async (key) => {
    if (key === 'my') {
        router.push({name: 'user-index'});
    } else if (key === 'logout') {
        await LogOut();
        window.$message?.info('退出成功');
        router.push({name: 'login'});
    }
}
</script>

<style lang="scss" scoped>
.user-info-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
    padding-left: 24px;
    outline: none;
    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: white;
        object-fit: cover;
    }
    .user-name {
        font-size: 16px;
        margin-left: 10px;
        color: #202532;
    }
    .arrow-icon {
        margin-left: 5px;
        font-size: 20px;
        color: #202532;
    }
    &::before {
        position: absolute;
        content: '';
        left: 0;
        width: 0;
        height: 24px;
        border-left: 1px solid #ccd0de;
    }
}
.hc-layout-box .hc-container-view.home .hc-header-view .hc-header-content .user-info-bar {
    color: inherit;
    .user-name {
        color: white;
    }
    .arrow-icon {
        color: white;
    }
    &::before {
        border-left: 1px solid white;
    }
}

.hc-dropdown-item {
    display: flex;
    align-items: center;
    .icon {
        font-size: 14px;
        margin-right: 8px;
    }
}
</style>
