<!-- 答案内容预览 -->
<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) => {
        console.log(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
        console.log(isFile);
        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'].indexOf(tagUrl.split('.').pop().toLowerCase()) !== -1
        if (isFile2 || aTag.id === 'show_detail') { // 判断知识库以及文件对话 的文件类型，并添加dom以及样式 ||  添加特殊a标签展示详情内容
          console.log(aTag);
          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.nextElementSibling
      // 在当前元素前插入新的 HTML 内容
      aTag.insertAdjacentHTML('afterend', `
      <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>
      `);
      // 获取当前元素的父元素
      var parentElement = aTag.parentNode;

      // 获取当前元素在父元素中的索引
      // var currentIndex = Array.from(parentElement.children).indexOf(aTag);
      // 获取当前元素的同级后面的所有内容（包括文本节点）
      var siblingNodesAfter = [];
      var twoSibling = aTag.nextElementSibling;
      var nextSibling = twoSibling.nextSibling;
  
      while (nextSibling) {
        if (nextSibling.nodeType === 1 || nextSibling.nodeType === 3) {
          // 添加元素节点和文本节点
          siblingNodesAfter.push(nextSibling);
        }
        nextSibling = nextSibling.nextSibling;
      }

      // 创建外层的 <div> 元素
      var wrapperDiv = document.createElement('div');
      wrapperDiv.classList.add('describe-view')

      // 将获取的同级元素放入外层的 <div>
      siblingNodesAfter.forEach(function (node) {
        wrapperDiv.appendChild(node);
      });
    
      parentElement.appendChild(wrapperDiv);
      // describeDom.classList.add('describe-view')
      let describeDom = aTag.nextElementSibling.nextElementSibling
      let height = describeDom.scrollHeight
      describeDom.setAttribute('style', 'height:0px;')
      twoSibling.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 !important;
  transition: 0.5s all;
  color: #000;
  font-size: 14px;
  background-color: #fff;
  border-radius: 10px;
  padding: 0 20px 0 20px;
}
</style>
