<template>
  <div id="cenoteGraphy" style="height:100%;width:100%;" ref="graphy">
    <div v-show="!floorMap">
      <div class="center" style="height: 400px;padding-top:182px;box-sizing:border-box;">
        <i class="icon-wushuju iconfont"></i>
        暂无数据
      </div>
    </div>
    <div class="canvas-box" v-show="floorMap" v-loading="canvasLoading">
      <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
      <el-row class="canvas-actions-box">
        <canvasFun @scale="scale" @groupSelect="groupSelect" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config"
          ref="canvasFun"></canvasFun>
      </el-row>
    </div>
  </div>
</template>

<script>
import canvasFun from "@/components/business_space/newGraphy/canvasFun";
import { SColor, SPoint } from "@saga-web/draw/lib";
import { DivideFloorScene, SpaceItem, ZoneItem, Opt } from "@saga-web/cad-engine/lib";
import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
import { colorArr } from '@/utils/spaceColor';
import { getFloorMsgByFloorID, shaftSpaceQuery, shaftZoneLinkReplace, zoneQueryOutline } from '@/api/scan/request';
import { mapGetters } from "vuex";
export default {
  props: {
    buildFloorName: String, //建筑楼层名称
  },
  data() {
    return {
      canvasLoading: false,//加载canvas
      floorMap: '',//地图
      canvasWidth: 800,
      canvasHeight: 600,
      view: null,
      scene: null,
      buildingData: [],//建筑，楼层
      space: '',//当前空间类型
      businessSpaceList: [],//所有业务空间
      BSPRelaISPList: [],//已关联元空间的业务空间
      zoneList: [], // 业务空间-canvas图中
      selectAble: false,
      relatedSpaceIdList: [],//已关联的业务空间id
      config: {
        isEdit: false,
        groupSelect: true
      },
      sceneMarkList: [],
      isFirstFlag: true,
    }
  },
  mounted() {
    this.canvasWidth = this.$refs.graphy.offsetWidth;
    this.canvasHeight = this.$refs.graphy.offsetHeight;
    this.isFirstFlag = true;
  },
  components: {
    canvasFun
  },
  computed: {
    ...mapGetters("layout", ["projectId","projects"]),
    projectName() {
      let projectObj = this.projects.find(item => {
        return item.id == this.projectId
      })
      return projectObj?projectObj.name?projectObj.name:projectObj.id:this.projectId
    }
  },
  created() {
    Opt.sceneMarkColor = new SColor('#ffffff');
  },
  methods: {
    //获取楼层map
    getFloorMap(buildfloor, space) {
      if (buildfloor.length == 2 && space && buildfloor[0] && buildfloor[1] && buildfloor[1] !== 'all' && buildfloor[1] !== 'noKnow') {
        this.buildingData = buildfloor
        let pa = {
          filters: `id='${this.buildingData[1]}'`
        }
        getFloorMsgByFloorID(pa, res => {
          this.floorMap = res.content[0].infos ? res.content[0].infos.floorMap : '';
          this.space = space;
          // 蒙版
          if (res.content[0].outline) {
            this.sceneMarkList = res.content[0].outline.map(t => {
              return new SPoint(t.X, t.Y);
            })
          }
          this.getGraphy();
        })
      }
      else {
        this.floorMap = '';
      }
    },
    //加载
    load() {
      if (this.scene) {
        this.scene.clearSpaceSelection();
        this.scene.clearZoneSelection();
      }
      //加载底板
      this.getGraphy()
    },
    //获取底图
    getGraphy() {
      let that = this;
      that.clearGraphy()
      if (!this.floorMap) return
      that.scene = new DivideFloorScene();
      that.canvasLoading = true;
      that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.floorMap}`).then(res => {
        that.canvasLoading = false;
        if (res == 'error') {
          this.floorMap = '';
          console.log('数据解析异常');
          return;
        }
        that.view.scene = that.scene;
        if (that.sceneMarkList.length) {
          that.scene.addSceneMark(that.sceneMarkList)
        }
        that.scene.isSpaceSelectable = false;
        // 绘制业务空间
        that.getBusinessSpace();
        if (this.isFirstFlag) {
          that.fit();
          that.view.minScale = that.view.scale;
          if (that.$refs.canvasFun) {
            that.$refs.canvasFun.everyScale = that.view.scale;
          }
          this.isFirstFlag = false;
        }
      })
    },
    // 获取当前分区下的业务空间
    getBusinessSpace() {
      this.canvasLoading = true
      let promise1 = new Promise((resolve, reject) => {
        let params = {
          data: {
            filters: `not id isNull;classCode='${this.space}';buildingId='${this.buildingData[0]}';floorId='${this.buildingData[1]}'`,
            Orders: "localName desc"
          },
          ShaftId: this.$route.query.ShaftId
        };
        shaftSpaceQuery(params, res => {
          resolve(res)
        })
      });
      let promise2 = new Promise((resolve, reject) => {
        let pa = {
          filters: `not id isNull`,
          orders: "createTime desc, id asc",
          pageSize: 1000,
          zoneType: this.space
        }
        if (this.buildingData.length && this.buildingData.length > 1) {
          pa.BuildingId = this.buildingData[0];
          pa.FloorId = this.buildingData[1];
        }
        zoneQueryOutline(pa, res => {
          resolve(res);
        })
      })
      Promise.all([promise1, promise2]).then(values => {
        let relatedZone = values[0].content;
        let zoneData = values[1].content;
        this.relatedSpaceIdList = [];
        relatedZone.map(item => {
          this.relatedSpaceIdList.push(item.id);
        })
        // 所有业务空间
        this.businessSpaceList = zoneData;
        // 已关联元空间的业务空间
        this.BSPRelaISPList = [];
        zoneData.map(t => {
          if (t.outline && t.outline.length) {
            this.BSPRelaISPList.push(t)
          }
        })
        // 绘制业务空间
        let tempArr = this.BSPRelaISPList.map((t, i) => {
          if (t.floorId == this.buildingData[1] && t.classCode == this.space) {
            return {
              RoomLocalName: t.localName,
              OutLine: t.outline,
              RoomID: t.id,
              Color: colorArr[i % colorArr.length],
              HighLightFlag: relatedZone.findIndex((item) => (item.id == t.id)) > -1,
              Transparency: relatedZone.findIndex((item) => (item.id == t.id)) > -1 ? 20 : 1
            }
          } else {
            return undefined
          }
        }).filter(item => item)
        this.scene.removeAllZone();
        this.scene.addZoneList(tempArr);
        this.scene.click(this, this.canvasClick);
        if (this.config.isEdit) {
            this.scene.zoneList.map(t => {
                t.selected = t.highLightFlag;
                t.transparency = 20;
                t.highLightFlag = false;
            })
        }
        this.canvasLoading = false;
      })
    },
    // canvas点击事件
    canvasClick(item, event) {
      if (!this.config.isEdit) {
        item.selected = false;
      }
    },
    // 立面图选中空间对应平面图选中
    canvasChecked(RoomID) {
      this.scene.zoneList.map(zoneItem => {
        if (zoneItem.data.RoomID == RoomID) {
          zoneItem.selected = true;
        }
      })
    },
    // 立面图取消选中对应平面图取消选中
    canvasUncheck(RoomID) {
      this.scene.zoneList.map(zoneItem => {
        if (zoneItem.data.RoomID == RoomID) {
          zoneItem.selected = false;
        }
      })
    },
    //取消编辑
    cancelEdit() {
      this.config.isEdit = false;
      if (this.scene) {
        this.scene.clearZoneSelection();
      }
      this.getBusinessSpace();
    },
    //编辑
    edit() {
      this.config.isEdit = true;
      this.scene.zoneList.map(t => {
        t.selected = t.highLightFlag;
        t.transparency = 20;
        t.highLightFlag = false;
      })
    },
    //保存编辑
    saveEdit() {
      let arr = this.scene.getSelectedZone();
      let param = {
        buildingId: this.buildingData[0],
        floorId: this.buildingData[1],
        type: this.space,
        data: {
          shaftId: this.$route.query.ShaftId,
          spaceIdList: []
        }
      }
      param.data.spaceIdList = arr.map(t => {
        return t.data.RoomID;
      })
      shaftZoneLinkReplace(param, res => {
        this.config.isEdit = false;
        this.$message.success("保存成功");
        this.getBusinessSpace();
      })
    },
    // 清除canvas
    clearGraphy() {
      // debugger
      this.scene = null;
      if (this.view) {
        this.view.scene = null;
        return
      }
      this.view = new FloorView('floorCanvas')
    },
    // 适配底图到窗口
    fit() {
      if (this.scene.sceneMark) {
        this.view.fitItemToView([this.scene.sceneMark])
        return
      }
      this.view.fitSceneToView()
    },
    // 缩放
    scale(val) {
      if (!this.view) {
        return;
      }
      let scale = this.view.scale;
      this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
    },
    // 保存为png
    savePng() {
      this.view.saveImage(`${this.projectName}-${this.buildFloorName}.png`, 'png');
    },
    // 保存为svg
    saveSvg() {
      this.view.saveSceneSvg(`${this.projectName}-${this.buildFloorName}.svg`, 6400, 4800);
    },
    // 框选
    groupSelect() {
      this.scene.isRectSelection = 2;
    },
    // 保存json
    saveJson() {
      this.view.saveFloorJson(`${this.projectName}-${this.buildFloorName}.json`)
    },
  },
  watch: {
    "view.scale": {
      handler(n) {
        if (this.$refs.canvasFun) {
          let s = n * 10 / this.view.minScale
          this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
        }
      }
    },
    "scene.isRectSelection": {
      handler(n) {
        if (!n) {
          this.$refs.canvasFun.active = '';
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.canvas-actions-box {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 352px;
  transform: translateX(-50%);
  z-index: 999;
}
.canvas-box {
  width: 100%;
  height: 100%;
}
</style>