<template>
  <div>
    <h2>系统日志</h2>
    <hr>
    <div v-if="data && data.objects" class="fade-in">
      <ul>
        <li v-for="entry in data.objects" :key="entry.pk">
          [{{ entry.id }}]
          <span>
            {{ format_timestamp(entry.datetime) }}
          </span>
          {{ translate(entry.log) }}</li>
      </ul>
      <CPagination size="sm">
        <CPaginationItem href="javascript:void(0)" :disabled="!prev_page_url" @click="goto_page(prev_page_url)">上一页</CPaginationItem>
        <CPaginationItem href="javascript:void(0)" :disabled="!next_page_url" @click="goto_page(next_page_url)">下一页</CPaginationItem>
        <CPaginationItem href="javascript:void(0)" :disabled="url == initial_url" @click="goto_page(initial_url)">第一页</CPaginationItem>
      </CPagination>
      <div v-if="data && data.meta">
        <span>当前显示第 {{ data.meta.offset + 1 }} - {{ Math.min(data.meta.offset + data.meta.limit, data.meta.total_count) }} 条数据，共 {{ data.meta.total_count }} 条数据</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SystemLog',
  props: [],
  components: {
  },
  data: function () {
    return {
      data: [],
      initial_url: '/api/v1/log/',
      url: '/api/v1/log/',
    };
  },
  computed: {
    next_page_url: function() {
      if (this.data && this.data.meta) {
        return this.data.meta.next;
      }
      return null;
    },
    prev_page_url: function() {
      if (this.data && this.data.meta) {
        return this.data.meta.previous;
      }
      return null;
    },
  },
  methods: {
    reload: async function() {
      var r = await this.$root.api_get(this.url);
      this.data = r.data;
    },
    goto_page: function(url) {
      if (!url) return;
      this.url = url;
      this.reload();
    },
    translate: function(msg) {
      var r = msg;
      r = r.replaceAll('admin login', '管理员登录');
      r = r.replaceAll('tenant login', '租户登录');
      return r;
    },
  },
  mounted() {
    this.reload();
  },
}
</script>

<style scoped>
ul {
  border: 1px solid gray;
  padding: 1rem 2rem;
}
</style>

