<template>
  <view class="swiperContainer">
    <swiper class="swiper" circular next-margin="6px">
      <swiper-item v-for="(item, index) in props.data" :key="{ index }">
        <view class="swiperItem" @click="handleSwiperJump(item)">
          <!-- <view class="isVip"></view> -->
          <image class="swiperItemBg" :src="item.picture || BannerBg" />
          <view class="swiperItemTitle">
            <text class="swiperItemType">{{ item.tag }}</text>
            {{ item.title }}
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
import BannerBg from "@/assets/images/banner.png";
const emit = defineEmits(["handleSwiperJump"]);

const props = defineProps({
  // 列表内容
  data: {
    type: Object,
    default: () => {},
  },
});

const handleSwiperJump = (item) => {
  emit("handleSwiperJump", item);
};
</script>

<style lang="scss" scoped>
.swiperContainer {
  margin: 12rpx 0;
  .swiper {
    height: 376rpx;
    .swiperItem {
      height: 376rpx;
      border-radius: 12rpx;
      overflow: hidden;
      margin-right: 9rpx;
      position: relative;
      .isVip {
        width: 58rpx;
        height: 32rpx;
        background-image: url(@/assets/images/icon_vip.png);
        background-size: cover;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
      .swiperItemBg {
        width: 100%;
        height: 100%;
      }
      .swiperItemTitle {
        width: 100%;
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
        padding: 20rpx 20rpx 36rpx 20rpx;
        // font-size: 32rpx;
        font-size: var(--h1-font-size);
        // font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0px;
        color: #ffffff;
        background-image: linear-gradient(0deg, #00000066 0%, #00000026 50%, #00000000 100%);
        font-family: "SourceHanSansCN-Medium";
        .swiperItemType {
          display: inline-block;
          box-sizing: border-box;
          padding: 6rpx 16rpx;
          border-radius: 4rpx;
          background-color: #e7303f;
          // font-size: 24rpx;
          font-size: var(--h4-font-size);
          font-family: "SourceHanSansCN-Regular";
        }
      }
    }
  }
}
</style>
