<template>
  <DesktopLayout class="preview-box">
    <template #head>
      <DesignHead :title="t('设计预览')">
        <template #buttons>
          <div class="design-button">
            <a-button type="primary" class="clean-icon" @click="$emit('close')">{{
              t('关闭')
            }}</a-button>
          </div></template
        >
      </DesignHead>
    </template>
    <div>
      <PageWrapper dense fixed-height contentFullHeight @wheel-scroll="handleWheelScroll">
        <DraggableItem :list="formJson" :level="1" :wheelData="wheelData" />
      </PageWrapper>
    </div>
  </DesktopLayout>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import DraggableItem from './components/draggableItem.vue';
  import { DesktopLayout, DesignHead } from '/@/components/Desktop';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { provide, ref } from 'vue';

  const { t } = useI18n();
  defineEmits(['close']);
  defineProps({ formJson: Array });
  const wheelData = ref({});
  provide('preview', true);
  const refreshFieldObj = ref<object>({});
  const widgetFormModel = ref({});
  provide('refreshFieldObj', refreshFieldObj);
  provide('widgetFormModel', widgetFormModel);
  function handleWheelScroll(e) {
    wheelData.value = e;
  }
</script>

<style lang="less" scoped>
  :deep(.layout) {
    padding: 0;
  }
</style>
