import {
  defineComponent,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch
} from 'vue';
import Hammer from 'hammerjs';
import styles from './index.module.less';
import uniqueId from '/src/utils/unique';

export default defineComponent({
  name: 'ImageModal',
  props: {
    activeStatus: {
      type: Boolean,
      default: false
    },
    src: {
      type: String,
      default: ''
    }
  },
  emits: ['reset'],
  setup(props, { expose }) {
    const domId = uniqueId();
    const transform = reactive({
      scale: 1,
      x: 0,
      y: 0,
      startScale: 1,
      startX: 0,
      startY: 0,
      transition: ''
    });

    watch(
      () => props.activeStatus,
      () => {
        if (!props.activeStatus) {
          resetElement();
        }
      }
    );

    // 是否在拖拽
    const isDragging = ref(false);
    const loadElement = () => {
      const fingeringContainer = document.getElementById(domId);
      const mc = new Hammer.Manager(fingeringContainer as HTMLElement);
      mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
      mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan')]);

      let dragTimeout: any;

      mc.on('panstart pinchstart', function () {
        isDragging.value = true;
        clearTimeout(dragTimeout);
        transform.transition = '';

        console.log('start drag');
      });
      mc.on('panmove pinchmove', function (ev) {
        console.log(ev, 'ev');
        if (ev.type === 'pinchmove') {
          transform.x = transform.startX + ev.deltaX;
          transform.y = transform.startY + ev.deltaY;
          transform.scale = ev.scale * transform.startScale;
          if (transform.scale <= 1) {
            transform.scale = 1;
          } else if (transform.scale >= 3) {
            transform.scale = 3;
          }
        }
        if (ev.type === 'panmove') {
          transform.x = transform.startX + ev.deltaX;
          transform.y = transform.startY + ev.deltaY;
        }
      });
      mc.on('panend pinchend', function () {
        dragTimeout = setTimeout(() => {
          isDragging.value = false;
        }, 100); // 设置一个短暂的延迟以确保拖拽操作结束
      });
      //
      mc.on('hammer.input', function (ev) {
        if (ev.isFinal) {
          // isDragging.value = false;
          transform.startScale = transform.scale;
          transform.startX = transform.x;
          transform.startY = transform.y;
        }
      });
    };
    const resetElement = () => {
      transform.transition = 'all 0.3s';
      nextTick(() => {
        transform.scale = 1;
        transform.x = 0;
        transform.y = 0;
        transform.startScale = 1;
        transform.startX = 0;
        transform.startY = 0;
      });
    };

    /** 滚轮缩放 */
    const handleWheel = (e: WheelEvent) => {
      e.preventDefault();
      if (e.deltaY > 0) {
        transform.scale -= 0.1;
        if (transform.scale <= 1) {
          transform.scale = 1;
        }
      } else {
        transform.scale += 0.1;
        if (transform.scale >= 3) {
          transform.scale = 3;
        }
      }
    };

    onMounted(() => {
      loadElement();
      const fingeringContainer = document.getElementById(domId);
      fingeringContainer?.addEventListener('wheel', handleWheel);
    });

    onUnmounted(() => {
      const fingeringContainer = document.getElementById(domId);
      fingeringContainer?.removeEventListener('wheel', handleWheel);
    });

    expose({
      resetElement
    });
    return () => (
      <div class={styles['image-modal']} id={domId}>
        <img
          src={props.src}
          class={styles.fingeringContainer}
          style={{
            transform: `translate3d(${transform.x}px,${transform.y}px,0px) scale(${transform.scale})`,
            transition: transform.transition
          }}
        />
      </div>
    );
  }
});
