<template>
  <div class="demo-carousel-basic">
    <div class="block-item">
      <div class="block-item-title">
        默认 Hover 指示器触发
      </div>
      <ui-carousel
        height="200px"
        @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>
    <div class="block-item">
      <div class="block-item-title">
        Click 指示器触发
      </div>
      <ui-carousel
        height="200px"
        trigger="click"
        @change="change">
        <ui-carousel-item
          v-for="item of 10"
          :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>
  </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>

<style lang="scss">
.carousel-demo-block {
  display: flex;
  .block-item {
    flex: 1;
    padding: 10px;
  }

  .block-item-title {
    text-align: center;
    padding-bottom: 14px;
    font-size: 12px;
  }
}
</style>
