<template>
  <div class="layout-header">
    <div class="logo"></div>
    <!-- <div style="display: flex;align-items: center;margin-right: 10px;">
      <span class="knowledge-graph-icon" @click="router.push({ path: '/home' })"></span>
    </div> -->
    <div class="menu">
      <el-menu :default-active="currentPath" ref="menuRef" class="el-menu-demo" mode="horizontal">
        <el-menu-item :index="item.path" v-for="item in routeList" :key="item.name" :class="{ 'external-link-item': isExternalLink(item.path) }"
          @click="handleMenuClick(item.path)">{{ item.title }}</el-menu-item>
      </el-menu>
    </div>
    <div style="align-self: center;">
      <el-dropdown style="margin-top:10px">
        <div style="font-size:medium;font-weight: bold; color:#000">{{ user.full_name }}</div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>用户资料</el-dropdown-item>
            <el-dropdown-item @click="editPassShow = true">修改密码</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">登出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <EditPasswordDialog v-model="editPassShow" />
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useMenuStore } from "@/stores/menu.js"
import { useRoute, useRouter } from "vue-router";
import { getSessionVar, clearSessionVar } from '@/utils/session'
import EditPasswordDialog from "@/components/EditPasswordDialog.vue"
const route = useRoute()
const router = useRouter()
let timer

const menuRef = ref()
// console.log('route', route)
const { routeList } = useMenuStore()
const user = ref({
  id: "0",
  full_name: 'John Doe',
  username: 'johndoe',
})
user.value = {
  id: getSessionVar('user_id') || "0",
  full_name: getSessionVar('full_name') || 'John Doe',
  username: getSessionVar('username') || 'johndoe',
}
let editPassShow = ref(false)
const currentPath = computed(() => {
  let temp = ""
  for (let i = 0; i < routeList.length; i++) {
    for (let j = 0; j < route.matched.length; j++) {
      if (routeList[i].path === route.matched[j].path) {
        temp = route.matched[j].path
        break
      }
    }
    if (temp) break;
  }
  return temp
})
const handleLogout = () => {
  // 跳转到登录页面
  router.push({ path: '/login' });
  clearSessionVar()
}

// 判断是否为外部链接的方法
const isExternalLink = (path) => {
  return /^https?/g.test(path);
};


function handleMenuClick(path) {
  if (/^https?/g.test(path)) {
    // path = 'http://localhost:8081/home.html'
    const newWindow = window.open(path, '_blank');
    timer = setInterval(() => {
      newWindow?.postMessage({ type: 'login', username: getSessionVar("full_name"), userID: getSessionVar("user_id") }, "*")
    }, 1000)
    menuRef.value.updateActiveIndex(currentPath.value)
  } else {
    if (route.path.includes(path)) return
    router.push({ path: path })
  }
}
function handleLogin(event) {
  const { type, status } = event.data
  if (type === 'login' && status === 'ok') {
    // alert('登录成功')
    clearInterval(timer)
  }
}
onMounted(() => {
  window.addEventListener('message', handleLogin);
})

onBeforeUnmount(() => {
  window.removeEventListener('message', handleLogin);
  clearInterval(timer)
})

// console.log(menu.menu)
</script>

<style lang="less" scoped>
.layout-header {
  display: flex;
  border-bottom: 1px solid #C4C2C2;
  // padding-bottom: 10px;

  .logo {
    width: 200px;
    // height: 60px;
    // border: 1px solid skyblue;
    flex: 0 0 auto;
    margin-right: 50px;
    background: url('../assets/images/logo.jpg') no-repeat center;
    background-size: 100% 100%;
  }

  .menu {
    flex: 1 1 auto;

    // .el-menu--horizontal>.el-menu-item.is-active {
    //   border: none;
    // }

    .el-menu--horizontal.el-menu {
      border: none;
    }

    /deep/ .el-menu {
      .el-menu-item {
        font-size: 20px;
      }
    }
    .external-link-item {
      // 覆盖激活效果
      &.is-active {
        background-color: transparent !important;
        color: inherit !important;
      }

      // 覆盖点击效果
      &:focus {
        background-color: transparent !important;
        color: inherit !important;
      }
    }
  }
}
</style>
