<!--  -->
<template>
  <div class="details_box" :style="'height:' + fullHeight + 'px'" v-loading="loading">
    <!-- 头部 -->
    <div class="details_box_head">
      <!-- 返回图标 -->
      <div class="head_div" @click="goBack()">
        <img src="../../assets/image/return.png" alt class="head_div_img" />
      </div>

      <!-- 标题 -->
      <div class="head_title">
        <span class="head_title_text">知识库详情</span>
      </div>

    </div>

    <!-- 昆虫病害名 -->
    <div class="details_name">
      <div class="details_name_text">{{this.redata.name}}</div>
    </div>

    <!-- 后端传来的图片 -->
    <div class="details_axios_div">
      <img v-if="imgShow" :src="this.redata.img_urls" alt class="details_axios_img" />
      <img v-else src="../../assets/image/noimage.png" alt="" class="details_axios_img">
    </div>

    <!-- 病虫害详情 -->
    <div class="details_box" v-if="detailShow">
      <!-- 详情标题 -->
      <div class="details_tilte_box">
        <div class="details_tilte">
          <div class="details_tilte_text">小百科</div>
        </div>
      </div>

      <!-- 详情 -->
      <div class="detail_text_box">
        <div class="detail_text" v-for="item in this.msg" :key="item">{{ item }}</div>
      </div>
    </div>

    <div class="cry_box" v-else>
      <img src="../../assets/image/cry.png" alt class="cry_img" />
      <div class="cry_text">暂无此类病虫害的资料;努力更新中...</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      shandetails: false, //识别详情卡片的显示或隐藏
      axiosdetails: true, //识别未完成时不显示
      redata: [], //后端数据
      image: localStorage.getItem("ba64dataA"), //从home页面传来的图片数据
      msg: "", //切割后的详情数据
      imgShow: true, //判断后端传来的详情文字是否为空
      detailShow: true, //判断后端传来的详情文字是否为空
      loading: true, //加载
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 返回到主页
    goBack() {
      let _this = this;
      localStorage.removeItem("repositoryID");
      _this.$router.replace("/repository");
    },

    // 切割详情字符串数据并渲染
    apply() {
      let _this = this;
      let Adata = _this.redata.prevention;
      var a = Adata.replace(/]/g, "：");
      let Bdata = new Array();
      Bdata = a.split("[");
      _this.msg = Bdata;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.shandetails = true;
    _this.get_boderHeight();
    let postData = _this.$qs.parse({
      id: localStorage.getItem("repositoryID")
    });
    _this
      .$axios({
        method: "post",
        url: "bigservers/dase_list",
        data: postData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
      .then(res => {
        _this.redata = res.data[0];
        //判断后端传来的图片是否为空
        if (res.data[0].img_urls === '' || res.data[0].img_urls === null) {
          _this.imgShow = false
        } else if (res.data[0].img_urls !== '' || res.data[0].img_urls !== null) {
          _this.imgShow = true
        }
        //判断后端数据中的详情是否为空-识别记录
        if (
          localStorage.getItem("repositoryID") !== null &&
          (res.data[0].prevention === "[防治方法] null" || 
          res.data[0].prevention === '' ||
          res.data[0].prevention === null)
        ) {
          _this.detailShow = false;
        } else {
          _this.detailShow = true;
          _this.apply();
        }
        _this.loading = false
      })
      .catch(error => {
        alert("失败");
      });
  }
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/details.scss";
</style>