<template>
  <div class="demo-carousel-card">
    <ui-carousel
      type="card"
      height="220px"
      @change="change">
      <ui-carousel-item
        v-for="item of 6"
        :key="item"
        :style="{ backgroundColor: getRandomColor() }"
        style="background-color: #eee; display: flex; align-items: center;">
        <div style="flex: 1; text-align: center; color: #fff;">
          <h1>{{ item }}</h1>
        </div>
      </ui-carousel-item>
    </ui-carousel>
  </div>
</template>

<script>
import { Carousel, CarouselItem } from "amumu-ui"

const getRandomColor = (color = "") => {
  return (color += "0123456789abcdef"[Math.floor(Math.random() * 16)]) && color.length === 6
    ? color
    : getRandomColor(color)
}

export default {
  components: {
    uiCarousel: Carousel,
    uiCarouselItem: CarouselItem,
  },
  methods: {
    getRandomColor() {
      return `#${getRandomColor()}`
    },
    change(index) {
      console.log("current index: ", index)
    },
  },
}
</script>
