<template>
  <div>
    <div class="app-container">
      <headers :rightDate="rightDate" @menu-click="handleMenuClick"></headers>
      <div class="contents">
        <div class="sidebar-wrapper" v-if="!hideSidebar">
          <sidebar @headerDate="headerDate"></sidebar>
        </div>
        <div class="content" :class="{ 'full-width': hideSidebar }">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headers from '@/components/header'
import sidebar from '@/components/sidebar'
export default {

  components: {
    headers,
    sidebar
  },
  data() {
    return {
      rightDate: JSON.parse(localStorage.getItem('rightDateKey')) || []
    }
  },
  computed: {
    // 判断是否隐藏侧边栏
    hideSidebar() {
      const hideRoutes = [
        '/home/salesperformanceEdint'
      ]
      return hideRoutes.includes(this.$route.path)
    }
  },

  mounted() {
    // 确保路由正常加载
    console.log('Layout mounted, current route:', this.$route.path)
    // 初始化头部数据
    this.updateHeaderData()
  },
  watch: {
    $route(to) {
      // 路由变化时更新头部数据
      this.updateHeaderData()
    }
  },
  methods: {
    // 根据路由更新头部数据
    updateHeaderData() {
      const currentPath = this.$route.path
      if (currentPath === '/home/message') {
        // 消息中心页面，保存当前头部数据（如果存在），然后设置为"消息中心"
        const currentRightDate = this.rightDate && this.rightDate.length > 0 ? this.rightDate : []
        if (currentRightDate.length > 0 && currentRightDate[0].name !== '消息中心') {
          localStorage.setItem('rightDateKeyBackup', JSON.stringify(currentRightDate))
        }
        this.rightDate = [{ name: '消息中心' }]
        localStorage.setItem('rightDateKey', JSON.stringify(this.rightDate))
      } else {
        // 其他页面，从 localStorage 恢复或使用默认值
        // 优先使用备份数据（如果存在），否则使用保存的数据
        const backupRightDate = localStorage.getItem('rightDateKeyBackup')
        const savedRightDate = localStorage.getItem('rightDateKey')
        if (backupRightDate) {
          this.rightDate = JSON.parse(backupRightDate)
          localStorage.setItem('rightDateKey', backupRightDate)
          localStorage.removeItem('rightDateKeyBackup')
        } else if (savedRightDate) {
          const parsed = JSON.parse(savedRightDate)
          // 如果不是消息中心的数据，就使用
          if (!parsed || parsed.length === 0 || parsed[0].name !== '消息中心') {
            this.rightDate = parsed
          }
        }
      }
    },
    // 处理菜单点击事件
    handleMenuClick(item) {
      console.log('获取到这个路由数据', item,JSON.parse(localStorage.getItem('rightDateKey')));
      if (item.route) {
        // 如果路由路径不是以 /home 开头，则添加 /home 前缀
        let routePath = item.route
        if (!routePath.startsWith('/home') && routePath !== '/') {
          routePath = '/home' + (routePath.startsWith('/') ? routePath : '/' + routePath)
        }
        if (this.$route.path !== routePath) {
          this.$router.push(routePath);
        }
      }
    },

    //获取头部的数据
    headerDate(e) {
      // 如果当前在消息中心页面，不更新头部数据
      if (this.$route.path === '/home/message') {
        return
      }
      
      this.rightDate = e.children
    //  console.log('获取头部数据',this.rightDate)
      localStorage.setItem('rightDateKey', JSON.stringify(this.rightDate))

      if (e.route) {
        // 如果路由路径不是以 /home 开头，则添加 /home 前缀
        let routePath = e.route
        if (!routePath.startsWith('/home') && routePath !== '/') {
          routePath = '/home' + (routePath.startsWith('/') ? routePath : '/' + routePath)
        }
        if (this.$route.path !== routePath) {
          this.$router.push(routePath);
        }
      }

    }
  }
}
</script>

<style scope>
.app-container {
  min-height: 100vh;  /* 确保容器至少占满整个视口 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
}
.contents {
  display: flex;
  flex: 1; /* 填充剩余空间 */
  align-items: stretch;
  gap: 1%;
  box-sizing: border-box;
}

.sidebar-wrapper {
  width: 218px;
  background: white;
  /* margin-top: 20px; */

  box-sizing: border-box;
  
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-wrapper > * {
  flex: 1;
}

.content {
  flex: 1;
  /* background: white; */
  margin-top: 0px;
  border-radius: 10px;
  overflow-x: clip;
  box-sizing: border-box;
  min-width: 0;
  /* padding-right: 8px; */
}

.content.full-width {
  width: 100%;
}
</style>