<template>
  <div class="image-review-instance part-box">
    <ul>
      <li
        v-for="(item, index) in imageList"
        :key="index"
        @click="toReview(index)"
      >
        <img
          style="width: 200px; height: 200px;object-fit:contain;"
          :src="item.url"
          :alt="item.name"
        />
      </li>
    </ul>

    <image-preview
      :image-list="imageList"
      :init-index="curImageIndex"
      header-hide
      ref="ImagePreview"
    ></image-preview>
  </div>
</template>

<script>
import ImagePreview from "../../../components/common/ImagePreview";

export default {
  name: "image-review-instance",
  components: { ImagePreview },
  data() {
    return {
      imageList: [],
      curImageIndex: 0
    };
  },
  created() {
    this.imageList = "#"
      .repeat(8)
      .split("")
      .map((item, index) => {
        return {
          name: `image-${index + 1}`,
          url: `/img-review/00${index + 1}.jpg`
        };
      });
  },
  mounted() {},
  methods: {
    toReview(index) {
      this.curImageIndex = index;
      this.$refs.ImagePreview.open();
    }
  }
};
</script>

<style lang="css">
.image-review-instance ul {
  overflow: hidden;
}
.image-review-instance li {
  float: left;
  margin: 10px;
  box-shadow: 0 0 1px #c0c0c0;
  cursor: pointer;
}
.image-review-instance li:hover {
  box-shadow: 0 0 1px #409eff;
}
</style>
