<template>
  <div id="baseEditer">
    <div id="fengMap"></div>
    <div class="canvas-container" ref="graphy">
      <a-button type="primary" @click="undo">取消</a-button>
      <a-button type="primary" @click="redo">回复</a-button>
      <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 { SPoint } from "@saga-web/draw";
import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
import { SPolygonItem } from "./mapClass/SPolygonItem";
import { FloorView } from "./../lib/FloorView";
export default {
  data() {
    return {
      appName: "万达可视化系统",
      key: "23f30a832a862c58637a4aadbf50a566",
      mapServerURL: "/wanda",
      fmapID: "1001724_29",
      fmap: null,
      canvasWidth: 700,
      canvasHeight: 800,
      fParser: null,
      item: null
    };
  },
  mounted() {
    this.canvasWidth = this.$refs.graphy.offsetWidth;
    this.canvasHeight = this.$refs.graphy.offsetHeight;
    this.init();
  },
  methods: {
    init() {
      // document.getElementById(`canvas`).focus()
      this.clearGraphy();
      this.scene = new SGraphyScene();
      // this.fmap = new SFengParser(
      //   "fengMap",
      //   this.mapServerURL,
      //   this.key,
      //   this.appName,
      //   null
      // );
      // console.log(this.fmap);
      // this.fmap.parseData("1001724_29", 1, res => {
      // console.log(res);
      // this.fParser = new SFloorParser(null);
      // console.log(this.fParser);
      // this.fParser.parseData(res);
      // this.fParser.spaceList.forEach(t => this.scene.addItem(t));
      // 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.addPolyLine();
      // this.DirectRelationItem();
      this.view.scene = this.scene;
      this.view.fitSceneToView();
      // });
    },
    // 引入构建多边形类
    addPolyLine() {
      const PointList = [
        new SPoint(0, 0),
        new SPoint(50, 0),
        new SPoint(50, 50),
        new SPoint(0, 50)
      ];
      const Polylines = new SPolygonItem(null);
      Polylines.setStatus = 3;
      // Polylines.setPointList = PointList
      this.scene.addItem(Polylines);
      this.scene.grabItem = Polylines;
      this.item = Polylines;
    },
    undo() {
      this.item.undo();
    },
    redo() {
      this.item.redo();
    },
    // 引入折线
    DirectRelationItem() {
      const data = {
        PointList: [
          { X: -138.71000000089407, Y: -17.5 },
          { X: -130.31000000052154, Y: -17.5 }
        ]
      };
      const directRelationItem = new DirectRelationItem(null, data);
      this.scene.addItem(directRelationItem);
    },
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return;
      }
      this.view = new FloorView("canvas");
      document.getElementById("canvas").focus();
    },
    spaceClick(space, event) {
      const item = new SImageItem(null, {
        Width: 32,
        Height: 32,
        Url:
          "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056"
      });
      item.moveTo(event[0].x, event[0].y);
      item.zOrder = 999;
      item.connect("mousedown", this, this.iconClick);
      this.scene.addItem(item);
      setInterval(() => {
        item.text += "魔";
      }, 1000);
    },
    iconClick(item, event) {
      console.log(2222222222222);
    },
    changeFloor() {},
    changeStatus(name) {
      switch (name) {
        case "选择":
          // test init
          this.init();
          break;
        case "画线":
          this.scene.isLining = true;
          console.log("lining");
          break;
        case "画文字":
          this.scene.isTexting = true;
          break;
        case "画图片":
          this.scene.isImging = true;
          break;
        default:
          console.log(name);
          break;
      }
    }
  }
};
</script>
<style lang="less" scoped>
#baseEditer {
  background: #ccc;
  width: 100%;
  height: 100%;
  // position: relative;
  #fengMap {
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: -1;
  }
  .canvas-container {
    width: 100%;
    height: 100%;
  }
}
</style>