<template>
  <div class="client-monitor">
    <div class="part-box">
      <image-action-list
        :data="papers"
        ref="ImageActionList"
      ></image-action-list>

      <div class="part-page">
        <Page
          :current="current"
          :total="total"
          :page-size="size"
          show-total
          show-elevator
          @on-change="toPage"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script>
import { clientMonitorList } from "@/api";
import ImageActionList from "./components/ImageActionList";

export default {
  name: "client-monitor",
  components: { ImageActionList },
  data() {
    return {
      workId: this.$route.params.workId,
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      papers: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await clientMonitorList({
        workId: this.workId,
        page: this.current - 1,
        size: this.size
      });
      this.papers = data.data.map(item => {
        item.title = item.createUserName;
        return item;
      });
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    }
  }
};
</script>
