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

        <div class="right-menu flex align-center">
            <div class="d-flex a-c">
                <div class="mr10"><el-avatar :size="36" :src="userStore.avatar || 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/common/cpy_avatar.png'" /></div>
                <div class="d-flex a-c">
                    <span class="f-s-14 c-333 f-w-5">{{ userStore.nickname }}</span>
                    <span class="f-s-12 c-999">（{{ userStore.rolesName }}）</span>
                </div>
            </div>
            <div class="pd-10">|</div>
            <el-button @click="logout" text>
                <img class="drop-icon mr5" src="@/assets/images/goout_icon.png" />
                退出登录
            </el-button>
        </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 useNoticeStore from '@/store/modules/notice';
import { getTenantList } from '@/api/login';
import { dynamicClear, dynamicTenant } from '@/api/system/tenant';
import { TenantVO } from '@/api/types';
import notice from './notice/index.vue';
import router from '@/router';

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 tenantList = ref<TenantVO[]>([]);
// 是否切换了租户
const dynamic = ref(false);
// 租户开关
const tenantEnabled = ref(true);
// 搜索菜单
const searchMenuRef = ref<InstanceType<typeof SearchMenu>>();

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

// 动态切换
const dynamicTenantEvent = async (tenantId: string) => {
    if (companyName.value != null && companyName.value !== '') {
        await dynamicTenant(tenantId);
        dynamic.value = true;
        await proxy?.$router.push('/');
        await proxy?.proxy.$tab.closeAllPage();
        await proxy?.proxy.$tab.refreshPage();
    }
};

const dynamicClearEvent = async () => {
    await dynamicClear();
    dynamic.value = false;
    await proxy?.$router.push('/');
    await proxy?.proxy.$tab.closeAllPage();
    await proxy?.proxy.$tab.refreshPage();
};

/** 租户列表 */
const initTenantList = async () => {
    const { data } = await getTenantList(true);
    tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
    if (tenantEnabled.value) {
        tenantList.value = data.voList;
    }
};

defineExpose({
    initTenantList
});

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

const logout = async () => {
    await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    });
    userStore.logout().then(() => {
        router.replace({
            path: '/login',
            query: {
                redirect: encodeURIComponent(router.currentRoute.value.fullPath || '/')
            }
        });
    });
};

const emits = defineEmits(['setLayout']);
const setLayout = () => {
    emits('setLayout');
};
// 定义Command方法对象 通过key直接调用方法
const commandMap: { [key: string]: any } = {
    setLayout,
    logout
};
const handleCommand = (command: string) => {
    // 判断是否存在该方法
    if (commandMap[command]) {
        commandMap[command]();
    }
};
//用深度监听 消息
watch(
    () => noticeStore.state.value.notices,
    (newVal) => {
        newNotice.value = newVal.filter((item: any) => !item.read).length;
    },
    { deep: true }
);
</script>

<style lang="scss" scoped>
: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: 54px;
    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%;
        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>
