<template>
    <div class="navbar">
        <hamburger
            id="hamburger-container"
            :is-active="sidebar.opened"
            class="hamburger-container"
            @toggleClick="toggleSideBar"
        />
        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
        <div class="right-menu">
            <template v-if="device !== 'mobile'">
                <screenfull
                    id="screenfull"
                    class="right-menu-item hover-effect"
                />
                <el-tooltip content="布局大小" effect="dark" placement="bottom">
                    <size-select
                        id="size-select"
                        class="right-menu-item hover-effect"
                    />
                </el-tooltip>
            </template>

            <el-dropdown
                class="avatar-container right-menu-item hover-effect"
                trigger="click"
            >
                <div class="avatar-wrapper">
                    <img
                        :src="avatar + '?imageView2/1/w/80/h/80'"
                        @error.once="avatarErr"
                        class="user-avatar"
                    />
                    <CaretBottom
                        style="width: 0.6em; height: 0.6em; margin-left: 5px"
                    />
                </div>

                <template #dropdown>
                    <el-dropdown-menu>
                        <router-link to="/">
                            <el-dropdown-item>首页</el-dropdown-item>
                        </router-link>
                        <router-link to="/personalcenter">
                            <el-dropdown-item>个人中心</el-dropdown-item>
                        </router-link>
                        <el-dropdown-item divided @click="logout">
                            退出
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    <audio ref="audioRef">
      <source src="@/assets/voice/new_rc.mp3" type="audio/ogg">
      Your browser does not support the audio element.
    </audio>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";

import useStore from "@/store";

// 组件依赖
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import Hamburger from "@/components/Hamburger/index.vue";
import Screenfull from "@/components/Screenfull/index.vue";
import SizeSelect from "@/components/SizeSelect/index.vue";

// 图标依赖
import { CaretBottom } from "@element-plus/icons-vue";

const logo = '/ibit-logo.png';

import { withdrawCount } from "@/api/finance";

const audioRef: any = ref(null);
const count = ref(0);
let pollTimer: ReturnType<typeof setTimeout> | null = null;
let stopPolling = false;

const { app, user, tagsView } = useStore();

const route = useRoute();
const router = useRouter();

const sidebar = computed(() => app.sidebar);
const device = computed(() => app.device);
const avatar = computed(() => user.avatar);

function toggleSideBar() {
    app.toggleSidebar();
}

const avatarErr = (e: any) => {
    e.target.src = logo;
};

function logout() {
    ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        user.logout()
            .then(() => {
                tagsView.delAllViews();
            })
            .then(() => {
                router.push(`/login?redirect=${route.fullPath}`);
            });
    });
}

function getWithdrawCount(init: boolean) {
    if (stopPolling) return;
    withdrawCount()
        .then((res: any) => {
            if (stopPolling) return;
            if (!init && res.data > count.value) {
                if (audioRef.value) {
                    audioRef.value.play()
                }
            }
            count.value = res.data
            pollTimer = setTimeout(() => {
                getWithdrawCount(false)
            }, 5000)
        })
        .catch((err: any) => {
            if (stopPolling) return;
            // session 过期时停止轮询，由 request.ts 统一处理跳转
            if (err?.message === 'SESSION_EXPIRED') {
                stopPolling = true;
                return;
            }
            console.log('提币提示音接口错误', err)
            pollTimer = setTimeout(() => {
                getWithdrawCount(false)
            }, 5000)
        });
}

onMounted(() => {
    getWithdrawCount(true)
});

onUnmounted(() => {
    stopPolling = true;
    if (pollTimer) clearTimeout(pollTimer);
});
</script>

<style lang="scss" scoped>
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    .hamburger-container {
        line-height: 46px;
        height: 100%;
        float: left;
        cursor: pointer;
        transition: background 0.3s;
        -webkit-tap-highlight-color: transparent;

        &:hover {
            background: rgba(0, 0, 0, 0.025);
        }
    }

    .breadcrumb-container {
        float: left;
    }

    .right-menu {
        float: right;
        height: 100%;
        line-height: 50px;

        &:focus {
            outline: none;
        }

        .right-menu-item {
            display: inline-block;
            padding: 0 8px;
            height: 100%;
            font-size: 18px;
            color: #5a5e66;
            vertical-align: text-bottom;

            &.hover-effect {
                cursor: pointer;
                transition: background 0.3s;

                &:hover {
                    background: rgba(0, 0, 0, 0.025);
                }
            }
        }

        .avatar-container {
            margin-right: 30px;

            .avatar-wrapper {
                margin-top: 5px;
                position: relative;

                .user-avatar {
                    cursor: pointer;
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                }

                .el-icon-caret-bottom {
                    cursor: pointer;
                    position: absolute;
                    right: -20px;
                    top: 25px;
                    font-size: 12px;
                }
            }
        }
    }
}
</style>
