<!--
  revit空间管理
 -->
<template>
  <div id="graphy">
    <div class='search-title'>
      <span class="p12">建筑楼层</span>
      <el-cascader placeholder='请选择' v-model="buildVlaue" :options="options" @change="changeFloor" filterable :props="props" ref="buildfloor">
      </el-cascader>
    </div>
    <div class="graphy-view">
      <div class="graphy-main">
        <graphy-canvas v-if="show" @getDetails="getDetails" @resetPoint="resetPoint" ref="canvas"></graphy-canvas>
      </div>
      <div class="graphy-right">
        <graphy-tabs v-show="show" ref="tabs" :floorOption="options" :pointParam="pointParam" @setFalg="setFalg" @getLocation="getLocation"
          @getPointList="sendPointList" @closeCanvas="closeCanvas">
        </graphy-tabs>
      </div>
    </div>
  </div>
</template>

<script>
//接口
import graphyTree from "./graphyTree";
import graphyTabs from "./graphyTabs";
import graphyCanvas from "./graphyCanvas";
import {
  mapGetters,
  mapActions
} from 'vuex';
import {
  getPT,
  // buildingQuery,
  getFloor
} from "@/api/scan/request"; //获取点位坐标
import tools from "@/utils/scan/tools"
import Handsontable from "handsontable-pro"
import { buildingQuery } from '@/api/object/build';
import 'handsontable-pro/dist/handsontable.full.css'
import zhCN from 'handsontable-pro/languages/zh-CN';
export default {
  components: {
    graphyTree,
    graphyTabs,
    graphyCanvas
  },
  data() {
    return {
      props: {
        value: 'id',
        label: 'localName',
        children: 'floor'
      },
      param: {
        ProjId: this.projectId, //项目id
        UserId: this.userId //用户id
      },
      pointParam: {
        projId: this.projectId, //项目id
        userId: this.userId, //用户id
        floorName: "",
        buildingData: [],//建筑楼层信息
      },
      options: [],
      map: null,
      pointId: null,
      show: false,
      buildVlaue: []
    };
  },
  mounted() {
    this.changeValue()
    this.getList()
  },
  computed: {
    ...mapGetters('layout', ['projectId', 'secret', 'userId'])
  },
  methods: {
    //修改楼层
    changeFloor(val) {
      let floorMap = "",
        name = "",
        buildFloorName = ''
      this.options.map(item => {
        if (!!item.floor && item.floor.length) {
          if (item.id == val[0]) {
            buildFloorName = `${item.localName || item.name}-`
            item.floor.map(child => {
              if (child.id == val[1]) {
                floorMap = child.infos ? child.infos.floorMap : ''
                name = child.localName
                buildFloorName += `${child.localName || child.name}`
              }
            })
          }
        }
      })
      let obj = {
        code: val[1],
        map: floorMap,
        name: name,
        buildingData: val,
        buildFloorName: buildFloorName
      }
      this.getPoint(obj)
    },
    //获取建筑列表
    getList() {
      let param = {
        cascade: [
          { name: "floor", orders: "floorSequenceID desc", }
        ],
        pageNumber: 1,
        pageSize: 50
      }
      buildingQuery(param, res => {
        this.options = res.content
        if(this.$route.params.nowBuildFloor){
          this.changeFloor(this.$route.params.nowBuildFloor)
          this.buildVlaue = this.$route.params.nowBuildFloor
        }
      })
    },
    changeValue() {
      this.$set(this.param, 'projId', this.projectId)
      this.$set(this.param, 'userId', this.userId)
      this.$set(this.pointParam, 'projId', this.projectId)
      this.$set(this.pointParam, 'userId', this.userId)
      this.show = true
    },
    //渲染
    getPoint(data) {
      this.pointParam.floorId = data.code;
      this.pointParam.floorName = data.name;
      this.pointParam.buildingData = data.buildingData

      if (this.map != data.map) {
        this.map = data.map;
        this.$refs.canvas.getData(data);
      } else {
        // return;
      }
      this.$refs.tabs.reset(this.pointParam, data.map);
    },
    //获取到点位标签坐标
    sendPointList(list) {
      if (list && list.length) {
        this.pointId = list[0].i;
        this.$refs.canvas.doPoint(list);
      } else {
        this.$refs.canvas.doPoint([]);
      }
    },
    //插旗setFalg
    setFalg(item) {
      this.$refs.canvas.addPoint(item);
    },
    //定位getLocation
    getLocation(item) {
      this.$refs.canvas.locationGraphy({
        x: item.x,
        y: item.y * -1
      });
    },
    //重新获取点位信息resetPoint
    resetPoint() {
      this.$refs.tabs.reset(this.pointParam, true);
    },
    //查看详情
    getDetails(item) {
      this.$refs.tabs.findDetails(item);
    },
    //关闭canvas
    closeCanvas() {
      this.show = false;
    }
  },
  watch: {
    projectId() {
      this.map = null
      this.show = false
      this.options = []
      this.buildVlaue = []
      this.changeValue()
      this.getList()
    }
  }
};
</script>

<style lang="less" scoped>
#graphy {
  // position: relative;
  display: flex;
  flex-direction: column;
  .graphy-view {
    display: flex;
    background-color: #fff;
    flex: 1;
    .graphy-main {
      flex: 1;
      // position: absolute;
      // left: 200px;
      // top: 0;
      // right: 400px;
      // bottom: 0;
      // overflow: auto;
    }
    .graphy-right {
      // position: absolute;
      // right: 0;
      width: 400px; // top: 0;
      // bottom: 0;
      // border-left: 1px solid #ccc;
      // overflow: hidden;
    }
  }
  .graphy-left {
    // width: 200px;
    // height: 100%;
    // position: absolute;
    // overflow-y: auto;
    // left: 0;
    // top: 0;
    // bottom: 0;
    // border-right: 1px solid #ccc;
  }
}
</style>
