<template>
  <div
    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />

    <div class="custom-node"
         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
      <swiper-container style="color: #fff" v-bind="swiperOptions" v-if="swiperShow"
                        :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
        <swiper-slide v-for="i in list"
                      :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
          <el-image :style="{width:'100%',height:'100%'}" :src="i" :fit="props.data.options.imageFit || 'contain'" />

          <!--          <img :src="i" style="width: 100%; height: 100%; object-fit: contain;" />-->
        </swiper-slide>
      </swiper-container>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
  </div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';

const swiperShow = ref(true);
const props = defineProps({
  ratioWidth: {
    type: Number,
    required: false,
    default: 1
  },
  ratioHeight: {
    type: Number,
    required: false,
    default: 1
  },
  isView: {
    type: Boolean,
    required: false
  },
  inputData: {
    type: Object,
    required: false
  },
  id: {
    type: String,
    required: true
  },
  isHideHandle: {
    type: Boolean,
    required: false
  },
  selected: {
    type: Boolean,
    required: false
  },
  data: {
    type: Object,
    required: true
  },
  dimensions: {
    type: Object,
    required: true
  }
});
const list = ref([
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]);
const swiperOptions = ref({});
const getSwiperOptions = () => {
  let obj = {};
  let data = props.data.options.swiperOptions || {};
  if (data.autoplay) {
    obj.autoplay = {};
    if (data.delay > 0) {
      obj.autoplay = {
        delay: data.delay
      };
    }
    if (data.pauseOnMouseEnter) {
      obj.pauseOnMouseEnter = data.pauseOnMouseEnter;
    }
  }
  if (data.speed) {
    obj.speed = data.speed;
  }
  if (data.loop) {
    obj.loop = data.loop;
  }
  if (data.navigation) {
    obj.navigation = { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' };
  }
  if (data.effect) {
    obj.effect = data.effect;
  }
  swiperOptions.value = obj;
};
watch(() => JSON.parse(JSON.stringify(props.data?.options?.swiperOptions || '{}')), (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    swiperShow.value = false;
    getSwiperOptions();
    nextTick(() => {
      swiperShow.value = true;
    });
  }
}, { deep: true, immediate: true });
watch(() => [JSON.parse(JSON.stringify(props.data?.options?.carouselImages || '[]')), JSON.parse(JSON.stringify(props.inputData?.value || ''))], (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    let value = props.inputData?.value || props.data?.options?.carouselImages || [];
    list.value = value;
    swiperShow.value = false;
    getSwiperOptions();
    nextTick(() => {
      swiperShow.value = true;
    });
    console.log(list.value);
  }
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
  emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
  width: 100%;
  height: 100%;

  .swiper-button-next {
    right: 0;
    opacity: 0;
    transition: all 0.3s ease;
  }

  .swiper-button-prev {
    left: 0;
    opacity: 0;
    transition: all 0.3s ease;
  }

  &:hover {
    .swiper-button-next {
      right: 10px;
      opacity: 1;
    }

    .swiper-button-prev {
      left: 10px;
      opacity: 1;
    }
  }
}
</style>
