<!--  -->
<template>
  <div class="superviseLogDetails_box">
    <el-card :style="'height:' + fullHeight + 'px'" v-loading="loading">
      <el-row>
        <!-- 监督信息 -->
        <el-col :span="24">
          <div class="list_box">
            <div class="list_tlt">
              <span>监督信息</span>
            </div>

            <ul class="list_ul">
              <li class="list_li">
                <div class="list_div">
                  <span class="list_div_tlt">监测人员：</span>
                  <span class="list_div_val">{{
                    superviseList.owner_user
                  }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">监督时间：</span>
                  <span class="list_div_val">{{
                    superviseList.monitor_time
                  }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">提交时间：</span>
                  <span class="list_div_val">{{
                    superviseList.create_time
                  }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">天气：</span>
                  <span class="list_div_val">{{ superviseList.weather }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">监测地点：</span>
                  <span class="list_div_val">{{ superviseList.address }}</span>
                </div>
              </li>
            </ul>
          </div>
        </el-col>

        <!-- 监测内容 -->
        <el-col :span="24">
          <div class="list_box">
            <div class="list_tlt">监测内容</div>
            <ul class="list_table_ul">
              <li class="list_li">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="title" label="事项"></el-table-column>
                  <el-table-column
                    prop="message"
                    label="内容"
                  ></el-table-column>
                  <el-table-column prop="img_list" label="图像信息">
                    <template slot-scope="scope">
                      <span
                        class="span_img"
                        v-if="scope.row.img_list.length !== 0"
                      >
                        <img
                          :src="item"
                          alt=""
                          v-for="item in scope.row.img_list"
                          :key="item"
                        />
                      </span>
                      <span v-else>暂无图像信息</span>
                    </template>
                  </el-table-column>
                </el-table>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight - 116, //

      // 监督信息
      superviseList: {},
      // 监测内容
      tableData: [],
      loading: 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;
        })();
      };
    },

    // 详情界面数据
    detailsData() {
      console.log(this.$route.query.id);
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.monitor_log_info",
        data: this.qs.stringify({
          record_id: this.$route.query.id
        })
      })
        .then(res => {
          if (res.data.data.total_item !== 0) {
            var data = res.data.data;
            this.superviseList = data.monitor_info; // 监督信息
            var list = [];
            data.page_list.forEach(item => {
              item.img_list = JSON.parse(item.img_list);
              list.push(item);
            });
            this.tableData = list; // 监测内容
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loading = true;
    this.get_boderHeight(); // 动态获取浏览器高度
    this.detailsData(); // 详情界面数据
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.superviseLogDetails_box {
  // 监督信息
  .list_box {
    margin: 0 0 20px 0;
    .list_tlt {
      display: flex;
      justify-content: space-between;
      width: 95%;
      margin: 0 auto;
      font-size: 20px;
    }

    .list_ul {
      margin: 20px 0 0 0;
      padding: 20px 40px 20px 40px;
      background: #f6f8fa;
      .list_li {
        display: flex;
        flex-wrap: wrap;
        .list_div {
          margin: 0 0 25px 0;
          width: 33%;
          font-size: 14px;
          color: #333333;
          .list_div_tlt {
            text-align: right;
            width: 78px;
            display: inline-block;
          }
        }
      }
    }

    // 监测内容
    .list_table_ul {
      margin: 20px 0 0 0;
      padding: 20px 40px 20px 40px;
      .list_li {
        display: flex;
        flex-wrap: wrap;
        .list_div {
          margin: 0 0 25px 0;
          width: 33%;
          font-size: 14px;
          color: #333333;
        }
      }
    }
  }

  /deep/.el-card {
    overflow: hidden;
    overflow-y: auto;
  }
}
</style>
