<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({ path: '/' })"></a>
      <div class="comp-title">Carousel</div>
    </div>
    <NoticeBar
      left-icon="voice"
      mode="closable"
      text="该组件只支持Touch事件，请使用移动模式/设备打开此示例"
    />
    <h3>基本示例</h3>
    <h4>基础</h4>
    <section class="section">
      <carousel
        dots
        :edgeSliderDistance="0.3"
        :sliderWidth="1"
        sliderHeight="160px"
        @onChange="handleChange"
      >
        <carousel-item v-for="(item, index) in sliders" :key="index">
          <div class="carousel_content" :class="`slide_${index}`">{{ item.value }}</div>
        </carousel-item>
      </carousel>
      <h4>自定义</h4>
      <carousel
        dots
        infinite
        :dotStyle="dotStyle"
        :dotActiveStyle="dotActiveStyle"
        :sliderItemWidth="1"
        :sliderWidth="1"
        sliderHeight="160px"
      >
        <carousel-item v-for="(item, index) in sliders" :key="index">
          <div class="carousel_content" :class="`slide_${index}`">{{ item.value }}</div>
        </carousel-item>
      </carousel>
      <h4>无限滑动</h4>
      <carousel
        infinite
        dots
        :edgeSliderDistance="0.3"
        :sliderWidth="1"
        :sliderItemWidth="1"
        sliderHeight="160px"
        @onChange="handleChange"
      >
        <carousel-item v-for="(item, index) in sliders" :key="index">
          <div class="carousel_content" :class="`slide_${index}`">{{ item.value }}</div>
        </carousel-item>
      </carousel>
      <h4>自动播放</h4>
      <carousel
        autoplay
        infinite
        dots
        :edgeSliderDistance="0.3"
        :sliderWidth="1"
        :sliderItemWidth="1"
        sliderHeight="160px"
        @onChange="handleChange"
      >
        <carousel-item v-for="(item, index) in sliders" :key="index">
          <div class="carousel_content" :class="`slide_${index}`">{{ item.value }}</div>
        </carousel-item>
      </carousel>
      <h4>切换按钮</h4>
      <carousel
        hasButton
        dots
        infinite
        :dotStyle="dotStyle"
        :dotActiveStyle="dotActiveStyle"
        :sliderWidth="1"
        :sliderItemWidth="1"
        sliderHeight="160px"
      >
        <carousel-item v-for="(item, index) in sliders" :key="index">
          <div class="carousel_content" :class="`slide_${index}`">{{ item.value }}</div>
        </carousel-item>
      </carousel>
      <h4>cellSpacing</h4>
      <carousel
        dots
        :cellSpacing="30"
        :edgeSliderDistance="0.3"
        :sliderWidth="1"
        :sliderItemWidth="0.7"
        sliderHeight="160px"
      >
        <carousel-item
          v-for="(item, index) in sliders"
          :key="index"
          @click="clickPage(index)"
        >
          <div class="carousel_content" :class="`slide_${index}`">{{ item.value }}</div>
        </carousel-item>
      </carousel>
      <h4>cellSpacing & center</h4>
      <carousel
        autoplay
        infinite
        ItemPosition="center"
        dots
        :cellSpacing="30"
        :edgeSliderDistance="0.3"
        :sliderWidth="1"
        :sliderItemWidth="0.6"
        sliderHeight="160px"
      >
        <carousel-item v-for="(item, index) in sliders" :key="index">
          <div class="carousel_content" :class="`slide_${index}`">{{ item.value }}</div>
        </carousel-item>
      </carousel>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliders: [
        {
          key: "slide_1",
          value: "slide 1",
        },
        {
          key: "slide_2",
          value: "slide 2",
        },
        {
          key: "slide_3",
          value: "slide 3",
        },
        {
          key: "slide_4",
          value: "slide 4",
        },
      ],
      dotStyle: {
        'background-color': "#999999",
        width: "10px",
        height: "10px",
        'border-radius': '0'
      },
      dotActiveStyle: {
        "background-color": "#03C03C",
        width: "10px",
        height: "10px",
        'border-radius': '0'
      },
    };
  },
  methods: {
    handleChange(val) {},
    clickPage(index) {
      console.log(index);
    },
  },
};
</script>
<style lang="less" scoped>
.section {
  padding: 0 0 24px;
}
.demoH4 {
  margin: 24px 0;
}
.carousel_content {
  height: 100%;
  background: #1089FF;
  background: -webkit-linear-gradient(to right bottom, #1089FF, #40A9FF, #71FFFF);
  background: linear-gradient(to right bottom, #1089FF, #40A9FF, #71FFFF);
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 32px;
  color: #FFFFFF;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, .15);
 }
</style>