<template>
  <div ref="graphyMain" class="canvasGraphy">
    <div v-if="type!=3" class="center" style="height: 400px;padding-top: 315px; box-sizing:border-box;">
      <i class="icon-wushuju iconfont"></i>
      <p>{{type == 1 ? '请选择楼层' : '当前楼层尚无平面图，请去空间管理根据模型生成'}}</p>
    </div>
    <div style="width:100%;height:100%;" v-show="type==3" ref="canvasContainer" v-loading="canvasLoading">
      <canvas id="canvas" :width="canvasW" :height="canvasH"></canvas>
    </div>
    <div v-if="type == 3" style="height: 40px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;">
      <el-button size="small" @click="smallSize" type="primary">- 缩小</el-button>
      <el-button size="small" @click="suitableSize" type="primary">合适比例</el-button>
      <el-button size="small" @click="bigSize" type="primary">+ 放大</el-button>
    </div>
    <div v-show="menuShow" id="menu" ref="menu">
      <p @click="getDatails">编辑该标签</p>
      <p @click="clearXY">清除该点位的坐标</p>
      <p @click="noLocate">修改为无法定位到楼层的点位</p>
    </div>
  </div>
</template>

<script>
//引擎的引用
import { mapGetters, mapActions } from "vuex";
import tools from "@/utils/scan/tools";
import {
  updateLocationPoint, //更新点位标签
} from "@/api/scan/request";
import { SGraphyView } from "@saga-web/graphy/lib";
import { LocationPointScene } from "@saga-web/cad-engine/lib";
import { SPoint } from "@saga-web/draw/lib";
let colorArr = [
  '#00f5ff0d', '#ffdab90d', '#8470ff0d', '#7fff000d', '#ee5c420d',
  '#ffffe00d', '#eee9e90d', '#9c9c9c0d', '#90ee900d', '#b4cdcd0d'
];



export default {
  props: {
    param: null
  },
  data() {
    return {
      view: "",
      scene: null,
      dataMax: "", //最大值最小值数据
      menuShow: false, //右键菜单的显示
      lineShow: false,
      pointShow: false,
      canvasH: 600,
      canvasW: 800,
      type: 1, //1  没有选择楼层， 2没有平面图， 3有平面图
      list: "",
      buildMess: {},
      imageUrl: "http://adm.sagacloud.cn/image-service/common/image_get?systemId=dev&key=graphy.png",
      setFlag: false, //插旗标志
      point: {}, //右侧列表传来的位置标签
      canvasLoading: false, //loading
    };
  },
  computed: {
    ...mapGetters('layout', ['projectId', 'secret', 'userId'])
  },
  created() { },
  mounted() {
    this.resize()
    document.getElementById("canvas").oncontextmenu = (e) => {
      e.preventDefault();
    }
  },
  methods: {
    resize() {
      this.param.ProjId = this.projectId
      this.param.secret = this.secret
      this.param.UserId = this.userId
      this.canvasW =
        document.getElementsByClassName("graphy-main")[0].offsetWidth - 2;
      this.canvasH =
        document.getElementsByTagName("body")[0].offsetHeight - 167;
    },
    //获取数据
    getData(data) {
      if (!data.map) {
        this.type = 2;
      } else {
        this.buildMess = data;
        this.type = 3;
      }
    },
    //下载json文件
    getJson(jsonId) {
      let that = this;
      that.clearGraphy()
      that.scene = new LocationPointScene();
      that.canvasLoading = true;
      that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${jsonId}`).then(() => {
        that.canvasLoading = false;
        that.view.scene = that.scene;
        that.scene.isSpaceSelectable = false;
        that.scene.addMarkerList(that.list);
        that.scene.markerClick(that, that.markClick);
        that.view.maxScale = that.view.scale * 10;
        that.view.minScale = that.view.scale;
        that.view.fitSceneToView();
        // that.$refs.canvasFun.everyScale = that.view.scale;
      })
    },
    //画点位坐标
    doPoint(list) {
      this.setFlag = false;
      if (this.view) {
        this.view.canvasView.style.cursor = `default`;
      }
      this.list = list.map(t => {
        if (t.X == 0 && t.Y == 0) {
          return undefined;
        } else {
          return {
            Id: t.Id,
            X: t.X,
            Y: t.Y * -1,
            Name: t.Name
          };
        }
      }).filter(item => item);
      this.getJson(this.buildMess.map)
    },
    //右键菜单的编辑该标签
    getDatails() {
      this.menuShow = false
      this.$emit("getDetails", { Id: this.point.id });
    },
    //右键的清除该点位的坐标
    clearXY() {
      this.menuShow = false
      this.point.X = 0
      this.point.Y = 0
      this.updatePoint()
    },
    //右键的修改为无法定位到楼层的点位
    noLocate() {
      this.menuShow = false
      delete this.point.FloorId
      this.updatePoint()
    },
    //创建实例
    createCanvas() {
      if (this.view.scene) {
        this.view.scene.root.children = [];
        this.view = null;
      }
      this.view = new SGraphyView("canvas");
    },
    //实例化视图
    initGraphy(data) {
      this.resetSize();
      let items = this.scene.root.children;
      items.map((t, i) => {
        this.drawText(t)
        this.applyColor(t, i)
      })
    },
    //初始化canvas大小
    resetSize() {
      this.canvasH = document.getElementsByClassName("canvasGraphy")[0].offsetHeight;
      this.$refs.canvasContainer.style.height = this.canvasH + "px";
    },
    // 绘出文案
    drawText(item) {
      if (item.initName) {
        if (this.isBusiness == 1) {
          item.fillColor = new SColor(111, 111, 111, .5)
        } else if (this.isBusiness == 2) {
          item.fillColor = new SColor("#333");
        } else if (this.isBusiness == 3) {
          //业务空间异常状态
          item.fillColor = new SColor('#fff')
        } else if (this.isBusiness == 4) {
          item.fillColor = new SColor('#cacaca')
        } else if (this.isBusiness == 6) {
          item.fillColor = new SColor('#fff')
        } else if (this.isBusiness == 7) {
          item.fillColor = new SColor('red')
        }
      }
      if (item.businessName || item.businessId) {
        item.viewText = "👇   " + item.businessName;
      } else {
        item.viewText = "⬇️   " + item.initName;
      }
    },
    //分配随机颜色
    applyColor(t, i) {
      t.fillColor = new SColor(colorArr[i % 10]);
    },
    // 定位
    locationGraphy(point) {
      let centerX = (this.view.width / 2) - point.X * this.view.scale;
      let centerY = (this.view.height / 2) - point.Y * this.view.scale;
      this.view.origin = new SPoint(centerX, centerY)
    },
    //点击按钮
    addPoint(point) {
      this.point = point;
      this.view.canvasView.style.cursor = `url(${this.imageUrl}),auto`;
      this.setFlag = true
    },
    //右键菜单
    showRightClick(e) {
      this.menuShow = true
      let el = this.$refs.graphyMain;
      this.$refs.menu.style.left = e.screenX - 240 + "px";
      this.$refs.menu.style.top = e.screenY - 246 + "px";
    },
    //合适比例
    suitableSize() {
      this.view.fitSceneToView();
    },
    //缩小
    smallSize() {
      let centerX = this.view.width / 2
      let centerY = this.view.height / 2
      this.view.scaleByPoint(0.9, centerX, centerY)
    },
    //放大
    bigSize() {
      let centerX = this.view.width / 2
      let centerY = this.view.height / 2
      this.view.scaleByPoint(1.1, centerX, centerY)
    },
    //插旗 item - 点击的空间item
    setNewFlag(item, event) {
      this.menuShow = false
      console.log(item)
      if (item instanceof SGraphyPolygonItem) {
        if (this.setFlag) {
          if (item.businessType == 'space') {
            this.scene.addImageList([{
              img: this.imageUrl,
              X: event[0].x,
              Y: event[0].y,
              width: 5000,
              height: 5000
            }])
            this.view.canvasView.style.cursor = `default`;

            this.point.X = event[0].x
            this.point.Y = -event[0].y
            this.updatePoint()
          } else {
            this.$message.warning('请在空间内选择')
          }
        }
        this.setFlag = false
      } else if (item instanceof SGraphyImgItem) {
        this.point = item
        this.showRightClick(event[0])
      }
    },
    //更新位置标签
    updatePoint() {
      let pa = {
        Content: [this.point]
      }
      console.log(pa)
      updateLocationPoint(pa, res => {
        this.$message.success('修改成功')
      })
    },
    // 清除canvas
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return
      }
      this.view = new SGraphyView('canvas')
    },
    //
    markClick() {
      console.log(arguments)
    }
  },
  watch: {
    projectId() {
      this.type = 1
      this.resize()
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.canvasGraphy {
  position: relative;
  height: 100%;
  .saga-message {
    height: 400px;
    line-height: 400px;
    color: #ccc;
    font-size: 24px;
    text-align: center;
  }
  #menu {
    width: 200px;
    z-index: 88;
    overflow: hidden;
    box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
    position: absolute;
    background-color: #fff;
  }
  #menu p {
    width: 100%;
    padding-left: 5px;
    overflow: hidden;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    margin: 0;
    text-align: left;
    cursor: pointer;
  }
  #menu p:hover {
    background-color: aqua;
  }
}
</style>
