<template>
  <div class="img-show-mask" ref="imgShowMask" v-show="maskBtn" @click.stop="closeBigImg">
    <el-carousel
      trigger="click"
      :initial-index="initIndex"
      :autoplay="false">
      <el-carousel-item v-for="item in previewList" :key="item.index">
        <img :src="item.img" class="bigImg" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  props: ['previewList'],
  data() {
    return {
      maskBtn: false,
      initIndex: 0
    }
  },
  watch: {
    initIndex(value) {
      console.log(value)
    }
  },
  methods: {
    bigImgShow: function() { // 打开图片预览
      var that = this
      setTimeout(function() {
        that.maskBtn = true
        that.$nextTick(function() {
          const imgShowMask = that.$refs.imgShowMask
          const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
          imgShowMask.style.height = scrollHeight + 'px'
        })
      }, 100)
    },
    closeBigImg: function() { // 关闭图片预览
      this.maskBtn = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  
.img-show-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, .5);
  .el-carousel{
    position: static;
  }
  .el-carousel__container{
    position: static;
    width: 100%;
    height: auto;
  }
  .el-carousel__item.is-animating{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}
.img-show-mask .bigImg {
  z-index: 3100;
  max-width: 800px;
  max-height: 600px;
  cursor: -webkit-zoom-out;
}
</style>
