<template>
  <div class="container">
    <Breadcrumb :items="['menu.ops.systemSettings', 'menu.ops.systemSettings.systemLogs']" />

    <a-card class="page-card" :bordered="false" :body-style="{ padding: 0 }">
      <template #title>
        <div class="page-title">日志管理</div>
      </template>

      <a-tabs v-model:active-key="activeKey" size="small" destroy-on-hide>
        <a-tab-pane key="entries" title="日志查询">
          <LogMgmtEntries />
        </a-tab-pane>

        <a-tab-pane key="syslog-rules" title="Syslog 规则">
          <LogMgmtSyslogRules />
        </a-tab-pane>

        <a-tab-pane key="trap-rules" title="Trap 规则">
          <LogMgmtTrapRules />
        </a-tab-pane>

        <a-tab-pane key="trap-dictionary" title="Trap 字典">
          <LogMgmtTrapDictionary />
        </a-tab-pane>

        <a-tab-pane key="trap-suppressions" title="Trap 屏蔽/抑制">
          <LogMgmtTrapSuppressions />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import Breadcrumb from '@/components/breadcrumb/index.vue'

import LogMgmtEntries from '@/views/ops/pages/log-mgmt/entries/index.vue'
import LogMgmtSyslogRules from '@/views/ops/pages/log-mgmt/syslog-rules/index.vue'
import LogMgmtTrapRules from '@/views/ops/pages/log-mgmt/trap-rules/index.vue'
import LogMgmtTrapDictionary from '@/views/ops/pages/log-mgmt/trap-dictionary/index.vue'
import LogMgmtTrapSuppressions from '@/views/ops/pages/log-mgmt/trap-suppressions/index.vue'

const activeKey = ref<'entries' | 'syslog-rules' | 'trap-rules' | 'trap-dictionary' | 'trap-suppressions'>('entries')
</script>

<script lang="ts">
export default {
  name: 'SystemLogs',
}
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}

.page-card {
  :deep(.arco-card-body) {
    padding-top: 0;
  }
}

.page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-1);
  line-height: 1.4;
}
</style>

