<script lang="ts" setup>
interface Props {
  show: boolean
  imgsUrlList: string[]
  initialSwipe: number
}
const props = defineProps<Props>()
const emits = defineEmits(['update:show'])

const currentIndex = ref(props.initialSwipe)

function onSwipeChange(idx: number) {
  currentIndex.value = idx
}

watch(() => props.initialSwipe, (val) => {
  currentIndex.value = val
}, {
  immediate: true,
})

// function onSave() {
//   useDownloadImage().downloadImg(props.imgsUrlList[currentIndex.value], `简言_${new Date().getTime()}`)
//   showToast('下载完成')
// }
</script>

<template>
  <van-overlay :show="props.show" teleport="body" class="van-popup-remove-bg" z-index="999999999">
    <div class="wrap">
      <div class="text-wrap">
        长按保存相册
      </div>
      <div class="close-btn-wrap">
        <img class="close-btn" src="@/assets/images/close-img.png" alt="" @click="emits('update:show', false)">
      </div>
      <div class="images-viewer-wrap">
        <!-- :initial-swipe="props.initialSwipe" -->
        <van-swipe :loop="false" :initial-swipe="props.initialSwipe" class="my-swipe" indicator-color="white" @change="onSwipeChange">
          <van-swipe-item v-for="(item, index) in props.imgsUrlList" :key="index">
            <div class="image-item-wrap">
              <img :src="item" alt="">
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- <div class="save-btn" @click="onSave">
      保存到相册
    </div> -->
  </van-overlay>
</template>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: center;
  position: relative;
  box-sizing: border-box;
  padding: 0 12px;
  .text-wrap {
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
    line-height: 16px;
    text-align: center;
    font-style: normal;
    margin-bottom: 18px;
    margin-top: 40px;
  }
  .images-viewer-wrap {
    margin-bottom: 24px;
  }
  .close-btn-wrap {
    // position: absolute;
    // right: 24px;
    // top: 24px;
  }
}
.my-swipe {
  width: 100%;
  height: 100%;
}
.image-item-wrap {
  width: 100%;
  height: calc(100vh - 100px);
  overflow-y: scroll;
  img {
    max-width: 100%;
  }
}
.image-item-wrap::-webkit-scrollbar {
  display: none;
}

.close-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 12px;
  padding-right: 8px;
  box-sizing: border-box;
  .close-btn {
    width: 16px;
    height: 16px;
  }
}

.save-btn {
  width: 160px !important;
  height: 32px !important;
  margin: 0 auto;
  background: #29a794;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 18px;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #ffffff;
  line-height: 18px;
  text-align: center;
  font-style: normal;
  margin-top: 16px;
}
</style>

<style lang="scss" scoped>
.van-swipe-item {
  height: auto !important;
}
</style>
<!--
<style>
.van-popup-remove-bg {
  background-color: rgba(255, 255, 255, 0) !important;
  width: 100% !important;
  margin: 0 !important;
  width: 100vw;
  height: 100vh;
}
</style> -->
