<template>
  <div class="gl-page-content-grey log-page">
    <div class="tabs">
      <el-tabs v-model="showType" type="card">
        <el-tab-pane :label="$t('系统管理.日志列表')" name="1" />
        <el-tab-pane :label="$t('系统管理.日志统计')" name="2" />
      </el-tabs>
    </div>
    <div class="tab-content" v-if="showType == '1'">
      <BaseTable
        ref="baseTableRef"
        tableName="SYSTEM_LOGS"
        :api="pageApi"
        :actionList="actionList"
        fullHeight
        :searchAttrs="{
          createTimeArr: {
            'disabled-date': disabledDateFun,
          },
        }"
      >
        <template #logType="{ row }">
          <el-tag type="success" v-if="row.logType === '0'">正常</el-tag>
          <el-tag type="danger" v-else>异常</el-tag>
        </template>
      </BaseTable>
    </div>
    <LineChart class="gl-page-content-grey-full" v-else></LineChart>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import LineChart from './components/lineChart.vue';
import { pageApi } from '@/api/system/systemLog';

const showType = ref('1');
const actionList = ref([]);

const disabledDateFun = (time: Date) => {
  return time.getTime() > Date.now();
};
</script>

<style lang="scss" scoped>
.log-page {
  height: 100%;
  background-color: var(--el-bg-color);
  padding: 20px;
  .tab-content {
    height: calc(100% - 55px);
    width: 100%;
  }
}
</style>
