<script setup lang="ts">
import { ref } from 'vue';
import type { VxeModalInstance } from 'vxe-pc-ui';

type OptionalNumber = number | void;

interface Props {
  title?: string;
  content?: string;
  offset?: number;
}

const { title = '预览', offset = 60 } = defineProps<Props>();

const showPopup = ref(false);

const openEvent = () => {
  showPopup.value = true;
  if (modal.value?.isMinimized()) modal.value?.revert();
};
const modal = useTemplateRef<VxeModalInstance>('modal');
const modalProps = reactive({
  className: `editor-preview-wrapper`,
  lockView: false,
  lockScroll: false,
  mask: false,
  escClosable: true,
  showMinimize: true,
  zoomConfig: {
    minimizeOffsetMethod(params) {
      console.log(params, 'log:minimizeOffsetMethod');
      return {
        top: 0,
      };
    },
  },
  width: void 0 as OptionalNumber,
  height: void 0 as OptionalNumber,
  position: { top: void 0 as OptionalNumber, left: void 0 as OptionalNumber },
});

const device = shallowRef({ width: 430, height: 932, offsetX: 40, offsetY: 40 });
const deviceStyle = computed(() => {
  return {
    '--width': device.value.width,
    '--height': device.value.height,
    '--offsetX': device.value.offsetX,
    '--offsetY': device.value.offsetY,
    '--offsetTop': 60,
    '--offsetBottom': 40,
  };
});
watchEffect(() => {
  const { width, height, offsetX, offsetY } = device.value;
  const _width = width + offsetX * 2;
  const _height = height + offsetY * 2;
  const isFull = _height + 40 > window.innerHeight;
  modalProps.width = _width + /* 边框 1px * 2 */ 2;
  modalProps.height = isFull ? window.innerHeight - offset : void 0;
  modalProps.position.top = isFull ? offset : Math.max(0, Math.min(offset, window.innerHeight - (_height + 47.5)));
  modalProps.position.left = window.innerWidth - _width;
  modalProps.className = `editor-preview-wrapper ${isFull ? 'is-full' : ''}`;
});
const toggle = (open?: boolean) => {
  if (open) showPopup.value = open;
  else if (modal.value?.isMinimized()) modal.value?.revert();
  else showPopup.value = !showPopup.value;
};

defineExpose({ toggle });
</script>

<template>
  <vxe-modal ref="modal" v-model="showPopup" :title="title" v-bind="modalProps as any">
    <template #title="{ minimized }">
      <div v-if="minimized">预览</div>
      <div v-else>{{ title }}</div>
    </template>
    <template #default>
      <div :style="deviceStyle">
        <img class="mock-wrapper" src="./assets/iphone15-pro-max.png" alt="" />
        <div class="content-wrapper editor-generate-preview-wrapper">
          <slot name="preview-header" class="header"></slot>
          <slot name="preview-content" class="content w-e-text-container" :content>
            <div class="content w-e-text-container" v-html="content"></div>
          </slot>
          <slot name="preview-footer" class="footer"></slot>
        </div>
      </div>
    </template>
  </vxe-modal>
  <slot :toggle="toggle"></slot>
</template>
<style lang="scss">
.editor-preview-wrapper {
  &:not(.is-full) {
    .vxe-modal--box {
      height: auto !important;
    }
  }
  .vxe-modal--body-default {
    padding: 0 !important;
  }
  .vxe-modal--content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    > div {
      position: relative;
      width: calc(var(--width) * 1px + var(--offsetX) * 2px);
      height: calc(var(--height) * 1px + var(--offsetY) * 2px);
    }
  }
}
</style>
<style scoped lang="scss">
.mock-wrapper {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  pointer-events: none;
}
.content-wrapper {
  position: absolute;
  margin: 40px;
  top: -0.5px;
  left: -0.5px;
  padding-top: calc(var(--offsetTop) * 1px);
  padding-bottom: calc(var(--offsetBottom) * 1px);
  max-width: calc(var(--width) * 1px);
  max-height: calc(var(--height) * 1px);
  border-radius: 40px;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
  //background-color: rgba(255, 0, 0, 0.67);
}
</style>
