<template>
  <div
      ref="imgShowPrev"
      class="img-show-prev">
    <img
        @mouseenter="handlerMouseEnter"
        @mouseleave="handlerMouseLeave"
        ref="prevImg"
        :style="{
          'transform':'rotate('+rotate+'deg) scale('+scale+')',
          'width':width+'px',
          'height':height+'px',
        }"
        src="/images/img12.png"
        alt=""
    />
    <div class="img-close" @click="handlerCloseImage">
      <img src="/images/img24.png" alt="">
    </div>
    <div class="img-show-control">
      <i class="el-icon-zoom-in" @click="handlerScaleMax()"></i>
      <i class="el-icon-zoom-out" @click="handlerScaleMin()"></i>
      <i class="el-icon-refresh-right" @click="handlerRotateR()"></i>
      <i class="el-icon-refresh-left" @click="handlerRotateL()"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "ImagePrevShow",
  props: ['czt_image_list', 'index'],
  data() {
    return {
      rotate: 0,
      width: null,
      scale: 1,
      height: null,
    }
  },
  mounted() {
    window.vue = this
    this.width = this.$refs.imgShowPrev.offsetWidth
    console.log(this.czt_image_list)
  },

  methods: {
    handlerCloseImage() {
      this.$emit('close')
    },
    handlerScaleMax() {
      this.scale += 0.1
    },
    handlerScaleMin() {
      if (this.scale <= 0.5) return
      this.scale -= 0.1
    },
    handlerRotateR() {
      this.rotate += 90
    },
    handlerRotateL() {
      this.rotate -= 90
    },
    handlerMouseEnter(e) {

    },
    handlerMouseLeave(e) {
      console.log(e)
    },
  }
}
</script>

<style scoped>

.img-show-prev {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  overflow: scroll;
  display: flex;
  align-items: center;
  align-content: center;
}

.img-show-prev .img-show-control {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%);
  width: 300px;
  height: 50px;
  padding: 0 20px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-around;
}

.img-show-prev .img-show-control i {
  font-size: 28px;
  cursor: pointer;
}

.img-show-prev .img-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  cursor: pointer;
  opacity: 0.8;
}

.img-show-prev .img-close:hover {
  opacity: 1;
}

.img-show-prev .img-close img {
  width: 100%;
  height: 100%;
}
</style>