<template>
  <view style="position: relative">
    <swiper
      class="swiper"
      :circular="false"
      :indicator-dots="list.length > 1 ? true : false"
      :autoplay="false"
      :interval="2000"
      :duration="500"
      indicator-active-color="#2E53CC"
      @change="change"
      :current="current"
    >
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="image-box">
          <image :src="`${url}/static/img/${item.imgUrl}`"></image>
        </view>
      </swiper-item>
    </swiper>

    <!-- <view class="left" v-if="current > 0" @click="sub">
      <up-icon name="arrow-left" color="#2E53CC" :size="'12px'"></up-icon>
    </view>
    <view class="right" v-if="current < list.length - 1" @click="add">
      <up-icon
        name="arrow-right"
        color="#2E53CC"
        :size="'12px'"
      ></up-icon> </view
  > -->
  </view>
</template>

<script setup lang="ts">
import { url } from "@/utils/data";
const props = withDefaults(
  defineProps<{
    list: any;
  }>(),
  {
    list: [
      {
        imgUrl: "b-a1.png",
      },
      {
        imgUrl: "b-a2.png",
      },
      {
        imgUrl: "b-a3.png",
      },
    ],
  }
);

const current = ref(0);

const change = (e: any) => {
  current.value = e.detail.current;
};

// const add = () => {
//   current.value++
// };

// const sub = () => {
//   current.value--;
// };
</script>
<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 400rpx;
  .image-box {
    text-align: center;
    cursor: pointer;
    image {
      width: 100%;
    }
  }
  .title {
    font-size: 40rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: $u-primary;
    margin-top: 90rpx;
  }
}
</style>
