<template>
  <div class="swipe-wrap">
    <Swipe :height="height" lazy-render>
      <slot>
        <SwipeItem
          v-for="(item, index) in list"
          :key="item"
          @click.stop="onClick(index)"
        >
          <template v-if="type === 'img'">
            <img :src="item" class="swipe-img-item" :alt="item" />
          </template>
        </SwipeItem>
      </slot>
      <template
        #indicator="{ active, total }"
        v-if="indicatorsOutLine || $slots.footer"
      >
        <div class="footer-line" v-if="indicatorsOutLine">
          <div class="active-line" :style="outLineActiveStyle(active, total)"></div>
        </div>
        <slot
          name="footer"
          :active="active"
          :total="total"
          v-if="$slots.footer"
        ></slot>
      </template>
    </Swipe>
  </div>
</template>

<script lang="ts">
export default {
  name: "WlSwipe",
};
</script>

<script setup lang="ts">
import { Swipe, SwipeItem, showImagePreview } from "vant";
import { computed } from "vue";

type TProps = {
  list: any[];
  height: string;
  type: string;
  indicatorsOutLine: boolean;
  imagePreview: boolean;
};
const props = withDefaults(defineProps<TProps>(), {
  list: () => [],
  height: "",
  indicatorsOutLine: false,
  imagePreview: true,
});

const emit = defineEmits<{
  (e: "onClick", val: number);
}>();

const outLineActiveStyle = computed(() => {
  return (active, total) => {
    const width = 100 / total;
    const left = width * active;
    return {
      width: width + "%",
      left: left + "%"
    }
  };
});

const onClick = (index) => {
  if (props.imagePreview && props.type === "img") {
    showImagePreview({
      images: props.list,
      startPosition: index,
      closeable: true,
      className: "img-preview"
    });
  }
  emit("onClick", index);
};
</script>

<style lang="scss" scoped>
.swipe-wrap {
  width: 100%;
  height: fit-content;
  max-width: 650px;
  .swipe-img-item {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: v-bind(height);
    margin: auto;
    // pointer-events: v-bind(swipeItemPointerEvent);
  }
  .footer-line {
    width: j(140);
    height: j(2);
    position: absolute;
    bottom: 0;
    left: calc(50% - 0.7rem);
    border-radius: j(32);
    background-color: rgba(0, 0, 0, 0.1);
    .active-line {
      background-color: rgba(0, 0, 0, 0.5);
      height: j(2);
      border-radius: j(32);
      position: absolute;
      top: 0;
      transition: left 0.3s ease 0s
    }
  }
}
:deep(.van-swipe) {
  padding-bottom: j(10);
  .van-swipe__track {
    background-color: white;
  }
}
</style>
