<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

import { useRefreshView } from '@/hooks/refresh-view';
import { t } from '@/i18n';

import OperateLog from './OperateLog.vue';
import SmartCtrlLog from './SmartCtrlLog.vue';

import type { TabComponent } from '@/types';

const { renderView, refreshView } = useRefreshView();
const activeKey = ref('');

const logTabs = computed<TabComponent[]>(() => {
  return [
    {
      key: 'smartCtrlLog',
      name: t('logCenter.smartControlLogs'),
      component: SmartCtrlLog,
    },
    {
      key: 'operateLog',
      name: t('logCenter.operationLogs'),
      component: OperateLog,
    },
  ];
});

onMounted(() => {
  activeKey.value = logTabs.value[0].key;
  refreshView();
});
</script>

<template>
  <ATabs class="button-tabs-compact" v-model:active-key="activeKey" type="card" @tab-click="refreshView">
    <ATabPane v-for="item in logTabs" :key="item.key" :tab="item.name">
      <component v-if="activeKey === item.key && renderView" :is="item.component" />
    </ATabPane>
  </ATabs>
</template>

<style lang="scss" scoped>
:deep(.ant-tabs-content-holder) {
  .ant-card {
    border-radius: 16px;
    box-shadow: none;
  }
}
</style>
