<template>
    <div class="header-icon-bar" @click="tapClick">
        <el-tooltip content="强刷新" placement="top">
            <hc-icon name="refresh" class="header-icon" :class="isLoading ? 'rotation' : ''" />
        </el-tooltip>
    </div>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import { setRouterData } from '~sto/user'
import { initButtons } from '~sto/app'
import { delStoreValue } from '~src/utils/storage'

//被点击
const isLoading = ref(false)
const tapClick = async () => {
    if (isLoading.value) return
    isLoading.value = true
    //获取路由菜单
    const routerRes = await setRouterData()
    if (routerRes.length <= 0) {
        return { error: true, msg: '路由异常' }
    }
    //获取按钮权限数据
    delStoreValue('buttons')
    await nextTick()
    await initButtons()
    //刷新路由
    await nextTick()
    isLoading.value = false
    window.location.reload()
}
</script>

<style lang="scss" scoped>
.rotation {
    animation: hc-ani-rotation-loop 1s linear infinite;
}
@keyframes hc-ani-rotation-loop {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}
</style>
