<!-- 画板 -->
<template>
  <div ref="basetopu" class="base-topu">
    <canvas
      id="floor_topu"
      :width="canvasWidth"
      :height="canvasHeight"
      tabindex="0"
    ></canvas>
    <scaleBtn
      v-show="hasShowContro"
      class="sacle-btn"
      @sacle="changeSize"
    ></scaleBtn>
  </div>
</template>
<script>
import { topuScene } from "./topuClass/topuScene";
import { FloorView } from "./topuClass/FloorView";
import { readPubGroup } from "@/api/tuopu"; // 引入获取底图得接口
import scaleBtn from "./scale";
import { PTopoParser } from "./topuClass/PTopoParser";
import { SColor, SFont, SPoint } from "@persagy-web/draw";
import { SLineStyle } from "@persagy-web/graph";
export default {
  components: { scaleBtn },
  props: {
    // 是否展示大小控制器
    hasShowContro: {
      type: Boolean,
      default: true,
      required: false,
    },
  },
  data() {
    return {
      canvasWidth: 0, // 画布的宽
      canvasHeight: 0, // 画布的高
      view: null, // 视图 view
      scene: null, // 场景类
    };
  },
  methods: {
    fixWindow() {
      this.view.fitSceneToView();
    },
    // 初始化
    init() {
      this.clearImg();
      this.view ? (this.view.scene = this.scene) : null;
      // 获取压缩包数据并解压
      this.getMapBlob();
    },

    // 请求获取地图的压缩包
    getMapBlob() {
      if (false) {
        const obj = {
          // graphId: "0314991b0cd148ba89da60eddf30efd1",
          projectId: "Pj4403070003",
          graphId: "994d0f65d647426f854d2a5f7f0173a4",
          id: "be4c75daf4d44cb89b447eb7581614da",
        };
      }
      const obj = {
        graphId: window._graphId,
        id: window._id,
        projectId: window._projectId,
      };
      // 已发布
      readPubGroup(obj).then((res) => {
        this.statDeviceIds(res);
        this.getDataSuc(res);
      });
    },
    // 读图成功回调
    getDataSuc(res) {
      let anchorList = []; //保存锚点对象
      // 'url 新增路径'
      if (res.result == "failure") return;
      const parse = new PTopoParser();
      if (this.scene) {
        const backgroundColor = res.data.content.viewBackground
          ? res.data.content.viewBackground
          : "#1f1f27";
        this.scene.changeBackgroundColor(backgroundColor);
      }
      window.parse = parse;
      if (
        res.data.content.elements.nodes &&
        res.data.content.elements.nodes.length
      ) {
        res.data.content.elements.nodes = res.data.content.elements.nodes.map(
          (obj) => {
            if (obj.properties.type == "BaseEquipment") {
              if (obj.style.default.url) {
                obj.style.default.url =
                  window.img_baseurl +
                  "/image-service/common/image_get?systemId=dataPlatform&key=" +
                  obj.properties.state[1].pic;
              } else {
                // 默认图标
                obj.style.default.url =
                  window.img_baseurl +
                  "/image-service/common/image_get?systemId=dataPlatform&key=" +
                  "1607752841478.svg";
              }
            }
            return obj;
          }
        );
      }
      parse.parseData(res.data.content.elements);
      parse.markers.forEach((item) => {
        this.scene.addItem(item);
      });
      parse.nodes.forEach((item) => {
        // item.moveable = false;
        if ("BaseEquipment" == item.data.properties.type) {
          item.setEquipName();
          item.setStatusPointColor("#7ed321");
        }
        // 相关事件触发
        item.connect("onMouseDown", this, this.onMousedown);
        item.connect("onMouseUp", this, this.onMouseup);
        item.connect("onMouseLeave", this, this.onMouseleave);
        item.connect("onMouseEnter", this, this.onMouseenter);
        this.scene.addItem(item);
      });
      parse.relations.forEach((t) => {
        // 设置锚点
        if (t.anchor1Id) {
          let startAnc = null;
          anchorList.forEach((aItem) => {
            if (aItem.id == t.anchor1Id) {
              startAnc = aItem;
            }
          });
          if (startAnc) {
            startAnc.isConnected = true;
            startAnc.parent?.connect("changePos", t, t.changePos);
            t.startAnchor = startAnc || null;
          }
        }
        if (t.anchor12d) {
          let endAnc = null;
          anchorList.forEach((aItem) => {
            if (aItem.id == t.anchor12d) {
              endAnc = aItem;
            }
          });
          if (endAnc) {
            endAnc.isConnected = true;
            endAnc.parent?.connect("changePos", t, t.changePos);
            t.endAnchor = endAnc || null;
          }
        }
        this.scene.addItem(t);
      });
      this.fixWindow();
    },
    // 读图成功回调
    statDeviceIds(res) {
      let anchorList = []; //保存锚点对象
      // 'url 新增路径'
      if (res.result == "failure") return;
      const parse = new PTopoParser();
      if (
        res.data.content.elements.nodes &&
        res.data.content.elements.nodes.length
      ) {
        let tempDatas = res.data.content.elements.nodes.map((obj) => {
          return obj.attachObjectIds[0];
        });
      }
    },
    // 图片缩小
    changeSize(isbiger) {
      if (isbiger) {
        this.view.scaleByPoint(
          (this.view.scale * 1.1) / this.view.scale,
          this.canvasWidth / 2,
          this.canvasHeight / 2
        );
      } else {
        this.view.scaleByPoint(
          (this.view.scale * 0.9) / this.view.scale,
          this.canvasWidth / 2,
          this.canvasHeight / 2
        );
      }
    },
    // 清空画布
    clearImg() {
      this.scene = new topuScene();
      this.scene.vueOnMouseDown = this.onMousedown;
      if (this.view) {
        this.view.update();
      }
    },
    // 鼠标点击事件
    onMousedown(item, e) {
      console.log("鼠标按下！", item, e);
      this.$emit("onMousedown", item, e);
    },
    // 鼠标抬起事件
    onMouseup(item, e) {
      // console.log("鼠标抬起！", item, e);
    },
    // 鼠标事件移入
    onMouseenter(item, e) {
      // 判断是否为设备图例
      item.showImgShadow = true;
      console.log("鼠标移入！", item.img, e);
    },
    // 鼠标事件移出
    onMouseleave(item, e) {
      item.showImgShadow = false;
      console.log("鼠标移出！", item, e);
    },
  },
  watch: {},
  created() {
    this.clearImg();
  },
  mounted() {
    // 获取 canvas 的宽高
    this.canvasWidth = this.$refs.basetopu.offsetWidth;
    this.canvasHeight = this.$refs.basetopu.offsetHeight;
    // 初始化场景类
    this.view = new FloorView("floor_topu");
    if (this.scene) {
      this.view.scene = this.scene;
    }
    this.init();
  },
};
</script>
<style lang="less" scoped>
.base-topu {
  width: 100%;
  height: 100%;
  position: relative;
  .sacle-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}
</style>