<template>
  <div class="ele-body">
    <el-card shadow="never">
      <search @search="reload"></search>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        height="calc(100vh - 300px)"
        cache-key="systemRoleTable15"
      >

        <template v-slot:type="{ row }">
          {{types[row.type]}}
        </template>

        <template v-slot:tableHeaderTitle="{ column }">
          <span style="display: inline-block;text-align: center; width: 100%;">{{column.label}}</span>
        </template>
      </ele-pro-table>
    </el-card>

  </div>
</template>

<script>
import search from "./components/search.vue";

import {deepClone} from "@/utils";
import {operateLogPageAPI} from "@/api/system/operationLog/api";

export default {
  name: 'index',
components:{search},
  data() {
    return {
      // 表格列配置
      columns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'userName',
          label: '用户名称',
          align: 'center',
          showOverflowTooltip: true,
          width: 120
        },
        {
          prop: ' type',
          label: '日志类型',
          align: 'center',
          slot: 'type',
          showOverflowTooltip: true,
          width: 120
        },
        {
          prop: 'dateTime',
          label: '操作时间',
          minWidth: 100,
          slot: 'dateTime',
          align: 'center',
          headerSlot: 'tableHeaderTitle',
        },
        {
          prop: 'ip',
          label: 'IP地址',
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'tag',
          label: '操作菜单',
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'description',
          label: '操作描述',
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'api',
          label: '访问接口',
          minWidth: 100,
          align: 'center',
        }
      ],
      types:{
        0:'常规日志',
        1:'系统管理操作日志',
        2:'系统安全操作日志',
        3:'系统审计操作日志',
      }
    };
  },
  created() {
  },
  methods: {
    /* 表格数据源 */
    datasource({page, limit, where, order}) {
      return operateLogPageAPI({pageNum: page, size: limit, ...where});
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({page: 1, where});
    },
  }
};
</script>
