<template>
  <el-main class="page-sub-main">
    <el-row class="h-all">
      <el-col :span="24" class="h-all">
        <el-tabs class="tab-box adapt-height-box"
                 v-model="activeIndex"
                 type="border-card"
                 closable
                 v-if="openTab.length"
                 @tab-click='tabClick'
                 @tab-remove='tabRemove'
        >
          <el-tab-pane
            :key="item.name"
            v-for="(item, index) in openTab"
            :name="item.route"
          >
            <!--:label="item.name"-->
            <span class="tab-btn" slot="label"><el-badge :isDot="true" class="item" :hidden="index>1?true:isdotshow[index]" :title="item.name">{{$t(item.title)}}</el-badge></span>
          </el-tab-pane>
          <keep-alive :include="keepAliveRouter.toString()">
            <!-- 引入路由子组件，其实就是引入各个Tabb标签页 -->
            <!--v-if="$route.name==='拓扑图'"-->
            <router-view  :deviceCollection.sync="my_deviceCollection"
                          :topologyCollection.sync="my_topologyCollection"
                          :alarmCollection.sync="my_alarmCollection"
                          :linkCollection.sync="my_linkCollection"
                          :subnetCollection.sync="my_subnetCollection"
                          :alarmLevelConfig.sync="my_alarmLevelConfig"
                          :curClickSubnetId="my_curClickSubnetId"
                          :curClickDeviceId.sync="my_curClickDeviceId"
                          :elineCollection="elineCollection"
                          :discoveryCollection.sync="my_discoveryCollection"
                          :configFileDifferenceCollection.sync ="my_configFileDifferenceCollection"
                          :discoverElementCollection = my_discoverElementCollection>
            </router-view>
            <!--<router-view v-else-if="$route.name==='告警'"-->
                <!--:alarmList="my_alarmCollection"-->
                <!--:deviceCollection = 'my_deviceCollection'-->
                <!--:curClickDeviceId.sync = 'my_curClickDeviceId'-->
                <!--:alarmLevelConfig="my_alarmLevelConfig">-->
            <!--</router-view>-->
            <!--<router-view v-else></router-view>-->
          </keep-alive>
        </el-tabs>
      </el-col>
    </el-row>

  </el-main>
</template>

<script>
import { EventBus } from '@/domain/EventBus'
export default {
  name: 'TheLayoutMain',
  props: {
    deviceCollection: null,
    topologyCollection: null,
    alarmCollection: null,
    linkCollection: null,
    subnetCollection: null,
    alarmLevelConfig: null,
    curClickSubnetId: null,
    curClickDeviceId: null,
    elineCollection: null,
    discoveryCollection: null,
    configFileDifferenceCollection: null,
    discoverElementCollection: null,
    isdotshow: {
      type:Array,
      required:true
    }
  },
  data () {
    const win_height = window.innerHeight - 100 + 'px'
    return {
      // 将props传进来的进行缓存
      my_deviceCollection: this.deviceCollection,
      my_subnetCollection: this.subnetCollection,
      my_alarmCollection: this.alarmCollection,
      my_linkCollection: this.linkCollection,
      my_topologyCollection: this.topologyCollection,
      my_alarmLevelConfig: this.alarmLevelConfig,
      my_curClickSubnetId: this.curClickSubnetId,
      my_curClickDeviceId: this.curClickDeviceId,
      my_discoveryCollection: this.discoveryCollection,
      my_configFileDifferenceCollection: this.configFileDifferenceCollection,
      my_discoverElementCollection: this.discoverElementCollection,
      mainStyle: {
        minHeight: win_height
      },
      keepAliveRouter: {}
    }
  },
  created: function () {
    this.keepAliveRouter = this.$store.state.keepAliveRouter
  },
  methods: {
    // tab标签点击时，切换相应的路由
    tabClick (tab) {
      let time = new Date()
      console.log('切换路由1 ============' + time.getMinutes() + 'm' + time.getSeconds() + 's' + time.getMilliseconds() + 'ms')

      // 关闭欲打开页面的小红点
      if (this.activeIndex == '/TheLayout/main') {
        this.isdotshow[0] = true
      }
      if (this.activeIndex == '/TheLayout/ServiceStatusUpdate') {
        this.isdotshow[1] = true
      }
      this.$router.push({path: this.activeIndex})
      let time1 = new Date()
      console.log('切换路由2 ============' + time1.getMinutes() + 'm' + time1.getSeconds() + 's' + time1.getMilliseconds() + 'ms')

    },
    addTab () {
      this.$router.push({path: '/TheLayout/RtPerformance'})
    },
    // 移除tab标签
    tabRemove (targetName) {
      // 首页不删
      if (targetName === '/TheLayout/main' || targetName === '/TheLayout/ServiceStatusUpdate') {
        return
      }
      this.$store.commit('delete_tabs', targetName)
      var vueNameList = targetName.split('/')
      var vueName = vueNameList[2]
      this.$store.commit('delete_keepAliveRouter', vueName)
      this.keepAliveRouter = this.$store.state.keepAliveRouter
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.openTab && this.openTab.length >= 1) {
          this.$store.commit('set_active_index', this.openTab[this.openTab.length - 1].route)
          this.$router.push({path: this.activeIndex})
        } else {
          this.$router.push({path: '/main'})
          this.$router.push({path: '/ServiceStatusUpdate'})
        }
      }
    }

  },
  computed: {
    openTab () {
      return this.$store.state.openTab
    },
    activeIndex: {
      get () {
        return this.$store.state.activeIndex
      },
      set (val) {
        this.$store.commit('set_active_index', val)
      }
    }
  },
  watch: {
    '$route' (to) {
      // 判断路由是否已经打开
      // 已经打开的 ，将其置为active
      // 未打开的，将其放入队列里
      let flag = false
      for (let item of this.openTab) {
        if (item.name === to.name) {
          this.$store.commit('set_active_index', to.path)
          flag = true
          break
        }
      }
      if (!flag) {
        var path = to.path
        var vueNameList = path.split('/')
        var vueName = vueNameList[2]
        this.$store.commit('add_tabs', {route: to.path, name: to.name, title: to.meta.title})
        this.$store.commit('add_keepAliveRouter', vueName)
        this.$store.commit('set_active_index', to.path)
      }
    },
    // TheLayoutMain
    // 监听prop，更新本地缓存数据
    deviceCollection: {
      handler (newVal, OldVal) {
        let time = new Date()
        console.log('deviceCollection============' + time.getMinutes() + 'm' + time.getSeconds() + 's' + time.getMilliseconds() + 'ms')

        this.my_deviceCollection = newVal
      },
      deep: true
    },
    // 监听本地数据，发生变化向外传输
    my_deviceCollection: {
      handler (newVal, OldVal) {
        this.my_deviceCollection = newVal
        //          this.$emit('update:my_deviceCollection',newVal);
      },
      deep: true
    },
    // 监听prop，更新本地缓存数据
    subnetCollection: {
      handler (newVal, OldVal) {
        this.my_subnetCollection = newVal
      },
      deep: true
    },
    // 监听本地数据，发生变化向外传输
    my_subnetCollection: {
      handler (newVal, OldVal) {
        this.my_subnetCollection = newVal
        //          this.$emit('update:subnetCollection',newVal);
      },
      deep: true
    },
    // 监听prop，更新本地缓存数据
    alarmCollection: {
      handler (newVal, OldVal) {
        let time = new Date()
        console.log('alarmCollection============' + time.getMinutes() + 'm' + time.getSeconds() + 's' + time.getMilliseconds() + 'ms')

        this.my_alarmCollection = newVal
      },
      deep: true
    },
    // 监听本地数据，发生变化向外传输
    my_alarmCollection: {
      handler (newVal, OldVal) {
        this.my_alarmCollection = newVal
        //          this.$emit('update:alarmCollection',newVal);
      },
      deep: true
    },
    // 监听prop，更新本地缓存数据
    linkCollection: {
      handler (newVal, OldVal) {
        this.my_linkCollection = newVal
      },
      deep: true
    },
    // 监听本地数据，发生变化向外传输
    my_linkCollection: {
      handler (newVal, OldVal) {
        this.my_linkCollection = newVal
        //          this.$emit('update:linkCollection',newVal);
      },
      deep: true
    },
    // 监听prop，更新本地缓存数据
    topologyCollection: {
      handler (newVal, OldVal) {
        let time = new Date()
        console.log('2数据刚来============' + time.getMinutes() + 'm' + time.getSeconds() + 's' + time.getMilliseconds() + 'ms')
        console.log('layout main props topology data!!!');
        this.my_topologyCollection = newVal
      },
      deep: true
    },
    // 监听本地数据，发生变化向外传输
    my_topologyCollection: {
      handler (newVal, OldVal) {
        //          this.$emit('update:topologyCollection',newVal);
      },
      deep: true
    },

    // 监听prop，更新本地缓存数据
    alarmLevelConfig: {
      handler (newVal, OldVal) {
        this.my_alarmLevelConfig = newVal
      },
      deep: true
    },
    // 监听本地数据，发生变化向外传输
    my_alarmLevelConfig: {
      handler (newVal, OldVal) {
        this.my_alarmLevelConfig = newVal
        //          this.$emit('update:alarmLevelConfig',newVal);
      },
      deep: true
    },
    // 监听prop，更新本地缓存数据
    curClickDeviceId: {
      handler (newVal, OldVal) {
        this.my_curClickDeviceId = newVal
      },
      deep: true
    },
    // 监听本地数据，发生变化向外传输
    my_curClickDeviceId: {
      handler (newVal, OldVal) {
        this.my_curClickDeviceId = newVal
        //          this.$emit('update:curClickDeviceId',newVal);
      },
      deep: true
    },
    // 监听prop，更新本地缓存数据
    curClickSubnetId: {
      handler (newVal, OldVal) {
        this.my_curClickSubnetId = newVal
      },
      deep: true
    },
    // 监听prop，更新本地缓存数据
    discoveryCollection: {
      handler (newVal, OldVal) {
        this.my_discoveryCollection = newVal
      },
      deep: true
    },
    // 监听本地数据，发生变化向外传输
    my_discoveryCollection: {
      handler (newVal, OldVal) {
        this.my_discoveryCollection = newVal
        // this.$emit('update:my_discoveryCollection', newVal);
      },
      deep: true
    },
    // 监听prop，更新拓扑图页、业务状态更新页面的小红点标志位
    isdotshow: {
      handler (newVal, OldVal) {
        console.log("isdotshow is", this.isdotshow, newVal);
        // this.isdotshow = newVal
        if (this.activeIndex == '/TheLayout/main') {
          this.isdotshow[0] = true
        }
        if (this.activeIndex == '/TheLayout/ServiceStatusUpdate') {
          this.isdotshow[1] = true
        }
      },
      deep: true
    },
    configFileDifferenceCollection: {
      handler (newVal, OldVal) {
        this.my_configFileDifferenceCollection = newVal;
      },
      deep: true
    },
    discoverElementCollection: {
      handler (newVal, OldVal) {
        this.my_discoverElementCollection = newVal;
      },
      deep: true
    }
  },
  mounted: function () {
    EventBus.$on('rtperformance', this.addTab)
  },
  destroyed: function () {
    EventBus.$off('rtperformance', this.addTab)
  }
}
</script>

<style  scoped>

</style>
