<template>
  <div class="draw-layout" @contextmenu.prevent :style="{ cursor: cursorStyle }">
    <div class="mount-mask" :id="DomMountId" />

    <v-stage ref="stage" :config="size">
      <v-layer :config="viewerConfig" id="formal">
        <!--	不可去除，去除后移动端拖拽会有溢出	-->
        <BackGrid v-if="expose.config.showGrid" />
        <ShapeGroup v-for="type in types" :type="type" :key="type" />
      </v-layer>
      <!--	临时组，提供临时绘画，以及高频率渲染	-->
      <v-layer :config="viewerConfig" id="temp">
        <template v-if="mode.include(Mode.draw)">
          <TempShapeGroup v-for="type in types" :type="type" :key="type" />
        </template>
      </v-layer>
      <v-layer id="helper">
        <ActiveBoxs />
        <SnapLines />
        <SplitLine v-if="expose.config.showLabelLine" />
      </v-layer>
    </v-stage>
  </div>
</template>

<script lang="ts" setup>
import ShapeGroup from "./group.vue";
import TempShapeGroup from "./draw-group.vue";
import ActiveBoxs from "../helper/active-boxs.vue";
import SnapLines from "../helper/snap-lines.vue";
import BackGrid from "../helper/back-grid.vue";
import SplitLine from "../helper/split-line.vue";
import { DrawData, ShapeType, components } from "../components";
import {
  InstanceProps,
  useCursor,
  useInstanceProps,
  useMode,
  useStage,
} from "../hook/use-global-vars.ts";
import { useViewerTransformConfig } from "../hook/use-viewer.ts";
import { useResize } from "../hook/use-event.ts";
import { useAutoService, useExpose } from "../hook/use-expose.ts";
import { DomMountId } from "../../constant";
import { useStore } from "../store/index.ts";
import { Mode } from "@/constant/mode.ts";
import { computed, getCurrentInstance } from "vue";
import { install } from "../../install-lib.ts";

const instance = getCurrentInstance();
install(instance!.appContext.app);

const props = defineProps<InstanceProps>();
const store = useStore();
store.setStore(props.data);
useInstanceProps().set(props);
useAutoService();

const stage = useStage();
const size = useResize();
const viewerConfig = useViewerTransformConfig();
const types = Object.keys(components) as ShapeType[];
const mode = useMode();

const cursor = useCursor();
const cursorStyle = computed(() => {
  if (cursor.value.includes(".")) {
    return `url(${cursor.value}), auto`;
  } else {
    return cursor.value;
  }
});

const expose = useExpose();
defineExpose(expose);
</script>

<style scoped lang="scss">
.draw-layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.mount-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 999;
}
</style>
