<script setup lang="ts">
import { useMenuStore } from '@/stores/menu'
import { useUserStore } from '@/stores/user'
import { useThemeStore } from '@/stores/theme'
import { useOrg } from '@/hooks/useOrg'
import avatar from '@/assets/images/avatar.png'
import { ElMessageBox } from 'element-plus'
import { isAbsolutePath } from '@/utils/utils'
import router from '@/router'
import config from '@/config/defaultSetting'
import type { RouteRecordRaw } from 'vue-router'

const themeStore = useThemeStore()
// 整体风格
const themeStyle = computed(() => themeStore.themeStyle)
const headerStyle = computed(() => {
  if (themeStyle.value.name === 'header-dark') {
    return {
      color: '#fff',
      backgroundColor: themeStyle.value.bgColor
    }
  }
  return {
    // color: themeStyle.value.textColor,
    backgroundColor: '#fff'
  }
})

// 导航栏模式
const iconSize = ref(20)

// 菜单收缩展开切换
const menuStore = useMenuStore()
const [value, toggle] = useToggle()
const handleToggle = () => {
  toggle()
  menuStore.setCollapse(value.value)
}
const topMenuList = computed(() => {
  if (themeStore.themeNav === 'top') {
    return menuStore.allMenuList
  } else {
    return []
  }
})

const handleMenuSelect = (key: string) => {
  if (isAbsolutePath(key)) {
    window.open(key)
  } else {
    menuStore.setActiveTopMenu(topMenuList.value.find((item: any) => item.path === key))
  }
}

// 面包屑
// const route = useRoute()
// const matched = computed(() => route.matched)

// 全屏切换
const { toggle: toggleScreen } = useFullscreen()

// 用户信息
const userStore = useUserStore()
const user: any = userStore.user

const logout = () => {
  ElMessageBox.confirm('您确定要退出登录吗', '提示', {
    type: 'info',
    closeOnClickModal: false,
    confirmButtonText: '确定'
  }).then(() => {
    userStore.logout()
  })
}

const goInfo = () => {
  router.push({ name: 'userInfo' })
}

// 主题设置
const settingVisible = ref(false)
//消息提醒
const newsVisible = ref(false)

// 构造搜索需要的菜单列表
const menuList = ref<RouteRecordRaw[]>([])
const buildMenu = (list: RouteRecordRaw[]) => {
  list.forEach(item => {
    if (item.children) {
      buildMenu(item.children)
    } else {
      menuList.value.push(item)
    }
  })
}
buildMenu(menuStore.leftMenuList)

// 多组织
const { orgList, changeOrg } = config.multiTenant ? useOrg() : { orgList: [], changeOrg: () => {} }

// 搜索框
const searchVisible = ref(false)
const searchValue = ref('')

const menuSearch = (queryString: string, cb: any) => {
  const results = queryString
    ? menuList.value.filter((menu: any) => menu.meta.title.includes(queryString))
    : menuList.value
  cb(results)
}
const handleSelect = (menu: any) => {
  searchVisible.value = false
  const path = menu.path
  if (isAbsolutePath(path)) {
    window.open(path)
  } else {
    router.push(path)
  }
}
</script>

<template>
  <header class="layout-header" :style="headerStyle">
    <global-logo v-if="themeStore.logoInHeader" />
    <div class="flex flex-grow items-center justify-between px-4">
      <div class="flex flex-grow">
        <el-button link @click="handleToggle">
          <icon-menu-unfold-one :size="iconSize" :fill="headerStyle.color" v-if="!value" />
          <icon-menu-fold-one :size="iconSize" :fill="headerStyle.color" v-else />
        </el-button>
        <!-- <el-breadcrumb class="breadcrumb">
          <el-breadcrumb-item v-for="item in matched.slice(1, matched.length)" :key="item.path">
            {{ item.meta.title }}
          </el-breadcrumb-item>
        </el-breadcrumb> -->
        <div class="flex-grow px-20px w-600px">
          <el-menu
            :default-active="menuStore.activeTopMenu.path"
            :class="{ 'top-menu': themeStyle.name === 'nav-dark' }"
            mode="horizontal"
            @select="handleMenuSelect"
          >
            <el-menu-item :index="item.path" v-for="item in topMenuList" :key="item.path">
              <el-icon><component :is="item.meta?.icon"></component></el-icon>
              <template #title>
                <span>{{ item.meta.title }}</span>
              </template>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="flex items-center">
        <el-button link @click="searchVisible = true" v-if="config.showMenuSearch">
          <el-icon :size="iconSize" :fill="headerStyle.color">
            <Search />
          </el-icon>
        </el-button>
        <el-dropdown size="large" class="ml-4 mr-4" :max-height="200" v-if="config.multiTenant">
          <span class="el-dropdown-link">
            {{ user.orgName }}
            <el-icon class="el-icon--right" :color="headerStyle.color">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in orgList" :key="item.id" @click="changeOrg(item.id)">
                <div>{{ item?.companyName }}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button link @click="toggleScreen">
          <!-- <icon-off-screen :size="iconSize" :fill="headerStyle.color" v-if="isFullscreen" />
          <icon-full-screen :size="iconSize" :fill="headerStyle.color" v-else /> -->
          <el-icon :size="iconSize" :fill="headerStyle.color">
            <FullScreen />
          </el-icon>
        </el-button>
        <el-button link @click="settingVisible = true">
          <el-icon :size="iconSize" :fill="headerStyle.color">
            <Operation />
          </el-icon>
        </el-button>
        <!-- <el-button link  @click="newsVisible = true">
          <icon-remind :size="iconSize" :fill="headerStyle.color" />
        </el-button> -->
        <el-avatar class="mr-10px ml-4" :src="user.photo" :size="30">
          <img :src="avatar" alt="" />
        </el-avatar>
        <el-dropdown size="large">
          <span class="el-dropdown-link">
            {{ user.name }}
            <el-icon class="el-icon--right" :color="headerStyle.color">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goInfo">
                <el-icon :size="iconSize"><icon-setting-two></icon-setting-two></el-icon>
                <div class="ml-2 mb-1 font-size-16px">个人设置</div>
              </el-dropdown-item>
              <el-dropdown-item @click="logout">
                <el-icon :size="iconSize"><icon-logout></icon-logout></el-icon>
                <div class="ml-2 mb-1 font-size-16px">退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <GlobalSetting v-model="settingVisible"></GlobalSetting>
    <GlobalNews v-model="newsVisible"></GlobalNews>

    <el-dialog title="菜单搜索" v-model="searchVisible" width="600px" class="menu-dialog" v-if="config.showMenuSearch">
      <el-autocomplete
        class="w-full"
        v-model="searchValue"
        placeholder="菜单搜索："
        :fetch-suggestions="menuSearch"
        prefix-icon="Search"
        @select="handleSelect"
      >
        <template #default="{ item }">
          <div class="value">{{ item.meta.title }}</div>
        </template>
      </el-autocomplete>
    </el-dialog>
  </header>
</template>

<style scoped lang="scss">
.layout-header {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .logo {
    width: var(--menu-width);
  }
  .collapse {
    width: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2);
  }
}
.top-menu {
  --el-menu-bg-color: #fff;
  --el-menu-text-color: #303133;
}
:deep(.el-menu--horizontal) {
  border-bottom: none !important;
}
.hidden {
  display: none;
}
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  outline: none;
}
:deep(.el-dialog__body) {
  height: 350px;
}
</style>
