<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="nav-wrapper">
        <!-- 左侧区域 -->
        <div class="left-nav">
          <div class="logo" v-html="randomSVG"></div>
          <el-button link type="primary" @click="goHome">首页</el-button>
        </div>

        <!-- 右侧用户菜单 -->
        <div class="right-nav">
          <el-dropdown>
            <span class="user-name">
              {{ userName }}<el-icon><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleMenu('message')">我的消息</el-dropdown-item>
                <el-dropdown-item @click="handleMenu('graph')">我的图形文件</el-dropdown-item>
                <el-dropdown-item @click="handleMenu('task')">我的分析任务</el-dropdown-item>
                <el-dropdown-item @click="handleMenu('profile')">个人中心</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <!-- 主体内容 -->
    <el-main class="main-content">
      <router-view />
    </el-main>
  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'

const useUserInfo = inject('userInfo');

const router = useRouter()
const hoverLeft = ref(false)
const hoverRight = ref(false)
const defaultPage = ref(true)
const userName = useUserInfo.userInfo.value.username; // 从登录信息获取

// 随机生成SVG logo
const randomSVG = computed(() => {
  const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C']
  return `
    <svg width="40" height="40" viewBox="0 0 40 40">
      <circle cx="20" cy="20" r="18" fill="${colors[Math.floor(Math.random()*4)]}"/>
      <path d="M12 20 l8 8 8-8-8-8z" fill="#fff"/>
    </svg>
  `
})

const goHome = () => {
  router.push('/dashboard')
}

const handleMenu = (type) => {
  // 处理菜单点击
  console.log('Menu clicked:', type)
}

const logout = () => {
  // 处理退出登录
  router.push({name: 'login'})
}

const navigateTo = (type) => {
  router.push(`/dashboard/${type}`)
}

onMounted( ()=> {
  // 如果页面刷新，则从缓存中读取登陆时保存的用户信息数据
  if(useUserInfo.userInfo.value.username == ''){
    useUserInfo.userInfo.value = JSON.parse(sessionStorage.getItem('user-info'))
    console.log(useUserInfo.userInfo.value)
  }
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    height: 60px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    padding: 0 24px;

    .nav-wrapper {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left-nav {
        display: flex;
        align-items: center;
        gap: 20px;

        .logo {
          display: flex;
          align-items: center;
        }
      }

      .right-nav {
        .user-name {
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 14px;
          color: #606266;

          &:hover {
            color: #409EFF;
          }
        }
      }
    }
  }

  .main-content {
    flex: 1;
    padding: 0;
    background: #f5f7fa;
  }
}

@media (max-width: 768px) {
  .dashboard-main {
    flex-direction: column!important;

    .button-column {
      padding: 20px 0;

      .action-button {
        width: min(30vh, 300px)!important;
        height: min(30vh, 300px)!important;
      }
    }
  }
}
</style>