<template>
  <div :class="`custom-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`">
    <template v-if="showEntity">
      <!-- 实体区域 -->
      <div ref="entityRef" class="custom-preview-entity">
        <!-- 缩放层 -->
        <div ref="previewRef" class="custom-preview-scale">
          <!-- 展示层 -->
          <div :style="previewRefStyle" v-if="show">
            <!-- 渲染层 -->
            <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <!-- 缩放层 -->
      <div ref="previewRef" class="custom-preview-scale">
        <!-- 展示层 -->
        <div :style="previewRefStyle" v-if="show">
          <!-- 渲染层 -->
          <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup name="CustomDragViewer">
import { computed } from 'vue';
import PreviewRenderList from './preview-render-list.vue';
import { getSessionStorageInfo } from './utils/storage';
import { getEditCanvasConfigStyle, getFilterStyle } from './utils/style';
import { useComInstall } from './hooks/useComInstall.hook';
import { useScale } from './hooks/useScale.hook';
import { useStore } from './hooks/useStore.hook';

const localStorageInfo = await getSessionStorageInfo();

const previewRefStyle = computed(() => {
  return {
    ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
    ...getFilterStyle(localStorageInfo.editCanvasConfig)
  };
});

const showEntity = computed(() => {
  const type = localStorageInfo.editCanvasConfig.previewScaleType;
  return type === 'scrollY' || type === 'scrollX';
});

useStore(localStorageInfo);
const { entityRef, previewRef } = useScale(localStorageInfo);
const { show } = useComInstall(localStorageInfo);
</script>

<style lang="less" scoped>
.custom-preview {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(120deg, #fff 0%, #fff 100%);
  &.fit,
  &.full {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .custom-preview-scale {
      transform-origin: center center;
    }
  }
  &.scrollY {
    overflow-x: hidden;
    .custom-preview-scale {
      transform-origin: left top;
    }
  }
  &.scrollX {
    overflow-y: hidden;
    .custom-preview-scale {
      transform-origin: left top;
    }
  }
  .custom-preview-entity {
    overflow: hidden;
  }
}
</style>
