<template>
  <div class="banner-list-con">
    <van-swipe class="swipe" @change="onChange">
      <van-swipe-item
        v-for="(item, index) of bannerList"
        :key="`banner-swipe-item-${index}`"
      >
        <div class="swipe-img-con">
          <img
            class="swipe-img"
            :src="item.bannerImage"
           @click="openBanner(item)"
          />
        </div>
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator flex-center">
          <div
            v-for="item of bannerList.length"
            :key="`indicator-${item}`"
            :class="item - 1 == current ? ['item', 'active'] : ['item']"
          />
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      loading: true,
      bannerList: [],
      current: 0,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    handleClick(item) {
      window.open(item.url);
    },
    requestData() {
      this.loading = true;
      this.$api({
        apiName: "getBannerList",
        success: (res) => {
          this.bannerList = res;
          setTimeout(() => {
            this.loading = false;
            this.$emit("loadSuccess");
          }, 500);
        },
      });
    },
  },
};
</script>

<style lang="less">
.custom-indicator {
  width: 100%;
  position: absolute;
  bottom: 10px;
  > .item {
    background: #ffffff;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    opacity: 0.3;
    margin-right: 3px;
    &:last-of-type {
      margin-right: 0;
    }
    &.active {
      opacity: 1;
    }
  }
}
.banner-list-con {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 8px;
  height: 110px;

  .swipe-img-con {
    padding: 0 8px;
    height: 100%;
    height: 110px;
  }

  .swipe-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
  }
}
</style>
