<template>
  <div class="bottom">
    <!-- @change="onChange" -->
    <van-tabbar v-model="active" active-color="#3c82e1" inactive-color="#d0d0d0">
      <van-tabbar-item to="/home2">
        <span>家校社</span>
        <template #icon="props">
          <img :src="props.active ? home.active : home.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/learning2">
        <span>五育融合</span>
        <template #icon="props">
          <img :src="props.active ? learning.active : learning.inactive" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item to="/innovate">
        <span>创新</span>
        <template #icon="props">
          <img :src="props.active ? find.active : find.inactive" />
        </template>
      </van-tabbar-item> -->
      <van-tabbar-item to="/my2">
        <span>我的</span>
        <template #icon="props">
          <div class="noticeBox">
            <span v-if="doi2 != 0 || doi1 != 0 || doi3 != 0"></span>
            <img :src="props.active ? my.active : my.inactive" />
          </div>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import home from "../../assets/tabbarIcon2/shouye1.png";
import home_active from "../../assets/tabbarIcon2/shouye.png";
import learning from "../../assets/tabbarIcon2/xuexizhongxin1.png";
import learning_active from "../../assets/tabbarIcon2/xuexizhongxin.png";
import find from "../../assets/tabbarIcon2/faxian1.png";
import find_active from "../../assets/tabbarIcon2/faxian.png";
import my from "../../assets/tabbarIcon2/wode1.png";
import my_active from "../../assets/tabbarIcon2/wode.png";
export default {
  props: {
    luyou: Number,
    doi2: Number,
    doi1: Number,
    doi3: Number,
  },
  data() {
    return {
      active: 0,
      navTabs: ["/home2", "/learning2", "/my2"], // 底部导航
      //, "/innovate"
      home: {
        active: home_active,
        inactive: home,
      },
      learning: {
        active: learning_active,
        inactive: learning,
      },
      find: {
        active: find_active,
        inactive: find,
      },
      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>
