<template>
  <div class="home-box" :style="'height:' + fullHeight + 'px'">
    <!-- <el-main> -->
    <!-- 背景渐变 -->
    <div class="Backgroundgradient"></div>
    <!-- text -->
    <div class="text">首页</div>

    <!-- 轮播视图 -->
    <div class="carousel">
      <div class="block">
        <span class="demonstration"></span>
        <!-- <img src="../../assets/imageOne/555.jpg" alt class="home-box_image" /> -->
        <img src="../../assets/assets/555.jpg" alt class="home-box_image" />
      </div>
    </div>

    <div class="survey">调查统计</div>

    <div class="bajing1">
      <!-- 列表 -->
      <div class="list">
        <div class="list-box" @click="message()">
          <img src="../../assets/imageOne/1.png" alt class="list-box-img" />
          <div class="list-box-txt-box">
            <div class="list-box-txt">新建信息</div>
            <div class="list-box-txt1">新建植物、昆虫病害信息</div>
          </div>
        </div>
        <div class="list-box" @click="existing()">
          <img src="../../assets/imageOne/2.png" alt class="list-box-img1" />
          <div class="list-box-txt-box1">
            <div class="list-box-txt2">已录信息</div>
            <div class="list-box-txt3">查看已录植物、昆虫病害信息</div>
          </div>
        </div>
        <div class="list-box" @click="install()">
          <img src="../../assets/imageOne/3.png" alt class="list-box-img2" />
          <div class="list-box-txt-box1">
            <div class="list-box-txt4">系统设置</div>
            <div class="list-box-txt5">方便快捷、省时省力</div>
          </div>
        </div>
        <!-- <div class="list-box" @click="more()">
          <img src="../../assets/4.png" alt class="list-box-img3" />
          <div class="list-box-txt-box1">
            <div class="list-box-txt6">了解更多</div>
            <div class="list-box-txt7">更多信息 欢迎来访</div>
          </div>
        </div>-->

        <div class="list-box" @click="help()">
          <img src="../../assets/imageOne/4.png" alt class="list-box-img3" />
          <div class="list-box-txt-box1">
            <div class="list-box-txt6">帮助说明</div>
            <div class="list-box-txt7">操作详情 帮助说明</div>
          </div>
        </div>
      </div>

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

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

export default {
  name: "home",
  data() {
    return {
      activeClass: -1, //0为默认选择第一个，-1为不选择
      fullHeight: document.documentElement.clientHeight
    };
  },

  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  components: {
    bottomNav
  },

  mounted() {
    this.get_boderHeight();
  },

  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //点击已录信息进入页面
    existing() {
      let _this = this;
      //判断已录信息tab切换下标是否有数据
      if (localStorage.getItem("examineIndex") == null) {
        localStorage.setItem("examineIndex", 0);
      }
      _this.$router.push("/examine");
      location.reload();
    },

    //点击新建信息进入页面
    message() {
      let _this = this;
      //判断是新建还是默认编辑、
      if (localStorage.getItem("defaultID") !== null) {
        //默认编辑
        _this.$router.push("/acquiescent");
        location.reload()
      } else {
        //新建
        _this.$router.push("/newmessage");
      }
    },

    //点击了解更多进入页面
    more() {
      let _this = this;
      _this.$router.push("/knowmore");
    },

    //点击系统设置进入页面
    install() {
      let _this = this;
      _this.$router.push("/system");
      // location.reload(); //实现视图强制刷新
    },

    //点击进入识别页面
    discern() {
      let _this = this;
      _this.$router.push("/discern");
    },

    //点击进入个人中心页面
    person() {
      let _this = this;
      _this.$router.push("/person");
    },

    //点击进入帮助关于页面
    help() {
      let _this = this;
      _this.$router.push("/help");
    }
  }
};
</script>

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