<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <template v-for="item in tabsList">
                <el-tab-pane :name="item.code" :disabled="item.code > 1">
                    <span slot="label">{{item.name}}</span>
                    <handsontable-main :ref="'handsontable' + item.code" :id="item.code" :param="param"></handsontable-main>
                </el-tab-pane>
            </template>
        </el-tabs>
    </div>
</template>
<script>
import handsontableMain from "./handsontable";
import { getSpaceHeader } from "@/api/request";
export default {
  components: {
    handsontableMain
  },
  props: {
    param: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      activeName: "1",
      tabsList: [
        {
          code: "1",
          name: "业务空间管理"
        },
        {
          code: "2",
          name: "XX空间管理"
        },
        {
          code: "3",
          name: "XX空间管理"
        }
      ],
      floor: null //楼层信息
    };
  },
  created() {
    this.initMessage();
  },
  mounted() {},
  methods: {
    //获取初始化信息点
    initMessage() {
      getSpaceHeader(this.param).then(res => {
        if (res.data.Result == "success") {
          for (let i = 0; i < this.tabsList.length; i++) {
            let refFlag = "handsontable" + this.tabsList[i].code;
            this.$refs[refFlag][0].getHeader(res.data.Content);
          }
        } else {
          this.$message.error("请求错误");
        }
      });
    },

    /**
     * tab标签被点击触发后的函数
     * @param tab   tab实例
     * @param event tab的dom
     *
     */
    handleClick(tab, event) {
      this.initMyHot();
    },

    /**
     * 选择楼层后初始化tabs
     * 由父级页面调用
     *
     * @param  floorParam  父级传入的楼层信息
     */
    initTabs(floorParam) {
      this.floor = floorParam;
      this.initMyHot();
    },

    /**
     * 初始化子组件中的hansontable
     */
    initMyHot() {
      this.$nextTick(() => {
        this.$refs["handsontable" + this.activeName][0].getMain([1111]);
      });
    }
  }
};
</script>
<style lang="less" scoped>
</style>
