<!--  -->
<template>
  <div class="show_box" :style="'height:' + fullHeight + 'px'" v-loading="loading">
    <!-- 返回按钮 -->
    <div class="show_box-imgA">
      <img src="../../assets/image/left.png" alt class="imgA_return" @click="Fan()" />
    </div>

    <!-- 识别图片 -->
    <div class="show_box_picture">
      <img :src="image" alt class="shibie_picture" />
    </div>

    <!-- 识别信息 -->
    <el-collapse-transition>
      <div class="show_box_meg" v-show="shanShow">
        <el-card class="box-card">
          <!-- 大框 -->
          <div class>
            <!-- 标题和文字 -->
            <div class="show_box_meg_boxA">
              <div class="show_box_meg_title" v-if="axiosShow">{{this.redata.name}}</div>
            </div>

            <!-- 后端发送的照片 -->
            <div class="show_box_meg_boxB" v-if="axiosShow">
              <img v-if="imageShow" :src="this.redata.img_urls" alt class="show_box_meg_img" />
              <!-- <el-image class="show_box_meg_imgA" v-else></el-image> -->
              <img v-else src="../../assets/image/noimage.png" alt class="show_box_meg_imgA" />
            </div>

            <!-- 查看详情按钮 -->
            <el-button
              v-if="axiosShow"
              type="success"
              size="medium"
              class="meg_box_btn"
              round
              @click="textShow = !textShow,chakan()"
            >查看详情</el-button>

            <!-- 识别失败 -->
            <div class="error_box" v-if="errorShow">
              <div class="error_box_text">识别失败</div>
              <div class="error_div">
                <img src="../../assets/image/error.png" alt class="error_img" />
              </div>
            </div>

            <!-- 再拍一张按钮 -->
            <el-button
              v-if="errorShow"
              type="success"
              size="medium"
              class="meg_box_btnA"
              @click="again()"
              round
            >再拍一张</el-button>
          </div>
        </el-card>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    //这里存放数据
    return {
      loading: true,
      fullHeight: document.documentElement.clientHeight,
      shanShow: false, //识别详情卡片的显示或隐藏
      textShow: false, //识别详情的文字描述
      axiosShow: false, //识别未完成时不显示
      redata: [], //后端数据
      form: "", //从home页面传来的文件数据
      image: localStorage.getItem("ba64dataA"), //从home页面传来的图片数据
      dataImg: "", //
      errorShow: false, //识别失败返回给用户的错误页面
      imageShow: false //判断后端传来的图片是否为空
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },
    
    //测试页面不更新
    '$route':'fetchData',
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 返回到主页
    Fan() {
      let _this = this;
      //判断当前账号是管理员还是游客
      if (localStorage.getItem("ret") === "user") {
        _this.$router.replace("/home");
        // location.reload()
      } else if (localStorage.getItem("ret") === "tourist") {
        // _this.$router.push("/tourist");
        _this.$router.replace("/tourist");
        location.reload()
      }
      localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
      localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
      localStorage.removeItem("ba64dataA"); //清除本地中用户选择的图片
      // localStorage.removeItem("again"); //清除本地中再拍一张的标识
    },

    // 点击查看详情跳转到昆虫档案
    chakan() {
      let _this = this;
      localStorage.setItem("showID", "1");
      _this.$router.push("/record");

      //删除本地存储
      localStorage.removeItem("memoryID");
      localStorage.removeItem("memoryDistinction");
      localStorage.removeItem("collectID");
      localStorage.removeItem("collectDistinction");
      localStorage.removeItem("seek_dataID");
      localStorage.removeItem("Point");
    },

    // 点击返回主页
    again() {
      let _this = this;
      // localStorage.setItem('again', '1') //添加一个在拍一张的标识
      _this.Fan();
    },

    //测试法送给后端数据
    ceshi() {
      let _this = this;
      _this.shanShow = true;
      // 判断axios请求是否成功
      if (localStorage.getItem("axiosData") !== null) {
        _this.redata = JSON.parse(localStorage.getItem("axiosData"));
        _this.axiosShow = true;
        _this.errorShow = false;

        // 识别成功发送记录
        //科目
        let a = JSON.parse(localStorage.getItem("axiosData"));
        let b = a.prevention;
        if (b !== "[防治方法] null") {
          var f = b.split("[科目类]");
          if (f.length === 1) {
            var c = "";
          } else if (f.length !== 1) {
            var c = b.split("[科目类]")[1].split("[")[0];
          }
        } else {
          var c = "";
        }
        //判断是昆虫还是病害
        if (localStorage.getItem("insect") !== null) {
          var classify = "insect";
        } else if (localStorage.getItem("plant") !== null) {
          var classify = "plant";
        }

        if (localStorage.getItem("recordID") === "1") {
          // _this.file = _this.$route.params.data; //从clipper.js页面传来的用户所拍摄的图片
          var img = _this.$route.params.data; //从clipper.js页面传来的用户所拍摄的图片
          let form = new FormData();
          form.append("file", img);
          form.append("name", a.name);
          form.append("prevention", b);
          form.append("course", c);
          form.append("ret", classify);
          form.append("img_urls", a.img_urls);
          form.append("addr", localStorage.getItem("dizhi"));
          form.append("lng", localStorage.getItem("jingdu"));
          form.append("lat", localStorage.getItem("weidu"));
          _this
            .$axios({
              method: "post",
              url: "bigservers/record",
              data: form,
              headers: {
                "Content-Type": "multipart/form-data"
              }
            })
            .then(res => {
              localStorage.removeItem("recordID");
            })
            .catch(error => {});
        }
      } else if (localStorage.getItem("axiosData") == null) {
        if (localStorage.getItem("recordID") === "1") {
          _this.errorShow = true;
          _this.axiosShow = false;

          // 识别失败发送记录
          if (localStorage.getItem("insect") !== null) {
            var classify = "insect";
          } else if (localStorage.getItem("plant") !== null) {
            var classify = "plant";
          }

          _this.file = _this.$route.params.data; //从clipper.js页面传来的用户所拍摄的图片
          let form = new FormData();
          form.append("file", this.$route.params.data);
          form.append("name", "1");
          form.append("prevention", "");
          form.append("course", "");
          form.append("ret", classify);
          form.append("img_urls", "");
          form.append("addr", "");
          form.append("lng", "");
          form.append("lat", "");
          _this
            .$axios({
              method: "post",
              url: "bigservers/record",
              data: form,
              headers: {
                "Content-Type": "multipart/form-data"
              }
            })
            .then(res => {
              localStorage.removeItem("recordID");
            })
            .catch(error => {});
        }
      }

      // 判断传来的图片是否有图片
      if (_this.redata.img_urls === "") {
        _this.imageShow = false;
      } else {
        _this.imageShow = true;
        console.log(_this.redata.img_urls);
      }
      this.loading = false
    },


    //测试页面不更新
     fetchData(){
           console.log('路由发送变化doing...');
     }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let _this = this;
    this.fetchData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight();
    this.ceshi();
  },

  // //测试是否销毁
  // activated() {
  //   alert('没销毁')
  // }
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/show.scss";
</style>