<template>
  <div class="content-main">
    <div class="content-body-wrap">
     <div class="content-body">
         <Row :gutter="8" style="width:100%;height: 100%">
          <i-col span="5" style="height:100%">
            <div v-if="currentTabs == '今日告警'" class="content-body-left">
              <div class="content-body-sum">
                <div class="content-body-sum-top">
                  <div class="top-title">系统累计监测告警</div>
                  <div class="sub-top-title">监测告警次数</div>
                  <div class="sub-top-num sub-top-num-go" @click="go">{{todayAlertObj.alertNum}}次</div>
                </div>
                <div class="content-body-sum-bot">
                  <div class="bot-title">
                    <span class="bot-title-left">
                      <span>已处理</span>
                      <span class="bot-title-line">丨</span>
                    </span>
                    <span class="bot-title-right">未处理</span>
                  </div>
                  <div class="bot-num">
                    <span class="bot-num-left">
                      <span>{{todayAlertObj.processedNum}}条</span>
                      <span class="bot-num-line">丨</span>
                    </span>
                    <span class="bot-num-right">{{todayAlertObj.unProcessedNum}}条</span>
                  </div>
                </div>
                <div class="content-body-sum-bot">
                  <div class="bot-title">
                    <span class="bot-title-left">
                      <span>自动处理</span>
                      <span class="bot-title-line">丨</span>
                    </span>
                    <span class="bot-title-right">手动处理</span>
                  </div>
                  <div class="bot-num">
                    <span class="bot-num-left">
                      <span>{{todayAlertObj.autoProcessing}}条</span>
                      <span class="bot-num-line">丨</span>
                    </span>
                    <span class="bot-num-right">{{todayAlertObj.manualProcessingNum}}条</span>
                  </div>
                </div>
              </div>
              <div class="content-body-sum content-body-item2">
                <div class="top-title">系统覆盖监测设备</div>
                 <div class="content-body-sum-bot">
                  <div class="bot-title">
                    <span class="bot-title-left">
                      <span>设备总数</span>
                      <span class="bot-title-line">丨</span>
                    </span>
                    <span class="bot-title-right">设备类型</span>
                  </div>
                  <div class="bot-num">
                    <span class="bot-num-left">
                      <span>{{todayAlertObj.equipmentNum}}台</span>
                      <span class="bot-num-line">丨</span>
                    </span>
                    <span class="bot-num-right">{{todayAlertObj.equipmentTypeNum}}种</span>
                  </div>
                </div>
              </div>
              <div class="content-body-sum content-body-item3">
                 <div class="top-title">系统覆盖监测内容</div>
                 <div class="content-body-sum-bot">
                  <div class="bot-title">
                    <span class="bot-title-left">
                      <span>自动监测指标</span>
                      <span class="bot-title-line">丨</span>
                    </span>
                    <span class="bot-title-right">告警指标</span>
                  </div>
                  <div class="bot-num">
                    <span class="bot-num-left">
                      <span>{{todayAlertObj.autoDetectIndexNum }}条</span>
                      <span class="bot-num-line">丨</span>
                    </span>
                    <span class="bot-num-right">{{todayAlertObj.alertIndexNum}}条</span>
                  </div>
                </div>
              </div>
              <div class="content-body-sum content-body-item3">
                 <div class="top-title">系统累计监测运行</div>
                 <div class="content-body-sum-bot">
                  <div class="bot-title">
                    <span class="bot-title-left">
                      <span>监测站点</span>
                      <span class="bot-title-line">丨</span>
                    </span>
                    <span class="bot-title-right">监测天数</span>
                  </div>
                  <div class="bot-num">
                    <span class="bot-num-left">
                      <span>{{todayAlertObj.detectStationNum}}个</span>
                      <span class="bot-num-line">丨</span>
                    </span>
                    <span class="bot-num-right">{{todayAlertObj.detectDays}}天</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="station-tree" v-else>
              <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%;position: relative">
            <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>
            <div class="time">
              <div class="time-body">
                <span class="time-min">数据更新时间  ：<span>{{timeDate}} {{todayMin}}</span></span>
              </div>
            </div>
            <div class="right-main" :class="{'right-main-today': currentTabs ==  '今日告警'}">
              <alarm-today  ref="alarmToday" class="content-body-manage" v-if="currentTabs == '今日告警'" @skipEquipTabs="skipEquipTabs"></alarm-today>
              <alarm-real-line  ref="alarmRealLine" class="content-body-manage" v-if="currentTabs == '实时告警列表-线网视图'" @skipTabs="skipTabs"></alarm-real-line>
              <alarm-real-station  ref="alarmRealStation" class="content-body-manage" v-if="currentTabs == '实时告警列表-设备视图'"></alarm-real-station>
            </div>
          </i-col>
        </Row>
     </div>
    </div>
  </div>
</template>
<script>
import AlarmToday from './AlarmToday.vue'
import AlarmRealLine from './AlarmRealLine.vue'
import AlarmRealStation from './AlarmRealStation.vue'
export default {
  name: "AlarmMonitor",
   components:{
    AlarmToday,AlarmRealLine,AlarmRealStation
  },
  data() {
    return {
		  stationData: [],
      tabsData: [{label:'今日告警'},{label:'实时告警列表-线网视图'},{label:'实时告警列表-设备视图'}],
      currentTabs: '今日告警',
      timeDate: '',
      todayMin: '',
      treeUrl: 'metroapi/lineStation/lineStationTree',
      equipmentId: null,
      todayAlertObj: {}
    };
  },
  created () {
    this.getTodayData()
    this.getTreeList()
    if (this.$route.params.equipmentId) {
      sessionStorage.setItem("currentTabs",'实时告警列表-设备视图')
    }
  },
  mounted() {
    this.formatDate()
    this.currentTime(); 
    this.getCurrentTab (sessionStorage.getItem('currentTabs'))
  },
   // 离开当前路由之前的钩子函数 
  beforeRouteLeave(to, form, next) {
    sessionStorage.removeItem('currentTabs')
    next()
  },
  methods: {
    go () {
      let menuNameArr = []
      menuNameArr = ['设备分析','告警分析','综合查询']
      sessionStorage.setItem('routname', '/MainPage/ComprehensiveQuery')
      sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
      this.$router.push({ name: 'ComprehensiveQuery'})
    },
    currentTime() {
      setInterval(this.formatDate, 1000);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      // this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
      this.todayMin = `${hour}:${minute}:${second}`;
      this.timeDate = `${year}/${month}/${day}`;
		},
    // 获取
    getTodayData () {
     this.$get('metroapi/alert/processing/todayAlert').then(res=>{
        if (res.httpCode == 1 ){
          this.todayAlertObj = res.data
        }
      })
    },
     // 获取树形数据
    getMetroLevel () {
      if (sessionStorage.getItem('currentTabs') == '实时告警列表-设备视图') {
        this.treeUrl = 'metroapi/application/appEquipmentTypeTree'
      } else {
        this.treeUrl = 'metroapi/lineStation/lineStationTree'
      }
      this.$get(this.treeUrl).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)
		},
    skipTabs (equipmentId) { //实时告警列表-线网视图 跳转到 实时告警列表-设备视图
      this.getTreeList()
      this.getCurrentTab(sessionStorage.getItem('currentTabs'),'',null,equipmentId)
    },
    skipEquipTabs (obj) {
      this.getTreeList()
      this.getCurrentTab(sessionStorage.getItem('currentTabs'),'',null,obj)
    },
    tabsClick (name) {
      this.stationData = this.getTree(this.stationData) // 切换tab页时，清除tree选中情况
      sessionStorage.setItem("currentTabs",name)
      this.getCurrentTab (name)
      this.getTreeList()
      if (document.querySelector(".station-tree-left")) {
        document.querySelector(".station-tree-left").scrollTo(0, 0) 
      }
    },
    getCurrentTab (currentTabs,arr,level,equipmentId) {
      this.currentTabs = currentTabs || '今日告警'
      if (currentTabs == '今日告警' || !currentTabs) {
        this.$route.params.equipmentId = null //告警处理页面跳转点击tab页，清除跳转参数值 先不考虑 等测试提bug再放开
      } else if(currentTabs == '实时告警列表-线网视图'){ 
        this.$route.params.equipmentId = null //告警处理页面跳转点击tab页，清除跳转参数值 先不考虑 等测试提bug再放开
        this.$nextTick(()=> {
         this.getLineParams('alarmRealLine',arr,level)
         this.$refs.alarmRealLine.tableParams.pageNum = 1
         this.$refs.alarmRealLine.getTableData(equipmentId)
        })
      } else if(currentTabs == '实时告警列表-设备视图'){
        this.$nextTick(()=> {
          this.getParams('alarmRealStation',arr,level)
          this.$refs.alarmRealStation.tableParams.pageNum = 1
          this.$refs.alarmRealStation.getTableData(equipmentId)
        })
      }
    },
    getLineParams (name,arr,level) {
     if (level == 2) {
        this.$refs[name].tableParams.lineId = arr[arr.length-1]
        this.$refs[name].tableParams.stationId = ''
      } else if (level == 3) {
        this.$refs[name].tableParams.lineId = arr[arr.length-2]
        this.$refs[name].tableParams.stationId = arr[arr.length-1]
      } else {
        this.$refs[name].tableParams.lineId = ''
        this.$refs[name].tableParams.stationId = ''
      }
    },
    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 = ''
      }
    },
    getTreeList () {
      if (sessionStorage.getItem('currentTabs')!= '今日告警') {
        this.getMetroLevel()
      }
    },
  },
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  }
};
</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;
}
.content-body-left {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content-body-sum {
  width: 100%;
  height: 40%;
  background: #0A2756;
  border: 1px solid #1957A7;
  border-radius: 6px;
  box-shadow: 0 0 6px  6px rgba(23, 85, 163, 0.3) inset;
}
.content-body-sum-top {
  text-align: center;
  border-bottom: 1px solid #2D66B3;
  margin: 0 20%;
}
.top-title {
  font-size: 16px;
  font-weight: bold;
  color: #0185EA;
  padding-top: 25px;
  text-align: center;
}
.sub-top-title {
  font-size: 14px;
  color: #82ABEE;
  padding-top: 10px;
}
.sub-top-num {
  font-size: 20px;
  font-weight: bold;
  color: #F19430;
  padding: 10px 0 8px;
}
.sub-top-num-go {
  cursor: pointer;
  text-decoration: underline;
}
.content-body-sum-bot {
  text-align: center;
}
.bot-title {
  font-size: 14px;
  color: #82ABEE;
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
}
.bot-title-left {
  width: 50%;
  text-align: right;
}
.bot-title-right {
  width: 50%;
  text-align: left;
}
.bot-num {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.bot-num-left {
  width: 50%;
  text-align: right;
  color: #3EC537;
}
.bot-num-line {
  color: #3489DF;
  display: inline-block;
  width: 15px;
}
.bot-num-right {
  width: 50%;
  text-align: left;
  color: #FBE847;
}
.content-body-item2 , .content-body-item3 ,.content-body-item4{
  height: 20%;
  margin-top: 10px;
}
.content-body-item2 .bot-title, .content-body-item3 .bot-title,.content-body-item4 .bot-title{
  padding-top: 20px;
}
.content-body-item2 .bot-num, .content-body-item3 .bot-num,.content-body-item4 .bot-num{
  padding-top: 8px;
}
.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: calc(100% - 50px);
  padding: 10px 0;
}
.right-main-today {
  padding-bottom: 0;
}
.time {
  position: absolute;
  top: 18px;
  right: 10px;
  .time-min {
    color: #0185EA;
    font-size: 14px;
    span {
      color: #fff;
    }
  }
}
</style>