<template>
  <div class="imageText ql-snow">
    <div class="ql-editor" v-html="menuInfo"></div>
  </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: 'pc-menu-imageText',
  data() {
    return {
      menuInfo: ''
    }
  },
   props: {
    menuId: {}
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
    }),
  },
  mounted() {
     this.getImagetext()
  },
  methods: {
     async getImagetext() {
      const id = this.channelInfo.id
      const menuId = this.menuId
      const res = await getImagetext({ id, menuId });
      this.menuInfo = res.data.menuInfo
    },
  }
};
</script>
<style lang="less" scoped>
.imageText {
  height: 100%;
  overflow: auto;
  ::v-deep img {
    max-width: 100%;
  }
}
.ql-container.ql-snow {
  border: 0;
}
</style>
