<template>
  <div class="base-info" v-html="compiledMarkdown"></div>
</template>

<script>
import marked from 'marked'
export default {
  props: {
    activeItem: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      readmeInfo: '',
      compiledMarkdown: '',
    }
  },
  computed: {
    id() {
      return this.$route.query.template
    },
    version() {
      return this.$route.query.version
    },
  },
  watch: {
    activeItem: {
      handler: function(newValue) {
        this.readmeInfo = newValue.readmeInfo || ''
        var rendererMD = new marked.Renderer()
        marked.setOptions({
          renderer: rendererMD,
          gfm: true,
          tables: true,
          breaks: true,
          pedantic: false,
          sanitize: false,
          smartLists: true,
          smartypants: false,
        })
        this.compiledMarkdown = marked(this.readmeInfo, {sanitize: true})
        if (this.readmeInfo) {
          this.$nextTick(() => {
            this.dealLink()
          })
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    dealLink() {        //处理a标签情况，1、跳转到别的站点  2、当前页面锚点   3、不是站点又不是锚点，处理成文本形式
      let element = document.querySelectorAll('a')
      element.forEach((item, index) => {
        const href = item.getAttribute('href'),    //获取标签的href属性
          isInclude = href.includes('http'),      
          isHash = item.hash,
          noClick = !isInclude && !isHash         //特殊情况，不是站点又不是锚点的处理情况
        if (noClick) {
          item.style.color = 'rgba(0, 0, 0, 0.65)'
        }
        element[index].addEventListener('click', e => {
          this.stopDefault(e)
          if (noClick) {
            return false
          }
          if (isInclude) {
            window.open(href, '_blank')
          } else {
            this.anchorScroll(href)
          }
        })
      })
    },
    stopDefault(e) {
      if (e && e.preventDefault) {
        e.preventDefault()
      } else {
        window.event.returnValue = false
      }
    },
    anchorScroll(anchorName) {
      document.querySelector(anchorName).scrollIntoView(true)    //当hash值和锚点冲突之后，手动拿到锚点的位置进行滑动
    },
  },
}
</script>
<style lang="less" scoped>
.base-info {
  padding: 10px 24px;

  /deep/ * {
    white-space: normal;
  }
}
</style>