<script setup lang="ts">
import { findNewComponentFromList } from '@/custom-component/component-list' // 左侧列表数据
import { computed, nextTick, onMounted, reactive, ref, toRefs, onBeforeUnmount, watch } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { storeToRefs } from 'pinia'
import eventBus from '../../utils/eventBus'
import { guid } from '@/views/visualized/data/dataset/form/util.js'
import elementResizeDetectorMaker from 'element-resize-detector'
import { getCanvasStyle, syncShapeItemStyle } from '@/utils/style'
import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle'
import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
import { isMainCanvas, isDashboard } from '@/utils/canvasUtils'

// change-begin
const props = defineProps({
  canvasStyleData: {
    type: Object,
    required: true
  },
  componentData: {
    type: Array,
    required: true
  },
  canvasViewInfo: {
    type: Object,
    required: true
  },
  canvasId: {
    type: String,
    required: false,
    default: 'canvas-main'
  },
  canvasActive: {
    type: Boolean,
    default: true
  },
  outerScale: {
    type: Number,
    required: false,
    default: 1
  },
  // 仪表板字体
  fontFamily: {
    type: String,
    required: false,
    default: 'inherit'
  },
  // 画布位置
  canvasPosition: {
    type: String,
    required: false,
    default: 'main'
  }
})
const { canvasStyleData, componentData, canvasViewInfo, canvasId, canvasActive, canvasPosition } =
  toRefs(props)
const domId = ref('de-canvas-' + canvasId.value)
// change-end

const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const { pcMatrixCount, curOriginThemes, mobileInPc } = storeToRefs(dvMainStore)
const canvasOut = ref(null)
const canvasInner = ref(null)
const canvasInitStatus = ref(false)
const scaleWidth = ref(100)
const scaleHeight = ref(100)
const scaleMin = ref(100)

const state = reactive({
  screenWidth: 1920,
  screenHeight: 1080,
  curScrollTop: 0
})

//仪表板矩阵信息适配，
const baseWidth = ref(0)
const baseHeight = ref(0)
const renderState = ref(false) // 仪表板默认
const baseMarginLeft = ref(0)
const baseMarginTop = ref(0)
const cyGridster = ref(null)
const editDomId = ref('edit-' + canvasId.value)

const editStyle = computed(() => {
  if (canvasStyleData.value && isMainCanvas(canvasId.value)) {
    return {
      ...getCanvasStyle(canvasStyleData.value)
    }
  } else {
    return {}
  }
})

// 通过实时监听的方式直接添加组件
const handleNewFromCanvasMain = newComponentInfo => {
  const { componentName, innerType, staticMap } = newComponentInfo
  if (componentName) {
    const component = findNewComponentFromList(componentName, innerType, curOriginThemes, staticMap)
    syncShapeItemStyle(component, baseWidth.value, baseHeight.value)
    component.id = guid()
    component.y = undefined
    component.x = cyGridster.value.findPositionX(component)
    dvMainStore.addComponent({
      component: component,
      index: undefined
    })
    adaptCurThemeCommonStyle(component)
    nextTick(() => {
      cyGridster.value.addItemBox(component) //在适当的时候初始化布局组件
      nextTick(() => {
        scrollTo(component.y)
      })
    })
    snapshotStore.recordSnapshotCacheWithPositionChange('renderChart', component.id)
  }
}

const handleDrop = e => {
  if (isMainCanvas(canvasId.value)) {
    e.preventDefault()
    e.stopPropagation()
    const addComponent = cyGridster.value.getMoveItem()
    // 当前isShow =  true 则确定已经移入画布中
    addComponent.isShow = true
    syncShapeItemStyle(addComponent, baseWidth.value, baseHeight.value)
    cyGridster.value.handleMouseUp(e, addComponent, componentData.value.length - 1)
    snapshotStore.recordSnapshotCacheWithPositionChange('renderChart', addComponent.id)
  }
}

const handleDragOver = e => {
  if (isMainCanvas(canvasId.value)) {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'copy'
    cyGridster.value.handleDragOver(e)
  }
}

const handleMouseDown = e => {
  if (isMainCanvas(canvasId.value)) {
    e.stopPropagation()
    dvMainStore.setClickComponentStatus(false)
    dvMainStore.setInEditorStatus(true)
    dvMainStore.setCurComponent({ component: null, index: null })
  }
}

const canvasInitImmediately = () => {
  cyGridster.value.canvasInit()
}

const canvasInit = (isFistLoad = true) => {
  if (canvasActive.value || canvasPosition.value === 'tab') {
    renderState.value = true
    setTimeout(function () {
      if (canvasOut.value) {
        dashboardCanvasSizeInit()
        nextTick(() => {
          cyGridster.value.canvasInit() //在适当的时候初始化布局组件
          cyGridster.value.afterInitOk(function () {
            renderState.value = false
          })
        })
      }
      // afterInit
      dvMainStore.setDataPrepareState(true)
      if (isMainCanvas(canvasId.value) && isFistLoad) {
        snapshotStore.recordSnapshotCache('renderChart')
      }
    }, 500)
  }
}

const canvasSizeInit = () => {
  nextTick(() => {
    if (canvasOut.value) {
      //div容器获取tableBox.value.clientWidth
      dashboardCanvasSizeInit()
      nextTick(() => {
        cyGridster.value.canvasSizeInit() //在适当的时候初始化布局组件
        // 缩放比例变化
        scaleInit()
      })
    }
  })
}

const scaleInit = () => {
  nextTick(() => {
    if (canvasOut.value) {
      //div容器获取tableBox.value.clientWidth
      let canvasWidth = canvasOut.value.clientWidth
      let canvasHeight = canvasOut.value.clientHeight
      scaleWidth.value = Math.floor((canvasWidth * 100) / canvasStyleData.value.width)
      scaleHeight.value = Math.floor((canvasHeight * 100) / canvasStyleData.value.height)
      scaleMin.value = Math.min(scaleWidth.value, scaleHeight.value)
      if (isDashboard() && isMainCanvas(canvasId.value)) {
        const offset = mobileInPc.value ? 4 : 1
        dvMainStore.setCanvasStyleScale(scaleMin.value * offset)
      }
    }
  })
}

const dashboardCanvasSizeInit = () => {
  //div容器获取tableBox.value.clientWidth
  state.screenWidth = canvasOut.value.clientWidth - 4
  state.screenHeight = canvasOut.value.clientHeight
  baseWidth.value = state.screenWidth / pcMatrixCount.value.x
  baseHeight.value = state.screenHeight / pcMatrixCount.value.y
  baseMarginLeft.value = 0
  baseMarginTop.value = 0
  canvasInitStatus.value = true
  if (isMainCanvas(canvasId.value)) {
    dvMainStore.setBashMatrixInfo({
      baseWidth: baseWidth.value,
      baseHeight: baseHeight.value,
      baseMarginLeft: baseMarginLeft.value,
      baseMarginTop: baseMarginTop.value
    })
  }
}
const addItemBox = component => {
  cyGridster.value.addItemBox(component)
}

const moveOutFromTab = component => {
  setTimeout(() => {
    component.canvasId = canvasId.value
    dvMainStore.addComponent({
      component,
      index: undefined,
      isFromGroup: true
    })
    addItemBox(component)
    canvasInit()
  }, 500)
}

// 全局监听按键事件
onMounted(() => {
  window.addEventListener('resize', canvasSizeInit)
  const erd = elementResizeDetectorMaker()
  erd.listenTo(document.getElementById(domId.value), () => {
    canvasSizeInit()
  })
  canvasInit()
  if (isMainCanvas(canvasId.value)) {
    eventBus.on('handleNew', handleNewFromCanvasMain)
    eventBus.on('event-canvas-size-init', canvasSizeInit)
  }
  eventBus.on('moveOutFromTab-' + canvasId.value, moveOutFromTab)
  eventBus.on('matrix-canvasInit', canvasInit)
})

onBeforeUnmount(() => {
  if (isMainCanvas(canvasId.value)) {
    eventBus.off('handleNew', handleNewFromCanvasMain)
    eventBus.off('event-canvas-size-init', canvasSizeInit)
  }
  eventBus.off('moveOutFromTab-' + canvasId.value, moveOutFromTab)
  eventBus.off('matrix-canvasInit', canvasInit)
})

const getBaseMatrixSize = () => {
  return {
    baseWidth: baseWidth.value,
    baseHeight: baseHeight.value
  }
}

const scrollTo = (y = 1) => {
  setTimeout(() => {
    canvasInner.value.scrollTo({
      top: (y - 1) * baseHeight.value,
      behavior: 'smooth'
    })
    cyGridster.value?.watermarkUpdate()
  })
}

const scrollCanvas = () => {
  if (isMainCanvas(canvasId.value)) {
    dvMainStore.mainScrollTop = canvasInner.value.scrollTop
  }
}

watch(
  () => canvasActive.value,
  () => {
    if (canvasActive.value) {
      canvasSizeInit()
    }
  }
)

defineExpose({
  addItemBox,
  canvasInit,
  canvasInitImmediately,
  getBaseMatrixSize
})
</script>

<template>
  <div ref="canvasOut" :id="editDomId" class="content" :class="{ 'render-active': renderState }">
    <canvas-opt-bar
      :canvas-style-data="canvasStyleData"
      :component-data="componentData"
      :canvas-id="canvasId"
    ></canvas-opt-bar>
    <div
      :id="domId"
      ref="canvasInner"
      class="db-canvas"
      :class="{ 'db-canvas-dashboard': !isDashboard() }"
      :style="editStyle"
      @drop="handleDrop"
      @dragover="handleDragOver"
      @mousedown="handleMouseDown"
      @scroll="scrollCanvas"
    >
      <canvas-core
        ref="cyGridster"
        v-if="canvasInitStatus"
        :component-data="componentData"
        :canvas-style-data="canvasStyleData"
        :canvas-view-info="canvasViewInfo"
        :canvas-id="canvasId"
        :base-margin-left="baseMarginLeft"
        :base-margin-top="baseMarginTop"
        :base-width="baseWidth"
        :base-height="baseHeight"
        :font-family="fontFamily"
        @scrollCanvasAdjust="scrollTo"
      ></canvas-core>
    </div>
  </div>
</template>

<style lang="less" scoped>
.db-canvas-dashboard {
  padding: 0 !important;
}
.content {
  width: 100%;
  height: 100%;
  .db-canvas {
    padding: 2px;
    background-size: 100% 100% !important;
    overflow-y: auto;
    width: 100%;
    height: 100%;
  }
  ::-webkit-scrollbar {
    display: none;
  }
}

.render-active {
  opacity: 1;
}
</style>