<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
      });
      console.log(data);

      this.papers = "#"
        .repeat(10)
        .split("")
        .map((item, index) => {
          return {
            id: index,
            title: `Scan ${index}`,
            url:
              "http://127.0.0.1:9000/api/file/image/download/33/1/833/1?random=fa8244bb-8ec4-46c1-a16e-1bd6f3b8848e",
            thumbUrl:
              "http://127.0.0.1:9000/api/file/image/download/33/1/833/2?random=497cc903-c01a-458a-9b4e-82b391cef176"
          };
        });
    },
    toPage(page) {
      this.current = page;
      this.getList();
    }
  }
};
</script>
