<template>
    <div class="navbar">
        <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
                   @toggleClick="toggleSideBar"/>
        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav"/>
        <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav"/>

        <div class="right-menu flex align-center">
            <template v-if="appStore.device !== 'mobile'">
                <!-- 消息 -->
                <!--                <el-tooltip content="邮件" effect="dark" placement="bottom" >-->
                <!--                    <div class="flex-center" style="cursor: pointer;margin-right: 10px" @click="openMessage">-->
                <!--                        <el-icon><Message /></el-icon><span>邮件</span>-->
                <!--                    </div>-->
                <!--                </el-tooltip>-->
                <div @click="openBulletin">
                    <el-badge
                        :hidden="noticeStore.state.value.bulletinNoReadCount == 0"
                        :value="noticeStore.state.value.bulletinNoReadCount"
                        :max="99"
                        class="b-item"
                    >
                        <el-button link class="mb-5">
                            <img class="mr-1 mb-5" src="../../assets/images/bulletin.svg" />
                            <span>公告</span>
                        </el-button>
                    </el-badge>
                </div>

                <el-popover placement="bottom" :width="200" trigger="hover" >
                    <template #reference>
                        <el-badge
                            :hidden="noticeStore.state.value.emailNoReadObj?.unReadCount == 0"
                            :value="noticeStore.state.value.emailNoReadObj?.unReadCount"
                            :max="99"
                            class="b-item"
                        >
                            <div style="display: flex;align-items: center;cursor: pointer">
                                <el-icon :size="18">
                                    <Message/>
                                </el-icon>
                                <span style="margin-left: 3px">邮件</span>
                            </div>
                        </el-badge>
                    </template>
                    <ul class="email-box">
                        <li @click="goEmail('/email')">
                            <span>收件箱</span>
                        </li>
                        <li @click="goEmail('/email/send')">
                            <span>写邮件</span>
                        </li>
                        <!-- <li @click="goEmail(3)">
                            <span>群发</span>
                        </li>
                        <li @click="goEmail(4)">
                            <span>群发效果追踪</span>
                        </li> -->
                        <li @click="goEmail('/email/settings')">
                            <span>邮箱设置</span>
                        </li>
                    </ul>
                </el-popover>

                <!-- 消息 -->
                <!-- <el-tooltip content="消息" effect="dark" placement="bottom">
                    <el-badge
                        :hidden="noticeStore.state.value.messageNoReadCount == 0"
                        :value="noticeStore.state.value.messageNoReadCount"
                        :max="99"
                        class="b-item"
                    >
                        <div class="flex-center" style="margin-right: 5px;cursor: pointer;" @click="openMessage">
                            <i-ep-bell/>
                            <span style="margin-left: 3px">消息</span>
                        </div>
                    </el-badge>
                </el-tooltip> -->
                <el-popover placement="bottom" :width="200" trigger="hover" >
                    <template #reference>
                        <el-badge
                            :hidden="noticeStore.state.value.messageNoReadCount == 0"
                            :value="noticeStore.state.value.messageNoReadCount"
                            :max="99"
                            class="b-item"
                        >
                            <div class="flex-center" style="margin-right: 5px;cursor: pointer;">
                                <i-ep-bell/>
                                <span style="margin-left: 3px">消息</span>
                            </div>
                        </el-badge>
                    </template>
                    <ul class="email-box">
                        <li v-for="item in noticeStore.state.value.messageData" @click="openMessage(item.messageType)">
                            <span>{{ item.messageTypeName }}（{{ item.stateNumber }}）</span>
                        </li>
                    </ul>
                </el-popover>

                <el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom">
                    <screenfull id="screenfull" style="margin-right: 20px;" class="right-menu-item hover-effect"/>
                </el-tooltip>


            </template>
            <div class="avatar-container">
                <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
                    <div class="avatar-wrapper">
                        <img :src="userStore.avatar" class="user-avatar"/>
                        <el-icon>
                            <caret-bottom/>
                        </el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <router-link to="/user/profile">
                                <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
                            </router-link>
<!--                            <el-dropdown-item command="updateAvartar">-->
<!--                                <span>修改头像</span>-->
<!--                            </el-dropdown-item>-->
<!--                            <el-dropdown-item command="updateInfo">-->
<!--                                <span>修改资料</span>-->
<!--                            </el-dropdown-item>-->
<!--                            <el-dropdown-item command="updatePwd">-->
<!--                                <span>修改密码</span>-->
<!--                            </el-dropdown-item>-->
<!--                            <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">-->
<!--                                <span>{{ $t('navbar.layoutSetting') }}</span>-->
<!--                            </el-dropdown-item>-->
                            <el-dropdown-item divided command="logout">
                                <span>{{ $t('navbar.logout') }}</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import SearchMenu from './TopBar/search.vue';
import useAppStore from '@/store/modules/app';
import useUserStore from '@/store/modules/user';
import useSettingsStore from '@/store/modules/settings';
import {ComponentInternalInstance} from "vue";
import useNoticeStore from '@/store/modules/notice';

const appStore = useAppStore();
const userStore = useUserStore();
const settingsStore = useSettingsStore();
const noticeStore = storeToRefs(useNoticeStore());
const newNotice = ref(<number>0);

const {proxy} = getCurrentInstance() as ComponentInternalInstance;

const userId = ref(userStore.userId);
const companyName = ref(undefined);

const visible = ref(false)
const router = useRouter()
const goEmail = (path: string) => {
    let { href } = router.resolve({ path });
    window.open(href)
    visible.value = false
}

// 搜索菜单
const searchMenuRef = ref<InstanceType<typeof SearchMenu>>();

const openSearchMenu = () => {
    searchMenuRef.value?.openSearch();
}

defineExpose({})

const toggleSideBar = () => {
    appStore.toggleSideBar(false);
}

const logout = async () => {
    await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning'
    })
    await userStore.logout()
    location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
}

const emits = defineEmits(['setLayout'])
const setLayout = () => {
    emits('setLayout');
}
const updateAvartar = () => {

}
const updateInfo = () => {

}
const updatePwd = () => {

}
// 定义Command方法对象 通过key直接调用方法
const commandMap: { [key: string]: any } = {
    setLayout,
    logout,
    updateAvartar,
    updateInfo,
    updatePwd
};
const handleCommand = (command: string) => {
    // 判断是否存在该方法
    if (commandMap[command]) {
        commandMap[command]();
    }
}

//用深度监听 消息
watch(() => noticeStore.state.value.notices, (newVal, oldVal) => {
    newNotice.value = newVal.filter((item: any) => !item.read).length;
}, {deep: true});

const openMessage = (messageType: string) => {
    router.push('/layout/notice?messageType=' + messageType)
}

const openBulletin = () => {
    router.push({ path: '/system/bulletin/detail' })
}

</script>

<style lang="scss" scoped>
.email-box {
    display: flex;
    flex-direction: column;

    li {
        display: flex;
        justify-content: space-between;
        padding: 8px 10px;
        cursor: pointer;
    }

    li:hover {
        background-color: #e5e5ee;

    }

}

.b-item {
    margin-right: 15px;

}

:deep(.el-select .el-input__wrapper) {
    height: 30px;
}

:deep(.el-badge__content.is-fixed) {
    top: 12px;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.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;
    }

    .topmenu-container {
        position: absolute;
        left: 50px;
    }

    .errLog-container {
        display: inline-block;
        vertical-align: top;
    }

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

        &: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: 40px;

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

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

                i {
                    cursor: pointer;
                    position: absolute;
                    right: -20px;
                    top: 25px;
                    font-size: 12px;
                }
            }
        }
    }
}
</style>
