<template>
  <div :id="`drawFloor${id}`" class="drawFloor" v-loading="canvasLoading">
    <canvas :id="`floorCanvas${id}`" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
      <!-- <div class="operate" v-if="showTools">
      <canvasFun @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" :scale="scale" @undo="undo" @redo="redo"
        @changeAbsorb="changeAbsorb" ref="canvasFun" isEdit="true"></canvasFun>
    </div> -->
  </div>
</template>

<script>
import { SGraphyView } from "@sybotan-web/graphy/lib";
import { DivideFloorScene } from "cad-engine"
import { SColor, SPoint } from "@sybotan-web/draw/lib";
import canvasFun from "@/components/business_space/newGraphy/canvasFun"
import { floorQuery } from "@/api/scan/request";
export default {
  components: {
    canvasFun
  },
  data() {
    return {
      drawMainScene: null,
      view: null,
      dataKey: '',
      cadWidth: 800,
      cadHeight: 600,
      canvasLoading: false,
      modelId: '',
      FloorID: '',
      Outline: [],
      buttonContent:"",
      showTools: false
    };
  },
  props: {
    id: {
      default: 0
    },
    CurrentModelId: String
  },
  created() {},
  mounted() {
    this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
    this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
  },
  methods: {
    initGraphy(ModelId) {
      this.modelId = ModelId;
      this.clearGraphy()
      this.scene = new DivideFloorScene();
      this.canvasLoading = true;
      this.scene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
        let Elements = res.EntityList[0].Elements;
        let flag = false;
        for (let key in Elements) {
          if (Elements[key].length > 0) {
            flag = true;
          }
        }
        if (flag) {
          this.view.scene = this.scene
          this.view.fitSceneToView();
          this.canvasLoading = false;
          this.showTools = true;
          this.view.maxScale = this.view.scale * 10;
          this.view.minScale = this.view.scale;
          this.scene.click(this, this.canvasClick);
        } else {
          this.canvasLoading = false;
        }
      })
    },
    getFloorData() {
      let pa = {
        Filters: `FloorID='${this.FloorID}'`
      }
      floorQuery(pa, res => {
        let newArr = res.Content[0].Outline.map(t => {
          return new SPoint(t.X, t.Y);
        })
        this.drawMainScene.addSceneMark(newArr)
      })
    },
    getSelectedSpaces(){//获取选中区域
      if(this.view && this.view.scene){
        let list =  this.view.scene.getSelectedSpaces();
        if(list.length){
          return list
        } else {
          return []
        }
      } else {
        return []
      }
    },
    // 清空平面图
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return
      }
      let id = `floorCanvas${this.id}`;
      this.view = new SGraphyView(id)
    },
    canvasClick(item,eventObj){//点击平面图事件 
      this.view.scene.getSelectedSpaces().length?this.$emit("changeButtonContent","通过模型空间创建"):this.$emit("changeButtonContent","通过模型创建")
    },
    getGraphtSuc(res) {
      this.canvasLoading = false;
      if (res == 'error') {
        this.FloorMap = '';
        this.$message.warning('数据解析异常');
        return;
      }
      if (res.Result == 'failure') {
        this.showTools = false;
        this.$message.warning(res.Message);
        return;
      }
      this.view.scene = this.drawMainScene;
      this.view.fitSceneToView();
      this.drawMainScene.isSpaceSelectable = false;

      if (this.$refs.canvasFun) {
        this.view.maxScale = this.view.scale * 10;
        this.view.minScale = this.view.scale;
        this.$refs.canvasFun.everyScale = this.view.scale;
      }
      if (this.floorData.Outline && this.floorData.Outline.length) {
        let newArr = this.floorData.Outline.map(t => {
          return new SPoint(t.X, t.Y);
        })
        this.drawMainScene.addSceneMark(newArr)
      }
    },
    // focus() {
    //   document.getElementById(`floorCanvas${this.id}`).focus()
    // },
    // // 工具栏操作
    // fit() {
    //   this.view.fitSceneToView()
    // },
    // // 保存png
    // savePng() {
    //   this.view.saveImage(`${this.floor}.png`, 'png');
    // },
    //  saveSvg() {
    //   this.view.saveSceneSvg(`${this.floor}.svg`, 6400, 4800);
    // },
    //  divide() {
    //   this.drawMainScene.isMarking = true;
    // },
    // // 清除切割划分
    // clearDivide() {
    //   this.drawMainScene.clearSceneMark()
    // },
    // // 吸附
    // changeAbsorb(isAbsorbing) {
    //   this.drawMainScene.isAbsorbing = isAbsorbing;
    // },
    // // 撤销
    // undo() {

    // },
    // // 反撤销
    // redo() { },
    // // 缩放
    // scale(val) {
    //   if (!this.view) {
    //     return;
    //   }
    //   let scale = this.view.scale;
    //   this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
    // }
  },
  watch: {
    CurrentModelId: {
      handler(newName, oldName){
        if(newName){
          this.initGraphy(newName)
        }
      },
      immediate: true,
    }
  }
};
</script>
<style scoped lang="less">
.drawFloor {
  width: 100%;
  height: 100%;
  position: relative;
  .operate {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 99;
  }
}
</style>
