<template>
  <div class="bottom">
    <!-- @change="onChange" -->
    <van-tabbar v-model="active" active-color="#3c82e1" inactive-color="#d0d0d0">
      <van-tabbar-item to="/volunteer">
        <span>义工中心</span>
        <template #icon="props">
          <img :src="props.active ? home.active : home.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/volunteerExamine">
        <span>义工审核</span>
        <template #icon="props">
            <img :src="props.active ? my.active : my.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import home from "../../assets/tabbarIcon/shouye21.png";
import home_active from "../../assets/tabbarIcon/shouye2.png";
import my from "../../assets/tabbarIcon/wode21.png";
import my_active from "../../assets/tabbarIcon/wode2.png";
export default {
  props: {
    luyou: Number,
    nCount: Number,
  },
  data() {
    return {
      active: 0,
      navTabs: ["/volunteer", "/volunteerExamine"], // 底部导航
      home: {
        active: home_active,
        inactive: home,
      },
      my: {
        active: my_active,
        inactive: my,
      },
    };
  },
  created() {
    this.routerP();
  },
  methods: {
    routerP() {
      const { navTabs } = this.$data;
      let router_path = this.$route.path;
      console.log(router_path);
      for (var i = 0; i < navTabs.length; i++) {
        if (router_path == navTabs[i]) {
          this.active = i;
          break;
        }
      }
    },
    clickItem: function (path) {
      this.$router.push(path);
    },
    // onChange(index) {
    //   Notify({ type: 'primary', message: index });
    // },
  },
  watch: {
    luyou: {
      handler(n, o) {
        this.routerP();
      },
      deep: true, // 深度监听父组件传过来对象变化
    },
  },
};
</script>

<style scoped>
.bottom {
}

.active {
  color: #108b70;
}
.noticeBox {
  position: relative;
  /* margin-right: 10px; */
}
.noticeBox span {
  position: absolute;
  background: red;
  width: 5px;
  height: 5px;
  border-radius: 30px;
  top: -3px;
  right: -3px;
}
</style>
