<template>
  <div>
    <ul class="img-list">
      <li class="img-item" v-for="(item, index) of list" :key="index">
        <img :src="item.src" alt="picture" class="img" @click="show(index)" />
      </li>
    </ul>
    <div v-transfer-dom>
      <previewer :list="list" ref="previewer"></previewer>
    </div>
  </div>
</template>

<script>
import { Previewer, TransferDom } from 'vux'
export default {
    name: 'PreviewImage',
    props: {
        list: {
            type: Array,
            default: () => [],
            required: true
        }
    },
    directives: {
        TransferDom
    },
    components: {
        Previewer
    },
    data () {
        return {
            options: {
                getThumbBoundsFn (index) {
                    // find thumbnail element
                    let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
                    // get window scroll Y
                    let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                    // optionally get horizontal scroll
                    // get position of element relative to viewport
                    let rect = thumbnail.getBoundingClientRect()
                    // w = width
                    return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }
                    // Good guide on how to get element coordinates:
                    // http://javascript.info/tutorial/coordinates
                }
            }
        }
    },
    methods: {
        show (index) {
            this.$refs.previewer.show(index)
        }
    }
}
</script>

<style lang="stylus" scoped>
.img-list
  display flex
  flex-wrap wrap
  .img-item
    flex 0 0 33.33333%
    padding 0 8px 8px 0
    height 80px
    display flex
    justify-content center
    align-items center
    // overflow hidden
    .img
      max-width 100%
      max-height 70px
      cursor pointer
</style>
