<template>

    <div style="margin-left: 20px; display: flex; height: 100%; align-items: center; min-width: 500px"
         v-if="config.layout.layoutMode == 'Classic'">
        <Icon @click="onMenuCollapse"
              :name="config.layout.menuCollapse ? 'local-IndentIncrease' : 'local-IndentDecrease'"
              :class="config.layout.menuCollapse ? 'unfold' : ''" :color="config.layout.shrinkButtonColor" size="18"
              class="fold" style="margin-right: 20px"/>

        <div class="flex">
            <div class="appMenus" :class="{ menuState: item.active == 'Y' }" v-for="(item, index) in navTabs.state.apps"
                 :key="index" @click="onMenusClick(item)">
                <Icon class="nav-menu-icon" :name="item.icon" size="28" style="padding: 5px"
                      color="{item.menuState:'#409eff':'#000'}"/>
                <div>{{ item.name }}</div>
            </div>
        </div>
    </div>
    <div v-if="config.layout.layoutMode == 'Classic'" style="position: absolute;right: 200px">

    </div>
    <div class="nav-menus" :class="configStore.layout.layoutMode">
        <el-select v-model="optionValue" placeholder="请选择应用" @change="onMenusSelectClick"
                   v-if="config.layout.layoutMode != 'Classic'" class="mr-10">
            <el-option v-for="(item, idx) in navTabs.state.apps" :key="idx" :label="item.name" :value="item.id">
                <div class="flex align-center">
                    <Icon class="nav-menu-icon" :name="item.icon" size="28" style="padding: 5px"/>
                    <div style="color: black" class="ml-5">{{ item.name }}</div>
                </div>
            </el-option>
        </el-select>
        <!-- <div class="nav-menu-item pt2">

          <el-popover ref="popover" placement="bottom" width="300" trigger="click">
            <VNotificationBoxVue active-name="通知" :notice-list="noticeList" labelNum="1"></VNotificationBoxVue>
            <template #reference>
              <el-badge :is-dot="true">
                <Icon :color="configStore.layout.headerBarRightTabColor" v-popover:popover class="nav-menu-icon"
                  name="el-icon-Bell" size="18" />
              </el-badge>
            </template>

          </el-popover>

        </div> -->
        <!-- <div class="nav-menu-item pt2">
          <router-link class="nav-menu-item h100" target="_blank" to="/">
            <div class="nav-menu-item">
              <Icon :color="configStore.layout.headerBarRightTabColor" class="nav-menu-icon" name="fa fa-qrcode"
                size="18" />
            </div>
          </router-link>
        </div> -->

        <!-- <el-dropdown @visible-change="onCurrentNavMenu($event, 'lang')" class="nav-menu-item h100" size="large"
          :hide-timeout="50" placement="bottom" trigger="click" :hide-on-click="true">
          <div class="nav-menu-item pt2" :class="state.currentNavMenu == 'lang' ? 'hover' : ''">
            <Icon :color="configStore.layout.headerBarRightTabColor" class="nav-menu-icon" name="local-lang" size="18" />
          </div>
          <template #dropdown>
            <el-dropdown-menu class="chang-lang">
              <el-dropdown-item v-for="item in configStore.lang.langArray" :key="item.name">
                {{ item.value }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->

        <div @click="onFullScreen" class="nav-menu-item" :class="state.isFullScreen ? 'hover' : ''">
            <Icon :color="configStore.layout.headerBarRightTabColor" class="nav-menu-icon" v-if="state.isFullScreen"
                  name="local-full-screen-cancel" size="18"/>
            <Icon :color="configStore.layout.headerBarRightTabColor" class="nav-menu-icon" v-else
                  name="el-icon-FullScreen"
                  size="18"/>
        </div>

        <el-popover @show="onCurrentNavMenu(true, 'adminInfo')" @hide="onCurrentNavMenu(false, 'adminInfo')"
                    placement="bottom-end" :hide-after="0" :width="260" trigger="click" popper-class="admin-info-box">
            <template #reference>
                <div class="admin-info" :class="state.currentNavMenu == 'adminInfo' ? 'hover' : ''">
                    <el-avatar :size="25" fit="fill">
                        <img :src="adminInfo.avatar" alt=""/>
                    </el-avatar>
                    <div class="admin-name">{{ adminInfo.$state.accountName }}</div>
                </div>
            </template>
            <div>
                <div class="admin-info-base">
                    <el-avatar :size="70" fit="fill">
                        <img :src="adminInfo.avatar" alt=""/>
                    </el-avatar>
                    <div class="admin-info-other">
                        <div class="admin-info-name">{{ adminInfo.$state.accountName }}</div>
                        <div class="admin-info-lasttime">{{ adminInfo.lastLoginTime }}</div>
                    </div>
                </div>
                <div class="admin-info-footer">
                    <el-button @click="onAdminInfo" type="primary" plain>个人资料</el-button>
                    <el-button @click="onLogout" type="danger" plain>注销</el-button>
                </div>
            </div>
        </el-popover>
        <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
            <Icon :color="configStore.layout.headerBarRightTabColor" class="nav-menu-icon"
                  name="local-zhuti-tiaosepan-o"
                  size="18"/>
        </div>
        <Config/>
    </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, reactive, ref, watch, nextTick} from 'vue'
import screenfull from 'screenfull'
import {useConfig} from '/@/stores/config'
import {ElMessage} from 'element-plus'
import Config from './config.vue'
import {useAdminInfo} from '/@/stores/adminInfo'
import {Local} from '/@/utils/storage'
import {ADMIN_INFO, STORE_TAB_VIEW_CONFIG} from '/@/stores/constant/cacheKey'
import router from '/@/router'
import {routePush, getAppId, setApps} from '/@/utils/router'
import {logout} from '/@/api/backend/index'

import {closeShade} from '/@/utils/pageShade'
import {useNavTabs} from '/@/stores/navTabs'
import VNotificationBoxVue from './notificationBox.vue'

const config = useConfig()
const adminInfo = useAdminInfo()
const configStore = useConfig()
const navTabs = useNavTabs()

let optionValue = ref(0)
let noticeList = ref([])

const state = reactive({
    isFullScreen: false,
    currentNavMenu: '',
    showLayoutDrawer: false,
})

const onMenuCollapse = function () {
    if (config.layout.shrink && !config.layout.menuCollapse) {
        closeShade()
    }

    config.setLayout('menuCollapse', !config.layout.menuCollapse)
}

const onMenusClick = (item: { active: string; id: number }) => {
    setApps(item.id)
}

const onMenusSelectClick = (value: number) => {
    setApps(value)
}

const onCurrentNavMenu = (status: boolean, name: string) => {
    state.currentNavMenu = status ? name : ''
}

const onFullScreen = () => {
    if (!screenfull.isEnabled) {
        ElMessage.warning('您的浏览器不支持全屏，请更换浏览器再试~')
        return false
    }
    screenfull.toggle()
    screenfull.onchange(() => {
        state.isFullScreen = screenfull.isFullscreen
    })
}

const onAdminInfo = () => {
    routePush('routine/adminInfo')
}

watch(
    () => navTabs.state.activeRoute,
    (value) => {
        let path: string = value ? value.path : ''
        let appId: number = 0
        appId = getAppId(navTabs.state.allRoutes, path, appId)
        optionValue.value = appId
        setApps(appId)
    },
    {immediate: true}
)

onMounted(() => {
    setApps(optionValue.value)
})

const onLogout = () => {
    logout().then(() => {
        Local.remove(ADMIN_INFO)
        Local.remove(STORE_TAB_VIEW_CONFIG)
        router.go(0)
    })
}
</script>

<style scoped lang="scss">
.nav-menus.Default {
    border-radius: var(--el-border-radius-base);
    box-shadow: var(--el-box-shadow-light);
}

.nav-menus {
    display: flex;
    flex-shrink: 0;
    padding: 0 12px;
    margin-left: auto;
    align-items: center;
    height: 100%;
    background-color: v-bind('configStore.layout.headerBarBackground');
    overflow: hidden;

    .nav-menu-item {
        height: 100%;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .nav-menu-icon {
            box-sizing: content-box;
        }

        &:hover {
            .icon {
                animation: twinkle 0.3s ease-in-out;
            }
        }
    }

    .nav-menu-select {
        height: 56px;
        width: 134px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        margin-right: 10px;
    }

    .admin-info {
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 6px;
        padding-right: 6px;
        height: 100%;
        cursor: pointer;
        color: v-bind('configStore.layout.headerBarRightTabColor');
    }

    .admin-name {
        padding-left: 6px;
    }

    .nav-menu-item:hover,
    .admin-info:hover,
    .nav-menu-item.hover,
    .admin-info.hover {
        background: v-bind('configStore.layout.headerBarHoverBackground');
    }
}

.chang-lang :deep(.el-dropdown-menu__item) {
    justify-content: center;
}

.admin-info-base {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 10px;

    .admin-info-other {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 0;

        .admin-info-name {
            font-size: var(--el-font-size-large);
        }
    }
}

.admin-info-footer {
    padding: 10px 0;
    margin: 0 -12px -12px -12px;
    display: flex;
    justify-content: space-around;
    background: var(--color-bg-2);
}

.pt2 {
    padding-top: 2px;
}

.menuState {
    border-bottom: 2px solid #409eff;
    color: #409eff;
}

.menuIconState {
    color: #409eff;
}

.appMenus {
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

@keyframes twinkle {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
</style>
