<!--
  revit空间拓扑图，显示空间墙等信息，红色为水管
 -->
<template>
  <div class="gplot" v-loading="myLoading" style="width:100%;">
    <canvas id="mycanvas" :width="canvasW" :height="canvasH"></canvas>
    <div
      style="height: 30px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;"
    >
      <el-button size="small" @click="smallSize" type="primary">- 缩小</el-button>
      <el-button size="small" @click="suitableSize" type="primary">合适比例</el-button>
      <el-button size="small" @click="bigSize" type="primary">+ 放大</el-button>
    </div>
    <div class="position:fixed;top:0;bottom:0;left:0;right:0;">
      <input style="width:100%;height:100%;" type="textarea" v-model="JSON.stringify(plot)">>
    </div>
  </div>
</template>

<script>
import axios from "axios";

//引擎的引用
import {
  SGraphyView,
  SGraphyScene,
  SGraphyRectItem
} from "@/assets/node-templete";
import { getBussTypes2 } from "@/api/request";

//ele动画组件
//item组件
import SGraphyLineItem from "@/assets/js/items/SGraphyLineItem";
import SGraphyPolygonItem from "@/assets/js/items/SGraphyPolygonItem";
import SGraphyVirtualItem from "@/assets/js/items/SGraphyVirtualItem";
import SGraphyImageItem from "@/assets/js/items/SGraphyImageItem";
import SGraphyPillarItems from "@/assets/js/items/SGraphyPillarItems";
import SGraphyCircleItem from "@/assets/js/items/SGraphyCircleItem";
import tools from "@/assets/js/tools";
let colorArr = [
  "rgba(0,245,255,.5)",
  "rgba(255,218,185,.5)",
  "rgba(132,112,255,.5)",
  "rgba(127,255,0,.5)",
  "rgba(238,92,66,.5)",
  "rgba(255,255,224,.5)",
  "rgba(238,233,233,.5)",
  "rgba(156,156,156,.5)",
  "rgba(144,238,144,.5)",
  "rgba(180,205,205,.5)"
];

class MainScene extends SGraphyScene {
  constructor() {
    super();
    //资产id
  } // Function constructor()

  /**
   * 绘制背景
   *
   * @param   canvas      画布
   * @param   rect        更新绘制区域
   */
  // drawBackground(canvas, rect) {}
}
export default {
  data() {
    return {
      canvasH: 800,
      canvasW: 800,
      myLoading: false,
      plot: require("@/assets/json/end.json"),
      mainScene: new MainScene(),
      view: "",
      main: ""
    };
  },
  mounted() {
    this.getWidth();
    this.getJson()
    window.addEventListener("resize", this.getWidth)
  },
  methods: {
    getJson() {
      getBussTypes2({}).then(res => {
        this.plot = res.data.Content;
        this.createCanvas();
      });
    },
    //初始化宽高
    getWidth() {
      this.canvasW = document.getElementById("app").offsetWidth - 2;
      this.canvasH = document.getElementById("app").offsetHeight - 10;
    },
    createCanvas() {
      //初始化
      if (this.view.scene) {
        this.view.scene.root.children = [];
        this.view = null;
      }
      this.view = new SGraphyView("mycanvas", this.mainScene);
      this.view.onDraw();
      this.initGraphy();
    },
    initGraphy() {
      this.view.pos.x = this.view.pos.y = -50;

      //线
      if (this.plot.PathList && this.plot.PathList.length) {
        this.plot.PathList.map(item => {
          if (item.Data && item.Data.length) {
            let data = new SGraphyLineItem(
              item.Data[0].X,
              item.Data[0].Y * -1,
              item.Data[1].X,
              item.Data[1].Y * -1
            );
            data.color = "#" + item.ElementColor.substring(3, 9);
            data.lineWidth = item.Thickness;
            // data.color = item.ElementColor
            this.mainScene.addItem(data);
          }
        });
      }

      // 画墙
      let wall = this.plot.WallList
      if (wall && wall.length) {
        for (let i = 0; i < wall.length; i++) {
          for (let j = 0; j < wall[i].PointList.length - 1; j++) {
            let str = "wall" + i;
            str = new SGraphyLineItem(
              wall[i].PointList[j].X,
              wall[i].PointList[j].Y * -1,
              wall[i].PointList[j + 1].X,
              wall[i].PointList[j + 1].Y * -1
            );
            this.mainScene.addItem(str);
          }
        }
      }

      let virtual = this.plot.VirtualWallList
      // //画虚拟墙
      if (virtual && virtual.length) {
        for (let i = 0; i < virtual.length; i++) {
          for (let j = 0; j < virtual[i].PointList.length - 1; j++) {
            let str = "virtual" + i + j;
            str = new SGraphyVirtualItem(
              virtual[i].PointList[j].X,
              virtual[i].PointList[j].Y * -1,
              virtual[i].PointList[j + 1].X,
              virtual[i].PointList[j + 1].Y * -1,
              "green",
              2,
              true,
              true
            );
            this.mainScene.addItem(str);
          }
        }
      }

      //圆
      if (this.plot.VertexList && this.plot.VertexList.length) {
        this.plot.VertexList.map(item => {
          if (item.Location) {
            let data = new SGraphyCircleItem(
              item.Location.X,
              item.Location.Y * -1,
              "#" + item.ElementColor.substring(3, 9),
              item.Radius,
              item.IsSolid,
              item.Name
            );
            data.lineWidth = item.Thickness;
            // data.color = item.ElementColor
            this.mainScene.addItem(data);
          }
        });
      }

      //线
      if (this.plot.LineList && this.plot.LineList.length) {
        this.plot.LineList.map(item => {
          if (item.Start) {
            let data = new SGraphyLineItem(
              item.Start.X,
              item.Start.Y * -1,
              item.End.X,
              item.End.Y * -1,
              "#" + item.ElementColor.substring(3, 9)
            );
            data.color = "#" + item.ElementColor.substring(3, 9);
            data.name = item.Name;
            data.lineWidth = 1;
            // data.color = item.ElementColor
            this.mainScene.addItem(data);
          }
        });
      }

      //获取中心点
      let rect = this.view.scene.worldRect();

      //初始化画布缩放比例
      this.view.scale = 1;

      console.log(this.view.scene, rect)
      //计算缩放比例
      this.view.scale = Math.min(
        this.view.width / (rect.width * 1.2),
        this.view.height / (rect.height * 1.2)
      );
      this.view.minScale = this.view.scale / 10;
      this.view.maxScale = this.view.scale * 10;
      //    移动画布
      this.view.pos.x =
        (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
      this.view.pos.y =
        (-(rect.bottom + rect.top) / 2) * this.view.scale +
        this.view.height / 2;
      this.view.scene.root.children.map(item => {
        if (!!item.lineWidth) {
          item.lineWidth = item.lineWidth / this.view.scale;
        } else {
          item.lineWidth = 1 / this.view.scale;
        }
        if (!!item.Radius) {
          item.Radius = item.Radius / this.view.scale;
        }
      });
      //   点击事件
      // this.view.canvasView.addEventListener("click", this.checkSpace);
      // this.getGraphy();
    },
    //调整到合适比例
    suitableSize() {
      //获取中心点
      let rect = this.view.scene.worldRect();
      //计算缩放比例
      this.view.scale = Math.min(
        this.view.width / (rect.width * 1.2),
        this.view.height / (rect.height * 1.2)
      );
      // 移动画布
      this.view.pos.x =
        (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
      this.view.pos.y =
        (-(rect.bottom + rect.top) / 2) * this.view.scale +
        this.view.height / 2;
    },

    //调整到小比例
    smallSize() {
      //获取中心点
      let rect = this.view.scene.worldRect();
      //计算缩放比例
      this.view.scale = this.view.scale * 0.9;
      // 移动画布
      this.view.pos.x =
        (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
      this.view.pos.y =
        (-(rect.bottom + rect.top) / 2) * this.view.scale +
        this.view.height / 2;
    },

    bigSize() {
      //获取中心点
      let rect = this.view.scene.worldRect();
      //计算缩放比例
      this.view.scale = this.view.scale * 1.1;
      // 移动画布
      this.view.pos.x =
        (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
      this.view.pos.y =
        (-(rect.bottom + rect.top) / 2) * this.view.scale +
        this.view.height / 2;
    }
  }
};
</script>

<style lang="less" scoped>
</style>
