<template>
  <div id="bottomNavigationFullScreen">
    <div class="bottomNavigation_content">
      <div class="bottomNavigation_li_content">
        <div class="bottomNavigation_li_public_content" @click="publicClick('/home')">
          <img :src="imagesUrl.homeIcon" alt />
          <div :class="imagesUrl.homeIcon.indexOf('7') === -1 ? 'no_select' : 'select' ">首页</div>
        </div>

        <div class="bottomNavigation_li_public_content" @click="publicClick('/discern')">
          <img :src="imagesUrl.discernIcon" alt />
          <div :class="imagesUrl.discernIcon.indexOf('8') === -1 ? 'no_select' : 'select' ">识别</div>
        </div>

        <div class="bottomNavigation_li_public_content" @click="publicClick('/library')">
          <img :src="imagesUrl.libraryIcon" alt />
          <div :class="imagesUrl.libraryIcon.indexOf('9') === -1 ? 'no_select' : 'select' ">知识库</div>
        </div>

        <div class="bottomNavigation_li_public_content" @click="publicClick('/person')">
          <img :src="imagesUrl.personIcon" alt />
          <div :class="imagesUrl.personIcon.indexOf('10') === -1 ? 'no_select' : 'select' ">我的</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bottomNav",
  inject: ["reload"],
  data() {
    return {
      imagesUrl: {
        // 排版图片使用懒加载
        homeIcon: "./static/5.png", // 首页
        discernIcon: "./static/6.png", // 识别
        libraryIcon: "./static/ku.png", // 知识库
        personIcon: "./static/25.png" // 我的
      }
    };
  },
  created() {
    if (typeof this.$route.path === "string") {
      let val = this.$route.path;
      switch (val) {
        case "/home":
          this.imagesUrl.homeIcon = "./static/7.png"; // 首页
          this.imagesUrl.discernIcon = "./static/6.png"; // 识别
          this.imagesUrl.libraryIcon = "./static/ku.png"; // 知识库
          this.imagesUrl.personIcon = "./static/25.png"; // 我的
          break;
        case "/discern":
          this.imagesUrl.homeIcon = "./static/5.png"; // 首页
          this.imagesUrl.discernIcon = "./static/8.png"; // 识别
          this.imagesUrl.libraryIcon = "./static/ku.png"; // 知识库
          this.imagesUrl.personIcon = "./static/25.png"; // 我的
          break;
        case "/library":
          this.imagesUrl.homeIcon = "./static/5.png"; // 首页
          this.imagesUrl.discernIcon = "./static/8.png"; // 识别
          this.imagesUrl.libraryIcon = "./static/ku2.png"; // 知识库
          this.imagesUrl.personIcon = "./static/25.png"; // 我的
          break;
        case "/person":
          this.imagesUrl.homeIcon = "./static/5.png"; // 首页
          this.imagesUrl.discernIcon = "./static/6.png"; // 识别
          this.imagesUrl.libraryIcon = "./static/ku.png"; // 知识库
          this.imagesUrl.personIcon = "./static/9.png"; // 我的
          break;
      }
    } else {
      console.log("不合法参数");
    }
  },
  methods: {
    // 点击切换函数
    clickChang(val) {
      // console.log('点击切换函数' + val)
      if (typeof val === "string") {
        switch (val) {
          case "/home":
            this.imagesUrl.homeIcon = "./static/7.png"; // 首页
            this.imagesUrl.discernIcon = "./static/6.png"; // 识别
            this.imagesUrl.libraryIcon = "./static/ku2.png"; // 知识库
            this.imagesUrl.personIcon = "./static/25.png"; // 我的
            // this.$router.push({ path: "/home" });
            this.$router.replace({ path: "/home" });
            break;
          case "/discern":
            this.imagesUrl.homeIcon = "./static/5.png"; // 首页
            this.imagesUrl.discernIcon = "./static/8.png"; // 识别
            this.imagesUrl.libraryIcon = "./static/ku2.png"; // 知识库
            this.imagesUrl.personIcon = "./static/25.png"; // 我的
            // this.$router.push({ path: "/discern" });
            this.$router.replace({ path: "/discern" });
            break;
          case "/library":
            this.imagesUrl.homeIcon = "./static/5.png"; // 首页
            this.imagesUrl.discernIcon = "./static/8.png"; // 识别
            this.imagesUrl.libraryIcon = "./static/ku2.png"; // 知识库
            this.imagesUrl.personIcon = "./static/25.png"; // 我的
            // this.$router.push({ path: "/library" });
            this.$router.replace({ path: "/library" });
            break;
          case "/person":
            this.imagesUrl.homeIcon = "./static/5.png"; // 首页
            this.imagesUrl.discernIcon = "./static/6.png"; // 识别
            this.imagesUrl.librarycon = "./static/ku2.png"; // 知识库
            this.imagesUrl.personIcon = "./static/9.png"; // 我的
            // this.$router.push({ path: "/person" });
            this.$router.replace({ path: "/person" });
            break;
        }
      } else {
        console.log("不合法的传值");
      }
    },
    // 点击导航栏事件
    publicClick(val) {
      // console.log('点击导航栏事件' + val)
      if (typeof val === "string") {
        switch (val) {
          case "/home":
            this.clickChang(val);
            break;
          case "/discern":
            this.clickChang(val);
            localStorage.setItem('biaoshi', '0')
            break;
          case "/library":
            this.clickChang(val);
            localStorage.setItem('quebie', '0')
            break;
          case "/person":
            this.clickChang(val);
            this.reload();
            // location.reload();
            break;
        }
      } else {
        console.log("不合法的传值");
      }
    }
  }
};
</script>

<style>
#bottomNavigationFullScreen {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  height: 1.5rem;
  margin: 0 0 0 0rem;
  width: 100%;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
    0 1px 4px rgba(0, 0, 0, 0.117647);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
    0 1px 4px rgba(0, 0, 0, 0.117647);
  background-color: #fff;
}

.bottomNavigation_li_content {
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.bottomNavigation_li_public_content {
  flex: 1;
  height: 0.8rem;
  margin: 0.3rem 0 0 0;
}
.xiangji {
  width: 1rem;
}
.bottomNavigation_li_public_content img {
  height: 0.6rem;
  width: 0.7rem;
  margin: 0 0 0 -0.15rem;
}
.bottomNavigation_li_public_content div {
  position: relative;
  /* bottom: 3px; */
  /* bottom: .3rem; */
}

.no_select {
  /* font-size: 25px; */
  font-size: 13px;
  color: #222;
  text-align: center;
  margin: 0 0 0 -0.15rem;
}

@keyframes select {
  0% {
    font-size: 13px;
  }
  50% {
    font-size: 13px;
  }
  100% {
    font-size: 13px;
  }
}
.select {
  animation: select 0.6s;
  /* font-size: 25px; */
  font-size: 13px;
  color: #2196f3;
  margin: 0 0 0 -0.15rem;
}
.register-img {
  width: 1rem;
  height: 1rem;
}

/* .register-img {
        width: .8rem;
        height: 1rem;
    } */
</style>
