<template>
  <div>
    <div v-if="imageList.length > 0" class="preview-image">
      <span
        v-for="(item, index) in showImage"
        :key="index"
        style="margin-right: 10px"
        :style="imageStyle"
      >
        <el-image :style="imageStyle" :src="item" :preview-src-list="imageList">
          <div slot="error" class="image-slot">
            <img :style="imageStyle" :src="noImg" />
          </div>
        </el-image>
      </span>
      <span
        v-if="imageList.length > 3"
        class="total-image"
        style="
          width: 47px;
          height: 20px;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          line-height: 22px;
          color: #333333;
          opacity: 1;
          margin-left: -10px;
        "
      >
        共{{ imageList.length }}张
      </span>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'HtTemplatePreviewImage',
    props: ['value'],
    data() {
      return {
        imageList: [],
        showImage: [],
        noImg: require('@/assets/no-img.png'),
      }
    },
    computed: {
      imageStyle() {
        let style = { width: '48px', height: '48px' }
        if (this.imageList > 2) {
          style = { width: '36px', height: '36px' }
        }
        return style
      },
    },
    watch: {
      value() {
        this.loadImg()
      },
    },
    mounted() {
      this.loadImg()
    },
    methods: {
      loadImg() {
        this.imageList = []
        if (this.value) {
          let file = JSON.parse(this.value)
          for (let i = 0; i < file.length; i++) {
            let item = file[i]
            //本地上传的图片
            if (item && item.hasOwnProperty('response')) {
              if (item.response.fileId == undefined) {
                continue
              }
              let url =
                this.$requestConfig.portalUrl +
                '/system/file/v1/getImage?fileId=' +
                item.response.fileId

              this.imageList.push(url)
              if (i < 3) {
                this.showImage.push(url)
              }
            } else {
              //网络图片
              if (item && item.hasOwnProperty('url')) {
                this.imageList.push(item.url)
                if (i < 3) {
                  this.showImage.push(item.url)
                }
              }
            }
          }
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .preview-image {
  }
  .image-slot {
    width: 48px;
    height: 48px;
  }
  .total-image::before {
    content: '...';
  }
</style>
