<template>
  <div id="drawFloor">
    <canvas id="canvas" :width="cadWidth" :height="cadHeight"></canvas>
  </div>
</template>

<script>
import {
  SGraphyView,
  SGraphyScene,
  SGraphyClockItem
} from "@sybotan-web/graphy/lib";
import axios from "axios";
import { SPoint } from "@sybotan-web/base/lib";
import { SPen, SPainter, SColor } from "@sybotan-web/draw";
import { mainScene, SGraphyRectItem } from "@/assets/graphy/index.js";
export default {
  props: {
    cadWidth: {
      type: Number,
      default: 1000,
      required: false
    },
    cadHeight: {
      type: Number,
      default: 800,
      required: false
    },
    dataKey: {
      type: String,
      default: "",
      required: true
    },
    point: {
      type: Array,
      default: [0, 0],
      required: false
    },
    pointWidth: {
      type: Number,
      default: 2000,
      required: false
    },
    initColor: {
      type: Array,
      default: function() {
        return [
          "#F9C3C3",
          "#FFD1BF",
          "#FFF3BF",
          "#D8F7C6",
          "#C6F2F6",
          "#DCE3C0",
          "#FAE6C9",
          "#E3D7F7",
          "#C4CBF8",
          "#DEC3F6"
        ];
      },
      required: false
    },
    findGraphyItemId: {
      //高亮的id
      type: String,
      default: "",
      required: false
    },
    highlightColor: {
      //高亮的color
      type: String,
      default: "#1abc9c",
      required: false
    }
  },
  data() {
    return {
      drawMainScene: null
    };
  },
  mounted() {
    this.initGraphy();
  },
  methods: {
    // // 请求获取地图的压缩包
    // getMapBlob() {
    //   return new Promise((resolve, reject) => {
    //     this.$http
    //       .fetchImageFile({
    //         key: this.dataKey
    //       })
    //       .then(res => {
    //         resolve(res);
    //       })
    //       .catch(err => {
    //         console.log(err);
    //       });
    //   });
    // },
    //clickItem
    clickItem(item) {
      this.$emit("clickGraphyItem", item);
    },
    // 单个个体绘制颜色
    drawItemColor(item, color) {
      item.fillColor = new SColor(color); //需要缓存的边框
      item.cacheFillColor = new SColor(color); //需要
    },
    // 绘制所有的item
    drawAllItemColor() {
      this.drawMainScene.root.children.forEach((item, index) => {
        let color = this.initColor[index % 10];
        this.drawItemColor(item, color);
      });
    },
    initGraphy() {
      if (!this.dataKey) {
        return;
      }
      this.drawMainScene = null;
      // 初始化view类
      let view = new SGraphyView("canvas");
      this.drawMainScene = new mainScene(null);
      this.drawMainScene
        .urlGetData(
          "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit"
        )
        .then(() => {
          //  将场景赋给view对图进行绘制
          view.scene = this.drawMainScene;
          // 自动缩放比例
          view.fitSceneToView();
          // 绘制地图颜色
          this.drawAllItemColor();
          // this.drawMainScene.click(this, this.clickItem);
        });
    },
    // 单个item 高亮
    heightLightitem(item, highlightColor) {
      this.drawItemColor(item, highlightColor);
    }
  },
  watch: {
    dataKey(str) {
      if (str) {
        this.initGraphy();
      }
    },
    findGraphyItemId(str) {
      if (str) {
        this.heightLightitem();
      }
    }
  }
};
</script>
<style scoped>
/* #drawFloor {
} */
</style>
