<template>
  <div class="ShowPicture">
    <div class="label">报修图片</div>
    <div class="imgs-container" v-if="repairImgs.length">
      <img :src="img.previewUrl" v-for="(img, index) in repairImgs" :key="index" class="imgs" @click="showImgs(repairImgs)" />
    </div>
    <div class="label">处理图片</div>
    <div class="imgs-container" v-if="handlerImgs.length">
      <img :src="img.previewUrl" v-for="(img, index) in handlerImgs" :key="index" class="imgs" @click="showImgs(handlerImgs)" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShowPicture',
  data(){
    return {
      repairImgs: [], //报修图片
      handlerImgs: [], //处理图片
    }
  },
  props:['processInstanceId', 'wxIncidentId'],
  methods:{
    // 获取报修图片
    getRepairImgs() {
      var that = this;
      that.$http
        .get(
          "service/common/common/listAttachment/wechatRequesterIncident/" +
            that.wxIncidentId,
          {}
        )
        .then(function (res) {
          console.log(res.data);
          res.data.data = res.data.data || [];
          res.data.data.forEach(v => {
            v.previewUrl = location.origin + "/file" + v.relativeFilePath;
          })
          that.repairImgs = res.data.data;
        });
    },
    // 获取处理图片
    getHandlerImgs() {
      var that = this;
      that.$http
        .get(
          "service/common/common/listAttachment/incident/" +
            that.processInstanceId,
          {}
        )
        .then(function (res) {
          console.log(res.data);
          res.data.data = res.data.data || [];
          res.data.data.forEach(v => {
            v.previewUrl = location.origin + "/file" + v.relativeFilePath;
          })
          that.handlerImgs = res.data.data;
        });
    },
    //展示图片
    showImgs(imgs){
      this.$createImagePreview({
        imgs:imgs.map(v=>v.previewUrl)
      }).show()
    },
  },
  created(){
    this.wxIncidentId && this.getRepairImgs();
    this.processInstanceId && this.getHandlerImgs();
  }
}
</script>

<style lang="less" scoped>
.ShowPicture{
  .label {
    background-color: #eeeeee;
    height: 0.6rem;
    line-height: 0.58rem;
    padding-left: 0.2rem;
    font-size: 0.24rem;
    color: #666666;
    span {
      font-size: 0.2rem;
      display: inline-block;
      margin-left: 0.08rem;
      color: #999999;
    }
    &.formLabel {
      background-color: #fff;
    }
  }

  .imgs-container {
    display: flex;
    flex-wrap: wrap;
    img {
      width: 1.5rem;
      height: 1.5rem;
      margin: 1%;
      border: 1px dotted #ccc;
    }
  }
}
</style>
