<template>
  <div class="app-shell" :class="{ 'sidebar-collapsed': collapsed }">
    <aside class="app-sidebar">
      <div class="brand-block">
        <div class="brand-mark">轨</div>
        <div v-if="!collapsed" class="brand-copy"><strong>铁路智能巡检</strong><span>无人机业务平台</span></div>
      </div>
      <SidebarNav :collapsed="collapsed" />
      <div class="sidebar-footer">
        <div v-if="!collapsed" class="user-summary"><el-icon><UserFilled /></el-icon><span><strong>巡检调度中心</strong><small>综合管理席</small></span></div>
        <el-tooltip :content="collapsed ? '展开导航' : '收起导航'" placement="right">
          <el-button text :icon="collapsed ? Expand : Fold" @click="collapsed = !collapsed" />
        </el-tooltip>
      </div>
    </aside>

    <div class="app-body">
      <header class="topbar">
        <el-button class="mobile-menu-button" text :icon="Menu" @click="mobileOpen = true" />
        <div class="topbar-title"><span>铁路无人机智能巡检平台</span><strong>{{ pageTitle }}</strong></div>
        <div class="topbar-meta"><span><i></i>系统运行正常</span><time>{{ currentDate }}</time></div>
      </header>
      <main class="page-container"><RouterView /></main>
    </div>

    <el-drawer v-model="mobileOpen" direction="ltr" size="280px" :with-header="false" class="mobile-nav-drawer">
      <div class="mobile-brand"><div class="brand-mark">轨</div><div><strong>铁路智能巡检</strong><span>无人机业务平台</span></div></div>
      <SidebarNav @navigate="mobileOpen = false" />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute } from "vue-router";
import { Expand, Fold, Menu, UserFilled } from "@element-plus/icons-vue";
import SidebarNav from "../components/common/SidebarNav.vue";

const route = useRoute();
const collapsed = ref(false);
const mobileOpen = ref(false);
const pageTitle = computed(() => String(route.meta.title || "工作总览"));
const currentDate = new Intl.DateTimeFormat("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" }).format(new Date());
</script>
