<script lang="ts" setup>
import { ref, onMounted, onUnmounted,computed, reactive,nextTick,onBeforeMount } from 'vue'
import Header from './header.vue'
import Leftmenu from './Leftmenu/index.vue'
import Rightmenu from './Rightmenu/index.vue'
import { findApplicationById } from "@/api/application/application";
import { useRouter, useRoute } from 'vue-router'
import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
import FormCreate from '@/viewsnew/common/FormCreate.vue'
import Navbar from '@/viewsnew/application/sfcEditor/NavbarEditor/previewNavSfc.vue'
import Login from '@/viewsnew/application/sfcEditor/LoginEditor/previewLogin.vue'
import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { getMenuTree } from '@/api/permission/menu'
import { storeToRefs } from 'pinia'
import { t } from '@/hooks/web/useI18n';
const dvMainStore = dvMainStoreWithOut()
const moduleInfo  = ref({})
const state = reactive({
  canvasDataPreview: null,
  canvasStylePreview: null,
  canvasViewInfoPreview: null,
  dvInfo: null,
  curPreviewGap: 0
})
const treeInfo:any = ref({})
const dataInitState = ref(true)
const downloadStatus = ref(false)
const dvPreviewRef = ref(null)
const showPosition = ref("preview")
const isNavbar = ref(false)
const isLogin = ref(false)
// const noClose = ref(false)
// const props = defineProps({
//   showPosition: {
//     required: false,
//     type: String,
//     default: 'preview'
//   },
//   noClose: {
//     required: false,
//     type: Boolean,
//     default: false
//   }
// })

const menuList = ref([])
const dataVKeepSize = computed(() => {
  return state.canvasStylePreview?.screenAdaptor === 'keep'
})

const {
  fullscreenFlag,
  componentData,
  curComponent,
  isClickComponent,
  canvasStyleData,
  canvasViewInfo,
  editMode,
  dvInfo,
  canvasState,
  batchOptStatus
} = storeToRefs(dvMainStore)

const isFormCreate = ref(false)
const route = useRoute()
const  projectInfo:any = ref({})
const applicationId:any = ref('')
const busiFlag = ref('dataV')
const isExecuteEvent = ref(false)
const projectId = ref('')
onMounted(() => {
  applicationId.value = route.query.id
  getInit()
})
function getInit() {
  findApplicationById(applicationId.value).then(res => {
    projectInfo.value = res.data.data
  })
}

const loadCanvasData = (dvId, weight?, ext?) => {
  // const initMethod = props.showPosition === 'multiplexing' ? initCanvasDataPrepare : initCanvasData
  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()
      })
      nextTick(() => {
        // onInitReloadCanvasDataady({ resourceId: dvId })
      })
    }
  )
}

function handleNodeClick(e){
  treeInfo.value = e 
  isFormCreate.value = false
  dataInitState.value = false
  isNavbar.value = false
  isLogin.value = false
  if(e.type == '0301'){
    busiFlag.value = 'dashboard'
    loadCanvasData(e.id,9,0)
  }else if(e.type == '03'){
    busiFlag.value = 'dataV'
    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
  } else if(e.type == '02'){
    isExecuteEvent.value = true
    projectId.value = e.id
    const params = { 
    appId: applicationId.value,
    name:'',
    isdisplay:''
   }
   getMenuTree(params).then(res => {
    menuList.value = res.data
    isNavbar.value = true
   })
  }else if(e.type == '01'){
    projectId.value = e.id
    isLogin.value = true
  }
}

onBeforeMount(() => {
    dvMainStore.canvasDataInit()
})
</script>
<template>
  <div class="project-box">
    <Header :projectInfo="projectInfo" :treeInfo="treeInfo" />
    <div class="project-content" v-if="applicationId != ''">
      <Leftmenu class="Leftmenu" v-if="applicationId != ''" :projectInfo="projectInfo" @handleNodeClick="handleNodeClick"/>
        <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 class="navbarpreview" v-if="isNavbar" :isFixed="true" :applicationId="applicationId" 
          :menuList="menuList" :projectId="projectId" :projectName="projectInfo.name" :isExecuteEvent="isExecuteEvent"></Navbar>
          <Login class="loginpreview" v-if="isLogin" :id="projectId" :name="projectInfo.name" :isExecuteEvent="true"></Login>
        </div>
  </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;
  }
  .navbarpreview{
    width: calc(100% - 260px);
    height: calc(100vh - 60px);
    // overflow: hidden;
  }
  .loginpreview{
    width: calc(100% - 260px);
    height: calc(100vh - 60px);
  }
</style>
<style>
.ed-message-box{
  background: #212121;
}
.ed-message-box__content{
  color: #ffffff;
}
.ed-message-box__btns .ed-button--primary{
  background: #0089ff;
  border-color: #0089ff;
}
.ed-message-box__btns .ed-button.is-secondary{
  color: #F2F4F5 !important;
  background-color: #212121 !important;
  border: 1px solid #434343 !important;
}
.ed-message-box__headerbtn{
  display: none;
}
</style>
