<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";

export default {
  data() {
    return {
      equip: {},
      file: {},
      view: '',
      scene: {},
      cadWidth: 800,
      cadHeight: 800,
      showCanvas: true,
      canvasLoading: false,
    }
  },
  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() {
      if (this.equip.ModelId && this.equip.BIMLocation) {
        this.showCanvas = true;
        this.getGraphy();
        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()
      this.canvasLoading = true;
      this.scene.getFloorData('/modelapi/base-graph/query', { ModelId: this.equip.ModelId }).then(res => {
        this.getGraphtSuc(res)
      })
    },
    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);
    },
    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.EquipID && equip.EquipID != this.equip.EquipID) {
        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>
