<script setup lang="ts">
import { ref, watch, watchEffect, CSSProperties, computed } from 'vue';
import { useDraggable } from '@vueuse/core';
const emit = defineEmits(['update:visible', 'ok', 'cancel']);
/**于a-modal保持一致 */
const props = defineProps({
  /**是否弹出显示，必传 */
  visible: {
    type: Boolean,
    required: true,
  },
  /**窗口标题 */
  title: {
    type: String,
    default: '',
  },
  /**窗口宽度 */
  width: {
    type: [String, Number],
    default: '520px',
  },
  bodyStyle: {
    type: Object,
    default: {},
  },
  keyboard: {
    type: Boolean,
    default: true,
  },
  mask: {
    type: Boolean,
    default: true,
  },
  maskClosable: {
    type: Boolean,
    default: true,
  },
  maskStyle: {
    type: Object,
    default: {},
  },
  destroyOnClose: {
    type: Boolean,
    default: false,
  },
  confirmLoading: {
    type: Boolean,
    default: false,
  },
  footer: {
    type: Object,
  },
});

// 对标题进行监听
const modalTitleRef = ref<HTMLElement | null>(null);
const { x, y, isDragging } = useDraggable(modalTitleRef);

const startX = ref<number>(0);
const startY = ref<number>(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });

watch([x, y], () => {
  if (!startedDrag.value) {
    startX.value = x.value;
    startY.value = y.value;
    const bodyRect = document.body.getBoundingClientRect();
    const titleRectEl = modalTitleRef.value;
    if (titleRectEl) {
      const titleRect = titleRectEl.getBoundingClientRect();
      dragRect.value.right = bodyRect.width - (titleRect.width + 24);
      dragRect.value.bottom = bodyRect.height - (titleRect.height + 16);
    }
    preTransformX.value = transformX.value;
    preTransformY.value = transformY.value;
  }
  startedDrag.value = true;
});

watchEffect(() => {
  if (!isDragging.value) {
    startedDrag.value = false;
  }
  if (startedDrag.value) {
    const dragRectX = Math.min(
      Math.max(dragRect.value.left + 24, x.value),
      dragRect.value.right
    );
    transformX.value = preTransformX.value + dragRectX - startX.value;

    const dragRectY = Math.min(
      Math.max(dragRect.value.top + 16, y.value),
      dragRect.value.bottom
    );
    transformY.value = preTransformY.value + dragRectY - startY.value;
  }
});

// 位移
const transformStyle = computed<CSSProperties>(() => {
  return {
    transform: `translate(${transformX.value}px, ${transformY.value}px)`,
  };
});

/**监听是否显示，位置还原 */
watch(
  () => props.visible,
  val => {
    if (val) {
      transformX.value = 0;
      transformY.value = 0;
    }
  }
);
</script>

<template>
  <a-modal
    wrapClassName="draggable-modal"
    :width="props.width"
    :keyboard="props.keyboard"
    :mask="props.mask"
    :mask-closable="props.maskClosable"
    :visible="props.visible"
    :confirm-loading="props.confirmLoading"
    :body-style="props.bodyStyle"
    :mask-style="props.maskStyle"
    :destroy-on-close="props.destroyOnClose"
    :footer="props.footer"
    @ok="(e:any) => emit('ok', e)"
    @cancel="(e:any) => emit('cancel', e)"
  >
    <template #title>
      <div
        ref="modalTitleRef"
        class="draggable-modal-title"
        v-text="title"
      ></div>
    </template>
    <template #modalRender="{ originVNode }">
      <div :style="transformStyle">
        <component :is="originVNode" />
      </div>
    </template>
    <slot></slot>
  </a-modal>
</template>

<style lang="less">
.draggable-modal {
  // 穿透选择文字
  // 给a-modal设置 get-container=".ant-pro-page-container"
  // 防止跳转显示
  // &.ant-modal-wrap {
  //   pointer-events: none;
  // }
  &-title {
    width: 100%;
    cursor: move;
  }
}
</style>
