<template>
  <div>
    <div class="imgs img-type-1" v-if="imgs.length == 1">
      <div class="item" v-for="(item, index) in imgs" :key="index">
        <div class="box">
          <img v-lazy="`${item.resize}`" v-photoswipe="{ group: 'report', origin: item.origin }" />
        </div>
      </div>
    </div>
    <div class="imgs img-type-2" v-else-if="imgs.length == 2">
      <div class="item" v-for="(item, index) in imgs" :key="index">
        <div class="box">
          <img v-lazy="`${item.resize}`" v-photoswipe="{ group: 'report', origin: item.origin }" />
        </div>
      </div>
    </div>
    <div class="imgs img-type-3" v-else>
      <div class="item" v-for="(item, index) in imgs" :key="index">
        <div class="box">
          <img v-lazy="`${item.resize}`" v-photoswipe="{ group: 'report', origin: item.origin }" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pc-menu-report-img',
  props: {
    imgs: {}
  },
  methods: {}
};
</script>
<style scoped lang="less">
.imgs {
  font-size: 0;
  &.img-type-1 {
    width: 100%;
    .item {
      width: 100%;

      img {
        width: 100%;
      }
    }
  }
  &.img-type-2 {
    width: 100%;
    .item {
      width: 50%;
      padding: 5px;
      .box {
        position: relative;
        padding-top: 100%;
        height: 0;
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  &.img-type-3 {
    width: 100%;
    .item {
      width: 33.333%;
      padding: 5px;
      .box {
        position: relative;
        padding-top: 100%;
        height: 0;
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .item {
    display: inline-block;
    .box {
      overflow: hidden;
      cursor: pointer;
    }
  }
}
</style>
