<!--  -->
<template>
  <div class="addData_details_box" :style="'height:' + fullHeight + 'px'" v-loading="loading">
    <!-- 头部 -->
    <div class="addData_details_head">
      <div class="addData_details_head_returnA" @click="FanHui()">
        <img src="../../assets/image/left.png" alt class="addData_details_head_returnA_img" />
      </div>

      <!-- 轮播 -->
      <div class="block">
        <el-carousel trigger="click" height="6rem">
          <el-carousel-item v-for="item in imageData" :key="item">
            <img
              preview="1"
              @click="imgShow(item)"
              v-lazy=" 'bigservers/' + item"
              alt
              class="lunboImg"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 轮播 -->
    </div>

    <!-- 主内容 -->
    <div class="addData_details_main">
      <!-- 详情基础数据 -->
      <div class="main_basisData">
        <!-- 类型标识和描述 -->
        <div class="addData_details_TAGBox" v-show="subjectShow">
          <span class="addData_details_TAGText">科目： {{ this.redata.sort }}</span>
          <div class="addData_details_NameBox_time">{{ this.redata.time }}</div>
        </div>

        <!-- 地址 -->
        <div class="addData_details_address">
          <img src="../../assets/image/ding.png" alt class="addData_details_address_img" />
          <span class="addData_details_address_addr">{{ this.redata.addr }}</span>
        </div>
        <!-- 地址 -->

        <!-- 线 -->
        <div class="main_basisData_wire"></div>
        <!-- 线 -->
      </div>

      <!-- 详情基础数据 -->

      <!-- 详情列表 -->
      <div class="main_leave">
        <!-- 标题 -->
        <div class="main_leave_title_box">
          <div class="main_leave_title">{{ this.redata.name }}</div>
        </div>

        <!-- 留言 -->
        <div class="reply">
          <div class="addData_details_li">{{ this.redata.problem }}</div>
        </div>
      </div>
      <!-- 详情列表 -->
    </div>
    <!-- 主内容 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'addData_details ',
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      redata: [], //页面基础数据
      imageData: [], //轮播数据
      //查看大图
      amplificationShow: false, //查看大图
      imgList: "",
      subjectShow: false, //测试闪现代码问题
      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;
        })();
      };
    },

    //返回home页面
    FanHui() {
      this.$router.replace("/home");
      localStorage.removeItem("manualEnteringID");
    },

    //详情数据
    ajaxData() {
      let _this = this;
      let postData = _this.$qs.parse({
        id: localStorage.getItem("manualEnteringID")
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/see_disease",
          data: postData
        })
        .then(res => {
          _this.redata = res.data[0];
          _this.imageData = res.data[0].img;
          _this.subjectShow = true;
          _this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },

    //一级评论回复事件
    reply(e, name, ids) {
      // console.log(name);
      this.iptShow = true; //显示input
      this.$nextTick(() => {
        this.$refs.Iptid.focus();
      });
      this.textIpt = "回复" + name + "：";
      this.replyTAG = "one";
      // console.log(ids);
      localStorage.setItem("fieldDetails_replyId", ids);
    },

    //点击轮播图片进行放大
    imgShow(img) {
      this.amplificationShow = true;
      this.imgList = img;
      // console.log(img)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.ajaxData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight();
  }
};
</script>
<style>
[v-cloak] {
  display: none !important;
}
</style>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/addData_details.scss";
//@import url(); 引入公共css类
</style>

