<template>
  <PageWrapper dense fixed-height contentFullHeight @wheel-scroll="handleWheelScroll">
    <DraggableItem :list="formJson" :level="1" :wheelData="wheelData" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, provide, ref, unref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { getPageDesign } from '/@/api/system/pagedesign';
  import { useRouter } from 'vue-router';
  import DraggableItem from '../pagedesign/components/components/draggableItem.vue';
  import { isValidJSON } from '/@/utils/event/design';
  provide('preview', true);
  const { currentRoute } = useRouter();
  const { path } = unref(currentRoute);
  const menuId = ref();
  const formJson = ref();
  const wheelData = ref({});
  const paths = path.split('/');
  menuId.value = paths.length > 0 ? paths[paths.length - 1] : '';
  const refreshFieldObj = ref<object>({});
  const widgetFormModel = ref({});
  provide('refreshFieldObj', refreshFieldObj);
  provide('widgetFormModel', widgetFormModel);
  onMounted(async () => {
    let res = await getPageDesign(menuId.value);
    formJson.value = isValidJSON(res.formJson) ? JSON.parse(res.formJson) : [];
  });
  function handleWheelScroll(e) {
    wheelData.value = e;
  }
</script>
<style lang="less" scoped></style>
