<template>
  <div class="w_full h_full" style="display: flex; flex-direction: column">
    <header>
      <div class="headLeft" style="color: rgb(220, 38, 38)">瓮福隧道窑系统</div>
      <nav class="headCenter">
        <router-link
          class="headerNav"
          v-for="nav in navData"
          :key="nav.path"
          :to="nav.path"
          :class="{ active_link: $route.path === nav.path }"
        >
          {{ nav.name }}
        </router-link>
      </nav>
      <div class="headRight">
        <span>当前用户：{{ currentUser }}</span>
        <span style="margin: 0 1rem">PLC连接状态</span>
        <span>{{ currentTime }}</span>
      </div>
    </header>
    <RouterView />
  </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { RouterLink, RouterView } from "vue-router";
const navData = [
  { name: "PLC列表", path: "/plcList" },
  // { name: "报警消音", path: "/warning" },
  // { name: "运转系统", path: "/runsystem" },
  // { name: "烧砖系统1", path: "/firesystem" },
  // { name: "烧砖系统2", path: "/firesystem2" },
  { name: "投煤器", path: "/coalFeeding" },
  { name: "投煤器电流", path: "/coalFeedingA" },
  { name: "投煤器2", path: "/coalFeeding2" },
  // { name: "开始画面", path: "/startPage" },
];
const currentUser = "管理员";
const currentTime = ref(new Date().toLocaleString());
let timeTimer: number | undefined;
onMounted(() => {
  timeTimer = window.setInterval(() => {
    currentTime.value = new Date().toLocaleString();
  }, 1000);
});
onUnmounted(() => {
  if (timeTimer) window.clearInterval(timeTimer);
});
</script>
<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headLeft {
  height: 35px;
  width: 160px;
  line-height: 35px;
  font-size: 16px;
  font-weight: bold;
}
.headCenter {
  width: 100%;
  font-size: 12px;
  text-align: center;
  padding-top: 3px;
}
.headRight {
  height: 35px;
  font-size: 12px;
}
.headerNav {
  padding: 0 1rem;
  color: #65758b;
  height: 29px;
  line-height: 29px;
  border-radius: 3px;
  display: inline-block;
  color: var(--color-text-mute);
}
.headerNav:hover {
  background-color: rgb(237, 239, 243);
}
.headerNav:active {
  color: #ffffff;
  background-color: rgb(11, 117, 203);
}
.active_link {
  color: #ffffff;
  background-color: rgb(11, 117, 203);
}
@media (min-width: 1024px) {
}
.tiny-button.tiny-button--small {
  padding: 0.375rem 0.75rem;
  min-width: 2.25rem;
}
</style>
