<template>
  <div class="baseTopo" id="baseTopo" ref="baseTopo">
    <topoTooltip v-show="showTooltip" class="topoTooltip-box" ref="topoTooltip" :havItem="havItem"></topoTooltip>
    <canvas id="persagy_topo" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
  </div>
</template>
<script>
import { PTopoScene, PTopoParser } from "@/components/editClass/persagy-edit";
import { SGraphView } from "@persagy-web/graph";
import { SFloorParser } from "@persagy-web/big/lib";
import topoTooltip from "./topoTooltip.vue";
import { mapState, mapMutations } from "vuex";
import bus from "@/bus/bus";
import { saveGroup, readGroup, uploadGroup, getImageGroup } from "@/api/editer";
export default {
  components: { topoTooltip },
  data() {
    return {
      scene: null, //场景
      view: null, //视图
      canvasWidth: 700, //画布宽
      canvasHeight: 700, //画布高
      havItem: false, //右击是否选中item
      showTooltip: false, //是否显示tooltip
    };
  },
  computed: {
    ...mapState(["choiceLegend"]),
  },
  mounted() {
    this.canvasWidth = this.$refs.baseTopo.offsetWidth;
    this.canvasHeight = this.$refs.baseTopo.offsetHeight - 10;
    this.scene = new PTopoScene();
    this.view = new SGraphView("persagy_topo");
    this.view.scene = this.scene;
    this.scene.clearCmdStatus = this.clearCmdStatus;
    // 初始化bus绑定事件
    this.initBusEvent();
    // 右键事件
    this.scene.getItem = this.onContextMenu;
    this.scene.emitChoice = this.emitChoice;
    //左键事件
    this.scene.vueOnMouseDown = this.vueOnMouseDown;
    // 屏蔽浏览器右键功能（防止与编辑器右键交互重合）
    document.getElementById("baseTopo").oncontextmenu = function (e) {
      return false;
    };
    // 读取底图
    // this.readtopoMsg();
    // 读取平面图-------测试代码
    // this.readMapmsg();
  },
  methods: {
    ...mapMutations(["SETCHOICELEHEND"]),
    // 恢复命令状态
    clearCmdStatus() {
      this.SETCHOICELEHEND("");
    },
    // 右键获取item
    onContextMenu(item, [event]) {
      this.showTooltip = true;
      if (item) {
        this.havItem = true;
      } else {
        this.havItem = false;
      }
      const doms = document.getElementsByClassName("topoTooltip-box")[0];
      doms.style.left = event.offsetX + "px";
      doms.style.top = event.offsetY + "px";
    },
    // 左键事键
    vueOnMouseDown(e) {
      //  关闭tooltip
      this.showTooltip = false;
    },
    // 选中后的回调函数
    emitChoice(itemList) {
      bus.$emit("emitChoice", itemList);
    },
    //初始化bus绑定事件
    initBusEvent() {
      // 改变样式
      bus.$on("updateStyle", (type, val) => {
        this.scene.updateStyle(type, val);
      });
      // 撤销
      bus.$on("topoUndo", (val) => {
        this.scene.undo();
      });
      // 重做
      bus.$on("topoRedo", (val) => {
        this.scene.redo();
      });
      // 删除
      bus.$on("deleteItem", (val) => {
        this.scene.deleteItem();
      });
      // 复制
      bus.$on("copy", (val) => {
        this.scene.copy();
      });
      // 粘贴
      bus.$on("paste", (val) => {
        this.scene.paste();
      });
      // 保存
      bus.$on("saveTopo", (val) => {
        const Elements = this.scene.save();
        const obj = {
          Elements,
          Name: "1", // 名称
          CategoryID: "1", // 图分类ID
          ProjectID: "1", // 项目ID
          BuildingID: "1", // 建筑ID
          FloorID: "1", // 楼层id
          Note: "1", // 图说明
          Log: {
            // 图操作日志
            Mark: "1", // 图的存盘标记
            CommandList: [
              {
                Command: "1", // 命令
                Desc: "1", // 描述
                Detail: "1", // 详情
              },
            ],
          },
        };
        Object.assign(obj, {
          GraphId: "cd8ca79c337644d48c58c447cf21b757",
          Id: "f15506fa5dcc4ce79064e459e5497748",
        });
        console.log(obj);
        saveGroup(obj).then((res) => {
          console.log("res", res);
        });
      });
    },
    // 读取拓扑图
    readtopoMsg() {
      let obj = {
        GraphId: "cd8ca79c337644d48c58c447cf21b757",
        Id: "f15506fa5dcc4ce79064e459e5497748",
      };
      readGroup(obj).then((res) => {
        const parse = new PTopoParser();
        parse.parseData(res.Content.Elements);
        console.log(parse.Markers);
        parse.Markers.forEach((item) => {
          this.scene.addItem(item);
        });
        console.log(this.scene);
      });
    },
    readMapmsg() {
      let parser = new SFloorParser();
      const msg = require("./../../assets/map/1.json");
      parser.parseData(msg.EntityList[0].Elements);
      parser.spaceList.forEach((t) => this.scene.addItem(t));
      parser.wallList.forEach((t) => this.scene.addItem(t));
      parser.virtualWallList.forEach((t) => this.scene.addItem(t));
      parser.doorList.forEach((t) => this.scene.addItem(t));
      parser.columnList.forEach((t) => this.scene.addItem(t));
      parser.casementList.forEach((t) => this.scene.addItem(t));
      this.view.fitSceneToView();
    },
  },
  watch: {
    choiceLegend(val) {
      if (this.scene) {
        // 设置当前编辑状态
        this.scene.editCmd = this.choiceLegend;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.baseTopo {
  width: 100%;
  height: 100%;
  position: relative;
  .topoTooltip-box {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>