<template>
  <div v-if="isH5Route" class="h5-container">
    <router-view />
  </div>
  <div v-else class="app-container">
    <el-container>
      <el-aside width="180px" class="sidebar">
        <div class="logo-area">
          <span>云物联网平台</span>
        </div>
        <el-menu
          :default-active="currentRoute"
          class="sidebar-menu"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409eff"
        >
          <el-menu-item index="/smart-light" @click="navigateTo('/smart-light')">
            <el-icon><Monitor /></el-icon>
            <span>智能灯</span>
          </el-menu-item>
          <el-menu-item index="/energy" @click="navigateTo('/energy')">
            <el-icon><Lightning /></el-icon>
            <span>能耗</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { computed, provide, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { setCorpCode } from './config/api.js'

const route = useRoute()
const router = useRouter()
const currentRoute = computed(() => route.path)
const isH5Route = computed(() => Boolean(route.meta?.h5))

// 从URL获取corpCode，全局共享（hash模式下参数在#后面，需用route.query）
// 使用computed确保路由切换时corpCode始终同步
const corpCode = computed(() => route.query.corpCode || '')
provide('corpCode', corpCode)
watchEffect(() => {
  setCorpCode(corpCode.value)
})

// 给URL拼接corpCode
function withCorpCode(path) {
  if (!corpCode.value) return path
  const sep = path.includes('?') ? '&' : '?'
  return `${path}${sep}corpCode=${encodeURIComponent(corpCode.value)}`
}

// 菜单导航：保留corpCode参数
function navigateTo(path) {
  router.push(withCorpCode(path))
}
</script>

<style scoped>
.h5-container {
  min-height: 100vh;
  background-color: #f5f6f8;
}
.app-container {
  height: 100vh;
  overflow: hidden;
}
.sidebar {
  background-color: #304156;
  color: #fff;
}
.logo-area {
  padding: 18px 16px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background-color: #263445;
}
.sidebar-menu {
  border-right: none !important;
  padding-top: 8px;
}
.sidebar-menu :deep(.el-menu-item) {
  transition: background-color 0.2s;
}
.sidebar-menu :deep(.el-menu-item.is-active) {
  background-color: #263445 !important;
  color: #fff !important;
}
.main-content {
  background-color: #f0f2f5;
  padding: 0;
  overflow-y: auto;
}
</style>