<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 { getImagetext } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
  name: 'menu-imageText',
  data() {
    return {
      menuInfo: '',
      showImg: false
    }
  },
  props: {
    menuId: {}
  },
  mounted() {
    this.showImg = true
    this.getImagetext()
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
    }),
    imageArr() {
      if (!this.menuInfo) return
      const getImgList = []
      this.menuInfo.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
        getImgList.push(capture)
      })
      return getImgList
    }
  },
  methods: {
    async getImagetext() {
      const id = this.channelInfo.id
      const menuId = this.menuId
      const res = await getImagetext({ id, menuId })
      this.menuInfo = res.data.menuInfo
    },
    getpreview(e) {
      if (e.target.tagName === 'IMG') {
        setTimeout(() => {
        this.$refs.showImg.forEach(item => {
          if (item.firstChild ? item.firstChild.src === e.target.src : false) {
            item.firstChild.click()
          }
        })
      }, 100)
    }
    }
  }
};
</script>
<style lang="less" scoped>
.imageText {
  height: 100%;
  overflow: auto;
  ::v-deep img {
    max-width: 100%;
  }
  .ql-editor {
    background: rgba(255,255,255,.1);
    // color: var(--chatBox-text-color);
  }
}
.ql-container.ql-snow {
  border: 0;
}
</style>
