import {useEffect, useState} from 'react'
import {useRouter} from '@tarojs/taro'
import {Divider} from '@nutui/nutui-react-taro'
import {CmsArticle} from "@/api/cms/cmsArticle/model"
// 显示html富文本
import {View, RichText} from '@tarojs/components'
import {getCmsNavigation} from "@/api/cms/cmsNavigation";

function Detail() {
    const {params} = useRouter();
    // 文章详情
    const [item, setItem] = useState<CmsArticle>()
    // 正文
    const [content, setContent] = useState<string>('')

    const reload = async () => {
        const nav = await getCmsNavigation(Number(params.id));
        if(nav){
            setItem(nav)
        }
        if(nav.design?.content){
            setContent(nav.design?.content)
        }
    }

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

    return (
        <div className="mobile-container">
            <div className={'bg-white'}>
                <div className={'p-3 font-bold text-lg'}>{item?.title}</div>
                <Divider/>
                <View className={'content text-gray-700 text-sm'}>
                    <RichText
                        nodes={content || '暂无内容'}
                        space="nbsp"
                    />
                </View>
            </div>
        </div>
    )
}

export default Detail
