<template>
  <div class="log-content">
    <div class="flex log-head-tabs" >
      <div
        class="flex justify-center items-center tab-item"
        :class="{ 'tab-item-active': currentTab === item.value }"
        @click="switchTable(item.value)"
        v-for="item in logTabsList"
        :key="item.value"
      >
        {{ item.label }}
      </div>
    </div>
    <component :is="currentComponent" />
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { LogTabEnum, logTabsList } from '@/types/log/constants';
  import LoginLog from './components/LoginLog.vue';
  import SystemLog from './components/SystemLog.vue';
  import OperationLog from './components/OperationLog.vue';

  const currentTab = ref(1);
    const switchTable = (value) => {
      currentTab.value = value;
    };

  // 根据tab展示不同组件
  const ComponentEnum = {
    [LogTabEnum.LOGIN]: LoginLog,
    [LogTabEnum.OPERATION]: OperationLog,
    [LogTabEnum.SYSTEM]: SystemLog,
  }
  const currentComponent = computed(()=> ComponentEnum[currentTab.value])
</script>

<style scoped lang="scss">
  .log-content {
    height: calc(100vh - 64px - 18px);
    background-color: rgba(255, 255, 255, 1);
    padding: 21px;
  }
  .log-head {
    height: 56px;

    &-tabs {
      margin: 18px 0;
      .tab-item {
        width: 188px;
        height: 38px;
        background: #fafafa;
        border: 1px solid #d9d9d9;
        cursor: pointer;

        &-active {
          color: rgba(22, 119, 255, 1);
          background: #e2eefe;
          border: 1px solid #1890ff;
        }
      }

      :first-child {
        border-radius: 8px 0px 0px 8px;
      }

      :last-child {
        border-radius: 0px 8px 8px 0px;
      }
    }
  }
</style>
