<template>
  <div class="content-main">
    <div class="content-body-wrap">
     <div class="content-body">
        <Tabs :value="currentTabs" @on-click="tabsClick" class="common-tabs">
          <TabPane v-for="tab in tabsData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
        </Tabs>
        <application-station v-if="currentTabs == '应用管理'" ref="station" class="content-body-manage"></application-station>
        <application-equip v-if="currentTabs == '应用-设备类型关联'" ref="equip" class="content-body-manage"></application-equip>
        <application-business v-if="currentTabs == '应用-业务类型管理'" ref="business" class="content-body-manage"></application-business>
     </div>
    </div>
  </div>
</template>
<script>
import ApplicationStation from './ApplicationStation.vue'
import ApplicationEquip from './ApplicationEquip.vue'
import ApplicationBusiness from './ApplicationBusiness.vue'
export default {
  name: "ApplicationManage",
   components:{
    ApplicationStation,ApplicationEquip,ApplicationBusiness
  },
  data() {
    return {
      tabsData: [{label:'应用管理'},{label:'应用-设备类型关联'},{label:'应用-业务类型管理'}],
      currentTabs: '应用管理',
    };
  },
  created () {
  },
  mounted() {
    // if (this.$route.params.type) {
    //   this.$nextTick(()=> {
    //     sessionStorage.setItem("currentTabs",'应用-设备类型关联')
    //       this.currentTabs = sessionStorage.getItem('currentTabs')
    //       this.$refs.equip.getTableData()
    //       this.$refs.equip.getType()
    //     })
    // } else {
    // }
    this.currentTabs = sessionStorage.getItem('currentTabs') || '应用管理'
    this.getCurrentTab()
  },
  // 离开当前路由之前的钩子函数 
  beforeRouteLeave(to, form, next) {
    sessionStorage.removeItem('currentTabs')
    next()
  },
  methods: {
    tabsClick (name) {
      sessionStorage.setItem("currentTabs",name)
      this.currentTabs = name
      this.getCurrentTab()
    },
    getCurrentTab () {   
      if (this.currentTabs == '应用管理') {
         this.$nextTick(()=> {
          this.$refs.station.getTableData()
          this.$refs.station.getType()
        })
      } else if(this.currentTabs == '应用-设备类型关联'){
        this.$nextTick(()=> {
          this.$refs.equip.getTableData()
          this.$refs.equip.getType()
        })
      } else {
         this.$nextTick(()=> {
           this.$refs.business.getTableData()
        })
      }
    }
  }
};
</script>
<style scoped lang="stylus">
.content-main {
  width: 100%;
  height: calc(100% - 50px);
  // overflow: auto;
  overflow: hidden;
}
.content-body-wrap {
  width: 100%;
  height: 100%;
  background: #06214D;
}
.content-body {
  width: 100%;
  height: 100%;
  padding: 10px;
}
.content-body-manage {
  height: calc(100% - 50px);
}
</style>