<template>
  <div>
    <van-swipe class="goods-img-swiper-con" :show-indicators="false" :loop="false">
      <van-swipe-item
        v-for="(item, index) of list"
        :key="'swiper-item-' + index"
        class="swiper-item"
        @click="previewItem(index)"
      >
        <m-icon
          icon="icon-video-play"
          :size="40"
          class="video-play-icon"
          v-if="item.type == 'video'"
        />
        <img :src="item.url" class="swiper-img" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      current: 0,
      show: false,
      index: 0,
    };
  },
  methods: {
    previewItem(index) {
      this.$PreviewImage({
        sources:this.list,
        current:index})
    },
  },
};
</script>

<style lang="less">
.goods-img-swiper-con {
  height: 350px;
  background: #ffffff;

  .swiper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
