<template>
    <div class="swiper">
      <van-swipe :show-indicators=false @change="swiperChange">
        <van-swipe-item v-for="(image, index) in imgsList" :key="index">
          <img v-if="image" :src="image" @click="ImagePreviews(index)"/>
          <img v-else src="../../assets/imgs/swiper@2x.png" alt="">
          <img
            class="tag"
            v-show="marketUrl"
            :src="marketUrl"
            alt=""
            @click="ImagePreviews(index)"
            v-if="index === 0">
        </van-swipe-item>
      </van-swipe>
      <div class="swiper-lay flex_sb align-c">
        <p class="flex_c align-c" v-if="imgsList.length">{{activeSwipe}}/{{imgsList.length}}</p>
      </div>
    </div>
</template>

<script>
import { ImagePreview } from "vant";

export default {
  name: "DetailSwipe",
  props: {
    imgsList: {
      type: Array,
      required: true,
      default: function() {
        return [];
      }
    },
    marketUrl: {
      type: String
    }
  },
  data() {
    return {
      activeSwipe: 1
    };
  },
  created: function() {},
  mounted: function() {},
  methods: {
    // 切换图片
    swiperChange(index) {
      this.activeSwipe = index + 1;
    },
    // 查看大图
    ImagePreviews(index) {
      let instance = ImagePreview({
        images: this.imgsList,
        startPosition: 0
      });
      instance.startPosition = index;
    }
  }
};
</script>

<style scoped lang="less">
.swiper {
  overflow: hidden;
  margin-top: -40px;
  position: relative;
  height: calc(75vw);
  .van-swipe {
    img {
      width: 100%;
      height: calc(75vw);
      object-fit: cover;
    }
    .tag {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      border-radius: 10px;
      object-fit: contain;
    }
  }
  .swiper-lay {
    position: absolute;
    bottom: 15px;
    padding: 0 15px;
    width: 100%;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    p {
      width: 37px;
      height: 17px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      font-size: 11px;
      color: #fff;
    }
  }
}
</style>
