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

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

    const reload = () => {
        getCmsArticle(Number(params.id)).then(data => {
            if (data) {
                setItem(data)
            }
        })
    }

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

    return (
        <div style={{
            background: 'linear-gradient(to bottom, #F63D3D, #C01717)',
            minHeight: '100vh'
        }}>
            <div className={'p-4'}>
                <div
                    className={'relative'}
                    style={{
                        background: 'url(https://oss.wsdns.cn/20250708/d7a8aad52f6048e5adce13ef0ea86216.png)',
                        backgroundSize: '100%',
                        backgroundRepeat: 'no-repeat',
                        width: '100%',
                        height: '70px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}
                >
                    {/* 标题 */}
                    <div
                        className={'absolute z-50 text-sm text-center text-[#F2FE03] font-bold leading-tight px-1'}
                    >
                        {item?.title}
                    </div>
                </div>
            </div>
            <View className={'content text-[#F2FE03] text-sm'}>
                <RichText
                    nodes={item?.content || '暂无内容'}
                    space="nbsp"
                />
            </View>
        </div>
    )
}

export default Detail
