<!--
  revit业务空间
 -->
<template>
  <div id="businessSpace">
    <!------------------------    头部弹窗，选择楼层信息     -------------->
    <influence-dialog ref="influence" :param="param" :tabsList="tabsList" title="受元空间变化影响的业务空间" :isShow="floor"></influence-dialog>
    <details-dialog ref="details" @del="delSuccess" :param="param" :tabsList="tabsList" title="业务空间详情" :isShow="floor" :activeTabType="activeTabType">
    </details-dialog>
    <not-related ref="notRelated" @createSuccess="createSuccess" :isShow="floor"></not-related>
    <facility-dialog ref="facility" :activeTabType="activeTabType" :isShow="floor"></facility-dialog>
    <!--------- 页面头部   -------------->
    <div class="saga-title">
      <div class="saga-build-mess">
        <span style="padding-right:12px;color:#999999;">建筑楼层</span>
        <el-cascader :options="options" v-model="buildFloorSelectd" :props="props" @change="changeCascader"></el-cascader>
      </div>
      <div class="saga-build-tab">
        <el-radio-group v-model="isMyTab" @change="changeRadio" style="width: 136px;">
          <el-radio-button label="1">平面图</el-radio-button>
          <el-radio-button label="2" class="space-own-radio" style="width: 68px;">列表</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="saga-business-sapce-main">
      <el-row class="spaceTypes">
        <div class="types">
          <el-tabs v-model="activeName" type='card' @tab-click="tabClick">
            <template v-for="(item,index) in tabsList">
              <el-tab-pane :name="item.Code" :key="index" :label="item.Name"></el-tab-pane>
            </template>
          </el-tabs>
        </div>
        <div class="groupAdd">
          <el-button size="small" @click="groupCreateBSpace">批量创建业务空间</el-button>
        </div>
      </el-row>
      <div v-show="isMyTab == 1" style="width:100%;height:100%">
        <graphy @getSp="checkSpace" @dimension="checkSpace" @businessDetails="getBuinessDetails" ref="graphy"></graphy>
      </div>
      <div v-show="isMyTab == 2">
        <handsontable-main @lookEqu="lookEqu" ref="handsontable" :zoneCode="activeName" :id="`handsontable${activeName}`"></handsontable-main>
      </div>
    </div>
  </div>
</template>
<script>
import noModelDialog from "@/components/business_space/dialogs/noModelDialog";
import influenceDialog from "@/components/business_space/dialogs/influenceDialog";
import detailsDialog from "@/components/business_space/dialogs/detailsDialog";
import notRelated from "@/components/business_space/dialogs/notRelated";
import facilityDialog from "@/components/business_space/dialogs/facilityDialog";
// import graphy from "@/components/business_space/graphy/business";
import graphy from "@/components/business_space/newGraphy/graphy";
import handsontableMain from "@/components/business_space/business/handsontable";
import {
  getDataDictionary,
  getAllbusiness,
  getSpaceFloor,
  buildingQuery, //数据中心-建筑查询
  queryDictionaryHead, //数据中心-字典头部信息查询接口
} from "@/api/scan/request";
import tools from '@/utils/scan/tools'
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    noModelDialog,
    influenceDialog,
    detailsDialog,
    notRelated,
    graphy,
    handsontableMain,
    facilityDialog
  },
  computed: {
    ...mapGetters('layout', ['projectId', 'userId', 'secret'])
  },
  data() {
    return {
      floor: {
        influence: false, //受影响的业务空间弹窗
        details: false, //详情弹窗
        notRelated: false,
        facility: false
      },
      param: {
        ProjId: this.projectId, //项目id
        UserId: this.userId, //用户id
        secret: this.secret
      },
      buildMess: {
        name: "--",
        code: "",
        selectd: [],
        map: "",
        isChild: true,
        buildName: "--",
        buildCode: ""
      },
      isMyTab: 1,
      activeName: "0",
      tabsList: [],
      activeTabType: {
        "code": "GeneralZone",
        "name": "默认分区",
        "rel_type": "99"
      },
      options: [], //建筑楼层级联下拉
      props: { //自定义字段
        value: "BuildID",
        label: "BuildLocalName",
        children: "Floor"
      },
      floorToMap: {}, //楼层及其对应的模型图
      FloorMap: "", //当前选中的楼层平面图
      buildFloorSelectd: [], //当前所选的建筑楼层
      childBackParam: {}
    };
  },
  created() {
    this.init();
    this.childBackParam = this.$route.params;
  },
  mounted() { },
  methods: {
    // 初始化
    init() {
      this.getTypes()
      this.getBuilding()
    },
    // 获取项目下建筑
    getBuilding() {
      let pa = {
        Cascade: [{ name: 'floor', Orders: 'SequenceId desc' }],
        Orders: "BuildLocalName asc",
      }
      buildingQuery(pa, res => {
        this.options = res.Content.map(t => {
          if (t.Floor) {
            t.Floor = t.Floor.map(item => {
              item.BuildID = item.FloorID;
              item.BuildLocalName = item.FloorLocalName;
              this.floorToMap[item.FloorID] = item.StructureInfo ? item.StructureInfo.FloorMap : '';
              return item;
            })
          } else {
            t.Floor = []
          }
          return t;
        })
        if (this.childBackParam.zone) {
          this.changeCascader(this.buildFloorSelectd)
        }
      })
    },
    // 切换平面图和列表
    changeRadio(val) {
      this.changeGraphyOrTable(val)
    },
    // 获取tabs的列表
    getTypes() {
      let pa = {
        Filters: `parentId = 'Space'`
      }
      queryDictionaryHead(pa, res => {
        this.tabsList = res.Content;
        if (this.childBackParam.zone) {
          this.activeName = this.childBackParam.zone;
          this.buildFloorSelectd = [this.childBackParam.BuildingId, this.childBackParam.FloorId];
          this.isMyTab = this.childBackParam.isMyTab;
        } else {
          this.activeName = 'GeneralZone';
        }
      })
    },
    // 通过选中的tab-Code 获取选中的tab的所有数据
    getItemForType() {
      let data = {}
      this.tabsList.map(item => {
        if (item.Code == this.activeName) {
          data.code = item.Code;
          data.name = item.Name;
        }
      })
      return data
    },
    // 点击tab
    tabClick(val) {
      this.changeGraphyOrTable(this.isMyTab)
    },
    //修改所选建筑楼层
    changeCascader(val) {
      // val[0]->建筑 val[1]->楼层
      if (!this.floorToMap[val[1]]) {
        this.isMyTab = 2;
      }
      this.FloorMap = this.floorToMap[val[1]];
      this.changeGraphyOrTable(this.isMyTab)
    },
    // 判断切换至图还是表
    changeGraphyOrTable(num) {
      if (!this.buildFloorSelectd.length) {
        this.$message("请选择楼层")
        return false
      }
      this.activeTabType = this.getItemForType()
      if (num == 2) {
        this.initMessage();
      } else {
        this.$refs.graphy.getData(this.buildFloorSelectd, this.FloorMap, this.activeTabType);
      }
    },
    // 触发获取表头-获取初始化信息点
    initMessage() {
      let params = {
        data: {
          Orders: "sort asc",
          PageNumber: 1,
          PageSize: 500
        },
        type: this.activeName
      }
      getDataDictionary(params, res => {
        this.$refs.handsontable.getHeader(res.Content, this.buildFloorSelectd);
      })
    },
    // 批量创建业务空间
    groupCreateBSpace() {
      this.$refs.graphy.groupCreateBSpace()
    },
    checkSpace(list, build, graphyId) {
      this.floor.notRelated = true;
      this.$refs.notRelated.getIdList(list, build, graphyId, this.activeTabType);
      this.$refs["graphy"].getHasSpace();
    },
    changeShow() {
      this.floor.dialogVisible = true;
      console.log(this.buildMess, 'buildMess')
    },
    //成功关联平面图
    createSuccess() {
      this.$refs["graphy"].getHasSpace();
      this.$refs["graphy"].clearDimension();
      this.floor.notRelated = false;
    },
    //成功删除业务空间
    delSuccess() {
      this.floor.details = false;
      this.$refs["graphy"].getHasSpace();
      this.$refs["graphy"].clearDimension();
    },
    //查看业务空间详情
    getBuinessDetails(list) {
      this.floor.details = true;
      this.$refs.details.getData(list, this.buildMess);
    },
    lookEqu(infos) {
      infos.id = infos.RoomID
      infos.name = infos.RoomLocalName
      this.floor.facility = true
      this.$refs.facility.getData(infos, this.buildMess)
    },
  },
  watch: {
    floor: {
      deep: true,
      handler: function () {
        if (this.floor.notRelated) {
          this.$refs["graphy"].clearDimension();
        }
      }
    },
    projectId() {
      this.init()
    }
  }
};
</script>

<style lang="less">
#businessSpace {
  position: relative;
  display: flex;
  flex-direction: column;
  .space-own-radio {
    .el-radio-button__inner {
      padding: 9px 21px;
    }
  }
  .el-dialog__body {
    max-height: 600px;
    overflow-y: auto;
  }
  .saga-title {
    height: 54px;
    background-color: #fff;
    font-size: 14px;
    position: relative;
    line-height: 54px;
    width: 99.5%;
    margin-bottom: 10px;
    border: 1px solid #dfe6ec;
    .saga-build-mess {
      position: absolute;
      left: 10px;
      width: 500px;
      margin-left: 10px;
      i {
        padding-right: 5px;
      }
      p {
        float: left;
      }
      .saga-btn {
        float: left;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
      }
    }
    .saga-build-tab {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      .tab-main {
        float: left;
        width: 120px;
        padding: 0 5px;
        margin: 5px 0;
        border: 1px solid #ccc;
        background-color: #fff;
        height: 30px;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        i {
          font-size: 18px;
          padding-right: 10px;
          float: left;
          line-height: 30px;
          margin-left: 10px;
        }
        span {
          line-height: 30px;
          float: left;
        }
      }
      .tab-active {
        background-color: #409eff;
        color: #fff;
      }
    }
  }
  .saga-business-sapce-main {
    overflow: hidden;
    height: 100%;
    background: #fff;
    padding: 10px;
    /deep/ .el-tabs__item.is-top {
      border-top: 2px solid transparent;
      &.is-active {
        border-top: 2px solid #409eff;
      }
    }
  }
  .spaceTypes {
    .types {
      float: left;
      width: calc(100% - 200px);
    }
    .groupAdd {
      float: left;
      width: 200px;
      text-align: right;
      height: 40px;
      border-bottom: 1px solid #e4e7ed;
    }
  }
}
</style>
