import React, {PureComponent} from 'react'
import './DocPage.css'

export default class DocPage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>'
        };
    }

    componentDidUpdate(prevProps) {
        // 当 URL 中的 page 参数变化时重新加载
        if (this.props.match.params.page !== prevProps.match.params.page) {
            this.componentDidMount();
        }
    }

    componentDidMount() {
        // 从 URL 参数获取 page（如 /docs/page1 → page="page1"）
        let {page} = ((this.props.match || {}).params) || {};
        if (!page) {
            page = "readme";
        }

        // 动态拼接文件路径（假设 .md 文件放在 public/docs 目录）
        const mdFilePath = `${page}.md`; // 注意：生产环境建议用绝对路径
        fetch(mdFilePath)
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            })
            .catch(error => {
                console.error('加载 Markdown 文件失败:', error);
                this.setState({htmlString: '<h3>加载失败，请检查文件路径</h3>'});
            });
    }

    render() {
        return (
            <div className={"doc_wrapper"}>
                <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
            </div>
        )
    }
}