<template>
  <div class="c_img_box" :class="'imgLen'+imgArr.length">
    <div class="img_item" v-for="(item,index) in imgArr" :key="index" :style="'background-image:url('+item+')'" @click.stop="handlePhoto(index)">
    </div>
  </div>
</template>
<script>
export default {
  props: ['imgArr','itemIndex'],
  methods:{
    handlePhoto(index){
      this.$emit('handlePhoto',this.itemIndex,index)
    }
  }
}
</script>
<style lang="scss">
.c_img_box {
  margin-top: 30px;
  .img_item {
    position: relative;
    overflow: hidden;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  &.imgLen1 {
    .img_item {
      margin: 0 auto;
      width: 700px;
      height: 700px;
    }
  }
  &.imgLen2 {
    display: flex;
    justify-content: space-between;
    .img_item {
      width: 346px;
      height: 346px;
    }
  }
  &.imgLen3 {
    .img_item {
      width: 228px;
      height: 228px;
      &:first-of-type {
        width: 464px;
        height: 464px;
        float: left;
        margin-right: 10px;
      }
      &:nth-of-type(2) {
        margin-bottom: 8px;
      }
    }
  }
  &.imgLen4 {
    .img_item {
      width: 228px;
      height: 228px;
      &:first-of-type {
        width: 100%;
        height: 346px;
        margin-bottom: 8px;
      }
      &:nth-of-type(2),
      &:nth-of-type(3) {
        margin-right: 9px;
      }
    }
  }
  &.imgLen5 {
    .img_item {
      width: 228px;
      height: 228px;
      &:nth-of-type(1) {
        margin-right: 10px;
      }
      &:nth-of-type(1),
      &:nth-of-type(2) {
        width: 346px;
        height: 346px;
        margin-bottom: 8px;
      }
      &:nth-of-type(3),
      &:nth-of-type(4) {
        margin-right: 9px;
      }
    }
  }
  &.imgLen6 {
    .img_item {
      width: 228px;
      height: 228px;
      &:first-of-type {
        width: 464px;
        height: 464px;
        float: left;
        margin-right: 10px;
        margin-bottom: 8px;
      }
      &:nth-of-type(2),
      &:nth-of-type(3) {
        margin-bottom: 8px;
      }
      &:nth-of-type(4),
      &:nth-of-type(5) {
        margin-right: 9px;
      }
    }
  }
  &.imgLen7 {
    .img_item {
      width: 228px;
      height: 228px;
      &:first-of-type {
        width: 100%;
        height: 346px;
        margin-bottom: 8px;
      }
      &:nth-of-type(2),
      &:nth-of-type(3),
      &:nth-of-type(4) {
        margin-bottom: 8px;
      }
      &:nth-of-type(2),
      &:nth-of-type(3),
      &:nth-of-type(5),
      &:nth-of-type(6) {
        margin-right: 9px;
      }
    }
  }
  &.imgLen8 {
    .img_item {
      width: 228px;
      height: 228px;
      &:nth-of-type(1) {
        margin-right: 10px;
      }
      &:nth-of-type(1),
      &:nth-of-type(2) {
        width: 346px;
        height: 346px;
        margin-bottom: 8px;
      }
      &:nth-of-type(3),
      &:nth-of-type(4),
      &:nth-of-type(5) {
        margin-bottom: 8px;
      }
      &:nth-of-type(3),
      &:nth-of-type(4),
      &:nth-of-type(6),
      &:nth-of-type(7) {
        margin-right: 9px;
      }
    }
  }
  &.imgLen9 {
    .img_item {
      width: 228px;
      height: 228px;
      &:not(:nth-of-type(3n)) {
        margin-right: 9px;
      }
      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(3),
      &:nth-of-type(4),
      &:nth-of-type(5),
      &:nth-of-type(6) {
        margin-bottom: 8px;
      }
    }
  }
}
</style>