<template>
  <el-dialog
    title='修改BIM模型中的坐标'
    v-if='dialog.bimcode'
    custom-class='custom-dialog'
    :visible.sync='dialog.bimcode'
    width='900px'
    @close='handleClose'
  >
    <div id='bim-code' v-if='Object.keys(bimcodeobj).length>0'>
      <div class='eq'>
        <span class='eq-name'>设备名称 &nbsp;&nbsp;</span>
        {{ bimcodeobj.EquipLocalName || bimcodeobj.EquipName || '--' }}
      </div>
      <div>
        <noAllDataFloor @change='changeFloor' ref='floors' @getFloorMap='getFloorMap'></noAllDataFloor>
        <span v-if='isShow' class='errMsg'>请选择设备所属建筑楼层</span>
      </div>
      <div class='canvas-box' v-loading='canvasLoading'>
        <canvas v-show='isdata' :id='`floorCanvas${id}`' :width='cadWidth' :height='cadHeight' ref='canvas'
                tabindex='0'></canvas>
        <p v-show='!isdata'>当前楼层暂无平面图，请前往“建筑楼层管理”中给楼层添加平面图</p>
      </div>
    </div>
    <div slot='footer' class='footer'>
      <el-button @click='handleClose'>取 消</el-button>
      <el-button type='primary' @click='save'>确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import noAllDataFloor from './noAllDataFloor'
import { FloorView, LocationPointScene } from '@saga-web/cad-engine/lib'
import { SPoint } from '@saga-web/draw/lib'
import { updateEquip } from '@/api/scan/request'
import { SGraphItem } from '@saga-web/graph/lib'

export default {
  components: {
    noAllDataFloor,
  },
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          bimcode: false,
        }
      },
    },
    bimcodeobj: {
      default: {},
    },
  },
  data() {
    return {
      cadWidth: 800,
      cadHeight: 400,
      Buildfloor: '',
      value: [],
      isdata: true,
      floorData: {},
      canvasLoading: false,
      isShow: false,
      id: 'ty',
      view: '',
      drawMainScene: '',
      floorToMap: {},
    }
  },
  created() {
  },
  mounted() {
    console.log(this.bimcodeobj)
    this.init()
  },
  methods: {
    init() {
      this.isShow = true
      this.$nextTick(function () {
        if (this.bimcodeobj.floorId) {
          this.isShow = false
        }
        if (this.$refs.floors) {
          this.$refs.floors.setValue([this.bimcodeobj.buildingId, this.bimcodeobj.floorId])
        }
      })
    },
    //切换楼层
    changeFloor(value) {
      this.Buildfloor = value
      this.isShow = true
      if (value.length > 1) {
        this.isShow = false
        this.floorData = this.floorToMap[value[1]]
      } else {
        this.isShow = false
        this.floorData = {}
      }
      this.getFloorData()
    },
    // 初始化canvas
    initGraphy(Id, type) {
      // type=1 => id:模型id 这里不需要
      // type=2 => id:floormap jsonz格式
      // type = 3 => id：floormap png或者jpg格式
      let that = this
      that.clearGraphy()
      that.drawMainScene = new LocationPointScene()
      that.canvasLoading = true
      if (type == 2) {
        that.drawMainScene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${Id}`).then((res) => {
          that.getGraphtSuc(res)
        })
      } else if (type == 3) {
        that.drawMainScene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${Id}`, (res) => {
          that.getGraphtSuc(res)
        })
      }
    },
    // 获取底图成功
    getGraphtSuc(res) {
      this.canvasLoading = false
      if (res == 'error') {
        this.FloorMap = ''
        this.$message.warning('数据解析异常')
        return
      }
      if (res.Result == 'failure') {
        this.showTools = false
        this.$message.warning(res.Message)
        return
      }
      this.view.scene = this.drawMainScene
      if (this.bimcodeobj.locationJson) {
        let obj = {
          X: this.bimcodeobj.locationJson.x,
          Y: -this.bimcodeobj.locationJson.y,
        }
        //回写编辑
        this.drawMainScene.addMarker(obj)
      }
      this.view.fitSceneToView()
      this.drawMainScene.isSpaceSelectable = false
      this.drawMainScene.spaceClick(this, this.canvasClick) //锚点触发
      if (this.floorData.outline && this.floorData.outline.length) {
        let newArr = this.floorData.outline.map((t) => {
          return new SPoint(t.X, t.Y)
        })
        this.drawMainScene.addSceneMark(newArr)
      }
    },
    //获取楼层数据
    getFloorData() {
      if (this.floorData && this.floorData.infos && this.floorData.infos.floorMap) {
        this.isdata = true
        let floorMap = this.floorData.infos.floorMap
        const temp = floorMap.split('.')[1];
        if (temp && (temp.toLowerCase() == 'png' || temp.toLowerCase() == 'jpg')) {
          this.initGraphy(floorMap, 3)
        } else {
          this.initGraphy(floorMap, 2)
        }
      } else {
        //暂无数据
        this.isdata = false
        this.clearGraphy()
      }
    },
    //关闭弹窗
    handleClose(val) {
      this.view = ''
      this.drawMainScene = ''
      this.$emit('closeBIM', val)
    },
    //保存事件
    save() {
      if (this.drawMainScene) {
        if (this.drawMainScene.markerList.length) {
          let obj = this.drawMainScene.markerList[0], BIMLocation;

          if (this.bimcodeobj.bimLocation && this.bimcodeobj.bimLocation.split(',')[2]) {
            BIMLocation = `${obj.x.toFixed(2)},${(obj.y * -1).toFixed(2)},${this.bimcodeobj.bimLocation.split(',')[2]}`
          } else {
            BIMLocation = `${obj.x.toFixed(2)},${(obj.y * -1).toFixed(2)},0`
          }
          let param = {
            content: [
              {
                equipId: this.bimcodeobj.id,
                buildingId: this.Buildfloor[0],
                floorId: this.Buildfloor[1],
                bimLocation: BIMLocation
              },
            ],
            projection: ['bimLocation', 'buildingId', 'floorId'],
          }
          updateEquip(param, (res) => {
            if (res.result == 'success') {
              this.$message.success('保存成功')
              this.handleClose('update')
            }
          })
        }
      }
    },
    // 清空平面图
    clearGraphy() {
      if (this.view) {
        this.view.scene = null
        return
      }
      let id = `floorCanvas${this.id}`
      this.view = new FloorView(id)
    },
    //得到floormap
    getFloorMap(val) {
      this.floorToMap = val
      this.floorData = this.floorToMap[this.bimcodeobj.floorId]
      this.getFloorData()
    },
    // canvas点击事件
    canvasClick(item, event) {
      if (item instanceof SGraphyItem) {
        this.clearMark()
        let obj = {
          X: event[0].x,
          Y: event[0].y,
        }
        this.drawMainScene.addMarker(obj)
        this.view.fitSceneToView()
      }
    },
    //清空标记
    clearMark() {
      if (this.drawMainScene) {
        this.drawMainScene.markerList.forEach((t) => {
          this.drawMainScene.removeItem(t)
        })
        this.drawMainScene.markerList = []
      }
    },
  },
  watch: {
    bimcodeobj: {
      immediate: true,
      handler(val) {
        this.init()
      },
    },
  },
}
</script>
<style lang="less" scoped>
#bim-code {
  height: 500px;

  .eq {
    padding-bottom: 10px;

    .eq-name {
      color: #999999;
      padding-left: 10px;
    }
  }

  .errMsg {
    color: red;
    padding-left: 10px;
  }

  #buildFloor {
    clear: both;
    margin-bottom: 10px;
  }

  .canvas-box {
    border: 1px solid #ccc;
    clear: both;
    width: 800px;
    height: 400px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style lang="less">
#bim-code {
}
</style>
