<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed, reactive, nextTick, onBeforeMount, watch } from 'vue'
import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
import FormCreate from '@/viewsnew/common/FormCreate.vue'
import { initCanvasData } from '@/utils/canvasUtils'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { moduleList } from '@/api/application/module'
import Navbar from '@/viewsnew/application/SfcEditor/NavbarEditor/assocPage.vue'
const props = defineProps({
  moduleinfo: Object,
  applicationId: String
})
const dvMainStore = dvMainStoreWithOut()
const showPosition = ref("preview")
const dvPreviewRef = ref(null)
const state = reactive({
  canvasDataPreview: null,
  canvasStylePreview: null,
  canvasViewInfoPreview: null,
  dvInfo: null,
  curPreviewGap: 0
})
const moduleInfo = ref({})
const isFormCreate = ref(false)
const busiFlag = ref('dataV')
const dataInitState = ref(true)
const downloadStatus = ref(false)
const loading = ref(false)
const isNavbar = ref(false)
const loadCanvasData = (dvId, weight?, ext?) => {
  const initMethod = initCanvasData
  dataInitState.value = false
  initMethod(
    dvId,
    { busiFlag: busiFlag.value, resourceTable: 'core' },
    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()
      })
    }
  )
}
onMounted(() => {
  isFormCreate.value = false
  dataInitState.value = false
  getInit()
})
watch(() => props.moduleinfo, (val) => {
  getInit()
  isFormCreate.value = false
  dataInitState.value = false
})
onBeforeMount(() => {
  dvMainStore.canvasDataInit()
})
function getInit() {
  loading.value = true
  const params = {
    id: props.moduleinfo.module_id,
    type: props.moduleinfo.module_type
  }
  handleNodeClick(params)
}
function handleNodeClick(e) {
  isFormCreate.value = false
  dataInitState.value = false
  isNavbar.value = false
  if (e.type == '0301') {
    busiFlag.value = 'dashboard'
    loadCanvasData(e.id, 9, 0)
    loading.value = false
  } else if (e.type == '03') {
    busiFlag.value = 'dataV'
    loading.value = false
    loadCanvasData(e.id, 9, 0)
  } else if (e.type == '04' || e.type == '05' || e.type == '06'||e.type == '09') {
    moduleInfo.value = e
    isFormCreate.value = true
    loading.value = false
  } else if (e.type == '02') {
    isNavbar.value = true
    loading.value = false
  }
}
</script>
<template>
  <div v-loading="loading" style="width: 100%;height: 100%;overflow: hidden;">
    <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>
    <form-create v-if="isFormCreate" :moduleInfo="moduleInfo"></form-create>
    <Navbar v-if="isNavbar"></Navbar>
  </div>
</template>
<style lang="less" scoped></style>