<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>
        <alarm-level-config v-if="currentTabs == '告警等级配置'" ref="alarmLevel" class="content-body-manage"></alarm-level-config>
         <Row :gutter="8" style="width:100%;height: calc(100% - 50px)" v-else>
          <i-col span="5" style="height:100%">
            <div class="station-tree">
              <div class="station-tree-body">
                 <tree-filter :defaultData="stationData" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-filter>
              </div>
            </div>
          </i-col>
          <i-col span="19" style="height:100%">
            <div class="right-main">
              <level-deter-config  ref="levelDeter" class="content-body-manage" v-if="currentTabs == '等级判定策略配置'"></level-deter-config>
              <alarm-filter-config ref="alarmFilter" class="content-body-manage" v-if="currentTabs == '告警过滤策略配置'"></alarm-filter-config>
              <alarm-acknowledg-config ref="alarmAcknowledg" class="content-body-manage" v-if="currentTabs == '告警自动确认策略'"></alarm-acknowledg-config>
              <continuity-monitor-config ref="continuityMonitor" class="content-body-manage" v-if="currentTabs == '连续性监测策略'"></continuity-monitor-config>
            </div>
          </i-col>
        </Row>
     </div>
    </div>
  </div>
</template>
<script>
import AlarmLevelConfig from './AlarmLevelConfig.vue'
import LevelDeterConfig from './LevelDeterConfig.vue'
import AlarmFilterConfig from './AlarmFilterConfig.vue'
import AlarmAcknowledgConfig from './AlarmAcknowledgConfig.vue'
import ContinuityMonitorConfig from './ContinuityMonitorConfig.vue'
export default {
  name: "PolicyConfigManage",
   components:{
    AlarmLevelConfig,LevelDeterConfig,AlarmFilterConfig,AlarmAcknowledgConfig,ContinuityMonitorConfig
  },
  data() {
    return {
		  stationData: [],
      tabsData: [{label:'告警等级配置'},{label:'等级判定策略配置'},{label:'告警过滤策略配置'},{label:'告警自动确认策略'},{label:'连续性监测策略'}],
      currentTabs: '告警等级配置',
    };
  },
  mounted() {
    this.getCurrentTab (sessionStorage.getItem('currentTabs'))
    this.getMetroLevel()
  },
   // 离开当前路由之前的钩子函数 
  beforeRouteLeave(to, form, next) {
    sessionStorage.removeItem('currentTabs')
    next()
  },
  methods: {
     // 获取树形数据
    getMetroLevel () {
      this.$get('metroapi/application/appEquipmentTypeTree').then(res => {
				if (res.httpCode == 1) {
          this.stationData = res.data
				}
		  })
    },
    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
    getTree(arr) {
      return arr.map((v,index) => {
        v.selected = false
        v.disabled = false
        if (index==0) {
          v.expand = true
        } else {
          v.expand = false
        }
        if (v.children) v.children = this.getTree(v.children);
        return v;
      });
    },
    treeChange(arr,level) {
      this.getCurrentTab(this.currentTabs,arr,level)
      //  if (this.currentTabs == '设备管理') {
      //   this.$refs.device.getTableData()
      // } else if(this.currentTabs == '设备类型管理'){
      //   this.$nextTick(()=> {
      //     this.$refs.deviceType.getTableData()
      //   })
      // }
		},
    tabsClick (name) {
      this.stationData = this.getTree(this.stationData) // 切换tab页时，清除tree选中情况
      sessionStorage.setItem("currentTabs",name)
      this.getCurrentTab (name)
      if (document.querySelector(".station-tree-left")) {
        document.querySelector(".station-tree-left").scrollTo(0, 0) 
      }
    },
    getCurrentTab (currentTabs,arr,level) {
      this.currentTabs = currentTabs || '告警等级配置'
      if (currentTabs == '告警等级配置' || !currentTabs) {
         this.$nextTick(()=> {
        })
      } else if(currentTabs == '等级判定策略配置'){       
        this.$nextTick(()=> {
          this.getParams('levelDeter',arr,level)
          this.$refs.levelDeter.tableParams.pageNum = 1
          this.$refs.levelDeter.getTableData()
        })
      } else if(currentTabs == '告警过滤策略配置'){
        this.$nextTick(()=> {
          this.getParams('alarmFilter',arr,level)
          this.$refs.alarmFilter.tableParams.pageNum = 1
          this.$refs.alarmFilter.getTableData()
        })
      } else if(currentTabs == '告警自动确认策略'){
        this.$nextTick(()=> {
          this.getParams('alarmAcknowledg',arr,level)
          this.$refs.alarmAcknowledg.tableParams.pageNum = 1
          this.$refs.alarmAcknowledg.getTableData()
        })
      } else if(currentTabs == '连续性监测策略'){
        this.$nextTick(()=> {
          this.getParams('continuityMonitor',arr,level)
          this.$refs.continuityMonitor.tableParams.pageNum = 1
          this.$refs.continuityMonitor.getTableData()
        })
      }
    },
    getParams (name,arr,level) {
     if (level == 2) {
        this.$refs[name].tableParams.applicationId = arr[arr.length-1]
        this.$refs[name].tableParams.equipmentTypeId = ''
      } else if (level == 3) {
        this.$refs[name].tableParams.applicationId = arr[arr.length-2]
        this.$refs[name].tableParams.equipmentTypeId = arr[arr.length-1]
      } else {
        this.$refs[name].tableParams.applicationId = ''
        this.$refs[name].tableParams.equipmentTypeId = ''
      }
    },
  }
};
</script>
<style scoped lang="stylus">
.content-main {
  width: 100%;
  height: calc(100% - 50px);
  overflow: hidden;
}
.content-body-wrap {
  width: 100%;
  height: 100%;
  background: #06214D;
}
.content-body {
  width: 100%;
  height: 100%;
  background: #06214D;
  padding: 10px;
}
.common-search {
  width: 100%;
}
>>> .common-search .ivu-input {
  background-color: #06214D;
  border: 1px solid #2355A6;
  border-radius: 15px;
  color: #fff;
  height: 32px;
}
>>> .common-search .ivu-input:focus {
    border-color: #0185ea;
}
.station-tree {
  height: 100%;
  padding: 10px;
}
.station-tree-body {
  border: 1px solid #204384;
  height: 100%;
  padding: 10px;
}
.station-tree-center {
  height: calc(100% - 32px);
  padding-top: 10px;
}
.station-tree-left {
  height: 100%;
  overflow: auto;
}
.station-tree-left-notree {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  fon-size: 14px;
}
.right-main {
  height: 100%;
  padding: 10px 0;
}
</style>