<template>
  <van-overlay class="popup_banner" :show="show">
    <van-icon class="popup_close" name="close" @tap="onClose"/>
    <van-swipe class="popup_swipe" lazy-render :autoplay="3000" indicator-color="white" @tap.stop>
      <van-swipe-item v-for="item in list">
        <img class="popup_image" :src="item.iconpath" @tap="goto(item.josnContent)"/>
      </van-swipe-item>
    </van-swipe>
  </van-overlay>
</template>

<script setup lang="ts">
interface Props {
  show: boolean;
  list: Array<any>;
}
const props = withDefaults(defineProps<Props>(), {
  show: false,
  list: () => []
});
const emit = defineEmits(["update:show"]);

function onClose() {
  emit("update:show", false);
}
function goto(url: any) {
  url && uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.popup_banner {
  z-index: 100;
  vertical-align: middle;
}
.popup_image {
  max-width: 80vw;
  height: calc(100vh - 240px);
  object-fit: contain;
}
.popup_swipe {
  margin: 120px 0;
}
.popup_close {
  position: absolute;
  right: 37px;
  top: 80px;
  font-size: 40px;
  color: #fff;
  z-index: 8;
}
</style>
