<template>
  <div class="imageText ql-container ql-snow">
    <div class="ql-editor" v-html="menuInfo" @click="getpreview($event)"></div>
    <span v-if="showImg">
      <div v-for="(item, index) in imageArr" :key="index" :data-index="item" v-show="false" ref="showImg">
        <img v-photoswipe="{ group: 'imageText' }" :src="item"/>
      </div>
    </span>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
  name: 'menu-imageText',
  props: {
    menuInfo: {}
  },
  data() {
    return {
      showImg: false
    }
  },
  mounted() {
    this.showImg = true
  },
  computed: {
    imageArr() {
      if (!this.menuInfo) return
      const getImgList = []
      this.menuInfo.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
        getImgList.push(capture)
      })
      return getImgList
    }
  },
  methods: {
    getpreview(e) {
      if (e.target.tagName === 'IMG') {
        this.$refs.showImg.forEach(item => {
          if (item.firstChild ? item.firstChild.src === e.target.src : false) {
            item.firstChild.click()
          }
        })
      }
    }
  }
};
</script>
<style lang="less" scoped>
.imageText {
  height: 100%;
  overflow: auto;
  ::v-deep img {
    max-width: 100%;
  }
}
.ql-container.ql-snow {
  border: 0;
}
</style>
