<template>
  <div class="image-list">
    <div v-for="img in imageData" :key="img" class="block">
      <el-image
        style="width: 200px; height: 200px"
        :src="img"
        fit="cover"
        :preview-src-list="imageData"
      ></el-image>
    </div>
    <div class="page">
      <el-pagination
        :background="background"
        :current-page="queryForm.page"
        :layout="layout"
        :page-size="queryForm.size"
        :total="total"
        style="text-align: right"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getCaptureImg } from '@/api/monitor';
import { baseURL } from '@/config';
export default {
  props: {
    deviceCode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      imageData: [],
      fileUrl: baseURL + '/static/capture/',
      background: true,
      lazy: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      queryForm: {
        deviceCode: '',
        page: 1,
      },
    };
  },
  watch: {
    deviceCode: function (newVal, oldVal) {
      this.queryForm.deviceCode = newVal;
      this.fetchData();
    },
  },
  created() {},
  methods: {
    showData(row) {
      this.queryForm.deviceCode = row.deviceCode;
      this.fetchData();
    },
    async fetchData() {
      const { data } = await getCaptureImg(this.queryForm);
      // var list = data.items;
      // for (let i = 0; i < list.length; i++) {
      //   list[i] = this.fileUrl + list[i];
      // }
      this.imageData = data.items;
      this.total = data.total;
    },
    handleQuery() {
      this.queryForm.page = 1;
      this.fetchData();
    },
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.fetchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-list {
  width: 100%;
  .block {
    float: left;
    margin-left: 20px;
    margin-top: 20px;
  }
}
.page {
  width: 100%;
  display: block;
  float: left;
}
</style>
