<!--  -->
<template>
  <!-- <div
    class="record_box"
    :style="'height:' + fullHeight + 'px'"
    v-loading="loading"
  > -->

  <div class="record_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部 -->
    <div class="record_headrBox">
      <div :class="imgShow == true ? 'record_divBox' : 'record_divBoxA'">
        <img
          @click="goBack()"
          src="../../assets/image/new/30.png"
          alt
          class="record_headrBox-img"
        />
        <div class="record_headrBox-tlt">详情</div>
        <div class="" v-show="imgShow">
          <img
            v-if="store == '0'"
            @click="collect()"
            src="../../assets/image/new/34.png"
            alt
            class="record_headrBox-img"
          />
          <img
            v-else
            @click="noCollect()"
            src="../../assets/image/new/35.png"
            alt
            class="record_headrBox-img"
          />
        </div>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="record_box_main">
      <!-- 图片 -->
      <div class="record_box_imgBox">
        <img
          preview="1"
          v-lazy="
            redata.img_urls == '' ? 'http://192.168.1.8:8002/' + redata.img : redata.img_urls
          "
          alt=""
          class="record_box_imgBox-img"
        />
      </div>

      <div class="record_box_divBox">
        <div class="record_box_divBox_div1">
          <div class="record_box_divBox_div1_name1">{{ redata.name }}</div>
          <div class="record_box_divBox_div1_name2" v-show="addrShow">
            <img
              src="../../assets/image/ding.png"
              alt=""
              class="record_box_divBox_div1_name2_img"
            />
            <div class="record_box_divBox_div1_name2_txt">
              {{ redata.addr }}
            </div>
          </div>
        </div>
        <div class="record_box_divBox_div2" v-if="courseShow">
          <div
            class="record_box_divBox_div2_name1"
            v-for="item in course"
            :key="item"
          >
            {{ item }}
          </div>
        </div>
      </div>

      <!-- 简介 -->
      <div class="" v-if="isShow">
        <div
          class="record_box_divBox1"
          v-for="(itemA, index) in courseData"
          :key="index"
          v-show="itemA !== ''"
        >
          <div class="record_box_divBox1-box">
            <div class="record_box_divBox1-box-mainTxt">
              {{ itemA }}
            </div>
          </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>
  </div>
</template>

<script>
export default {
  name: "record",
  components: {},
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      id: "",
      redata: [], //详情数据
      course: [], //科目
      courseShow: true, //科目是否隐藏
      courseData: [], //详情的详情数据
      isShow: true, //详情是否有
      store: "",
      isClick: true, //收藏开关
      req: "", //判断是哪个页面进入的 百科 0 地图1 收藏2  识别记录3  识别后4
      imgShow: false, //收藏是否显示
      addrShow: 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);
      }
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //返回主页
    goBack() {
      var that = this;
      var req = that.req;
      if (req == "0") {
        //百科0
        that.$router.replace("/repository");
        console.log("百科");
      } else if (req == "1") {
        //地图1
        that.$router.replace("/mapShow");
        console.log("地图");
      } else if (req == "2") {
        //收藏2
        that.$router.replace("/collect");
        console.log("收藏");
      } else if (req == "3") {
        //识别记录3
        that.$router.replace("/memory");
        console.log("识别记录");
      } else if (req == "4") {
        //识别后
        that.$router.replace("/show");
        console.log("识别后");
      }
    },

    // 详情数据接口-百科和收藏
    detailsData() {
      var that = this;
      var form = new FormData();
      form.append("id", that.id);
      that
        .$axios({
          method: "post",
          url: "http://192.168.1.8:8002/dase_list",
          data: form,
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          if (res.data.length !== 0) {
            console.log(res.data);
            that.redata = res.data[0]; //总数据

            // 科目
            if (res.data[0].course !== "") {
              var a = res.data[0].course;
              a = a.replace(/。/g, "");
              let b = new Array();
              b = a.split("，");
              that.course = b;
              that.courseShow = true;
            } else {
              that.courseShow = false;
            }

            // 详情
            if (res.data[0].prevention !== "[防治方法] null") {
              let Adata = that.redata.prevention;
              var a = Adata.replace(/]/g, "：");
              let Bdata = new Array();
              Bdata = a.split("[");
              that.courseData = Bdata;
              that.isShow = true;
            }

            // 收藏
            that.store = res.data[0].store;
          } else {
            that.isShow = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 识别记录
    discernRecordData() {
      var that = this;
      var postData = that.$qs.parse({
        id: that.id,
        ret: that.ret,
      });
      that
        .$axios({
          method: "post",
          url: "http://192.168.1.8:8002/see_details",
          data: postData,
        })
        .then((res) => {
          if (res.data.length !== 0) {
            console.log(res.data);
            that.redata = res.data[0]; //总数据

            // 科目
            if (res.data[0].course !== "") {
              var a = res.data[0].course;
              a = a.replace(/。/g, "");
              let b = new Array();
              b = a.split("，");
              that.course = b;
              that.courseShow = true;
            } else {
              that.courseShow = false;
            }

            // 详情
            if (
              res.data[0].prevention !== "[防治方法] null" &&
              res.data[0].prevention !== ""
            ) {
              let Adata = that.redata.prevention;
              var a = Adata.replace(/]/g, "：");
              let Bdata = new Array();
              Bdata = a.split("[");
              that.courseData = Bdata;
              that.isShow = true;
            } else {
              that.isShow = false;
            }

            // 收藏
            that.store = res.data[0].store;
          } else {
            that.isShow = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 从地图请求的数据
    mapShowData() {
      var that = this;
      var postData = that.$qs.parse({
        id: localStorage.getItem("memoryID"),
        ret: localStorage.getItem("memoryDistinction"),
      });
      that
        .$axios({
          method: "post",
          url: "http://192.168.1.8:8002/see_details",
          data: postData,
        })
        .then((res) => {
          if (res.data.length !== 0) {
            console.log(res.data);
            that.redata = res.data[0]; //总数据

            // 科目
            if (res.data[0].course !== "") {
              var a = res.data[0].course;
              a = a.replace(/。/g, "");
              let b = new Array();
              b = a.split("，");
              that.course = b;
              that.courseShow = true;
            } else {
              that.courseShow = false;
            }

            // 详情
            if (
              res.data[0].prevention !== "[防治方法] null" &&
              res.data[0].prevention !== ""
            ) {
              let Adata = that.redata.prevention;
              var a = Adata.replace(/]/g, "：");
              let Bdata = new Array();
              Bdata = a.split("[");
              that.courseData = Bdata;
              that.isShow = true;
            } else {
              that.isShow = false;
            }

            // 收藏
            that.store = res.data[0].store;
          } else {
            that.isShow = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //从识别后传来的参数
    recognitionData() {
      var that = this;
      var data = JSON.parse(localStorage.getItem("axiosData")); //数据
      that.redata = data; //总数据
      // 科目
      if (data.course !== "" && data.course !== undefined) {
        var a = data.course;
        a = a.replace(/。/g, "");
        let b = new Array();
        b = a.split("，");
        that.course = b;
        that.courseShow = true;
      } else {
        that.courseShow = false;
      }

      // 详情
      if (data.prevention !== "[防治方法] null" && data.prevention !== "") {
        let Adata = data.prevention;
        var a = Adata.replace(/]/g, "：");
        let Bdata = new Array();
        Bdata = a.split("[");
        that.courseData = Bdata;
        that.isShow = true;
      } else {
        that.isShow = false;
      }

      // 收藏
      that.store = data.store;
    },

    // 收藏
    // 交流点赞
    collect() {
      var that = this;
      var isClick = that.isClick;
      var form = new FormData();
      form.append("id", that.id);
      form.append("ret", "add");
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/user_collect",
            data: form,
          })
          .then((res) => {
            if (res.data.code == "200") {
              this.$message({
                type: "success",
                message: "收藏成功!",
                duration: 1500,
              });
              that.detailsData();
            } else {
              this.$notify.error({
                title: "错误",
                message: "点赞出错了！！",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },
    // 交流取消点赞
    noCollect() {
      var that = this;
      var isClick = that.isClick;
      var form = new FormData();
      form.append("id", that.id);
      form.append("ret", "move");
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/user_collect",
            data: form,
          })
          .then((res) => {
            if (res.data.code == "200") {
              that.$message({
                type: "success",
                message: "取消收藏成功！",
                duration: 1500,
              });
              that.detailsData();
            } else {
              that.$notify.error({
                title: "错误",
                message: "取消收藏出错了！！",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },

    //判断当前是从百科、识别后、识别记录、收藏、地图进入的
    judgeData() {
      var that = this;
      var req = that.req;
      if (req == "0") {
        //百科0
        that.detailsData(); //详情数据接口
        console.log("百科");
        that.imgShow = true;
        that.addrShow = false;
      } else if (req == "1") {
        //地图1
        that.mapShowData();
        console.log("地图");
        that.imgShow = false;
        that.addrShow = true;
      } else if (req == "2") {
        //收藏2
        that.detailsData(); //详情数据接口
        console.log("收藏");
        that.imgShow = true;
        that.addrShow = false;
      } else if (req == "3") {
        //识别记录3
        that.imgShow = false;
        that.ret = that.$route.query.ret;
        console.log(that.$route.query.ret);
        that.addrShow = false;
        that.discernRecordData();
        console.log("识别记录");
      } else if (req == "4") {
        //识别后
        that.imgShow = false;
        that.addrShow = false;
        that.recognitionData();
        console.log("识别后");
      }
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.id = _this.$route.query.id;
    _this.req = _this.$route.query.req; //判断是哪个页面进入的 百科 0 地图1 收藏2  识别记录3  识别后4

    _this.get_boderHeight();
    _this.judgeData();
  },
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/record.scss";
</style>