import {useEffect, useState} from "react";
import {Image} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import {getCmsArticle} from "@/api/cms/cmsArticle";
import dayjs from "dayjs";
import './index.scss'

const ArticleDetail = () => {
  const [article, setArticle] = useState<CmsArticle | null>(null);
  const router = Taro.getCurrentInstance().router;
  const articleId = router?.params?.id;

  useEffect(() => {
    if (articleId) {
      getCmsArticle(Number(articleId)).then(res => {
        setArticle(res);
      }).catch(error => {
        console.error("Failed to fetch article detail:", error);
      });
    }
  }, [articleId]);

  if (!article) {
    return <div>加载中...</div>;
  }

  return (
    <div className={'article-detail-page'}>
      <div className={'article-header'}>
        <h1 className={'article-title'}>{article.title}</h1>
        <div className={'article-meta'}>
          <span>作者：{article.author}</span>
          <span>发布时间：{dayjs(article.createTime).format('YYYY-MM-DD HH:mm')}</span>
        </div>
      </div>
      <div className={'article-content'}>
        {article.image && <Image src={article.image} className={'article-main-image'} />}
        <div dangerouslySetInnerHTML={{ __html: article.content || '' }} />
      </div>
    </div>
  );
};

export default ArticleDetail;