<template>
  <!-- style="height: calc(100vh - 140px);" -->
  <div class="app-container row-container">
    <div class="custom-main">
      <!-- <el-card class="box-card" @click="goToHtml">
        认证材料
      </el-card>
      <el-card class="box-card" @click="goToHtml">
        学籍表测试
      </el-card>
      <el-card class="box-card" @click="goToHtml">
        交接统计
      </el-card>
      <el-card class="box-card" @click="goToHtml">
        单个电子文件大小统计
      </el-card>
      <el-card class="box-card" @click="goToHtml">
        电子文件统计
      </el-card> -->
      <el-card class="box-card">
        <div @click="goToHtml">文书档案年度分类统计</div>
      </el-card>
      <el-card class="box-card">
        <div @click="goToHtml">文书档案年度保管期限统计</div>
      </el-card>

      <!-- <div v-katex:auto class="mdTextBox" v-html="renderMdText(markDownText)" /> -->

      <mavon-editor
        class="md"
        :value="markDownText"
        :subfield="false"
        :default-open="'preview'"
        :toolbars-flag="false"
        :editable="false"
        :scroll-style="true"
        :ishljs="true"
      />

    </div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it'
import MarkdownItHighlightjs from 'markdown-it-highlightjs'
import 'highlight.js/styles/a11y-dark.css'
import katex from 'katex'
import 'katex/dist/katex.min.css'

// import MarkdownItAbbr from 'markdown-it-abbr'
// import MarkdownItAnchor from 'markdown-it-anchor'
// import MarkdownItFootnote from 'markdown-it-footnote'
// import MarkdownItHighlightjs from 'markdown-it-highlightjs'
// import MarkdownItSub from 'markdown-it-sub'
// import MarkdownItSup from 'markdown-it-sup'
// import MarkdownItTasklists from 'markdown-it-task-lists'
// import MarkdownItTOC from 'markdown-it-toc-done-right'
// import 'highlight.js/styles/default.css'
import markdownText2 from '@/assets/test.md'

export default {
  name: 'CustomDefinedStatistics',
  components: { },
  data() {
    return {
      markdownText2: markdownText2,
      // 渲染的文本
      markDownText: `## 项目背景
> 描述项目或产品的现状，让项目成员了解当前存在的问题与痛点。
>

+ 痛点1...
+ 痛点2...
+ 痛点3...

## 项目目标
> 描述本项目期望达成的目标，目标需满足Smart原则：
>
> 1. 具体的（Specific）
> 2. 可以衡量的（Measurable）
> 3. 可以达到的（Attainable）
> 4. 要与其他目标具有一定的相关性（Relevant）
> 5. 有明确的截止期限（Time-bound）
>
## 关键事项
> 为达成上述目标，需要完成哪些关键事项。
>

+ 关键事项1...
+ 关键事项2...
+ 关键事项3...

## 里程碑
> 整个项目中，关键节点的里程碑计划。
>

![画板](http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280)

## 人员安排
> 输入项目的所有干系人，包括内部和外部干系人。
>

| **人员** | **岗位** |
| --- | --- |
| @<font style="color:#8C8C8C;background-color:#F5F5F5;">提及</font> | 项目经理 |
| @<font style="color:#8C8C8C;background-color:#F5F5F5;">提及</font> | 技术负责人 |
| @<font style="color:#8C8C8C;background-color:#F5F5F5;">提及</font> | 产品负责人 |


## 风险提示
> 对公司战略、项目结题、法务风险问题进行提示，并说明应对措施。
>
`,
      markdownRender: new MarkdownIt({
        html: true,
        linkify: true,
        typographer: true,
        xhtmlOut: false
      }).use(MarkdownItHighlightjs),
      // .use(MarkdownItAbbr)
      //   .use(MarkdownItAnchor)
      //   .use(MarkdownItFootnote)
      //   .use(MarkdownItHighlightjs)
      //   .use(MarkdownItSub)
      //   .use(MarkdownItSup)
      //   .use(MarkdownItTasklists)
      //   .use(MarkdownItTOC)

      markdownContent: ''
    }
  },
  updated() {
    const that = this
    this.$nextTick(() => {
      // 获取页面上的pre和code标签
      const codeBlocks = document.querySelectorAll('pre code')
      codeBlocks.forEach((block) => {
        let newDiv
        // 获取code标签
        const preElement = block
        // 获取code标签的父元素
        const parentElement = preElement.parentNode
        // 获取parentElement下的第一个div元素
        const firstDiv = parentElement.querySelector('div')
        // 检查是否找到了div元素
        if (!firstDiv) {
          // 创建一个div
          newDiv = document.createElement('div')
          // 给div添加文字内容
          newDiv.innerText = '复制代码'
          // 给div设置class样式
          newDiv.setAttribute('class', 'copyButton')
          // 把div插入到code标签前面
          parentElement.insertBefore(newDiv, preElement)
          // 给div添加点击事件
          newDiv.onclick = function() {
            const textArea = document.createElement('textarea')
            textArea.value = preElement.innerText
            document.body.appendChild(textArea)
            textArea.select()
            document.execCommand('copy')
            document.body.removeChild(textArea)
            that.$message.success('复制成功')
          }
        }
      })
    })
  },
  mounted() {
    // const md = new MarkdownIt()
    // console.log('md', md)
    // this.markdownContent = md.render(this.markdownText2)
    // console.log(' this.markdownContent', this.markdownContent)
  },
  methods: {
    // renderMdText(text) {
    //   // 生成html
    //   return this.markdownRender.render(text)
    // }
    renderMdText(text) {
    // markdown转html
      text = this.markdownRender.render(text)
      text = this.renderMath(text)
      // text = this.decodeHTMLEntities(text) // 手动解码 HTML 实体
      return text
    },
    // decodeHTMLEntities(text) {
    //   const parser = new DOMParser()
    //   const doc = parser.parseFromString(text, 'text/html')
    //   return doc.documentElement.textContent
    // },
    // markdown转latex
    renderMath(html) {
      // 匹配 $$...$$, \[...\], \(...\), and $...$
      const regex = /(\$\$([\s\S]+?)\$\$)|(\\\[([\s\S]+?)\\\])|(\\\(([\s\S]+?)\\\))|(\$([^\$]+?)\$)/g
      return html.replace(regex, (match, p1, p2, p3, p4, p5, p6, p7, p8) => {
        let latex
        if (p2) {
          // $$...$$
          latex = p2
        } else if (p4) {
          // \[...\]
          latex = p4
        } else if (p6) {
          // \(...\)
          latex = p6
        } else if (p8) {
          // $...$
          latex = p8
        }
        console.log('latex', latex)
        if (latex) {
          try {
            return katex.renderToString(latex, {
              throwOnError: false
            })
          } catch (e) {
            console.error('KaTeX rendering error:', e)
            return match
          }
        }
        return match
      })
    },
    goToHtml() {
      // 这里的 'test.html' 是你放在 public 目录下的 HTML 文件名称
      // window.location.href = 'report/annual.htm'
      window.open('report/annual.htm', '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-main{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  ::v-deep .el-card{
    margin: 0 20px 20px 0;
    width: calc(100% / 4 - 40px);
    height: 100px;
    line-height: 100px;
    text-align: center;
    cursor: pointer;
  }
}

// .mdTextBox{
  // width: 1400px;
  // ::v-deep h1{
  //   font-size: 24px;
  //   line-height: 48px;
  //   font-weight: 800;
  // }
  // ::v-deep h2{
  //   font-size: 22px;
  //   line-height: 42px;
  //   font-weight: 700;
  // }
  // ::v-deep h3{
  //   font-size: 20px;
  //   line-height: 36px;
  //   font-weight: 600;
  // }
  // ::v-deep img{
  //   width: 500px;
  // }
  // ::v-deep a{
  //   color: #335fee;
  //   line-height: 20px;
  //   }
  //   ::v-deep p  {
  //     line-height: 20px;
  //   }
// }
</style>
