<template>
  <transition name="viewer-fade">
    <div ref="el-image-viewer__wrapper" tabindex="-1" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
      <div class="el-image-viewer__mask" :class="imgShow ? '' : 'el-pdf-viewer__mask'" />
      <!-- CLOSE -->
      <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
        <i class="el-icon-circle-close" />
      </span>
      <!-- ARROW -->
      <template v-if="!isSingle">
        <span
          class="el-image-viewer__btn el-image-viewer__prev"
          :class="{ 'is-disabled': !infinite && isFirst }"
          @click="prev"
        >
          <i class="el-icon-arrow-left" />
        </span>
        <span
          class="el-image-viewer__btn el-image-viewer__next"
          :class="{ 'is-disabled': !infinite && isLast }"
          @click="next"
        >
          <i class="el-icon-arrow-right" />
        </span>
      </template>
      <!-- ACTIONS -->
      <div v-if="imgShow" class="el-image-viewer__btn el-image-viewer__actions">
        <div class="el-image-viewer__actions__inner">
          <i class="el-icon-zoom-out" @click="handleActions('zoomOut')" />
          <i class="el-icon-zoom-in" @click="handleActions('zoomIn')" />
          <i class="el-image-viewer__actions__divider" />
          <i :class="mode.icon" @click="toggleMode" />
          <i class="el-image-viewer__actions__divider" />
          <i title="打印" class="el-icon-printer" @click="handlePrinter" />
          <i class="el-image-viewer__actions__divider" />
          <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')" />
          <i class="el-icon-refresh-right" @click="handleActions('clocelise')" />
        </div>
      </div>
      <!-- CANVAS -->
      <div v-if="imgShow" class="el-image-viewer__canvas">
        <div v-for="(url, i) in urlList" :key="i">
          <img
            v-if="i === index"
            id="img"
            ref="img"
            :key="i"
            class="el-image-viewer__img"
            :src="currentImg"
            :style="imgStyle"
            @load="handleImgLoad"
            @error="handleImgError"
            @mousedown="handleMouseDown"
          >
        </div>
      </div>
      <div v-if="!imgShow" class="el-image-viewer__canvas">
        <iframe id="iframeref" :src="currentImg" frameborder="0" width="100%" height="100%" />
      </div>
      <canvas id="test" />
    </div>
  </transition>
</template>

<script>
import { on, off } from 'element-ui/src/utils/dom'
import { rafThrottle, isFirefox } from 'element-ui/src/utils/util'
const Mode = {
  CONTAIN: {
    name: 'contain',
    icon: 'el-icon-full-screen'
  },
  ORIGINAL: {
    name: 'original',
    icon: 'el-icon-c-scale-to-original'
  }
}

const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
export default {
  name: 'ElImageViewer',
  components: { },

  props: {
    urlList: {
      type: [Array, String],
      default: () => []
    },
    zIndex: {
      type: Number,
      default: 3000
    },
    onSwitch: {
      type: Function,
      default: () => {}
    },
    onClose: {
      type: Function,
      default: () => {}
    },
    initialIndex: {
      type: Number,
      default: 0
    },
    watermark: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      imgUrl: '',
      index: this.initialIndex,
      isShow: false,
      infinite: true,
      loading: false,
      imgShow: true,
      mode: Mode.CONTAIN,
      transform: {
        scale: 1,
        deg: 0,
        offsetX: 0,
        offsetY: 0,
        enableTransition: false
      }
    }
  },
  computed: {
    isSingle() {
      return this.urlList?.length <= 1
    },
    isFirst() {
      return this.index === 0
    },
    isLast() {
      return this.index === this.urlList?.length - 1
    },
    currentImg() {
      const fileUrl = (typeof this.urlList[this.index] === 'object') ? this.urlList[this.index]?.url : this.urlList
      return fileUrl
      /* if (this.urlList[this.index]?.name.includes('pdf')) {
        // return './pdfjs/web/viewer.html?file=' + fileUrl + '&keyword=' + encodeURIComponent(this.watermark)
        return '/graduate/api/graduateInfo/showFile?id=' + fileUrl
      } else {
        return fileUrl
      }*/
    },
    imgStyle() {
      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform
      const style = {
        transform: `scale(${scale}) rotate(${deg}deg)`,
        transition: enableTransition ? 'transform .3s' : '',
        'margin-left': `${offsetX}px`,
        'margin-top': `${offsetY}px`
      }
      if (this.mode === Mode.CONTAIN) {
        style.maxWidth = '100%'
        style.maxHeight = '100%'
      }
      return style
    }
  },
  watch: {
    index: {
      handler: function(val) {
        this.reset()
        this.onSwitch(val)
      }
    },
    currentImg: {
      handler(val) {
        this.imgShow = this.urlList[this.index].indexOf('pdf') === -1
      },
      immediate: true
    }
  },
  mounted() {
    this.deviceSupportInstall()
    // add tabindex then wrapper can be focusable via Javascript
    // focus wrapper so arrow key can't cause inner scroll behavior underneath
    this.$refs['el-image-viewer__wrapper'].focus()
  },
  methods: {
    hide() {
      this.deviceSupportUninstall()
      this.onClose()
    },
    deviceSupportInstall() {
      this._keyDownHandler = rafThrottle(e => {
        const keyCode = e.keyCode
        switch (keyCode) {
          // ESC
          case 27:
            this.hide()
            break
            // SPACE
          case 32:
            this.toggleMode()
            break
            // LEFT_ARROW
          case 37:
            this.prev()
            break
            // UP_ARROW
          case 38:
            this.handleActions('zoomIn')
            break
            // RIGHT_ARROW
          case 39:
            this.next()
            break
            // DOWN_ARROW
          case 40:
            this.handleActions('zoomOut')
            break
        }
      })
      this._mouseWheelHandler = rafThrottle(e => {
        const delta = e.wheelDelta ? e.wheelDelta : -e.detail
        if (delta > 0) {
          this.handleActions('zoomIn', {
            zoomRate: 0.015,
            enableTransition: false
          })
        } else {
          this.handleActions('zoomOut', {
            zoomRate: 0.015,
            enableTransition: false
          })
        }
      })
      on(document, 'keydown', this._keyDownHandler)
      on(document, mousewheelEventName, this._mouseWheelHandler)
    },
    deviceSupportUninstall() {
      off(document, 'keydown', this._keyDownHandler)
      off(document, mousewheelEventName, this._mouseWheelHandler)
      this._keyDownHandler = null
      this._mouseWheelHandler = null
    },
    handleImgLoad(e) {
      this.loading = false
    },
    handleImgError(e) {
      this.loading = false
      e.target.alt = '加载失败'
    },
    handleMouseDown(e) {
      if (this.loading || e.button !== 0) return

      const { offsetX, offsetY } = this.transform
      const startX = e.pageX
      const startY = e.pageY
      this._dragHandler = rafThrottle(ev => {
        this.transform.offsetX = offsetX + ev.pageX - startX
        this.transform.offsetY = offsetY + ev.pageY - startY
      })
      on(document, 'mousemove', this._dragHandler)
      on(document, 'mouseup', ev => {
        off(document, 'mousemove', this._dragHandler)
      })

      e.preventDefault()
    },
    reset() {
      this.transform = {
        scale: 1,
        deg: 0,
        offsetX: 0,
        offsetY: 0,
        enableTransition: false
      }
    },
    toggleMode() {
      if (this.loading) return

      const modeNames = Object.keys(Mode)
      const modeValues = Object.values(Mode)
      const index = modeValues.indexOf(this.mode)
      const nextIndex = (index + 1) % modeNames.length
      this.mode = Mode[modeNames[nextIndex]]
      this.reset()
    },
    prev() {
      if (this.isFirst && !this.infinite) return
      const len = this.urlList.length
      this.index = (this.index - 1 + len) % len
    },
    next() {
      if (this.isLast && !this.infinite) return
      const len = this.urlList.length
      this.index = (this.index + 1) % len
    },
    handleActions(action, options = {}) {
      if (this.loading) return
      const { zoomRate, rotateDeg, enableTransition } = {
        zoomRate: 0.2,
        rotateDeg: 90,
        enableTransition: true,
        ...options
      }
      const { transform } = this
      switch (action) {
        case 'zoomOut':
          if (transform.scale > 0.2) {
            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3))
          }
          break
        case 'zoomIn':
          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3))
          break
        case 'clocelise':
          transform.deg += rotateDeg
          break
        case 'anticlocelise':
          transform.deg -= rotateDeg
          break
      }
      transform.enableTransition = enableTransition
    },
    handlePrinter() {
      const img = document.getElementById('img')

      img.style.maxHeight = 'none'
      img.style.maxWidth = 'none'

      let imgData = null
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')
      const w = img.width
      const h = img.height

      canvas.width = w
      canvas.height = h
      context.drawImage(img, 0, 0)
      imgData = context.getImageData(0, 0, w, h)
      context.putImageData(imgData, 0, 0)
      const newBase64 = canvas.toDataURL('image/png')
      // 打印
      this.$refs['img-printer'].handlePrinterImg(newBase64)

      img.style.maxHeight = '100%'
      img.style.maxWidth = '100%'
    }
  }
}
</script>

<style scoped lang="scss">
.el-image-viewer__actions__inner {
  i:hover {
    cursor: pointer;
  }
}
.el-pdf-viewer__mask {
  pointer-events: none;
  background-color: unset;
}

#img {
}

</style>
