<script setup lang="ts">
import { fullUrl } from '@/utils/common'
import { pageUrl } from '@/utils/constants'
import type { bannerItem } from '@/types/home'
import { computed, ref } from 'vue'

//轮播图下标提示点
const activeIndex = ref(0)

const updateActiveIndex: UniHelper.SwiperOnChange = (event) => {
  activeIndex.value = event.detail.current
}
//接收组件值
const props = defineProps<{
  list: bannerItem[]
}>()

const navigatorUrl = computed(() => {
  return props.list[activeIndex.value]?.jump && props.list[activeIndex.value]?.goods_id
    ? `${pageUrl['goods-detail']}?id=${props.list[activeIndex.value].goods_id}`
    : ''
})
</script>

<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="true" :interval="3000" @change="updateActiveIndex">
      <swiper-item v-for="item in list" :key="item.id">
        <navigator :url="navigatorUrl" hover-class="none" class="navigator">
          <image class="image" :src="fullUrl(item.image)"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(item, index) in props.list"
        :key="item.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.carousel {
  height: 400rpx;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
  .navigator,
  .image {
    width: 100%;
    height: 100%;
  }
}

swiper {
  height: 100%;
}
</style>
