<!--
 * @Author: zhangyu
 * @Date: 2019-11-13 17:00:59
 * @Info: 系统集成成果辅助屏
 * @LastEditTime: 2019-11-18 18:50:07
 -->
<template>
  <div>
    <div class='page-bar'>
      <el-breadcrumb separator='/'>
      <el-breadcrumb-item>系统集成</el-breadcrumb-item>
      <el-breadcrumb-item>系统集成成果管理</el-breadcrumb-item>                       
      </el-breadcrumb>
    </div>
    <div class="page-content">
      <div class="content-left">
        <div class="data-box">
          <realtime-data :queryParams="queryParams"></realtime-data>
        </div>
        <div class="example-box">
          <example-list :queryParams="queryParams" @changeExample="handleChangeExample"></example-list>
        </div>
      </div>
      <div class="content-right" id="cadBox" v-loading="loading">
        <canvas v-show="drawCanvas" :height="cadHeight" :width="cadWidth" id="exampleCanvas" :k="refreshCanvas"></canvas>
        <div v-show="drawCanvas" class="operate">
          <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @scale="scale" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun>
        </div>
        <div class="no-data" v-show="!drawCanvas">
          <div class="position-icon">
            <i class="icon-wushuju iconfont"></i>
            数据暂无
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SGraphyView } from "@saga-web/graphy/lib";
import { LocationPointScene, DivideFloorScene } from "@saga-web/cad-engine";
import { SColor } from "@saga-web/draw/lib";
import { queryEquip, floorQuery, queryZone } from '@/api/scan/request';
//组件
import realtimeData from '@/components/screen/integrateresults/realtimeData';
import exampleList from '@/components/screen/integrateresults/exampleList';
import canvasFun from "@/components/business_space/newGraphy/canvasFun";

export default {
  components: {
    realtimeData,
    exampleList,
    canvasFun
  },
  mounted() {
    this.cadWidth = document.getElementById('cadBox').offsetWidth;
    this.cadHeight = document.getElementById('cadBox').offsetHeight;
  },
  data() {
    return {
      queryParams: this.$route.query,
      loading: false,
      cadWidth: 800,
      cadHeight: 600,
      views: null,//canvas view
      scenes: null,//canvas scene
      refreshCanvas: '',//重载canvas组件
      drawCanvas: false,//是否画canvas,
      ObjectLocalName: '',//对象名称
      config: {
        isEdit: false
      },
    }
  },
  methods:{
    handleChangeExample(example) {
      //存在实例ID
      if (example.ObjectID) {
        this.ObjectLocalName = example.ObjectLocalName;
        if (example.TypeCode == 'Eq' || example.TypeCode == 'Ec') {//设备或者组件
          let pa = {
            Filters: `EquipID='${example.TypeCode + localStorage.getItem('projectId').substring(2) + example.ObjectID}'`
          }
          //获取设备信息
          queryEquip(pa, equipMsg => {
            if (equipMsg.Content[0] && equipMsg.Content[0].LocationJson && equipMsg.Content[0].FloorId) {
              let canvasOption = {
                /** 标记的id  */
                Id: equipMsg.Content[0].EquipID,
                /** 标记的名称  */
                Name: equipMsg.Content[0].EquipName,
                /** X坐标 */
                X: equipMsg.Content[0].LocationJson.X,
                /** Y坐标 */
                Y: -equipMsg.Content[0].LocationJson.Y
              }
              this.loadDataToInstanceByFloorID(equipMsg.Content[0].FloorId, example.TypeCode, canvasOption);
            }
          })
        } else if (example.TypeCode == 'Sp') {//空间
          let pa = {
            data: {
              Filters: `RoomID='${example.TypeCode + localStorage.getItem('projectId').substring(2) + example.ObjectID}'`
            },
            zone: example.SubTypeCode
          }
          //获取空间信息
          queryZone(pa, zoneMsg => {
            if (zoneMsg.Content[0] && zoneMsg.Content[0].Outline) {
              let canvasOption = {
                RoomLocalName: zoneMsg.Content[0].RoomLocalName,
                OutLine: zoneMsg.Content[0].Outline,
                RoomID: zoneMsg.Content[0].RoomID,
                Color: new SColor('#F9C3C3')
              }
              this.loadDataToInstanceByFloorID(zoneMsg.Content[0].FloorId, example.TypeCode, canvasOption);
            }
          });
        }
      }
    },
    //通过floorid获取信息，后通过floormap获取数据后绘制canvas
    loadDataToInstanceByFloorID(floorId, typecode, options) {
      let param = {
        Filters: `FloorId='${floorId}'`
      }
      //获取楼层信息
      floorQuery(param, floorMsg => {
        //刷新canvas
        this.refreshCanvas = new Date().getTime();
        if (!this.views) {
          this.views = new SGraphyView('exampleCanvas')
        }
        this.views.scene = null;
        this.scenes = null;
        //类型
        if (typecode == 'Eq' || typecode == 'Ec') {
          this.scenes = new LocationPointScene();
        }
        else if (typecode == 'Sp') {
          this.scenes = new DivideFloorScene();
        }
        if (floorMsg.Content[0] && floorMsg.Content[0].StructureInfo && floorMsg.Content[0].StructureInfo.FloorMap) {
          this.loading = true;
          //获取数据，并加载canvas
          this.scenes.loadUrl(`/image-service/common/file_get?systemId=revit&key=${floorMsg.Content[0].StructureInfo.FloorMap}`).then(() => {
            this.drawCanvas = true;
            this.loading = false;
            this.views.scene = this.scenes;
            this.scenes.isSpaceSelectable = false;
            if (typecode == 'Eq' || typecode == 'Ec') {
              this.scenes.addMarker(options);
            }
            else if (typecode == 'Sp') {
              this.scenes.addZone(options);
            }
            this.views.fitSceneToView();
            if (this.$refs.canvasFun) {
              this.views.maxScale = this.views.scale * 10;
              this.views.minScale = this.views.scale;
              this.$refs.canvasFun.everyScale = this.views.scale;
            }
          })
        }
        else{
          this.loading = false;
          this.drawCanvas = false;
        }
      });
    },
    // canvas 获取焦点
    focus() {
      document.getElementById('cadBox').focus()
    },
    // 工具栏操作
    // 适配底图到窗口
    fit() {
      this.views.fitSceneToView()
    },
    // 保存为png
    savePng() {
      this.views.saveImage(`${this.ObjectLocalName}.png`, 'png');
    },
    // 保存为svg
    saveSvg() {
      this.views.saveSceneSvg(`${this.ObjectLocalName}.svg`, 6400, 4800);
    },
    saveJson() {
      this.views.saveFloorJson(`${this.ObjectLocalName}.json`)
    },
    // 缩放
    scale(val) {
      if (!this.views) {
        return;
      }
      let scale = this.views.scale;
      this.views.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2);
    }
  },
  watch: {
    $route(to,from){
      this.queryParams = this.$route.query;
      this.ObjectLocalName = '';
      this.drawCanvas = false;
    },
    "views.scale": {
      handler(n) {
        if (this.$refs.canvasFun) {
          this.$refs.canvasFun.sliderVal = n * 10 / this.views.minScale;
        }
      }
    }
  },
}
</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;
  /deep/ .el-breadcrumb {
    font-size: 14px;
  }
}
.page-content{
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  flex-direction: row;
  justify-content: flex-start;
  overflow-y: auto;
  .content-left{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 260px;
    margin-right: 15px;
    .data-box{
      height: 140px;
      margin-bottom: 15px;
    }
    .example-box{
      flex-grow: 1;
      flex-shrink: 1;
      border: 1px solid $borderColor;
    }
  }
  .content-right{
    flex-grow: 1;
    flex-shrink: 1;
    border: 1px solid $borderColor;
    overflow: hidden;
    position: relative;
    .operate {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      z-index: 99;
    }
    .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>