<script lang="ts" setup>
import { ref, onMounted, reactive,nextTick,onBeforeMount } from 'vue'
import {  useRoute } from 'vue-router'
import DvPreview from './DvPreview.vue'

// import { initCanvasData  } from '@/utils/canvasUtils'
// import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
const dvMainStore = dvMainStoreWithOut()
const state = reactive({
  canvasDataPreview: null,
  canvasStylePreview: null,
  canvasViewInfoPreview: null,
  dvInfo: null,
  curPreviewGap: 0
})
const dataInitState = ref(true)
const downloadStatus = ref(false)
const dvPreviewRef = ref(null)
const showPosition = ref("preview")
const route = useRoute()
const applicationId:any = ref('')
const busiFlag = ref('dataV')
onMounted(() => {
  applicationId.value = route.query.id
  loadCanvasData("1927640677370306561",9,0)
})
const loadCanvasData = (dvId, weight?, ext?) => {
  const initMethod = initCanvasData
  dataInitState.value = false
  initMethod(
    dvId,
    busiFlag.value,
    function ({
      canvasDataResult,
      canvasStyleResult,
      dvInfo,
      canvasViewInfoPreview,
      curPreviewGap
    }) {
      dvInfo['weight'] = weight
      dvInfo['ext'] = ext || 0
      state.canvasDataPreview = canvasDataResult
      state.canvasStylePreview = canvasStyleResult
      state.canvasViewInfoPreview = canvasViewInfoPreview
      state.dvInfo = dvInfo
      state.curPreviewGap = curPreviewGap
      dataInitState.value = true
      dvMainStore.updateCurDvInfo(dvInfo)
      nextTick(() => {
        dvPreviewRef.value?.restore()
      })
    }
  )
}


onBeforeMount(() => {
    dvMainStore.canvasDataInit()
})
</script>
<template>
  <div class="project-box">
      <dv-preview
          ref="dvPreviewRef"
          class="dvPreviewRef"
          v-if="state.canvasStylePreview && dataInitState"
          :show-position="showPosition"
          :canvas-data-preview="state.canvasDataPreview"
          :canvas-style-preview="state.canvasStylePreview"
          :canvas-view-info-preview="state.canvasViewInfoPreview"
          :dv-info="state.dvInfo"
          :cur-preview-gap="state.curPreviewGap"
          :download-status="downloadStatus"
        ></dv-preview> 
  </div>
</template>

<style lang="less" scoped>
  .project-box{
    width: 100vw;
    height: 100vh;
    background-color: rgba(21, 21, 21, 1);
    .project-content{
      display: flex;
    }
  }
  .Leftmenu{
    position: relative;
    z-index:2;
  }
  .dvPreviewRef{
    position: relative;
    z-index:1;
  }
</style>
