<template>
  <div id="bottomNavigationFullScreen">
    <div class="bottomNavigation_content">
      <div class="bottomNavigation_li_content">
        <div
          class="bottomNavigation_li_public_content"
          @click="publicClick('/home')"
        >
          <!-- <img
            v-if="imagesUrl.homeIcon.indexOf('5') === -1"
            src="../../assets/image/new/4.png"
            alt=""
          /> -->
          <img
            v-if="imagesUrl.homeIcon.indexOf('5') === -1"
            src="../../assets/image/new/40.png"
            alt=""
          />
          <img v-else src="../../assets/image/new/41.png" alt="" />
          <div
            :class="
              imagesUrl.homeIcon.indexOf('5') === -1 ? 'no_select' : 'select'
            "
          >
            首页
          </div>
        </div>

        <div
          class="bottomNavigation_li_public_content"
          @click="publicClick('/mapShow')"
        >
          <img
            v-if="imagesUrl.mapShowIcon.indexOf('7') === -1"
            src="../../assets/image/new/6.png"
            alt=""
          />
          <img v-else src="../../assets/image/new/7.png" alt="" />
          <div
            :class="
              imagesUrl.mapShowIcon.indexOf('7') === -1 ? 'no_select' : 'select'
            "
          >
            附近
          </div>
        </div>

        <!-- 识别 -->
        <div class="bottomNavigation_li_public_content" @click="discern()">
          <!-- <div class="bottomNavigation_li_public_content" @click="popUpShow == true ? false : true"> -->
          <img
            src="../../assets/image/new/11.png"
            alt=""
            class="bottomNavigation_li_public_content-img"
          />
          <div class="no_select">识别</div>
        </div>
        <!-- 识别 -->

        <div
          class="bottomNavigation_li_public_content"
          @click="publicClick('/repository')"
        >
          <img
            v-if="imagesUrl.repositoryIcon.indexOf('2') === -1"
            src="../../assets/image/new/1.png"
            alt=""
          />
          <img v-else src="../../assets/image/new/2.png" alt="" />
          <div
            :class="
              imagesUrl.repositoryIcon.indexOf('2') === -1
                ? 'no_select'
                : 'select'
            "
          >
            百科
          </div>
        </div>

        <div
          class="bottomNavigation_li_public_content"
          @click="publicClick('/person')"
        >
          <img
            v-if="imagesUrl.personIcon.indexOf('13') === -1"
            src="../../assets/image/new/12.png"
            alt=""
          />
          <img v-else src="../../assets/image/new/13.png" alt="" />
          <div
            :class="
              imagesUrl.personIcon.indexOf('13') === -1 ? 'no_select' : 'select'
            "
          >
            我的
          </div>
        </div>
      </div>
    </div>

    <popUp v-show="popUpShow" :key="timer"></popUp>
  </div>
</template>

<script>
import popUp from "../popUp/popUp"; //识别框
export default {
  name: "bottomNav",
  components: {
    popUp, //底部导航
  },
  data() {
    return {
      imagesUrl: {
        // 排版图片使用懒加载
        homeIcon: "./static/new/5.png", // 首页
        mapShowIcon: "./static/new/6.png", // 附近
        repositoryIcon: "./static/new/1.png", // 百科
        personIcon: "./static/new/12.png", // 我的
      },
      popUpShow: false,
      timer: "", //重新加载子组件
      // titleData:{stateData: true}
    };
  },
  created() {
    if (typeof this.$route.path === "string") {
      let val = this.$route.path;
      localStorage.setItem("navName", val);
      switch (val) {
        case "/home":
          this.imagesUrl.homeIcon = "./static/new/5.png"; // 首页
          this.imagesUrl.mapShowIcon = "./static/new/6.png"; // 附近
          this.imagesUrl.repositoryIcon = "./static/new/1.png"; // 百科
          this.imagesUrl.personIcon = "./static/new/12.png"; // 我的
          break;
        case "/mapShow":
          this.imagesUrl.homeIcon = "./static/new/4.png"; // 首页
          this.imagesUrl.mapShowIcon = "./static/new/7.png"; // 附近
          this.imagesUrl.repositoryIcon = "./static/new/1.png"; // 百科
          this.imagesUrl.personIcon = "./static/new/12.png"; // 我的
          break;
        case "/repository":
          this.imagesUrl.homeIcon = "./static/new/4.png"; // 首页
          this.imagesUrl.mapShowIcon = "./static/new/6.png"; // 附近
          this.imagesUrl.repositoryIcon = "./static/new/2.png"; // 百科
          this.imagesUrl.personIcon = "./static/new/12.png"; // 我的
          break;
        case "/person":
          this.imagesUrl.homeIcon = "./static/new/4.png"; // 首页
          this.imagesUrl.mapShowIcon = "./static/new/6.png"; // 附近
          this.imagesUrl.repositoryIcon = "./static/new/1.png"; // 百科
          this.imagesUrl.personIcon = "./static/new/13.png"; // 我的
          break;
      }
    } else {
      console.log("不合法参数");
    }

    // 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) {
      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("不合法的传值");
      }
      localStorage.setItem("navName", val);
    },
    // 点击导航栏事件
    publicClick(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("不合法的传值");
      }
    },

    // 识别
    discern() {
      var that = this;
      that.popUpShow = true;
      this.timer = new Date().getTime();
    },
    // 点击上传按钮-昆虫
    upload() {
      var _this = this;
      localStorage.setItem("insect", "昆虫"); //添加一个昆虫标识在本地
      localStorage.removeItem("plant"); //删除病害标识
      //删除测试
      localStorage.removeItem("ba64dataA");
      localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
      localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
      localStorage.removeItem("memoryID");
      localStorage.removeItem("memoryDistinction");
      localStorage.removeItem("collectID");
      localStorage.removeItem("collectDistinction");
      localStorage.removeItem("seek_dataID");
      localStorage.removeItem("Point");
      this.$refs["file"].click();
    },
    // 点击上传按钮-病害
    uploadA() {
      var _this = this;
      localStorage.setItem("plant", "病害"); // 添加一个病害标识在本地
      localStorage.removeItem("insect"); //删除昆虫标识
      //删除测试
      localStorage.removeItem("ba64dataA");
      localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
      localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
      localStorage.removeItem("memoryID");
      localStorage.removeItem("memoryDistinction");
      localStorage.removeItem("collectID");
      localStorage.removeItem("collectDistinction");
      localStorage.removeItem("seek_dataID");
      localStorage.removeItem("Point");
      this.$refs["file"].click();
    },
    // 选择上传文件
    uploadChange(e) {
      let file = e.target.files[0];
      this.fileA = file; //传递给data中
      this.filename = file["name"];
      let URL = window.URL || window.webkitURL;
      this.$refs["layer"].style.display = "block";
      this.cropper.replace(URL.createObjectURL(file));
    },
    // 取消上传
    cancelHandle() {
      this.cropper.reset();
      this.$refs["layer"].style.display = "none";
      this.$refs["file"].value = "";
    },
  },
};
</script>

<style>
#bottomNavigationFullScreen {
  position: fixed;
  bottom: 0;
  /* z-index: 9999; */
  z-index: 1999;
  /* height: 1.2rem; */
  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;
  margin: 0.55rem 0 0 0;
}
.xiangji {
  width: 1rem;
}
.bottomNavigation_li_public_content img {
  height: 0.6rem;
  width: 0.6rem;
  /* margin: 0 0 0 0.85rem; */
  margin: 0 0 0 0.6rem;
}
.bottomNavigation_li_public_content div {
  position: relative;
  bottom: -1px;
}

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

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

@keyframes select {
  0% {
    font-size: 15px;
  }
  50% {
    font-size: 15px;
  }
  100% {
    font-size: 15px;
  }
}
.select {
  animation: select 0.6s;
  font-size: 15px;
  color: #72d7b9;
  margin: 0 0 0 -0.15rem;
}
.register-img {
  width: 1rem;
  height: 1rem;
}

/* 识别图标 */
.bottomNavigation_li_public_content-img {
  width: 1.3rem !important;
  height: 1.3rem !important;
  border: 5px solid #fff;
  border-radius: 50px;
  margin: -0.9rem 0 0 0.15rem !important;
}
</style>
