<template>
  <div class="knowledge-background knowledge-box" :style="'height:' + fullHeight + 'px'">
      <!-- 页头 -->
        <div class>
          <el-page-header title="" @back="goBack" content="知识库"></el-page-header>
        </div>

        <div class>
          <el-card class="box-card2" shadow="always">
            <!-- 识别图片 -->
            <div class="knowledge-img">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <!-- 虚线 -->
            <div class="knowledge-frame"></div>

            <div class="knowledge-result">
              <div class="knowledge-result-box">
                <img src="../../assets/imageOne/38.png" alt class="knowledge-result-box-img" />
                <div class="knowledge-txt">识别结果</div>
              </div>

              <div class="knowledge-name">
                害虫名称：
                <span class="knowledge-hai">黑绒鳃金龟</span>
                <div class="knowledge-hai-txt">
                      黑绒鳃金龟是中国苹果、桃、梨害虫中的一种,在生物学上划分在昆虫纲鞘翅目鳃金龟科下,广泛分布于中国大部分地域,主要危害蔷薇科果树、柿、葡萄、桑、杨、柳、榆,各种农作物及十字花科等40多科约150种植物。
                </div>
              </div>
            </div>
          </el-card>

          <!-- 圆 -->
          <div class="circle"></div>
          <div class="circle1"></div>
        </div>
  </div>
</template>

<script>
export default {
  name: "knowledge",
  data() {
    return {
      imageUrl: "",
      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)
            }

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

  methods: {
    //动态获取浏览器高度
        get_boderHeight () {
            const that = this
            window.onresize = () => {
                return (() => {
                    window.fullHeight = document.documentElement.clientHeight
                    that.fullHeight = window.fullHeight
                }) ()
            }
        },
    goBack() {
      let _this = this;
      // _this.$router.replace("/discern");
      _this.$router.push("/discern");
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

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