<!-- Please remove this file from your project -->
<template>
  <div v-if="displayStatus">
    <van-tabbar class="footer" v-model="active">
      <van-tabbar-item to="/">
        <img src="@/assets/images/footer/index.png" />
      </van-tabbar-item>
      <van-tabbar-item to="/plaza">
        <img src="@/assets/images/footer/plaza.png" />
      </van-tabbar-item>
      <van-tabbar-item to="/customer">
        <img src="@/assets/images/footer/customer.png" />
      </van-tabbar-item>
      <van-tabbar-item to="/my">
        <img src="@/assets/images/footer/my.png" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      displayStatus: true,
    };
  },
  watch: {
    "$nuxt.$route.name"(data) {
      switch (data) {
        case "index":
          this.active = 0;
          break;
        case "plaza":
          this.active = 1;
          break;
        case "customer":
          this.active = 2;
          break;
        case "my":
          this.active = 3;
          break;
        default:
          this.active = null;
          break;
      }
      this.navbarDisplay(data);
    },
  },
  mounted() {
    this.navbarDisplay(this.$nuxt.$route.name);
  },
  methods: {
    navbarDisplay(data) {
      switch (data) {
        case "login":
        case "register":
          this.displayStatus = false;
          break;
        default:
          this.displayStatus = true;
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.footer {
  background: url("@/assets/images/footer/bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.van-tabbar-item--active {
  background-color: transparent;
}
</style>
