import {useEffect, useState} from 'react'
import {useRouter} from '@tarojs/taro'
import {CmsArticle} from "@/api/cms/cmsArticle/model"
// import ReactMarkdown from 'react-markdown';
// 显示html富文本
import {View, RichText} from '@tarojs/components'
import './detail.scss'
import Line from "@/components/Gap";
import {wxParse} from "@/utils/common";
import {getCmsArticle} from "@/api/cms/cmsArticle";

function Detail() {
  const {params} = useRouter();
  // 文章详情
  const [item, setItem] = useState<CmsArticle>()
  const reload = () => {
    getCmsArticle(Number(params.id)).then(data => {
      if(data){
        data.content = wxParse(data.content)
        setItem(data)
      }
    })
  }

  useEffect(() => {
    reload();
  }, []);

  return (
    <div className={'bg-white'}>
      <div className={'p-4 font-bold text-lg'}>{item?.title}</div>
      <div className={'text-gray-400 text-sm px-4 '}>{item?.createTime}</div>
      <View className={'content text-gray-700 text-sm'}>
        {
          item?.editor === 1 ?
            <RichText nodes={item?.content} /> :
            null
        }
      </View>
      <Line height={44}/>
    </div>
  )
}

export default Detail
