<script setup lang="ts">
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import { getToken } from '@/utils/auth';

import Screenfull from '@/components/Screenfull/index.vue';
import SizeSelect from '@/components/SizeSelect/index.vue';
import News from './news.vue';
// import LangSelect from '@/components/LangSelect/index.vue';
import MixNav from './Sidebar/MixNav.vue';
// import { CaretBottom } from '@element-plus/icons-vue';
import Logo from './Sidebar/Logo.vue';

import { useAppStore } from '@/store/modules/app';
import { useTagsViewStore } from '@/store/modules/tagsView';
import { useUserStore } from '@/store/modules/user';
import { useSettingsStore } from '@/store/modules/settings';
import Cookies from 'js-cookie';
import { storeToRefs } from 'pinia';

const url = import.meta.env.VITE_APP_BASE_API;
const username = Cookies.get('username');
const settingsStore = useSettingsStore();
const { sidebarLogo } = storeToRefs(settingsStore);
const isCollapse = computed(() => !appStore.sidebar.opened);

const appStore = useAppStore();
const tagsViewStore = useTagsViewStore();
const userStore = useUserStore();

const route = useRoute();
const router = useRouter();
const querystr = ref('');
const dialogVisible = ref(false)
const device = computed(() => appStore.device);
const news = ref()

function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore
      .logout()
      .then(() => {
        tagsViewStore.delAllViews();
      })
      .then(() => {
        router.push(`/login?redirect=${route.fullPath}`);
      });
  });
}
function querystrChange() {
}
const badgeval = ref(0)
const isbadge = ref(true)
var source = new EventSource(url+ `/sse/connect/` + getToken(),);
onMounted(() => {
  if ("EventSource" in window) {
    source.onmessage = function(e) {
      if(e.data>0) {
        badgeval.value = e.data
        isbadge.value = false
        news.value.init()
      } else {
        isbadge.value = true
      }
    };
    source.onopen = function(e) {
    };
    source.onerror = function(e:any) {
      if (e.readyState == EventSource.CLOSED) {
      } else {
      }
    };
  } else {
  };
})
onBeforeUnmount(()=>{
  source.close();
})
</script>

<template>
  <div class="navbar">
    <logo v-if="sidebarLogo" :collapse="isCollapse" />
    <!-- <mix-nav v-if="device !== 'mobile' && settingsStore.layout === 'mix'" /> -->
    <div v-if="settingsStore.layout === 'left'" class="flex justify-start">
      <div class="flex justify-center items-center">
        <!--全屏 -->
        <div v-if="device === 'desktop'" style="position: relative;">
          <el-input class="keywords" v-model="querystr" placeholder="请输入搜索关键字" clearable
            @change="querystrChange"></el-input>
          <img src="@/assets/MenuIcon/top_ss.png" alt="" style="position: absolute;right: 30px;top: 10px;">
        </div>
        <div class="flex items-center cursor-pointer" style="margin-right:15px;margin-top: 6px;">
          <el-badge :value="badgeval" :hidden="isbadge" :max="10">
            <el-icon style="font-size: 22px;" @click="dialogVisible = true,news.init()"><Bell /></el-icon>
          </el-badge>
        </div>
        <!-- 布局大小 -->
        <el-tooltip content="字号大小" effect="dark" placement="bottom">
          <size-select />
        </el-tooltip>
        <!-- 全屏 -->
        <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
        <screenfull id="screenfull" />
        </el-tooltip>
        <!--语言选择-->
        <!-- <lang-select /> -->
      </div>
      <!-- 头像 -->
      <div style="heigth:100%;display: flex;display: -webkit-flex;align-items: center; -webkit-align-items: center; ">
        <div class="heighta"></div>
        <img v-if="userStore.avatar!== ''" :src="url + '/avatar/' + userStore.avatar + '?imageView2/1/w/80/h/80'"
          class="w-[30px] h-[30px] rounded-lg rounded-full" style="border-radius: 50%;" />
        <img v-else src="@/assets/MenuIcon/top_tx.png" alt="" class="w-[30px] h-[30px] rounded-lg rounded-full" style="border-radius: 50%;">
      </div>

      <el-tooltip content="个人中心" effect="dark" placement="bottom">
        <div class="cursor-pointer flex justify-center items-center pl-[10px]"
          :style="{ fontSize: appStore.size === 'default' ? '14px' : '16px' }" @click="$router.push('/personalCenter')">{{
            username }}</div>
      </el-tooltip>

      <div class="flex justify-center items-center cursor-pointer pr-[12px]"
        :style="{ fontSize: appStore.size === 'default' ? '14px' : '16px' }" @click="logout"><el-divider
          direction="vertical" style="padding-right:5px" />{{ $t('navbar.logout') }}</div>
      <News ref="news" v-model:dialog-visible="dialogVisible" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  width: 100%;
  position: relative;
  height: 60px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between; 
  box-shadow: 0px 0px 10px rgb(219 225 236);
  z-index: 98;
}

.keywords {
  width: 240px;
  height: 34px;
  margin-right: 20px;

  :deep(.el-input__wrapper) {
    padding-left: 15px;
    border-radius: 40px;
  }
}
.heighta{
  border-left:1px solid #dcdfe6 ;
  height: 1em;
  margin-right: 15px;
}
</style>
