<template>
    <div style="width: 100vw !important; overflow: hidden">
    <div class="column items-center justify-center">
      <q-img width="100%" height="100%" :src="images[currentIndex]" :img-style="{'transform':scaleString+' '+rotateString}" spinner-color="primary" spinner-size="30px" fit="none" />
      <div class="img-preview-tools-box" style="box-shadow: none !important">
        <div class="img-preview-tools" style="box-shadow: none !important">
          <div class="row items-center" style="box-shadow: none !important">
            <q-icon name="first_page" size="28px" color="grey-2" class="q-mr-md cursor-pointer"  v-ripple @click="changeImageIndexHandler(-1)"/>
            <q-icon name="last_page" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="changeImageIndexHandler(1)"/>
            <q-icon name="rotate_right" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="rotateHandler(1)"/>
            <q-icon name="rotate_left" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="rotateHandler(-1)"/>
            <q-icon name="crop_free" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(0)"/>
            <q-icon name="zoom_out" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(-1)"/>
            <q-icon name="zoom_in" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(1)"/>
            <q-icon name="close" size="28px" color="grey-2" class="cursor-pointer" v-ripple v-close-popup/>
          </div>
        </div>
    </div>
    </div>
    
    </div>
  </template>
  
  <script>
  export default {
    props: ['current', 'images'],
    data() {
    return {
        currentIndex: 0,
        scale:1,
        scaleString:'scale(1)',
        rotate:0,
        rotateString:'rotate(0deg)'
    }
    },
    watch:{
        current:(n,o)=>{
            this.current = n
            this.images = this.images
            this.currentIndex=this.images.indexOf(this.current)
            this.currentIndex = this.currentIndex==-1?0:this.currentIndex
        }
    },
    mounted() {
        this.currentIndex=this.images.indexOf(this.current)
        this.currentIndex = this.currentIndex==-1?0:this.currentIndex
    },
    methods: {
      
        zoomHandler(num){
          if(num==0){
            this.scale=1
          }
          if(this.scale<3 && num>0){
            this.scale+=0.25
          }
          if(this.scale>0.25 && num<0){
            this.scale-=0.25
          }
          this.scaleString=`scale(${this.scale})`
        },
        rotateHandler(num){
          if(num==0){
            this.rotate=0
          }
          if(num>0){
            this.rotate+=90
          }
          if(num<0){
            this.rotate-=90
          }
          this.rotateString=`rotate(${this.rotate}deg)`
        },
        changeImageIndexHandler(num){
            this.scale=1
            this.scaleString=`scale(${this.scale})`
            this.rotate=0
            this.rotateString=`rotate(${this.rotate}deg)`
            let i = this.currentIndex
            i+=num
            i = i<0?this.images.length-1:i
            i = i==this.images.length?0:i
            this.currentIndex = i
        }
    }
  }
  </script>
  
  <style>
  .img-preview-tools-box {
    position: fixed;
    z-index: 999999;
    bottom: 100px;
  }
  .img-preview-tools-box .img-preview-tools {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 48px;
    padding: 10px 20px;
    display: inline-block;
  }
  </style>
  
  