<style>
.investigationYouDetail .item {
  display: -webkit-box;
  margin-bottom: 10px;
}
.investigationYouDetail ._lable {
  width: 80px;
  color: #989898;
  background: rgba(149, 186, 255, 1);
  border-radius: 10px;
  color: #2c5cb7;
  display: inline-block;
  text-align: center;
  margin-right: 10px;
}
.investigationYouDetail ._content {
  /* flex: 2; */
  max-width: 340px;
}
.investigationYouDetail .img-box {
  margin-top: 10px;
}
.investigationYouDetail .img-box .el-col-8 {
  height: 140px;
  margin-bottom: 15px;
  overflow: hidden;
}
.investigationYouDetail .img-box img {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
<template>
  <div class="investigationYouDetail">
    <div v-for="(item, index) in details.GuestTravelLableList" :key="index" class="item">
      <div class="_lable" v-if="item.Name">{{item.Name}}：</div>
      <div :class="{_content: item.Name}">{{item.Content}}</div>
    </div>
    <el-row class="img-box" :gutter="15">
      <el-col :span="8" v-for="(item, index) in details.NotesPics" :key="index">
        <img :src="item"  @click="showImg(item)" alt>
      </el-col>
    </el-row>
    <viewer :images="images" :options="imageOptions" @inited="inited" class="viewer" ref="viewer">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </div>
</template>
<script>
export default {
  props: ["ID"],
  data() {
    return {
      details: {},
      imageOptions: {
        navbar: false,
        title: false
      },
      images: []
    };
  },watch: {
    ID: {
      handler: function(val, oldVal) {
        if (val !== oldVal){
          this.getDetails()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getDetails();
  },
  methods: {
    inited(viewer) {
      this.$viewer = viewer;
    },
    showImg(obj) {
      let isExsit = false;
      this.images.forEach(x => {
        if (x == obj) isExsit = true;
      });
      if (!isExsit) {
        this.images.push(obj);
      } else {
        this.$viewer.view(this.images.indexOf(obj));
      }
      this.$viewer.show();
    },
    getDetails: function() { 
      this.apipost(
        "survey_post_GetGuestTravelNotes",
        { Id: this.ID },
        res => {
          if (res.data.resultCode === 1) {
            this.details = res.data.data;
          }
        },
        null
      );
    }
  }
};
</script>