<template>
    <div id="FlashMan" ref="FlashMan" class="_FlashMan">
      <div class="_FlashMan_father" @click.stop="hideFlashMan">
        <div class="_FlashMan_item" ref="_FlashMan_item">
          <VueDraggableResizable v-if="itemH>10 && imgList.length" tabindex="0" :resizable='false' :active="false" :parent="false" :w="itemW" :h="itemH">
            <img :style="styleObj" @mousewheel="mousewheelE" :src="imgList[0]" alt="" @click.stop>
          </VueDraggableResizable>
        </div>
      </div>
    </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
  name: "FlashMan",
  props: ["imgList"],
  data() {
    return{
      scaleNum:1,
      styleObj: {
        transform: '',
      },
      itemH:1,
      itemW:1,
    }
  },
  components: {
    VueDraggableResizable,
  },
  created() {

  },
  mounted() {
    this.styleObj.transform = `scale(${this.scaleNum})`;
    this.itemH = this.$refs._FlashMan_item.offsetHeight;
    this.itemW = this.$refs._FlashMan_item.offsetWidth;
    this.$forceUpdate();
  },
  methods: {
    hideFlashMan: function () {
      this.$emit('hide', this.name, this.index1, this.index2)
    },
    mousewheelE: function (e) {
      if (e.wheelDelta>0) { //  放大
        if (this.scaleNum > 5) return;
        this.scaleNum = this.scaleNum + 0.1;
        this.styleObj.transform = `scale(${this.scaleNum})`
      }else {  // 缩小
        if (this.scaleNum <= 0.2) return;
        this.scaleNum = this.scaleNum - 0.1;
        this.styleObj.transform = `scale(${this.scaleNum})`
      }
    }
  }
}
</script>

<style scoped>
._FlashMan {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2018;
}
._FlashMan ._FlashMan_father{
  width: 80%;
  height: 100%;
  position: relative;
  padding: 10% 0;
  margin: 0 10%;
}
._FlashMan ._FlashMan_item{
  width: 100%;
  height: 70%;
  position: absolute;
  overflow: hidden;
}
._FlashMan ._FlashMan_item>div{
  display: flex;
  align-items: center;
  justify-content: center;
}
._FlashMan ._FlashMan_item>div img{
  cursor: move;
  transition: all linear .5s;
}
</style>
