<template>
  <div @click="handleClick">
    <slot></slot>
  </div>
</template>

<script>
// @yunjidoc 功能组件 - 预览大图
import Vue from 'vue'
import Preview from '../../Preview'
export default {
  componentName: 'PreviewBox',
  props: {
    /**
     * @prop {Boolean} indicator 开启底部缩略图  默认: true
     */
    indicator: {
      type: Boolean,
      default: true
    }
    // only: {
    //   type: Boolean,
    //   default: false
    // }
  },
  methods: {
    handleClick(e) {
      const indicator = this.indicator
      if (/^img$/i.test(e.target.nodeName)) {
        e.preventDefault()
        e.stopPropagation()
        let list = []
        let index = 0

        Array.from(this.$el.querySelectorAll('img')).forEach((item, i) => {
          if (item === e.target) {
            index = i
          }
          list.push(item.getAttribute('data-src') || item.src)
        })
        let node = document.createElement('div')
        document.body.appendChild(node)
        new Vue({
          // eslint-disable-line
          el: node,
          components: {
            Preview
          },
          data: () => {
            return {
              visible: true,
              index: index,
              list: list
            }
          },
          mounted() {
            this.index = index
          },
          methods: {
            handleClose() {
              this.$destroy()
            }
          },
          render(h) {
            return h('Preview', {
              props: {
                visible: this.visible,
                index: this.index,
                list: this.list,
                indicator: this.indicator
              },
              on: {
                close: this.handleClose
              }
            })
            // return `<Preview visible=${this.visible} index=${this.index} onClose=${this.handleClose} list=${list} indicator=${indicator} />`
          }
        })
      }
    }
  }
}
</script>
