<template>
  <div class="uif-preview">
    <div class="uif-preview-table">
      <div class="uif-preview-cell" @click.self="onClose">
        <img class="uif-preview-image" ref="image" :src="image" alt="image" @click="onChange(current + 1)">
      </div>
    </div>
    <u-icon class="uif-preview-close" type="x-img" @click="onClose"></u-icon>
    <template v-if="data.length > 1">
      <u-icon class="uif-preview-prev" type="chevron-left-img" @click="onChange(current - 1)"></u-icon>
      <u-icon class="uif-preview-next" type="chevron-right-img" @click="onChange(current + 1)"></u-icon>
    </template>
  </div>
</template>
<script>
import { addScrollEffect, removeScrollEffect } from '@uif/hq/src/utils/scrollbar'
import UIcon from '@uif/hq/src/components/icon'

export default {
  name: 'u-preview',
  components: {UIcon},
  props: {
    index: {
      type: Number,
      default: 0
    },
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      current: this.index
    }
  },
  mounted () {
    addScrollEffect()
  },
  beforeDestroy () {
    removeScrollEffect()
  },
  computed: {
    image () {
      return this.data[this.current]
    }
  },
  methods: {
    onClose () {
      this.$root.destroy()
    },
    onChange (index) {
      this.current = (index + this.data.length) % this.data.length
    }
  }
}
</script>
