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

        <div class="bottomNavigation_li_public_content" @click="publicClick('/mapShow')">
          <div :class="imagesUrl.mapShowIcon.indexOf('8') === -1 ? 'no_select' : 'select' ">附近</div>
        </div>

        <div class="bottomNavigation_li_public_content" @click="publicClick('/repository')">
          <div :class="imagesUrl.repositoryIcon.indexOf('ku2') === -1 ? 'no_select' : 'select' ">知识库</div>
        </div>

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

<script>
export default {
  name: "bottomNav",
  data() {
    return {
      imagesUrl: {
        // 排版图片使用懒加载
        homeIcon: "./static/5.png", // 首页
        mapShowIcon: "./static/6.png", // 识别
        repositoryIcon: "./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.mapShowIcon = "./static/6.png"; // 识别
          this.imagesUrl.repositoryIcon = "./static/ku.png"; // 知识库
          this.imagesUrl.personIcon = "./static/25.png"; // 我的
          break;
        case "/mapShow":
          this.imagesUrl.homeIcon = "./static/5.png"; // 首页
          this.imagesUrl.mapShowIcon = "./static/8.png"; // 识别
          this.imagesUrl.repositoryIcon = "./static/ku.png"; // 知识库
          this.imagesUrl.personIcon = "./static/25.png"; // 我的
          break;
        case "/repository":
          this.imagesUrl.homeIcon = "./static/5.png"; // 首页
          this.imagesUrl.mapShowIcon = "./static/1.png"; // 识别
          this.imagesUrl.repositoryIcon = "./static/ku2.png"; // 知识库
          this.imagesUrl.personIcon = "./static/25.png"; // 我的
          break;
        case "/person":
          this.imagesUrl.homeIcon = "./static/5.png"; // 首页
          this.imagesUrl.mapShowIcon = "./static/6.png"; // 识别
          this.imagesUrl.repositoryIcon = "./static/ku.png"; // 知识库
          this.imagesUrl.personIcon = "./static/9.png"; // 我的
          break;
      }
    } else {
      console.log("不合法参数");
    }
  },
  methods: {
    // 点击切换函数
    clickChang(val) {
      // console.log('点击切换函数' + val)
      // console.log(typeof val)
      console.log(1111)
      if (typeof val === "string") {
        switch (val) {
          case "/home":
            // this.$router.push({ path: "/home" });
            this.$router.replace({ path: "/home" });
            // location.reload();
            break;
          case "/mapShow":
            // this.$router.push({ path: "/mapShow" });
            this.$router.replace({ path: "/mapShow" });
            location.reload();
            break;
          case "/repository":
            // this.$router.push({ path: "/repository" });
            this.$router.replace({ path: "/repository" });
            break;
          case "/person":
            // 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 "/mapShow":
            this.clickChang(val);
            localStorage.setItem("biaoshi", "0");
            break;
          case "/repository":
            this.clickChang(val);
            localStorage.setItem("quebie", "0");
            break;
          case "/person":
            this.clickChang(val);
            break;
        }
      } else {
        console.log("不合法的传值");
      }
    }
  }
};
</script>

<style>
#bottomNavigationFullScreen {
  position: fixed;
  bottom: 0;
  /* z-index: 9999; */
  z-index: 1999;
  height: 1.2rem;
  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;
  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;
}

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

/* @keyframes select {
  0% {
    font-size: 25px;
  }
  50% {
    font-size: 25px;
  }
  100% {
    font-size: 25px;
  }
} */

@keyframes select {
  0% {
    font-size: 18px;
  }
  50% {
    font-size: 18px;
  }
  100% {
    font-size: 18px;
  }
}
.select {
  animation: select 0.6s;
  font-size: 18px;
  color: #fff;
  margin: 0.15rem 0 0 0.5rem;
  border: 1px solid #16c4af;
  border-radius: 25px;
  background: #16c4af;
}
.register-img {
  width: 1rem;
  height: 1rem;
}
</style>
