<script setup lang="ts">
import Notice from './Notice.vue'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { GlobalStore } from '@/stores/index'
import Breadcrumb from './Breadcrumb.vue'
import { Sunny, Moon } from '@element-plus/icons-vue'
import { Expand, Fold, List, SwitchButton, UserFilled } from '@element-plus/icons-vue'
import 'element-plus/theme-chalk/src/dropdown.scss'
import { toggleDark, isDark } from '@/composables/dark'

const noticeRef = ref<InstanceType<typeof Notice> | null>(null)
const globalStore = GlobalStore()
const router = useRouter()
const logOut = () => {
  sessionStorage.clear()
  localStorage.clear()
  globalStore.SET_User_Tokey('')
  globalStore.SET_User_Info({})
  globalStore.SET_Flat_Menu([])
  router.replace('/login')
}
const info = computed(() => globalStore.GET_User_Info)
const goTask = () => {
  window.open(`https://dootask.baozhida.cn/gologin/index.html?uuid=${info.value.T_uuid}&name=${info.value.T_name}`)
}
const getTime = () => {
  return new Date().toLocaleString('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    hour12: true
  })
}

let time = ref(getTime())

setInterval(() => {
  time.value = getTime()
}, 1000 * 60)

const computedNotice = computed(() => {
  if (noticeRef.value?.newsList) {
    const notice = noticeRef.value?.newsList.find((item: any) => item.T_Tag === 0)
    if (!notice) {
      return false
    }
    return true
  }
  return false
})
</script>

<template>
  <div class="header">
    <div class="header-left">
      <el-button
        class="isCollapse"
        type="primary"
        :icon="globalStore.GET_isCollapse ? Expand : Fold"
        link
        @click="globalStore.SET_isCollapse"
      ></el-button>
      <Breadcrumb></Breadcrumb>
    </div>
    <div class="header-right">
      <el-link type="primary" class="mr-2" @click="goTask"
        ><el-icon> <List /> </el-icon>任务管理</el-link
      >
      <el-badge :is-dot="computedNotice" class="mr-2">
        <el-dropdown trigger="click">
          <el-button type="primary" circle>
            <i class="iconfont el-icon">&#xe63e;</i>
          </el-button>
          <template #dropdown>
            <Notice ref="noticeRef" />
          </template>
        </el-dropdown>
      </el-badge>
      <el-dropdown class="mr-2">
        <div class="avatar">
          <el-avatar> <img src="@/assets/images/avatar.jpg" /> </el-avatar>
          <span>{{ globalStore.GET_User_Info.T_name }}</span>
          <el-icon class="el-icon">
            <arrow-down />
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="UserFilled" @click="router.push('/user')">个人中心</el-dropdown-item>
            <el-dropdown-item :icon="SwitchButton" divided @click="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span>{{ time }}</span>

      <el-popover placement="bottom" :width="200" trigger="hover">
        <div style="display: flex; justify-content: center; align-items: center">
          <el-icon v-if="isDark" color="#e9780e" :size="20"><Sunny /></el-icon>
          <el-icon v-else color="#a80000" :size="20"><Moon /></el-icon>
          <span style="padding: 0 10px">正在切换主题</span>
        </div>
        <template #reference>
          <el-button class="toggle" type="primary" :icon="isDark ? Moon : Sunny" circle @click="toggleDark()" />
        </template>
      </el-popover>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  width: 100%;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  .header-left {
    flex: 1;
    display: flex;
  }
  .header-right {
    display: flex;
    align-items: center;
    .mr-2 {
      margin-right: 8px;
    }
    .toggle {
      margin: 0 20px 0 10px;
    }
  }
  .notice {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .isCollapse {
    margin-right: 1rem;
    font-size: 1.35rem;
  }
  .avatar {
    cursor: pointer;
    display: flex;
    align-items: center;
    span,
    .el-icon {
      color: #fff;
    }
    span {
      margin-left: 0.5rem;
    }
  }
}
</style>
