<template>
  <div class="flood-footer-nav">
    <button
      v-for="(item, index) in arr"
      :key="index"
      @click="footerNavBtn(item)"
      :class="{
        active: footerNavIndex === index,
        not: $store.state.footerDis,
      }"
      :disabled="$store.state.footerDis"
    >
      {{ item.meta.pageName }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'FooterNav',
  props: {
    arr: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      footerNavIndex: 0,
      disabled: false
    }
  },
  methods: {
    footerNavBtn (item) {
      this.$router.replace(item.path)
    }
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler (newVal) {
        const i = this.arr.findIndex(item => newVal.path === item.path)
        this.footerNavIndex = i
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flood-footer-nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 870px;
  left: 666px;
  width: 588px;
  height: 50px;
  button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    // width: 147px;
    padding: 0 30px;
    height: 100%;
    background: url("~@/assets/images/flood/btn_bg1.png") no-repeat center/ 100%
      100%;
    color: #e8eff6;
    &:hover {
      background: url("~@/assets/images/flood/btn_bg2.png") no-repeat center/
        100% 100%;
    }
    &.active {
      background: url("~@/assets/images/flood/btn_bg2.png") no-repeat center/
        100% 100%;
    }
    &.no {
      cursor: not-allowed;
    }
  }
  button:nth-child(2) {
    width: 150px;
  }
}
.not {
  cursor: not-allowed;
}
</style>
