<!--
  revit空间图，与revit进行交互
 -->
<template>
  <div class="gplot">
    <div
      v-if="falg"
      style="height: 60px;z-index:999;width:230px;overflow: hidden;position: absolute;top: 5%;right: 5%;"
    >
      <el-switch v-model="isWatch" @change="watchChange"></el-switch>
      <el-tooltip placement="top">
        <div slot="content">
          <span>当前渲染颜色百分比：{{value}}</span>
          <div v-if="isWatch">
            <el-slider v-model="value" @change="changeCuto"></el-slider>
          </div>
        </div>
        <span :class="isWatch ? 'can-do' : 'disable'">自动染色相似名称({{value}}%)</span>
      </el-tooltip>
    </div>
    <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: 5%;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%;height:100%;text-align:center;margin-top:20%;color:#ccc;font-size:30px;"
    >该建筑无空间数据</div>
  </div>
</template>

<script>
import { strDiff } from "@/api/request";
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 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(),
      isWatch: false,
      view: "",
      data: [],
      value: 70,
      mapData: {
        Content: {
          "VFloorList": [
            {
              "Index": 0,
              "ValueDescription": null,
              "LinkId": null,
              "FloorId": "0",
              "Id": 0,
              "Name": "B1",
              "ElementType": "VFloor",
              "ElementColor": "#FF000000",
              "RefData": null
            },
            {
              "Index": 1,
              "ValueDescription": "G",
              "LinkId": null,
              "FloorId": "1",
              "Id": 0,
              "Name": "F1",
              "ElementType": "VFloor",
              "ElementColor": "#FF000000",
              "RefData": null
            },
            {
              "Index": 2,
              "ValueDescription": null,
              "LinkId": null,
              "FloorId": "2",
              "Id": 0,
              "Name": "F2",
              "ElementType": "VFloor",
              "ElementColor": "#FF000000",
              "RefData": null
            },
            {
              "Index": 3,
              "ValueDescription": null,
              "LinkId": null,
              "FloorId": "3",
              "Id": 0,
              "Name": "F3",
              "ElementType": "VFloor",
              "ElementColor": "#FF000000",
              "RefData": null
            },
            {
              "Index": 4,
              "ValueDescription": null,
              "LinkId": null,
              "FloorId": "4",
              "Id": 0,
              "Name": "F4",
              "ElementType": "VFloor",
              "ElementColor": "#FF000000",
              "RefData": null
            },
            {
              "Index": 5,
              "ValueDescription": null,
              "LinkId": null,
              "FloorId": "5",
              "Id": 0,
              "Name": "F4夹层",
              "ElementType": "VFloor",
              "ElementColor": "#FF000000",
              "RefData": null
            }
          ],
          "GroupSpaceList": [
            [
              {
                "SpaceType": "140",
                "LinkId": "3936912",
                "FloorId": "1",
                "Id": 0,
                "Name": "3#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "4016015",
                "FloorId": "2",
                "Id": 0,
                "Name": "3#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "3925774",
                "FloorId": "3",
                "Id": 0,
                "Name": "3#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "3958873",
                "FloorId": "4",
                "Id": 0,
                "Name": "5-3楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              }
            ],
            [
              {
                "SpaceType": "140",
                "LinkId": "3936913",
                "FloorId": "1",
                "Id": 0,
                "Name": "2#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "4016013",
                "FloorId": "2",
                "Id": 0,
                "Name": "2#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "3925772",
                "FloorId": "3",
                "Id": 0,
                "Name": "2#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "3958861",
                "FloorId": "4",
                "Id": 0,
                "Name": "5-2楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              }
            ],
            [
              {
                "SpaceType": "140",
                "LinkId": "3936968",
                "FloorId": "1",
                "Id": 0,
                "Name": "4#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "4016059",
                "FloorId": "2",
                "Id": 0,
                "Name": "4#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "3925997",
                "FloorId": "3",
                "Id": 0,
                "Name": "4#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              }
            ],
            [
              {
                "SpaceType": "140",
                "LinkId": "3937020",
                "FloorId": "1",
                "Id": 0,
                "Name": "6#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "4016063",
                "FloorId": "2",
                "Id": 0,
                "Name": "6#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "3925761",
                "FloorId": "3",
                "Id": 0,
                "Name": "6#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              }
            ],
            [
              {
                "SpaceType": "140",
                "LinkId": "3937833",
                "FloorId": "1",
                "Id": 0,
                "Name": "1#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "4016019",
                "FloorId": "2",
                "Id": 0,
                "Name": "5#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "3928148",
                "FloorId": "3",
                "Id": 0,
                "Name": "1#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "3958866",
                "FloorId": "4",
                "Id": 0,
                "Name": "5-1楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              }
            ],
            [
              {
                "SpaceType": "140",
                "LinkId": "3937785",
                "FloorId": "1",
                "Id": 0,
                "Name": "5#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "4015982",
                "FloorId": "2",
                "Id": 0,
                "Name": "5#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              },
              {
                "SpaceType": "140",
                "LinkId": "3925765",
                "FloorId": "3",
                "Id": 0,
                "Name": "5#楼梯",
                "ElementType": "VSpace",
                "ElementColor": "#FF000000",
                "RefData": null
              }
            ]
          ]
        }      },
      h: 40, //规定变量，用于规定楼层高度
      w: 40, //规定空间的宽度
      k: 10, //规定空间与空间之间的距离
      fontSize: 5, //文字的大小
      width: 800,
      height: 800,
      falg: true
    };
  },
  mounted() {
    this.getWidth();
    this.getJson();
    // this.data = this.mapData.Content;
    // this.createCanvas();
    window.addEventListener("resize", this.getWidth);
  },
  methods: {
    getJson() {
      getBussTypes2({}).then(res => {
        if (
          res.data.Content.GroupSpaceList &&
          res.data.Content.GroupSpaceList.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.data.VFloorList = this.data.VFloorList.reverse();
        this.view = null;
      }
      this.view = new SGraphyView("canvasMap", this.mainScene);
      this.view.onDraw();
      this.initCanvas();
      this.view.canvasView.addEventListener("mousemove", this.mouseSpace);
    },

    //当鼠标移到空间块上
    mouseSpace(e) {
      let item = tools.mouseInElement(this.view, e, 10);
      let items = this.mainScene.root.children;
      if (item.falg) {
        items.map(i => {
          if (i.fillColor == item.item.fillColor && i.fillColor != "#61D836") {
            i.hoverColor = "red";
          }
        });
      } else {
        items.map(i => {
          i.hoverColor = null;
        });
      }
    },

    //创建item实例，进行渲染图
    initCanvas() {
      let h = this.h,
        k = this.k,
        w = this.w,
        fontSize = this.fontSize;
      //计算总宽度
      let floorWidth = this.data.GroupSpaceList.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,
            "6px 宋体"
          );
          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.GroupSpaceList.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"
                );
                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;
    },

    //点击开关
    watchChange(val) {
      if (val) {
        this.changeCuto();
      } else {
        this.createCanvas();
      }
    },

    //进行判断item名字重复度
    async changeCuto() {
      let allData = {},
        lastData = [];
      //所有的item
      let children = this.mainScene.root.children;
      children.map(item => {
        if (item.type == 10) {
          item.fillColor = '#61D836'
        }
      })
      //将楼层信息转换成对应数组
      this.data.GroupSpaceList.map(item => {
        if (item && item.length) {
          item.map(i => {
            if (allData[i.FloorId] && allData[i.FloorId].length) {
              allData[i.FloorId].push(i.Name);
            } else {
              allData[i.FloorId] = [];
              allData[i.FloorId].push(i.Name);
            }
          });
        }
      });
      for (let key in allData) {
        lastData.push({
          key: key,
          value: allData[key],
          hasValue: false
        });
      }
      console.log(allData)
      let childrens = this.view.scene.root.children
      for (let key in allData) {
        let data = tools.deepCopyObj(allData);
        delete data[key]
        for (let item in data) {
          for (let i = 0; i < allData[key].length; i++) {
            let color = "#" +
              Math.random()
                .toString(16)
                .substr(-6); //随机色
            //等待渲染完成
            let res = await strDiff({
              word: allData[key][i],
              possibilities: data[item],
              num: 99,
              cutoff: this.value / 100
            })
            let results = res.data.result
            //结果存在并且结果长度大于0，改变颜色
            if (results && results.length) {
              this.changeColor(allData[key][i], this.bubbleSort(results)[0], color)
            }
          }
        }
      }

    },

    //改变颜色
    changeColor(word, result, color) {
      let items = this.mainScene.root.children;
      items.map(item => {
        //当其颜色值为原始颜色时，其染色
        if (item.type == 10 && item.text[0] == word && item.fillColor == '#61D836') {
          item.fillColor = color
        }
        //当其颜色值不为原始颜色，且判断通过时
        if (item.type == 10 && item.text[0] == word && item.fillColor != '#61D836') {
          color = item.fillColor
        }
        //对应的返回结果，如果有就改变颜色
        if (item.type == 10 && item.text[0] == result.key) {
          item.fillColor = color
        }
      })
    },

    //排序
    bubbleSort(arr) {
      var len = arr.length;
      for (var i = 0; i < len; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
          if (arr[j].value > arr[j + 1].value) {
            //相邻元素两两对比
            var temp = arr[j + 1]; //元素交换
            arr[j + 1] = arr[j];
            arr[j] = temp;
          }
        }
      }
      return arr.reverse();
    },

    //调整到合适比例
    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>
.disable {
  font-size: 14px;
  color: gray;
}
.can-do {
  font-size: 14px;
  color: black;
  cursor: pointer;
}
</style>
