<template>
  <div class="image-component">
    <div class="image-box">
      <div v-if="configContent.number===1" class="img-item-1">
        <img :src="imageList[0].src || default1" alt="">
      </div>
      <div v-if="configContent.number===2" class="img-item-2">
        <div v-for="(item, index) in imageList" :key="index" class="img-item">
          <img :src="item.src|| default2" alt="">
        </div>
      </div>
      <div v-if="configContent.number===3" class="img-item-3">
        <div class="img-item-left">
          <img :src="imageList[0].src || default2" alt="">
        </div>
        <div class="img-item-right">
          <div class="img-item">
            <img :src="imageList[1].src|| default3" alt="">
          </div>
          <div class="img-item">
            <img :src="imageList[2].src|| default3" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import default1 from '@/assets/CreationCamp/image-default-1.png'
import default2 from '@/assets/CreationCamp/image-default-2.png'
import default3 from '@/assets/CreationCamp/image-default-3.png'
export default {
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      default1,
      default2,
      default3
    }
  },
  computed: {
    configContent() {
      return this.config.content
    },
    imageList() {
      const { number } = this.configContent
      return this.configContent.list.slice(0, number)
    }
  }
}
</script>
<style lang="less" scoped>
.image-component {
  padding: 10px 0;
	.image-box {
    width: 100%;
    text-align: center;
    .img-item-1{
      display: inline-block;
      width: 345px;
      height: 80px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .img-item-2{
      display: flex;
      .img-item{
        width: calc((100%-2px) /2);
        height: 120px;
        &:last-child{
          margin-left: 2px;
        }
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .img-item-3{
      display: flex;
      .img-item-left{
        height: 115px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .img-item-right{
         margin-left: 5px;
        .img-item{
          width: 100%;
          height: 55px;
          &:last-child{
            margin-top: 5px;
          }
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
	}
}
</style>
