<!--  -->
<template>
  <div class="record_box" :style="'height:' + fullHeight + 'px'" v-loading="loading">
    <!-- 头部 -->
    <div class="record_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 class v-show="yincengShow">
        <div class="head_collect" v-show="touristShow">
          <img
            v-if="collectShow"
            @click="collect()"
            src="../../../static/pointed.png"
            alt
            class="collect_img"
          />
          <img
            v-else
            @click="collectFalse()"
            src="../../../static/collect.png"
            alt
            class="collect_img"
          />
        </div>
      </div>
    </div>

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

    <!-- 后端传来的图片 -->
    <div class="record_axios_div">
      <img v-if="imgShow" :src="this.redata.img_urls" alt class="record_axios_img" />
      <!-- <el-image v-else class="record_axios_img">222</el-image> -->
      <img v-else src="../../assets/image/noimage.png" alt class="record_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="address_box">
        <!-- 时间 -->
        <div class="addressA" v-show="dase_listShow">
          <img src="../../assets/image/time.png" alt class="address_imgA" />
          {{ this.redata.time }}
        </div>

        <!-- 地址 -->
        <div class="address" v-show="dase_listShow">
          <img src="../../assets/image/ding.png" alt class="address_img" />
          {{ this.redata.addr }}
        </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 {
  name: "record",
  components: {},
  data() {
    return {
      navBarFixed: false, //吸顶效果
      isClick: true, //收藏
      fullHeight: document.documentElement.clientHeight,
      redata: "", //本地的axios数据
      msg: "",
      imgShow: true, //判断后端传来的图片是否为空
      detailShow: true, //判断后端传来的详情文字是否为空
      collectShow: true, // 判断是否点击了收藏
      touristShow: true, //判断当前账号是否是游客账号
      dase_listShow: true, //判断当前页面是否从搜索列表中进入的
      yincengShow: true, //当前数据是否从搜索页面进入
      loading: true //加载
    };
  },
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true;
    next();
  },
  //监听属性 类似于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: {
    //返回上一页
    goBack() {
      let _this = this;
      if (
        localStorage.getItem("memoryID") !== null &&
        localStorage.getItem("Point") === null
      ) {
        // _this.$router.push("/memory");
        _this.$router.replace("/memory");
        localStorage.removeItem("memoryID");
        localStorage.removeItem("memoryDistinction");
      } else if (localStorage.getItem("collectID") !== null) {
        // _this.$router.push("/collect");
        _this.$router.replace("/collect");
        localStorage.removeItem("collectID");
        localStorage.removeItem("collectDistinction");
      } else if (localStorage.getItem("seek_dataID") !== null) {
        localStorage.removeItem("seek_dataID");
        // _this.$router.push("/seek_data");
        _this.$router.replace("/seek_data");
      } else if (
        localStorage.getItem("memoryID") === null &&
        localStorage.getItem("collectID") === null &&
        localStorage.getItem("showID") === "1"
      ) {
        localStorage.removeItem("showID");
        // _this.$router.push("/show");
        _this.$router.replace("/show");
      } else if (
        localStorage.getItem("memoryID") !== null &&
        localStorage.getItem("Point") === "2"
      ) {
        _this.$router.replace("/mapShow");
        localStorage.removeItem("memoryID");
        localStorage.removeItem("Point");
        localStorage.removeItem("memoryDistinction");
        location.reload();
      } else {
        localStorage.removeItem("axiosData");
        _this.$router.replace("/home");
      }
    },

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

    // 切割详情字符串数据并渲染
    apply() {
      let _this = this;
      let Adata = _this.redata.prevention;
      var a = Adata.replace(/]/g, "：");
      let Bdata = new Array();
      Bdata = a.split("[");
      _this.msg = Bdata;
    },

    //点击收藏事件
    collect() {
      let _this = this;
      var distinction = this.redata.ret;
      // 判断是否从识别记录中进去的
      if (localStorage.getItem("memoryID") !== null) {
        var postData = _this.$qs.parse({
          // name: _this.redata.name,
          id: localStorage.getItem("memoryID"),
          ret: _this.redata.ret,
          off: "1"
        });
        // 判断是否从我的收藏中进去的
      } else if (localStorage.getItem("collectID") !== null) {
        var postData = _this.$qs.parse({
          id: localStorage.getItem("collectID"),
          ret: distinction,
          off: "1"
        });
      }
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/collect",
            data: postData,
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                message: "收藏成功！",
                type: "success",
                duration: 1000
              });
              _this.collectShow = false;
            } else if (res.data === 1) {
              this.$message({
                message: "已收藏过,不可重复！！",
                type: "warning",
                duration: 1000
              });
            }
          })
          .catch(error => {
            this.$message({
              message: "收藏失败！",
              type: "error",
              duration: 1000
            });
          });
        setTimeout(function() {
          _this.isClick = true;
        });
      }
    },
    //取消收藏事件
    collectFalse() {
      let _this = this;
      var distinction = this.redata.ret;

      // 判断是否从识别记录中进去的
      if (localStorage.getItem("memoryID") !== null) {
        var postData = _this.$qs.parse({
          // name: _this.redata.name,
          id: localStorage.getItem("memoryID"),
          ret: _this.redata.ret,
          off: "2"
        });
      } else if (localStorage.getItem("collectID") !== null) {
        var postData = _this.$qs.parse({
          id: localStorage.getItem("collectID"),
          ret: distinction,
          off: "2"
        });
      }
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/collect",
            data: postData,
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            if (res.data === 2) {
              this.$message({
                message: "取消收藏成功！",
                type: "success",
                duration: 1000
              });
              _this.collectShow = true;
            }
          })
          .catch(error => {
            this.$message({
              message: "取消收藏失败！",
              type: "error",
              duration: 1000
            });
          });
        setTimeout(function() {
          _this.isClick = true;
        });
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let _this = this;

    //判断数据是否从home的点聚合效果中进入
    if (localStorage.getItem("Point") === "2") {
      _this.touristShow = false;
    } else if (localStorage.getItem("Point") === null) {
      _this.touristShow = true;
    }

    if (localStorage.getItem("memoryID") === null) {
      if (localStorage.getItem("collectID") !== null) {
        let postData = _this.$qs.parse({
          ret: localStorage.getItem("collectDistinction"),
          id: localStorage.getItem("collectID")
        });
        _this
          .$axios({
            method: "post",
            url: "bigservers/see_details",
            data: postData,
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            _this.redata = res.data[0];
            //判断后端数据中的详情是否为空-收藏
            if (
              localStorage.getItem("collectID") !== null &&
              (res.data[0].prevention === "[防治方法] null" ||
                res.data[0].prevention === "" ||
                res.data[0].prevention === null)
            ) {
              _this.detailShow = false;
            } else {
              _this.detailShow = true;
            }
            //判断后端数据中的img是否为空-收藏
            if (res.data[0].img_urls === "") {
              _this.imgShow = false;
            } else {
              _this.imgShow = true;
            }
            //判断后端数据是否收藏-收藏
            if (res.data[0].store === "1") {
              _this.collectShow = false;
            } else if (res.data[0].store === "0") {
              _this.collectShow = true;
            }
            _this.loading = false;
            _this.apply();
          })
          .catch(err => {
            alert("失败");
          });
      } else if (
        localStorage.getItem("collectID") === null &&
        localStorage.getItem("axiosData") !== null
      ) {
        _this.redata = JSON.parse(localStorage.getItem("axiosData"));
        _this.dase_listShow = false;
        _this.yincengShow = false;
        _this.apply();
      } else if (localStorage.getItem("seek_dataID") !== null) {
        let postData = _this.$qs.parse({
          id: localStorage.getItem("seek_dataID")
        });
        _this
          .$axios({
            method: "post",
            url: "bigservers/dase_list",
            data: postData,
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            _this.redata = res.data[0];
            //判断后端数据中的详情是否为空-识别记录
            if (
              localStorage.getItem("seek_dataID") !== null &&
              (res.data[0].prevention === "[防治方法] null" ||
                res.data[0].prevention === "" ||
                res.data[0].prevention === null)
            ) {
              _this.detailShow = false;
            } else {
              _this.detailShow = true;
            }

            //判断后端数据中的img是否为空-识别记录
            if (res.data[0].img_urls === "") {
              _this.imgShow = false;
            } else {
              _this.imgShow = true;
            }
            _this.loading = false;
            _this.apply();
          })
          .catch(error => {
            alert("失败");
          });
      }
    } else if (localStorage.getItem("memoryID") !== null) {
      let postData = _this.$qs.parse({
        ret: localStorage.getItem("memoryDistinction"),
        id: localStorage.getItem("memoryID")
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/see_details",
          data: postData,
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(res => {
          _this.redata = res.data[0];
          //判断后端数据中的详情是否为空-识别记录
          if (
            localStorage.getItem("memoryID") !== null &&
            (res.data[0].prevention === "[防治方法] null" ||
              res.data[0].prevention === "" ||
              res.data[0].prevention === null)
          ) {
            _this.detailShow = false;
          } else {
            _this.detailShow = true;
          }

          //判断后端数据中的img是否为空-识别记录
          if (res.data[0].img_urls === "") {
            _this.imgShow = false;
          } else {
            _this.imgShow = true;
          }

          //判断后端数据是否收藏-收藏
          if (res.data[0].store === "1") {
            _this.collectShow = false;
          } else if (res.data[0].store === "0") {
            _this.collectShow = true;
          }
          _this.loading = false;
          _this.apply();
        })
        .catch(err => {
          alert("失败");
        });
    }

    // 判断后端数据中的img是否为空
    if (_this.redata.img_urls === "") {
      _this.imgShow = false;
    } else {
      _this.imgShow = true;
    }

    // 判断后端数据中的详情是否为空
    if (_this.redata.prevention === "[防治方法] null") {
      _this.detailShow = false;
    } else {
      _this.detailShow = true;
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.get_boderHeight();

    //判断当前数据是否从识别成功中过来

    //判断账号是否是游客
    if (localStorage.getItem("ret") === "tourist") {
      _this.dase_listShow = false;
      _this.yincengShow = false;
      _this.loading = false;
    } else if (localStorage.getItem("ret") === "user") {
      _this.dase_listShow = true;
      _this.yincengShow = true;
      _this.loading = false;
    }

    //判断当前数据是否从识别成功中过来
    if (localStorage.getItem("axiosData") !== null) {
      _this.dase_listShow = false;
      _this.yincengShow = false;
      _this.loading = false;
    } else if (localStorage.getItem("axiosData") === null) {
      _this.dase_listShow = true;
      _this.yincengShow = true;
      _this.loading = false;
    }

    //判断数据是否从搜索列表中进入
    if (localStorage.getItem("seek_dataID") !== null) {
      this.dase_listShow = false;
      this.yincengShow = false;
      _this.loading = false;
    } else if (
      localStorage.getItem("seek_dataID") === null &&
      localStorage.getItem("axiosData") === null
    ) {
      this.dase_listShow = true;
      this.yincengShow = true;
      _this.loading = false;
    }
  }
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/record.scss";
</style>