<template>
  <view class="mx-4">
    <wd-swiper
      :list="swiperList"
      autoplay
      height="100"
      indicatorPosition="bottom-left"
      v-model:current="current"
      :indicator="{ type: 'dots-bar' }"
      @click="handleClick"
      @change="onChange"
    ></wd-swiper>
  </view>
</template>

<script setup lang="ts">
  const current = ref<number>(0)

  const swiperList = ref<Array<string>>([
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg'
  ])

  const emits = defineEmits(['colorChange'])

  function handleClick(e) {
    console.log(e)
  }

  function onChange(e) {
    if (e.current === 0) {
      emits('colorChange', '#bfcbef')
    } else {
      emits('colorChange', '#f0d6ad')
    }
  }
</script>
