<template>
  <div>
    <div class='page-bar'>
      <span>设备名称:</span>
      <span>{{ equip.EquipLocalName || equip.EquipName }}</span>
      <span>(位置图片)</span>
    </div>
    <div class="page-content" id="page-content" v-loading="canvasLoading">
      <div v-show="showCanvas">
        <p>{{ file.FolderName }} - {{ file.FloorName }}</p>
        <canvas :height="cadHeight" :width="cadWidth" id="floorCanvas" :k="refreshCanvas"></canvas>
      </div>
      <div class="no-data" v-show="!showCanvas">
        <div class="position-icon">
          <i class="icon-wushuju iconfont"></i>
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { LocationPointScene, FloorView } from "@saga-web/cad-engine";
import { getFileNameById, queryFileByModelId } from "@/api/model/file";
import { floorQuery } from "@/api/scan/request"

export default {
  data() {
    return {
      equip: {},
      file: {},
      view: '',
      scene: {},
      cadWidth: 800,
      cadHeight: 800,
      showCanvas: true,
      canvasLoading: false,
      useModel: false, // 旧: 使用的是设备上的modelId - 新: 改为使用楼层的 floormap
    }
  },
  mounted() {
    this.cadWidth = document.getElementById('page-content').offsetWidth;
    this.cadHeight = document.getElementById('page-content').offsetHeight;
    this.equip = this.$route.query.equip || {};
    this.init();
  },
  methods: {
    init() {
      this.showCanvas = true;
      this.getGraphy();
      if (this.equip.ModelId) {
        if (this.equip.BIMLocation) {
          queryFileByModelId({ Filters: `Id='${this.equip.ModelId}'` }, res => {
            if (res.Content.length) {
              this.getFileName(res.Content[0].FloorModelId);
            }
          });
        }
      } else {
        this.showCanvas = false;
      }
    },
    // 获取底图
    getGraphy() {
      this.clearGraphy();
      this.scene = new LocationPointScene()
      if (this.useModel) {
        if (this.equip.ModelId) {
          this.canvasLoading = true;
          this.scene.getFloorData('/revit-algorithm/base-graph/query', { ModelId: this.equip.ModelId }).then(res => {
            this.getGraphtSuc(res)
          })
        } else {
          this.showCanvas = false;
        }
      } else {
        if (!this.equip.floorId) {
          this.showCanvas = false;
          return
        }
        this.canvasLoading = true;
        const pa = {
          filters: `id="${this.equip.floorId}"`
        }
        this.floorData = {};
        floorQuery(pa, res => {
          if (res.content.length) {
            this.floorData = res.content[0];
            const tempMap = this.floorData.infos.floorMap;
            const temp = tempMap?tempMap.split('.')[1]:'';
            console.log(temp);
            if (temp && (temp.toLowerCase() == 'png' || temp.toLowerCase() == 'jpg')) {
              let x = 0;
              let y = 0;
              let scale = 1;
              if (this.floorData && this.floorData.infos && this.floorData.infos.floorMapRatio && this.floorData.infos.floorMapShift) {
                try {
                  const point = JSON.parse(this.floorData.infos.floorMapShift);
                  x = point.x;
                  y = point.y;
                  scale = this.floorData.infos.floorMapRatio;
                } catch (err) {
                  console.log(err);
                }
              }
              this.scene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${tempMap}`, res => {
                this.getGraphSuc(res)
              }, x, y, scale)
            } else {
              this.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${tempMap}`).then(res => {
                this.getGraphSuc(res)
              })
            }
          } else {
            this.canvasLoading = false;
            this.showCanvas = false;
          }
        })
      }
    },
    getGraphtSuc(res) {
      this.canvasLoading = false;
      this.view.scene = this.scene;
      this.view.fitSceneToView();
      this.scene.isSpaceSelectable = false;
      let obj = {
        X: this.equip.LocationJson.X,
        Y: -this.equip.LocationJson.Y
      }
      this.scene.addMarker(obj);
    },
    getGraphSuc(res) {
      this.canvasLoading = false
      if (res == 'error') {
        console.log('数据解析异常');
        return
      }
      if (res.Result == 'failure') {
        this.$message.warning(res.Message)
        return
      }
      this.showCanvas = true
      this.view.scene = this.scene
      if (this.equip.locationJson) {
        let obj = {
          X: this.equip.locationJson.x,
          Y: -this.equip.locationJson.y,
        }
        //回写编辑
        this.scene.addMarker(obj)
      }
      this.view.fitSceneToView()
      this.scene.isSpaceSelectable = false
      if (this.floorData.outline && this.floorData.outline.length) {
        let newArr = this.floorData.outline.map((t) => {
          return new SPoint(t.X, t.Y)
        })
        this.scene.addSceneMark(newArr)
      }
    },
    refreshCanvas() {
      return new Date().getTime();
    },
    // 获取文件夹及文件名称
    getFileName(id) {
      let pa = { Id: id }
      getFileNameById(pa, res => {
        this.file = res
      })
    },
    // 清空平面图
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return
      }
      let id = `floorCanvas`;
      this.view = new FloorView(id)
    },
  },
  watch: {
    $route(to, from) {
      let equip = this.$route.query.equip || {};
      if (equip.id && equip.id != this.equip.id) {
        this.equip = equip;
        this.init()
      }
    }
  },
}
</script>

<style lang="scss" scoped>
$borderColor: rgba(201, 201, 201, 1);
.page-bar {
  flex-grow: 0;
  flex-shrink: 0;
  height: 24px;
  padding: 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid $borderColor;
}

.page-content {
  position: relative;
  height: 100%;
  border: 1px solid $borderColor;

  p {
    padding: 10px 16px;
  }

  canvas {
    top: 0;
  }

  .no-data {
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    position: relative;

    .position-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
