<!--
  revit业务空间
 -->
<template>
    <div id="businessSpace">
        <!------------------------    头部弹窗，选择楼层信息     -------------->
        <no-model-dialog :param="param" title="选择要进行空间管理的楼层" :isShow="floor" @close="close"></no-model-dialog>
        <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">
                <p>
                    <i class="iconfont icon-jianzhu"></i> {{buildMess.buildName}} - {{buildMess.name}}
                </p>
                <el-button class="saga-btn" type="text" @click="changeShow">切换楼层</el-button>
            </div>
            <div class="saga-build-tab">
                <div class="tab-main" @click="tabList(1)" :class="isMyTab == 1 ? 'tab-active' : ''">
                    <i class="iconfont icon-tupian"></i>
                    <span>平面图</span>
                </div>
                <div class="tab-main" @click="tabList(2)" :class="isMyTab == 2 ? 'tab-active' : ''">
                    <i class="iconfont icon-liebiao"></i>
                    <span>列表</span>
                </div>
            </div>
        </div>
        <div v-show="isMyTab == 1" class="saga-business-sapce-main">
            <el-tabs v-model="activeName" @tab-click="tab1Click">
                <template v-for="item in tabsList">
              <el-tab-pane :name="item.code" :disabled="item.code > 3">
                <span slot="label">{{item.name}}</span>
                <graphy
                  @getSp="checkSpace"
                  @dimension="checkSpace"
                  @businessDetails="getBuinessDetails"
                  :ref="'graphy' + item.code"
                  :canvasId="item.code"
                ></graphy>
              </el-tab-pane>
</template>
      </el-tabs>
      <!-- <space-graphy @dimension="checkSpace" :tabsList="tabsList" ref="graphy" :param="param"></space-graphy> -->
    </div>
    <div v-show="isMyTab == 2" class="saga-business-sapce-main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
<template v-for="item in tabsList">
    <el-tab-pane :name="item.code" :disabled="item.code > 3">
        <span slot="label">{{item.name}}</span>
        <handsontable-main @lookEqu="lookEqu" :ref="'handsontable' + item.code" :id="'handsontable' + item.code" :param="param"></handsontable-main>
    </el-tab-pane>
</template>
      </el-tabs>
      <!-- <space-handsontable :tabsList="tabsList" ref="spaceTable" :param="param"></space-handsontable> -->
    </div>
  </div>
</template>

<script>
    import noModelDialog from "@/components/dialogs/noModelDialog";
    import influenceDialog from "@/components/dialogs/influenceDialog";
    import detailsDialog from "@/components/dialogs/detailsDialog";
    import notRelated from "@/components/dialogs/notRelated";
    import facilityDialog from "@/components/dialogs/facilityDialog";
    // import spaceHandsontable from "@/components/business/spaceHandsontable";
    import graphy from "@/components/graphy/business";
    import handsontableMain from "@/components/business/handsontable";
    import {
        getTableHeader,
        getAllbusiness,
        getBussTypes
    } from "@/api/request";
    export default {
        components: {
            noModelDialog,
            // spaceHandsontable,
            influenceDialog,
            detailsDialog,
            notRelated,
            graphy,
            handsontableMain,
            facilityDialog
        },
        data() {
            return {
                floor: {
                    dialogVisible: true, //选择楼层弹窗
                    influence: false, //受影响的业务空间弹窗
                    details: false, //详情弹窗
                    notRelated: false,
                    facility: false
                },
                param: {
                    ProjId: this.$route.query.projId, //项目id
                    UserId: this.$route.query.userId, //用户id
                    secret: this.$route.query.secret
                },
                buildMess: {
                    name: "--",
                    code: "Fl110108000327d8f006c39f49feb40e24a7ef223232",
                    map: "Fl110108000327d8f006c39f49feb40e24a7ef223232181009102258bim.json",
                    isChild: true,
                    buildName: "--",
                    buildCode: "Bd11010800032251ebd43a3e430385cf679e90015385"
                },
                isMyTab: 1,
                activeName: "GeneralZone",
                tabsList: [],
                activeTabType: {
                    "code": "GeneralZone",
                    "name": "默认分区",
                    "rel_type": "99"
                }
            };
        },
        created() {
            this.getTypes()
        },
        mounted() {},
        methods: {
            //获取tabs的列表
            getTypes() {
                getBussTypes(res => {
                    let arr = [{
                            "code": "GeneralZone",
                            "name": "默认分区",
                            "rel_type": "99"
                        },
                        {
                            "name": "供电分区",
                            "rel_type": "1",
                            "code": "PowerSupplyZone"
                        },
                        {
                            "name": "照明分区",
                            "rel_type": "2",
                            "code": "LightingZone"
                        },
                        {
                            "name": "空调分区",
                            "rel_type": "4",
                            "code": "AirConditioningZone"
                        }, {
                            "name": "安防分区",
                            "rel_type": "9",
                            "code": "SecurityZone"
                        },
                    ]
                    this.tabsList = arr
                    // console.log(res)
                    // this.tabsList = res.Content
                })
            },
            checkSpace(list, build, graphyId) {
                this.floor.notRelated = true;
                this.$refs.notRelated.getIdList(list, build, graphyId, this.activeTabType);
                this.$refs["graphy" + this.activeName][0].getHasSpace();
            },
            changeShow() {
                this.floor.dialogVisible = true;
            },
            //成功关联平面图
            createSuccess() {
                this.$refs["graphy" + this.activeName][0].getHasSpace();
                this.$refs["graphy" + this.activeName][0].clearDimension();
                this.floor.notRelated = false;
            },
            //成功删除业务空间
            delSuccess() {
                this.floor.details = false;
                this.$refs["graphy" + this.activeName][0].getHasSpace();
                this.$refs["graphy" + this.activeName][0].clearDimension();
            },
            close(data) {
                this.buildMess = data;
                if (this.buildMess.affected) {
                    this.floor.influence = true;
                    this.$nextTick(() => {
                        this.$refs.influence.getData(this.buildMess);
                    });
                }
                if (!this.buildMess.map) {
                    this.isMyTab = 2;
                }
                if (this.isMyTab == 2) {
                    this.initTabs(this.buildMess);
                } else {
                    let data = this.getItemForType()
                    this.$refs["graphy" + this.activeName][0].getData(this.buildMess.map, this.buildMess, this.activeTabType);
                }
            },
            //查看业务空间详情
            getBuinessDetails(list) {
                this.floor.details = true;
                this.$refs.details.getData(list, this.buildMess);
            },
            lookEqu(infos) {
                this.floor.facility = true;
                this.$refs.facility.getData(infos, this.buildMess);
            },
            tabList(num) {
                console.log(this.$refs)
                this.isMyTab = num;
                if (num == 2) {
                    this.initTabs(this.buildMess);
                } else {
                    let data = this.getItemForType()
                    this.$refs["graphy" + this.activeName][0].getData(this.buildMess.map, this.buildMess, this.activeTabType);
                }
            },
            //获取初始化信息点
            initMessage() {
                getTableHeader({
                    code: this.activeTabType.code,
                    ProjId: this.param.ProjId
                }).then(res => {
                    console.log(res)
                    if (res.data.Result == "success") {
                        console.log(res);
                        let refFlag = "handsontable" + this.activeName;
                        this.$refs[refFlag][0].getHeader(res.data.Content, this.activeTabType);
                        //   for (let i = 0; i < this.tabsList.length; i++) {
                        //   }
                        this.getTableMain();
                    } else {
                        this.$message.error("请求错误");
                    }
                });
            },
            getItemForType() {
                let data = {}
                this.tabsList.map(item => {
                    if (item.code == this.activeName) {
                        data = item
                    }
                })
                return data
            },
            tab1Click() {
                this.activeTabType = this.getItemForType()
                this.$refs["graphy" + this.activeName][0].getData(this.buildMess.map, this.buildMess, this.activeTabType);
            },
            /**
             * tab标签被点击触发后的函数
             * @param tab   tab实例
             * @param event tab的dom
             *
             */
            handleClick(tab, event) {
                this.activeTabType = this.getItemForType()
                this.initMessage();
            },
            /**
             * 选择楼层后初始化tabs
             * 由父级页面调用
             *
             * @param  floorParam  父级传入的楼层信息
             */
            initTabs(floorParam) {
                // this.floor = floorParam;
                this.initMessage();
            },
            getTableMain() {
                let refFlag = "handsontable" + this.activeName;
                this.$nextTick(() => {
                    this.$refs[refFlag][0].getData(this.buildMess);
                });
                //   for (let i = 0; i < this.tabsList.length; i++) {
                //     if (i == 0) {
                //     }
                //   }
            }
        },
        watch: {
            floor: {
                deep: true,
                handler: function() {
                    if (this.floor.notRelated) {
                        this.$refs["graphy" + this.activeName][0].clearDimension();
                    }
                }
            }
        }
    };
</script>

<style lang="less">
    #businessSpace {
        .el-dialog__body {
            max-height: 600px;
            overflow-y: auto;
        }
        .el-tabs__nav-scroll {
            padding-left: 10px;
        }
        .saga-title {
            height: 40px;
            background-color: #d7d7d7;
            font-size: 14px;
            line-height: 40px;
            position: relative;
            width: 100%;
            .saga-build-mess {
                position: absolute;
                left: 10px;
                width: 500px;
                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 {
            position: absolute;
            width: 100%;
            top: 40px;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            overflow-y: auto;
        }
    }
</style>
