<!--
  revit水管图，与revit进行交互
 -->
<template>
  <div class="gplot">
    <canvas v-if="falg" :width="width" :height="height" id="canvasMap"></canvas>
    <div
      v-if="falg"
      style="height: 30px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;"
    >
      <el-button size="small" @click="suitableSize(0)" type="primary">- 缩小</el-button>
      <el-button size="small" @click="suitableSize(1)" type="primary">合适比例</el-button>
      <el-button size="small" @click="suitableSize(2)" type="primary">+ 放大</el-button>
    </div>
    <div
      v-if="!falg"
      style="width:100%;z-index:999;height:100%;text-align:center;margin-top:20%;color:#ccc;font-size:30px;"
    >该建筑无水管数据</div>
  </div>
</template>

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

//item组件
import SGraphyLineItem from "@/assets/js/items/SGraphyLineItem";
import SGraphyRectItem from "@/assets/js/items/SGraphyRectItem";
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 SGraphyTextItem from "@/assets/js/items/SGraphyTextItems";
import tools from "@/assets/js/tools";
class MainScene extends SGraphyScene {
  constructor() {
    super();
    //资产id
  }
}
export default {
  name: "spaceGraphy",
  data() {
    return {
      mainScene: new MainScene(),
      view: "",
      data: [],
      mapData: {
        Content: {
          VFloorList: [
            {
              Index: 0,
              ValueDescription: null,
              LinkId: "2887893",
              FloorId: "0",
              Id: 0,
              Name: "B1",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            },
            {
              Index: 1,
              ValueDescription: null,
              LinkId: "2884749",
              FloorId: "1",
              Id: 0,
              Name: "夹层",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            },
            {
              Index: 2,
              ValueDescription: null,
              LinkId: "2885408",
              FloorId: "2",
              Id: 0,
              Name: "F1",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            },
            {
              Index: 3,
              ValueDescription: null,
              LinkId: "2886139",
              FloorId: "3",
              Id: 0,
              Name: "F2",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            },
            {
              Index: 4,
              ValueDescription: null,
              LinkId: "3117742",
              FloorId: "4",
              Id: 0,
              Name: "10.650",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            },
            {
              Index: 5,
              ValueDescription: null,
              LinkId: "3117649",
              FloorId: "5",
              Id: 0,
              Name: "10.700",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            },
            {
              Index: 6,
              ValueDescription: null,
              LinkId: "2886313",
              FloorId: "6",
              Id: 0,
              Name: "F3",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            },
            {
              Index: 7,
              ValueDescription: null,
              LinkId: "2886655",
              FloorId: "7",
              Id: 0,
              Name: "F4",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            },
            {
              Index: 8,
              ValueDescription: null,
              LinkId: "2886865",
              FloorId: "8",
              Id: 0,
              Name: "F4夹层",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            },
            {
              Index: 9,
              ValueDescription: null,
              LinkId: "2887014",
              FloorId: "9",
              Id: 0,
              Name: "屋顶层",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            },
            {
              Index: 10,
              ValueDescription: null,
              LinkId: "2887288",
              FloorId: "10",
              Id: 0,
              Name: "30.100",
              ElementType: "VFloor",
              ElementColor: "#FF000000",
              RefData: null
            }
          ],
          GroupPipeList: [
            [
              {
                PipeSystemType: null,
                LinkId: "3737687",
                FloorId: "8",
                Id: 0,
                Name: "3737687",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3737689",
                FloorId: "8",
                Id: 0,
                Name: "3737689",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3737691",
                FloorId: "8",
                Id: 0,
                Name: "3737691",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3737696",
                FloorId: "8",
                Id: 0,
                Name: "3737696",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "4002426",
                FloorId: "7",
                Id: 0,
                Name: "4002426",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3893344",
                FloorId: "8",
                Id: 0,
                Name: "3893344",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "4001665",
                FloorId: "7",
                Id: 0,
                Name: "4001665",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "3940924",
                FloorId: "6",
                Id: 0,
                Name: "3940924",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "3890935",
                FloorId: "3",
                Id: 0,
                Name: "3890935",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3893357",
                FloorId: "8",
                Id: 0,
                Name: "3893357",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "4001716",
                FloorId: "7",
                Id: 0,
                Name: "4001716",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "3862330",
                FloorId: "6",
                Id: 0,
                Name: "3862330",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "3890941",
                FloorId: "3",
                Id: 0,
                Name: "3890941",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "3928451",
                FloorId: "2",
                Id: 0,
                Name: "3928451",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3828371",
                FloorId: "7",
                Id: 0,
                Name: "3828371",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "3986282",
                FloorId: "6",
                Id: 0,
                Name: "3986282",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3828379",
                FloorId: "7",
                Id: 0,
                Name: "3828379",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "3986310",
                FloorId: "6",
                Id: 0,
                Name: "3986310",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3985860",
                FloorId: "6",
                Id: 0,
                Name: "3985860",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "3979925",
                FloorId: "3",
                Id: 0,
                Name: "3979925",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3985888",
                FloorId: "6",
                Id: 0,
                Name: "3985888",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              },
              {
                PipeSystemType: null,
                LinkId: "3979956",
                FloorId: "3",
                Id: 0,
                Name: "3979956",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3917304",
                FloorId: "2",
                Id: 0,
                Name: "3917304",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3917331",
                FloorId: "2",
                Id: 0,
                Name: "3917331",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ],
            [
              {
                PipeSystemType: null,
                LinkId: "3928390",
                FloorId: "2",
                Id: 0,
                Name: "3928390",
                ElementType: "VPipe",
                ElementColor: "#FF000000",
                RefData: null
              }
            ]
          ]
        }
      },
      h: 40, //规定变量，用于规定楼层高度
      w: 10, //规定空间的宽度
      k: 30, //规定空间与空间之间的距离
      fontSize: 5, //文字的大小
      width: 800,
      height: 800,
      falg: true
    };
  },
  mounted() {
    this.getWidth();
    this.getJson();
    // let data = ''
    // for(let i = 0 ; i < 99999; i ++){
    //   data += '22222222222222222222222222222222222222'
    // }
    // localStorage.setItem('1111',data)
    // alert(localStorage.getItem('1111').length)
    // this.data = this.mapData.Content;
    // this.createCanvas();
    window.addEventListener("resize", this.getWidth);
  },
  methods: {
    getJson() {
      getBussTypes2({}).then(res => {
        if (
          res.data.Content.GroupPipeList &&
          res.data.Content.GroupPipeList.length
        ) {
          this.data = res.data.Content;
          this.createCanvas();
        } else {
          this.falg = false;
        }
      });
    },
    //初始化宽高
    getWidth() {
      this.width = document.getElementById("app").offsetWidth;
      this.height = document.getElementById("app").offsetHeight - 10;
    },
    //创建实例
    createCanvas() {
      //初始化
      if (this.view.scene) {
        this.view.scene.root.children = [];
        this.view = null;
      }
      this.view = new SGraphyView("canvasMap", this.mainScene);
      this.view.onDraw();
      this.initCanvas();
    },
    initCanvas() {
      let h = this.h,
        k = this.k,
        w = this.w,
        fontSize = this.fontSize;
      //计算总宽度
      let floorWidth = this.data.GroupPipeList.length * (w + k) + k,
        floorHeight = this.data.VFloorList.length * h;
      //画楼层
      this.data.VFloorList = this.data.VFloorList.reverse();
      this.data.VFloorList.map((item, index) => {
        let line = new SGraphyLineItem(
          0, //开始坐标X恒定为0
          index * h,
          floorWidth, //结束左边X
          index * h,
          "#cccccc",
          1
        );
        let text = new SGraphyTextItem(
          0 - item.Name.length * fontSize, //开始坐标X恒定为0
          index * h - h / 2,
          fontSize,
          "#000",
          item.Name,
          true
        );
        if (!!item.ValueDescription) {
          let floorText = new SGraphyTextItem(
            0 - item.Name.length * fontSize, //开始坐标X恒定为0
            index * h,
            fontSize,
            "blue",
            item.ValueDescription,
            false
          );
          this.mainScene.addItem(floorText);
        }
        this.mainScene.addItem(text);
        this.mainScene.addItem(line);
      });

      //绘画楼顶
      let line = new SGraphyLineItem(
        0, //开始坐标X恒定为0
        -1 * h,
        floorWidth, //结束左边X
        -1 * h,
        "#cccccc",
        1
      );
      let text = new SGraphyTextItem(
        0 - 10, //开始坐标X恒定为0
        -1 * h,
        fontSize,
        "blue",
        "rf",
        false,
        "5px 宋体"
      );
      this.mainScene.addItem(text);
      this.mainScene.addItem(line);


      //水管
      this.data.GroupPipeList.map((item, index) => {
        if (item && item.length) {
          item.map((child, childIndex) => {
            for (let i = 0; i < this.data.VFloorList.length; i++) {
              if (this.data.VFloorList[i].FloorId == child.FloorId) {
                let rect = new SGraphyRectItem(
                  index * w + k * (index + 1),
                  (i - 1) * h,
                  w,
                  h,
                  true,
                  "#61D836",
                  child.Name,
                  "6",
                  "#000",
                  child.Tip
                );
                this.mainScene.addItem(rect);
              }
            }
          });
        }
      });

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

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

      //计算缩放比例
      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;
      console.log(this.view)
      this.view.canvasView.addEventListener("mousemove", this.addTitle)
    },

    addTitle(e) {
      let item = tools.mouseInElement(this.view, e, 10);
      if (item.falg) {
        console.log(item)
        this.view.canvasView.title = item.item.Tip || ""
      } else {
        this.view.canvasView.title = ""
      }
    },
    //调整到合适比例
    suitableSize(val) {
      //获取中心点
      let rect = this.view.scene.worldRect();
      //计算缩放比例

      if (val == 0) {
        this.view.scale = this.view.scale * 0.9;
      } else if (val == 2) {
        this.view.scale = this.view.scale * 1.1;
      } else {
        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;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
