<template>
    <div  class="markdown-container help">
        <vue-markdown :source="markdownContent" :options="markdownOptions"></vue-markdown>
    </div>
</template>

<script>
import VueMarkdown from 'vue-markdown-render'; // 注意这里的导入路径可能因库版本而异
import {fs} from "@tauri-apps/api";

// 导入一个 highlight.js 的主题样式，例如 dracula
// 你需要安装 highlight.js：npm install highlight.js
// import 'highlight.js/styles/dracula.css'; // 你可以选择其他主题样式
export default {
  name: 'MarkdownViewerComponent',
  components: {
    VueMarkdown
  },
  data() {
    return {
      title: 'Vue 中展示 Markdown (使用组件)',
      markdownContent: "",
      markdownOptions: {
        gfm: true, // 启用 GitHub Flavored Markdown
        breaks: true, // 将单个换行符渲染为 <br>
        // highlight 选项用于代码块高亮
        highlight: function(code, lang) {
          const language = hljs.getLanguage(lang) ? lang : 'plaintext';
          return hljs.highlight(code, { language }).value;
        }
      }
    };
  },
    mounted() {
        this.loadMarkdownContent();
    },
    methods: {
        async loadMarkdownContent() {
            try {
                // 确保文件路径正确，Tauri 应用中文件路径需要注意
                // 如果 updatelog.md 在应用的资源目录，可能需要使用 fs.appDataDir() 或 fs.resourceDir()
                // 这里假设它在应用启动的当前工作目录或通过bundle访问
                var configdata = await fs.readTextFile("updatelog.md");
                this.markdownContent = configdata;
            } catch (error) {
                console.error("Error reading markdown file:", error);
                this.markdownContent = "无法加载更新日志。";
            }
        }
    }
};

</script>

<style scoped>
.help {
    padding: 20px;
    font-family: Arial, sans-serif;
}

/* 针对 markdown-container 增加滚动条和高度限制 */
.markdown-container {
    /* 设置最大高度，例如：视口高度减去顶部或其他元素的高度 */
    /* 你可以根据实际布局调整这个值，例如固定的 500px */
    max-height: calc(100vh - 250px); /* 假设留出 150px 给其他内容或边距 */
    overflow-y: auto; /* 当内容超出最大高度时显示垂直滚动条 */
    /* 可以添加一些内边距，让滚动条不紧贴内容 */
    padding-right: 15px; /* 为滚动条留出空间，避免内容被遮挡 */
    box-sizing: border-box; /* 确保 padding 包含在 max-height 内 */
}


.help h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.help p {
    font-size: 16px;
}

/* 如果需要，可以进一步美化滚动条 */
/* 适用于 WebKit 浏览器 (Chrome, Safari, Edge) */
.markdown-container::-webkit-scrollbar {
  width: 8px;
   
}

.markdown-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.markdown-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.markdown-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
