<template>
  <div id="baseEditer" ref="graphy">
    <div id="fengMap"></div>
    <div class="canvas-container">
      <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
    </div>
  </div>
</template>
<script>
import { SFengParser } from "@saga-web/feng-map";
import { SFloorParser } from "@saga-web/big";
import { FloorView } from "./../lib/FloorView";
import { EditScence } from "./mapClass/EditScence";
import bus from "@/bus";
export default {
  props: {
    cmd: {
      type: Number,
      default: 0,
      required: false
    },
    changeTextMsg: {
      type: String,
      default: "",
      required: false
    }
  },
  data() {
    return {
      appName: "万达可视化系统",
      key: "23f30a832a862c58637a4aadbf50a566",
      mapServerURL: "/wanda",
      fmapID: "1001724_29",
      fmap: null,
      canvasWidth: 700,
      canvasHeight: 800,
      fParser: null,
      scene: null,
      view: null
    };
  },
  mounted() {
    this.canvasWidth = this.$refs.graphy.offsetWidth;
    this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
    this.init();
    // 挂在bus
    this.getBus();
  },
  methods: {
    init() {
      // const loadings = this.$loading({type: 'global'});
      document.getElementById(`canvas`).focus();
      this.clearGraphy();
      this.scene = new EditScence();
      this.fmap = new SFengParser(
        "fengMap",
        this.mapServerURL,
        this.key,
        this.appName,
        null
      );
      this.fmap.parseData("1001724_29", 6, res => {
        this.fParser = new SFloorParser(null);
        this.fParser.parseData(res);
        this.fParser.wallList.forEach(t => this.scene.addItem(t));
        this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
        this.fParser.doorList.forEach(t => this.scene.addItem(t));
        this.fParser.columnList.forEach(t => this.scene.addItem(t));
        this.fParser.casementList.forEach(t => this.scene.addItem(t));
        this.fParser.spaceList.forEach(t => {
          t.selectable = true;
          // t.connect("click", this, this.spaceClick);
          this.scene.addItem(t);
        });
        this.view.scene = this.scene;
        this.view.fitSceneToView();
        // this.$loading.close(loadings)
      });
      this.scene.emitChange = this.emitChange;
    },
    // 监听变化
    emitChange(itemMsg) {
      this.$emit("changeFocusItem", itemMsg);
      bus.$emit("FocusItemChanged", itemMsg);
    },
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return;
      }
      this.view = new FloorView("canvas");
      document.getElementById("canvas").focus();
    },
    getBus() {
      bus.$on("changeText", val => {
        this.scene.updatedText(val);
      });
      bus.$on("changeFont", val => {
        this.scene.updatedFontSize(val);
      });
      bus.$on("changeLineWidth", val => {
        this.scene.updatedLineWidth(val);
      });
      bus.$on("changeBorderColor", val => {
        this.scene.updatedBorderColor(val);
      });
      bus.$on("changeFontColor", val => {
        this.scene.updatedFontColor(val);
      });
      bus.$on("changeFontColor", val => {
        this.scene.updatedFontColor(val);
      });
      bus.$on("itemWidth", val => {
        this.scene.updatedWidth(Number(val));
      });
      bus.$on("itemHeight", val => {
        this.scene.updatedHeight(Number(val));
      });
      bus.$on("itemPositon", (x, y) => {
        this.scene.updatedPosition(Number(x, y));
      });
      bus.$on("changebackColor", val => {
        this.scene.updatedbackColor(val);
      });
<<<<<<< HEAD
      bus.$on("deleiteItem", () => {
        this.scene.deleiteItem();
      });
=======
      bus.$on("extractItem", () => {
        const map = {}
        this.fParser.spaceList.forEach(t => {
          if (map[t.data.Type]) {
            map[t.data.Type]++
          } else {
            map[t.data.Type] = 1;
          }
        })
        const data = [];
        for (const key in map) {
          data.push({
            key: key,
            name: key,
            age: '',
            number: map[key],
            address: "提取"
          })
        }
        bus.$emit('exportItem',data)
      })
>>>>>>> 21575eaae2b540d7cb1e3e4401e1dbc90a7d279a
    }
  },
  watch: {
    cmd: {
      handler(cmd) {
        if (cmd == null) {
          cmd = 0;
        }
        this.scene.setCmd = cmd;
      },
      deep: true
    },
    "scene.cmd": {
      handler(cmd) {
        this.$emit("setCmd", cmd);
      },
      deep: true
    }
  }
};
</script>
<style lang="less" scoped>
#baseEditer {
  background: #f7f9fa;
  width: 100%;
  height: 100%;
  // overflow: hidden;
  // position: relative;
  #fengMap {
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: -1;
  }
  .canvas-container {
    width: 100%;
    height: 100%;
  }
}
</style>