<template>
  <div style="width: 100vw !important; height: 100vh !important; overflow: hidden" 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" />
    <!-- <img :src="images[currentIndex]" class="drop-target" :style="{'transform':scaleString+' '+rotateString}"/> -->
  </div>
  <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/>
          <!-- crop_free rotate_right first_page  -->
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, watch, reactive } from 'vue'

export default defineComponent({
  props: ['current', 'images'],

  setup(props) {
    watch(
      () => props.current,
      (n, o) => {
        data.current = props.current
        data.images = props.images
        data.currentIndex=data.images.indexOf(data.current)
        data.currentIndex = data.currentIndex==-1?0:data.currentIndex
      }
    )

    const data = reactive({
      current: props.current,
      currentIndex: 0,
      images: props.images,
      scale:1,
      scaleString:'scale(1)',
      rotate:0,
      rotateString:'rotate(0deg)'
    })
    data.currentIndex=data.images.indexOf(data.current)
    data.currentIndex = data.currentIndex==-1?0:data.currentIndex
    const methods = {
      zoomHandler(num:number){
        if(num==0){
          data.scale=1
        }
        if(data.scale<3 && num>0){
          data.scale+=0.25
        }
        if(data.scale>0.25 && num<0){
          data.scale-=0.25
        }
        data.scaleString=`scale(${data.scale})`
      },
      rotateHandler(num:number){
        if(num==0){
          data.rotate=0
        }
        if(num>0){
          data.rotate+=90
        }
        if(num<0){
          data.rotate-=90
        }
        data.rotateString=`rotate(${data.rotate}deg)`
      },
      changeImageIndexHandler(num:number){
        data.scale=1
        data.scaleString=`scale(${data.scale})`
        data.rotate=0
        data.rotateString=`rotate(${data.rotate}deg)`
        let i = data.currentIndex
        i+=num
        i = i<0?data.images.length-1:i
        i = i==data.images.length?0:i
        data.currentIndex = i
      }
    }

    return {
      ...toRefs(data),
      ...methods
    }
  }
})
</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>

