<template>
  <div class="header-container navbar">
    <div class="text">青岛机场无人驾驶协同云平台</div>
    <div class="tabs-container">
      <div
        v-for="tab in tabs"
        :key="tab.id"
        :class="['tab-item', { active: isActive(tab.path) }]"
        @click="handleTabClick(tab.path)"
      >
        {{ tab.name }}
      </div>
    </div>

    <img src="../../assets/images/close.png" alt="close" class="close-icon" @click="handleLogout" />
  </div>
</template>

<script setup>
import { computed } from "vue";
import { ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
import useAppStore from '@/store/modules/app';
import usePermissionStore from '@/store/modules/permission';
import useUserStore from '@/store/modules/user'

const router = useRouter();
const route = useRoute();
const appStore = useAppStore();
const userStore = useUserStore()
const permissionStore = usePermissionStore();

// 定义Tab选项
const tabs = [
  { id: "platform", name: "平台概览", path: "/platform" },
  { id: "car", name: "车辆管理", path: "/car" },
  { id: "road", name: "路况管理", path: "/road" },
  { id: "system", name: "系统管理", path: "/system" },
];

// 判断路由是否激活
function isActive(path) {
  return route.path.startsWith(path);
}

// 处理Tab点击，使用路由导航
function handleTabClick(path) {
  console.log('点击Tab路径:', path);
  if (path === '/platform') {
    // 平台概览页面，隐藏左侧菜单
    appStore.toggleSideBarHide(true);
    permissionStore.setCurrentTab('platform');
    router.push(path);
  } else if (path === '/car') {
    // 车辆管理页面，显示左侧菜单
    appStore.toggleSideBarHide(false);
    
    // 设置当前Tab为car，过滤显示车辆相关菜单
    permissionStore.setCurrentTab('car');
    
    // 直接跳转到车辆监控页面
    router.push('/car/monitor');
  } else if (path === '/road') {
    // 路况管理页面，显示左侧菜单
    console.log('切换到路况管理Tab');
    appStore.toggleSideBarHide(false);
    
    // 设置当前Tab为road，过滤显示路况相关菜单
    permissionStore.setCurrentTab('road');
    
    // 跳转到路口管理页面
    router.push('/road/intersection');
  } else if (path === '/system') {
    // 系统管理页面，显示左侧菜单
    appStore.toggleSideBarHide(false);
    
    // 设置当前Tab为system，过滤显示系统相关菜单
    permissionStore.setCurrentTab('system');
    
    // 角色管理页面应该是 /system/role
    router.push('/system/role');
  } else {
    router.push(path);
  }
}

// 处理退出登录
function handleLogout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      router.push('/login');
    });
  }).catch(() => {});
}
</script>

<style lang="scss" scoped>
.header-container { 
  width: 100%;
  padding: 0 30px;
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #4C4F5F;
  background: url("../../assets/images/title.png") no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
}

.text {
  font-weight: bold;
  font-size: 26px;
  flex: 1;
}

.tabs-container {
  display: flex;
  width: 65%;
  height: 100%;
  align-items: center;
  // flex: 2;
  justify-content: flex-start;
}

.tab-item {
  padding: 0 20px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  margin: 0 10px;
  transition: all 0.3s;
  border-radius: 4px;

  // &:hover {
  //   background-color: rgba(255, 255, 255, 0.1);
  // }

  &.active {
    // background-color: rgba(255, 255, 255, 0.2);
    background: url("../../assets/images/tabs.png") no-repeat;
    background-size: 100% 100%;
    color: #A1D1FF;
    font-weight: bold;
  }
}

.close-icon {
  width: 32px;
  height: 32px;
  cursor: pointer;
}
</style>