<template>
  <div class="discern-box" :style="'height:' + fullHeight + 'px'">
    <!-- 背景图 -->
    <img src="../../../static/4.png" alt class="discern-img" />

    <!-- title标题 -->
    <div class="discern-title">识别</div>

    <!-- 主页面内容list列表 -->
    <div class="bajing">
      <ul class="discern-ul">
        <li class="discern-li disease" @click="bing()">
          <img src="../../assets/imageOne/31.png" alt class="discern-li-img" />
          <div class="discern-li-div">
            <div class="discern-div-one">病害</div>
            <div class="discern-div-two">拍照识别病害状况</div>
          </div>
        </li>
        <li class="discern-li insect" @click="haich()">
          <img src="../../assets/imageOne/32.png" alt class="discern-li-img hai" />
          <div class="discern-li-div">
            <div class="discern-div-one">虫害</div>
            <div class="discern-div-two">拍照识别害虫信息</div>
          </div>
        </li>
        <li class="discern-li repository" @click="zhi()">
          <img src="../../assets/imageOne/33.png" alt class="discern-li-img zhi" />
          <div class="discern-li-div">
            <div class="discern-div-one">识别记录</div>
            <div class="discern-div-two ku">识别结果记录统计</div>
          </div>
        </li>
      </ul>

      <!-- 底部导航 -->
      <bottomNav></bottomNav>
    </div>
  </div>
</template>

<script>
import bottomNav from "../bottomNav/bottomNav"; //底部导航栏

export default {
  name: "discern",
  data() {
    return {
      fullHeight: document.documentElement.clientHeight
    };
  },
  components: {
    bottomNav
  },
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    this.get_boderHeight();
  },
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },
    //点击切换到home界面
    tohome() {
      this.$router.push("/home");
    },

    //点击切换到我的页面
    tomy() {
      this.$router.push("/person");
    },

    //点击进入害虫识别界面
    haich() {
      this.$router.push("/injuriousInsect");
    },

    //点击进入病害识别界面
    bing() {
      this.$router.push("/disease");
    },

    //点击进入知识库界面
    zhi() {
      let _this = this;
      _this.$router.push("/record");
      // location.reload();
      if (localStorage.getItem("biaoshi") == null) {
        localStorage.setItem("biaoshi", 0); //存识别记录的下标
      }
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/style/bus.scss";
@import "../../assets/style/scss/discern.scss";
</style>
