<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-12-15 14:42:16
-->
<template>
  <div class="rlPopup">
    <div class="prev handle-btn" v-if="!isScan" @click="prev()">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div class="next handle-btn" v-if="!isScan" @click="next()">
      <i class="el-icon-arrow-right"></i>
    </div>
    <div class="img-list-wrap" v-Loading="loading">
      <div v-for="(img, i) in previewImg.imgList" :key="i">
        <photo-zoom :url="img.fjurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
          overlayStyle="width: 100%;height:100%">
        </photo-zoom>
      </div>
    </div>
    <!--缩略图-->
    <div class="thumb-wrap">
      <div class="thumb-wrap-button">
        <el-button type="primary" @click="clickImage" v-if="previewImg.imgList.length>0">（放大） 显示（缩小）</el-button>
      </div>
      <ul>
        <li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active: previewImg.index === index }"
          @click="showCurrent(index)">
          <img :src="img.fjurl">
        </li>
      </ul>
    </div>
    <!-- 点开后的视图 -->
    <publicPicture v-if="showViewer" :url-list="allLi" :initialIndex="initialIndex" @close-viewer="closeViewer">
    </publicPicture>
  </div>
</template>
<script>
  import PhotoZoom from '@/components/PhotoZoom'
  import publicPicture from '@/components/publicPicture/index.vue'
  export default {
    name: 'PreviewImage',
    props: {
      previewImg: {
        type: Object,
        default: () => { }
      },
      ableOperation: {
        type: Boolean,
        default: true
      }
    },
    components: {
      PhotoZoom,
      publicPicture
    },
    data () {
      return {
        loading: false,
        key: 0,
        isScan: false,
        transform: {
          scale: 1,
          degree: 0
        },
        maxFileLength: 0,
        // 缩略图
        thumbnailImages: [],
        showViewer: false,
        initialIndex: 0,
        allLi: [],
      }
    },
    watch: {
      previewImg: {
        handler (newValue, oldValue) {
          if (newValue.imgList && newValue.imgList.length > 0) {
            this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fjurl)
            this.thumbnailImages = newValue.imgList
          } else {
            this.allLi = []
            this.thumbnailImages = []
          }
        },
        deep: true,
        immediate: true
      }
    },
    created () {
      this.maxLength = 0;
      this.allLi = _.cloneDeep(this.previewImg.imgList).map(item => item.fjurl)
      this.thumbnailImages = this.previewImg.imgList
    },
    computed: {
      isFirst () {
        return this.previewImg.index === 0
      },
      isLast () {
        return this.previewImg.index === this.previewImg.imgList.length - 1
      }
    },
    methods: {
      prev () {
        let len = this.previewImg.imgList.length
        if (this.isFirst || len == 0) {
          this.$emit('prevPriview')
        } else {
          this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
        }
      },
      /**
       * @description: next
       * @author: renchao
       */
      next () {
        let len = this.previewImg.imgList.length
        if (this.isLast || len == 0) {
          this.$emit('nextPriview')
        } else {
          this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
        }
      },
      /**
       * @description: showCurrent
       * @param {*} index
       * @author: renchao
       */
      showCurrent (index) {
        this.previewImg.index = index
        this.initialIndex = index
      },
      /**
       * @description: closeViewer
       * @author: renchao
       */
      closeViewer () {
        this.showViewer = false
      },
      /**
       * @description: clickImage
       * @author: renchao
       */
      clickImage () {
        this.showViewer = true
      }
    }
  }
</script>
<style lang="scss" scoped>
  // 查看大图
  .rlPopup {
    position: relative;
    width: 100%;
    text-align: center;
    height: 100%;

    .handle-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-100%);
      width: 66px;
      height: 66px;
      line-height: 75px;
      color: #fff;
      background-color: #ccc;
      border-radius: 50%;
      cursor: pointer;
      text-align: center;
      transition: all 0.3s;

      i {
        font-size: 24px;
      }
    }

    .handle-btn:hover {
      background-color: rgb(185, 183, 183);
    }

    .prev {
      left: 1%;
    }

    .next {
      right: 5%;
    }

    .img-list-wrap {
      width: calc(100% - 30px);
      display: flex;
      justify-content: center;
      height: calc(100% - 150px);
      align-items: center;
      background: rgba(194, 190, 190, 0.1);
      overflow: scroll;

      img {
        display: block;
        object-fit: scale-down;
        transition: all 0.3s;
        width: 100%;
        height: 100%;
      }
    }

    .thumb-wrap {
      &-button {
        display: flex;
        justify-content: center;

        .fileUpdate {
          margin: 0 10px;
        }
      }

      li {
        float: left;
        width: 60px;
        height: 45px;
        border: solid 1px #ececec;
        position: relative;
        margin-right: 5px;
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }

        img {
          max-width: 57px;
          max-height: 42px;
          display: block;
          object-fit: scale-down;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .active {
        border-color: #409eff;
      }
    }
  }
</style>
<style>
  .zoom-on-hover {
    position: relative;
    overflow: hidden;
  }

  .zoom-on-hover .normal {
    width: 100%;
  }

  .zoom-on-hover .zoom {
    position: absolute;
    opacity: 0;
    transform-origin: top left;
  }

  .zoom-on-hover.zoomed .zoom {
    opacity: 1;
  }

  .zoom-on-hover.zoomed .normal {
    opacity: 0;
  }
</style>