<template>
    <div class="menu-content">
      <el-menu ellipsis :default-active="activeIndex" mode="horizontal" :router="true">
        <el-menu-item :index="`/detail/realtimeData`">实时数据</el-menu-item>
        <el-menu-item :index="`/detail/historyData`">历史数据</el-menu-item>
        <el-menu-item :index="`/detail/operationRecord`">操作记录</el-menu-item>
        <el-menu-item :index="`/detail/realtimeAlarm`">实时报警</el-menu-item>
        <el-menu-item :index="`/detail/historyAlarm`">历史报警</el-menu-item>
        <el-menu-item :index="`/detail/realtimeCurve`">实时曲线</el-menu-item>
        <el-menu-item :index="`/detail/historyCurve`">历史曲线</el-menu-item>
      </el-menu>
    </div>
    <router-view class="view-content" />
  </template>
  <script lang="ts" setup>
  import { useRouter } from 'vue-router'
  import { ref, onMounted } from 'vue'
  
  const router = useRouter()
  const activeIndex = ref(`/detail/realtimeData`)
  
  onMounted(() => {
    router.push(activeIndex.value)
  })
  </script>
  
  <style scoped>
  .menu-content {
    padding: 0px 15px;
    margin-top: 5px;
  }
  
  .menu-content .el-menu {
    height: 50px;
    background: linear-gradient(to bottom, rgba(39, 55, 89, 0.43), transparent);
    border-bottom: none !important;
    --el-menu-text-color: #677B9B;
    --el-menu-active-color: #ffffff;
    --el-menu-hover-text-color: #ffffff;
    --el-menu-hover-bg-color: rgba(26, 88, 211, 0.3) !important;
    --el-menu-item-font-size: 20px;
  }
  
  .menu-content .is-active {
    background: linear-gradient(to bottom, #1A58D3 0%, rgba(26, 88, 211, 0.7) 10%, transparent 95%);
    border-bottom: 2px solid #081627 !important;
  }
  
  .view-content {
    height: calc(100vh - 70px - 5px - 50px);
    overflow: auto;
    padding: 5px 10px;
  }
  </style>