<template>
  <div class="btn-box">
    <button
      v-for="(item, index) in $router.options.routes[2].children"
      :key="index"
      @click="headerNavBtn(item, index)"
      :class="{ active: headerNavIndex === index }"
    >
      {{ item.meta.pageName }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'HeaderNav',
  data () {
    return {
      headerNavIndex: 0
    }
  },
  methods: {
    headerNavBtn (item, i) {
      // this.$eventBus.$emit('hidden')
      if (i === 0) {
        // 恢复水位
        this.$eventBus.$emit('resetWL')
        this.$eventBus.$emit('hidden')
        // 首页
        // this.$eventBus.$emit('homeicon')
      } else if (i === 1) {
        this.$eventBus.$emit('hiddenAll1')
      } else if (i === 2) {
        // 四预场景
        // 先隐藏所有icon
        this.$eventBus.$emit('hidden')
        // 显示四预场景icon
        this.$eventBus.$emit('znybicon')
      }
      this.$router.replace(item.path)
    }
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler (newVal) {
        const arr = this.$router.options.routes[2].children
        const i = arr.findIndex(item => newVal.path.startsWith(item.path))
        this.headerNavIndex = i
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  width: 950px;
  font-size: 18px;
  button {
    width: 172px;
    height: 50px;
    font-size: 18px;
    background: url("~@/assets/images/layout/btn_bg.png") no-repeat center /
      cover;
    color: #e8eff6;
    text-align: center;
    line-height: 50px;
    &:hover {
      background: url("~@/assets/images/layout/btn_active.png") no-repeat center /
        cover;
    }
    &.active {
      background: url("~@/assets/images/layout/btn_active.png") no-repeat center /
        cover;
    }
  }
  button:last-child {
    margin-right: 0;
  }
}
</style>
