<!-- 答案内容预览 -->
<template>
  <vue-markdown :source="content" v-highlight class="markdown-body">
  </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'],
  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: {

  },
  methods: {
    isSuccess () {
      this.$nextTick(() => {
        const anchorTags = Object.values(this.$el.getElementsByTagName('a'));
        this.preview(anchorTags)
      })
    },
    preview (anchorTags) {
      let that = this
      // 遍历并输出链接的 href 属性

      anchorTags.forEach((aTag) => {
        let tagUrl = aTag.getAttribute('href')
        let isFile = ['pdf', 'jpg', 'gif', 'jpeg', 'png', 'docx', 'doc', 'xlsx', 'xls', 'mp4', 'webm', 'ogg', 'ogv', 'txt'].indexOf(tagUrl.split('.').pop().toLowerCase()) !== -1
        let isFile2 = ['html', 'md', 'json', 'jsonl', 'csv', 'pdf', 'png', 'jpg', 'jpeg', 'bmp', 'eml', 'msg', 'epub', 'xlsx', 'xlsd', 'ipynb', 'odt', 'py', 'rst', 'rtf', 'srt', 'toml', 'tsv', 'docx', 'doc', 'xml', 'ppt', 'pptx', 'txt', 'htm']
        if (isFile2) { // 判断知识库以及文件对话 的文件类型，并添加dom以及样式
          this.setDescribeStyle(aTag)
        }
        aTag.addEventListener('click', function (event) {
          if (isFile) { // 判断可预览文件类型
            // 阻止默认点击事件
            event.preventDefault();
            that.$dialog.show('文件预览', filePreview, {
              area: ['100%', '100%']
            }, {url: tagUrl }).then(res => {

            }).catch(e => { });
          }
        });
      });
    },
    setDescribeStyle (aTag) {
      let describeDom = aTag.parentNode.nextElementSibling
      // 在当前元素前插入新的 HTML 内容
      describeDom.insertAdjacentHTML('beforebegin', `
      <button style="margin-bottom:10px" type="button" class="el-button el-button--primary el-button--mini is-round">
        <span style="margin-right:5px">详情</span>
        <i class="el-icon-arrow-down"></i>
      </button>
      `);

      describeDom.classList.add('describe-view')
      let height = describeDom.scrollHeight
      describeDom.setAttribute('style', 'height:0px;')
      describeDom.previousElementSibling.addEventListener('click', function (event) {
        if (height > 0 && (describeDom.style.height !== '0px' && describeDom.style.height !== '')) {
          describeDom.setAttribute('style', 'height:0px;')
        } else {
          describeDom.setAttribute('style', `height:${height}px;`)
        }
      })
    }

  }
}

</script>
<style scoped>
.markdown-body {
  background: none !important;
  font-size: 14px !important;
}
.markdown-body pre {
  background-color: #3b3d3f;
}
</style>
<style>
.describe-view {
  overflow: hidden;
  transition: 0.5s all;
  color: #000;
  font-size: 14px;
  background-color: #fff;
  border-radius: 10px;
  padding: 0 20px 0 20px;
}
</style>
