<template>
  <div class="image-list">
    <div class="block">
      <div class="block_item" :key="img" v-for="(img, index) in imageData">
        <div class="block_text" @click="handleClick(index)">
          {{ img.turbidity }}
        </div>
        <el-image
          ref="imageRef"
          style="width: 200px; height: 200px"
          :src="img.img"
          fit="cover"
          :preview-src-list="imageList"
        ></el-image>
      </div>
    </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: [],
      imageList: [],
      fileUrl: baseURL + '/static/capture/',
      background: true,
      lazy: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      queryForm: {
        deviceCode: '',
        page: 1,
        size: 10,
      },
    };
  },
  watch: {
    deviceCode: function (newVal, oldVal) {
      this.queryForm.deviceCode = newVal;
      this.fetchData();
    },
  },
  created() {},
  methods: {
    handleClick(index) {
      this.$refs.imageRef[index].showViewer = true;
    },
    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.imageList = data.items.map(item => item.img);
      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 {
    .block_text {
      position: absolute;
      top: 80px;
      text-align: center;
      z-index: 1;
      width: 200px;
      font-weight: bold;
      opacity: 0.7;
      color: #fde2c2;
      font-size: 48px;
      transform: rotateZ(-37deg);
      cursor: pointer;
      font-family: serif;
    }

    .block_item {
      margin: 0 10px;
      position: relative;
    }
    .image-item {
      position: absolute;
    }

    display: flex;
    flex-wrap: wrap;
    margin-left: 20px;
    margin-top: 20px;
  }
}
.page {
  width: 100%;
  display: block;
  float: left;
}
</style>
