<template>
  <div class="rlPopup">
    <div class="prev handle-btn" v-if="!isSingle" @click="prev()">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div class="next handle-btn" v-if="!isSingle" @click="next()">
      <i class="el-icon-arrow-right"></i>
    </div>
    <div class="img-list-wrap">
      <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: 563px;">
        </photo-zoom>
      </div>
    </div>
    <!--缩略图-->
    <div class="thumb-wrap">
      <div class="thumb-wrap-button">
        <el-button type="primary" @click="clickImage">（放大） 显示（缩小）</el-button>
        <el-upload class="fileUpdate" action="" :show-file-list="false" multiple :auto-upload="false"
          :on-change="handleChange" accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :before-upload="beforeUpload">
          <el-button icon="el-icon-upload" type="primary">上传</el-button>
        </el-upload>
        <el-button type="primary" icon="el-icon-delete-solid" @click="handleDelete">删除</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/photo-zoom'
import { sjClmxUpload, sjClmxDelete } from '@/api/jsydsyqFlow'
import publicPicture from '@/components/publicPicture/index.vue'
export default {
  name: 'PreviewImage',
  props: {
    previewImg: {
      type: Object,
      default: () => { }
    }
  },
  components: {
    PhotoZoom,
    publicPicture
  },
  data () {
    return {
      transform: {
        scale: 1,
        degree: 0
      },
      // 缩略图
      thumbnailImages: [],
      showViewer: false,
      initialIndex: undefined,
      allLi: [],
    }
  },
  watch: {
    previewImg: {
      handler (newValue, oldValue) {
        this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fjurl)
        this.thumbnailImages = newValue.imgList
      },
      deep: true
    }
  },
  created () {
    this.allLi = _.cloneDeep(this.previewImg.imgList).map(item => item.fjurl)
    this.thumbnailImages = this.previewImg.imgList
  },
  computed: {
    isSingle () {
      return this.previewImg.imgList.length <= 1
    },
    isFirst () {
      return this.previewImg.index === 0
    },
    isLast () {
      return this.previewImg.index === this.previewImg.imgList.length - 1
    }
  },
  methods: {
    prev () {
      if (this.isFirst) {
        if (this.previewImg.selectedIndex - 1 >= 0) {
          this.$parent.previewImg.index = 1
        }
        return
      }
      const len = this.previewImg.imgList.length
      this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
      this.reset()
    },
    next () {
      if (this.isLast) {
        if (this.previewImg.selectedIndex + 1 < this.previewImg.attachmentList.length) {
          this.$parent.previewImg.index = 0
        }
        return
      }
      const len = this.previewImg.imgList.length
      this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
      this.reset()
    },
    reset () {
      this.transform = {
        scale: 1,
        degree: 0
      }
    },
    showCurrent (index) {
      this.previewImg.index = index
    },
    closeViewer () {
      this.showViewer = false
    },
    clickImage () {
      this.showViewer = true
    },
    // 上传
    beforeUpload (file) {
      const isJPEG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isJPG = file.type === 'image/jpg'
      const isGIF = file.type === 'image/gif'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPEG && !isGIF && !isPNG && !isJPG && !isGIF) {
        this.$message.error('请选择jpeg/png/jpg/bmp/gif格式的图片后重试')
        this.loading = false
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
        this.loading = false
      }
      this.imgHidden = (isJPG || isJPEG || isPNG || isGIF) && isLt5M
      return this.imgHidden
    },
    async handleChange (file) {
      let data = _.cloneDeep(this.previewImg.imgList[this.previewImg.index])
      var formdata = new FormData();
      formdata.append("file", file.raw);
      formdata.append("bsmSj", this.previewImg.bsmSj);
      formdata.append("bsmSlsq", this.previewImg.bsmSlsq);
      sjClmxUpload(formdata).then((res) => {
        if (res.code == 200) {
          this.$emit('updateList', res.result)
          this.$message({
            message: '上传成功!',
            type: 'success'
          })
        }
      })
    },
    handleDelete () {
      let that = this
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let bsmClmx = this.previewImg.imgList[this.previewImg.index].bsmClmx
        sjClmxDelete(bsmClmx).then(res => {
          if (res.code == 200) {
            that.$emit('updateList', res.result)
            that.$message({
              message: '删除成功!',
              type: 'success'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</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: rgb(198, 198, 198);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;

    i {
      font-size: 24px;
    }
  }

  .prev {
    left: 0%;
  }

  .next {
    right: 0%;
  }

  .img-list-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    height: calc(100% - 80px);
    align-items: center;
    background: rgba(194, 190, 190, 0.1);
    overflow: scroll;
    img {
      display: block;
      object-fit: scale-down;
      transition: all 0.3s;
      max-width: 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>