<!-- 答案内容预览 -->
<template>
  <vue-markdown :source="content" v-highlight  class="markdown-body" :id="'myContainer'+index" >
    </vue-markdown>
</template>

<script>

import hljs from 'highlight.js' // 代码块高亮
// import 'highlight.js/styles/github.css' // 代码块高亮样式
import 'github-markdown-css' // 整体 markdown 样式
import VueMarkdown from 'vue-markdown'
import filePreview from './filePreview'
export default {
  data () {
    return {
      result: undefined
    };
  },
  props: ['content', 'index', 'isSuccess'],
  components: {VueMarkdown},

  computed: {},

  directives: {
    highlight: {
    // 指令的定义
      inserted: function (el) {
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block, index) => {
        /** 代码高亮 */
          hljs.highlightBlock(block);
          /** 手动添加一个hljs类名，防止不支持的语言背景变空白 */
          block.classList.add('hljs');
        })
      }
    }
  },
  mounted () {

  },
  watch: {
    'isSuccess' () {
      if (this.isSuccess) {
        let that = this
        const anchorTags = document.querySelectorAll(`#myContainer${this.index} a`);
        // 遍历并输出链接的 href 属性
        anchorTags.forEach((aTag) => {
          aTag.addEventListener('click', function (event) {
            let tagUrl = aTag.getAttribute('href')
            let url;
            // alert(aTag.getAttribute('href'))
            if (['pdf', 'jpg', 'gif', 'jpeg', 'png', 'docx', 'doc', 'xlsx', 'xls', 'mp4', 'webm', 'ogg', 'ogv'].indexOf(tagUrl.split('.').pop().toLowerCase()) !== -1) {
              // 阻止默认点击事件
              event.preventDefault();
     
              if (tagUrl.indexOf('https') !== -1) {
                url = tagUrl.replace(/^https:\/\/[^/]+\//, `https://${window.location.hostname}:${window.location.port}/`);
              } else {
                url = tagUrl.replace(/^http:\/\/[^/]+\//, `http://${window.location.hostname}:${window.location.port}/`);
              }
              that.$dialog.show('文件预览', filePreview, {
                area: ['100%', '100%']
              }, {url}).then(res => {
        
              }).catch(e => { });
            }
          });
        });
      }
    }

  },
  methods: {

  }
}

</script>
<style scoped>
.markdown-body{
    background: none !important;
    font-size: 14px !important;
}
.markdown-body pre{
    background-color: #3b3d3f;
}
</style>
