<template>
    <div id="graphContainer" ref="graphContainer">
        <canvas id="spaceCanvas" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { FloorView } from "@/utils/graph/FloorView";
import { FloorScene } from "@/utils/graph/FloorScene";

@Component
export default class spaceGraph extends Vue {
    canvasWidth = 800;
    canvasHeight = 800;
    view: FloorView | undefined = undefined;
    floorMap =
        "/image-service/common/file_get?systemId=revit&key=base/76233a3214dd11eb94d469663ce1649a.jsonz";
    canvasLoading = false;

    mounted(): void {
        this.canvasWidth = this.$refs.graphContainer.offsetWidth;
        this.canvasHeight = this.$refs.graphContainer.offsetHeight;
        this.getGraph();
    }

    init(): void {
        console.log('init');
    }

    getGraph(): void {
        const scene = new FloorScene();
        this.canvasLoading = true;
        this.clearGraphy()
        scene.loadUrl(this.floorMap).then((res) => {
            if (this.view) {
                this.view.scene = scene;
            }
            this.getGraphSuc(res);
        });
    }

    getGraphSuc(res: any): void {
        this.canvasLoading = false;
        if (res == "error") {
            this.floorMap = "";
            this.$message.warning("数据解析异常");
            return;
        }
        this.view?.fitSceneToView()
    }

    // 清除canvas
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return
      }
      this.view = new FloorView('spaceCanvas')
    }
}
</script>
<style lang="scss">
#graphContainer {
    position: relative;
    width: 100%;
    height: 100%;
}
</style>