<template>
  <div class="carousel-component">
    <Carousel v-if="configList.length" arrow="never" :interval="config.interval" height="200px">
      <CarouselItem
        v-for="(item, index) in configList"
        :key="index"
      >
        <img :src="item.src || defaultImg">
      </CarouselItem>
    </Carousel>
    <div v-else class="default-image">
      <img :src="item.src || defaultImg">
    </div>
  </div>
</template>

<script>
import { Carousel, CarouselItem } from 'element-ui'
import defaultImg from '@/assets/CreationCamp/defaultBanner.png'
export default {
  components: {
    Carousel,
    CarouselItem
  },
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      defaultImg
    }
  },
  computed: {
    configContent() {
      return this.config.content
    },
    configList() {
      const { list } = this.configContent
      return list || []
    }
  }
}
</script>

<style lang="less" scoped>
.carousel-component {
  width: 100%;
  padding: 0 !important;
  box-shadow: 0px 5px 15px 0px rgba(88, 131, 147, 0.3);
  img {
    width: 100%;
    height: 100%;
  }
  .default-image{
    height: 200px;
  }
}
</style>
