<template>
    <div>
      <div class="app-container">
      <headers :rightDate="rightDate" @menu-click="handleMenuClick"></headers>
      <div class="contents">
      
        <projectsidebar @headerDate="headerDate"></projectsidebar>
        <div class="content">
           基本情况
        </div>
      </div>
    </div>
  
    </div>
  </template>
  
  <script>

  import headers from '@/components/headerProject'
  import projectsidebar from '@/components/projectsidebar'
  export default {
  
    components: {
      headers,
      projectsidebar,
   
    },
    data() {
      return {
        rightDate: JSON.parse(localStorage.getItem('rightDateKey')) || []
      }
    },
  
    mounted() {
  
    },
    methods: {
      // 处理菜单点击事件
      handleMenuClick(item) {
        console.log('获取到这个路由数据', item,JSON.parse(localStorage.getItem('rightDateKey')));
        if (item.route && this.$route.path !== item.route) { // 增加判断
          this.$router.push(item.route);
        }
      },
  
      //获取头部的数据
      headerDate(e) {
        
        this.rightDate = e.children
      //  console.log('获取头部数据',this.rightDate)
        localStorage.setItem('rightDateKey', JSON.stringify(this.rightDate))
  
        if (this.$route.path !== e.route) { // 增加判断
            this.$router.push(e.route);
          }
        
  
      }
    }
  }
  </script>
  
  <style scope>
  .app-container {
    min-height: 100vh;  /* 确保容器至少占满整个视口 */
    display: flex;
    flex-direction: column; /* 垂直排列 */
  }
  .contents {
    display: flex;
    flex: 1; /* 填充剩余空间 */
  }
  .lefts {
    height: 100%; /* 继承父级高度 */
  }
  .contents {
    display: flex;
  }
  
  .content {
    /* margin-left: 20px; */
    width: 85%;
    /* background: white; */
    margin-top: 20px;
    border-radius: 10px;
  }
  </style>