<!--  -->
<template>
  <div
    class="schemeDetails_box"
    :style="'height:' + fullHeight + 'px'"
    v-loading="loading"
  >
    <!-- 头部 -->
    <div class="schemeDetails_headrBox">
      <div class="schemeDetails_divBox">
        <img
          src="../../assets/image/new/30.png"
          alt
          class="schemeDetails_headrBox-img"
          @click="goBack()"
        />
        <div class="schemeDetails_headrBox-tlt">详情</div>
      </div>
    </div>

    <!-- 昆虫病害名 -->
    <!-- <div class="schemeDetails_name">
      <div class="schemeDetails_name_text">{{ redata.name }}</div>
    </div> -->

    <!-- 后端传来的图片 -->

    <!-- 图片 -->
    <div class="schemeDetails_axios_div">
      <el-carousel trigger="click" height="6rem">
        <el-carousel-item v-for="item in redata.imgArr" :key="item">
          <img
            preview="1"
            v-lazy="'http://192.168.1.8:8002/' + item"
            alt
            class="schemeDetails_axios_img"
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 病虫害详情 -->
    <div class="details_box">
      <!-- 详情标题 -->
      <div class="details_tilte_box">
        <div class="details_tilte">
          <div class="details_tilte_text">{{ redata.title }}</div>
        </div>
      </div>

      <div class="address_box">
        <!-- 时间 -->
        <div class="addressA" v-time="redataA[0].newTime">
        </div>
      </div>

      <!-- 详情 -->
      <div class="detail_text_box">
        <div class="detail_text">
          {{ redata.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import "../../../static/js/time";
import "../../../static/js/time";

export default {
  name: "schemeDetails",
  components: {},
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      loading: true, //加载
      id: "", //id
      redata: [],
      redataA: [],
    };
  },
  //监听属性 类似于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() {
      var that = this;
      var req = that.$route.query.req;
      //   0是从首页来的，1是从方案列表来的
      if (req == "0") {
        that.$router.replace("/home");
      } else if (req == "1") {
        that.$router.replace("/scheme");
      }
    },

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

    // 请求数据接口数据
    schemeDetailsData() {
      var that = this;
      that
        .$axios({
          method: "get",
          url: "http://192.168.1.8:8002/save_news",
          params: {
            id: that.id,
          },
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          console.log(res.data)
          if (res.data.nums !== 0) {
            var arr = res.data.data[0];
            var d = new Date(arr.time);
            var r = d.getTime(d);
            var yourString = arr.img_urls;
            var result = yourString.split(",");
            arr["newTime"] = r;
            arr["imgArr"] = result;
            var a = [];
            a.push(arr);
            that.redata = a[0];
            that.redataA = a;
            that.loading = false;
          } else {
            console.log("暂无数据");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.id = _this.$route.query.id;
    _this.get_boderHeight();
    _this.schemeDetailsData();
  },
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";

//
.schemeDetails_box {
  background: #fafafa;
}

// 页面头部样式开始
// 头部
.schemeDetails_headrBox {
  background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
  position: fixed;
  width: 100%;
  z-index: 100;
}

.schemeDetails_divBox {
  display: flex;
  justify-content: space-between;
  width: 55%;
  margin: 0 0 0 0.5rem;
}

.schemeDetails_headrBox-tlt {
  text-align: center;
  font-size: 18px;
  color: #fff;
  padding: 8px 18px 8px 0;
}

.schemeDetails_headrBox-img {
  width: 0.5rem;
  height: 0.5rem;
  vertical-align: middle;
  margin-top: 0.3rem;
}

// 页面头部样式结束

// 昆虫病害名
.schemeDetails_box .schemeDetails_name {
  margin: 0.5rem 0 0 0;
}

.schemeDetails_box .schemeDetails_name_text {
  font-size: 22px;
}

// 后端传来的图片
.schemeDetails_box .schemeDetails_axios_div {
  width: 100%;
  height: 6.6rem;
  padding: 1rem 0 0 0;
}

.schemeDetails_box .schemeDetails_axios_img {
  width: 100%;
  height: 6.6rem;
}

// 没有图片
.schemeDetails_box .el-image__error {
  font-size: 25px;
}

// 病虫害详情
.schemeDetails_box .details_box {
  margin: 0.5rem 0 0 0;
}

// 详情标题
.schemeDetails_box .details_tilte_box {
  border: 1px solid #60d0a0;
  margin: 0 0 0.3rem 3.5rem;
  width: 3rem;
  height: 0.8rem;
  background: #60d0a0;
  border-radius: 15px;
}

.schemeDetails_box .details_tilte {
  border: 1px solid #fff;
  height: 0.6rem;
  width: 2.8rem;
  margin: 0.07rem auto;
  border-radius: 15px;
}

.schemeDetails_box .details_tilte_text {
  color: #fff;
  line-height: 0.6rem;
  font-size: 15px;
  font-weight: 800;
}

// 详情
.schemeDetails_box .detail_text_box {
  width: 90%;
  // margin: 0 auto;
  margin: 0 0 1rem 0.5rem;
}

.schemeDetails_box .detail_text {
  text-indent: 2em;
  text-align: left;
  font-size: 15px;
}

// 暂无数据
.cry_box {
  margin: 2.5rem 0 0 0;
}

.cry_img {
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
}

.cry_text {
  font-size: 20px;
  margin: 10% 0 0 0;
  color: #b9b9b9;
}

//地址
.address {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 0.2rem;
  color: #b9b9b9;
  text-align: right;
}

.address_img {
  width: 0.5rem;
  height: 0.5rem;
}

//时间
.addressA {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 0.2rem;
  color: #b9b9b9;
  text-align: right;
}

.address_imgA {
  width: 0.5rem;
  height: 0.5rem;
}
</style>