import {useEffect, useState} from "react";
import {pageCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import Taro from '@tarojs/taro'
import {useRouter} from '@tarojs/taro'
import {Image} from '@nutui/nutui-react-taro'
import {InfiniteLoading} from '@nutui/nutui-react-taro'
import {getCmsNavigation} from "@/api/cms/cmsNavigation";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";

/**
 * 文章终极列表
 * @constructor
 */
const List = () => {
    const {params} = useRouter();
    const [navigation, setNavigation] = useState<CmsNavigation>()
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore] = useState(true)
    const [list, setList] = useState<CmsArticle[]>([])

    const reload = async () => {
        // 获取栏目ID
        const categoryId = Number(params.id);
        // 当前栏目信息
        const navs = await getCmsNavigation(categoryId);
        // 终极新闻列表
        const articles = await pageCmsArticle({categoryId, page});

        // 当前栏目信息
        if (navs) {
            setNavigation(navs);
        }
        // 新闻列表
        if (articles) {
            if (articles?.list && articles?.list.length > 0) {
                const newList = list?.concat(articles.list)
                setList(newList);
                setHasMore(true)
            } else {
                setHasMore(false)
            }
        }
    }

    const reloadMore = async () => {
        setPage(page + 1)
        reload().then();
    }

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

    return (
        <InfiniteLoading
            className={'bg-red-200'}
            style={{height: '100vh'}}
            hasMore={hasMore}
            onLoadMore={reloadMore}
            loadingText={
                <>
                    加载中
                </>
            }
            loadMoreText={
                <>
                    没有更多了
                </>
            }>
            <div style={{padding: navigation?.span + 'px'}}>
                <Image
                    src={navigation?.style || ''}
                    style={{width: '100%', height: 'auto'}}
                    mode="widthFix"
                />
            </div>
            <div className={'p-3'}>
                <div
                    className={'relative'}
                    style={{
                        background: 'url(https://oss.wsdns.cn/20250708/d7a8aad52f6048e5adce13ef0ea86216.png)',
                        backgroundSize: '120%',
                        backgroundRepeat: 'no-repeat',
                        backgroundPosition: 'center',
                        borderRadius: '40px',
                        width: '100%',
                        height: '65px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}
                >
                    {/* 标题 */}
                    <div
                        className={'z-50 text-sm text-center text-[#F2FE03] font-bold leading-tight px-1'}
                    >
                        {navigation?.categoryName}
                    </div>
                </div>
            </div>
            <div className={'rounded-lg py-3 px-2'}>
                <div className={'grid grid-cols-1 gap-3'}>
                    {
                        // 终极文章列表
                        list.map((item, index) => {
                            return (
                                <div
                                    key={index}
                                    className={'flex items-center cursor-pointer'}
                                    style={{
                                        border: '3px solid #F2FE03',
                                        backgroundColor: '#C01717',
                                        color: '#F2FE03',
                                        borderRadius: '16px',
                                    }}
                                    onClick={() => Taro.navigateTo({url: `./detail?id=${item.articleId}`})}
                                >
                                    {
                                        // 图片容器
                                        item.image ? (
                                                <div className={'w-full m-3 flex justify-center'}
                                                     style={{
                                                         width: '108px',
                                                         height: '160px',
                                                     }}>
                                                    <Image className={'object-cover'} src={item.image}/>
                                                </div>
                                            ) :
                                            <div className={'px-2'}></div>
                                    }
                                    {/* 标题 */}
                                    <div className={'flex flex-col items-start my-3 text-sm leading-tight'} style={{
                                        color: '#F2FE03'
                                    }}>
                                        <p className={'font-bold py-1'}>{item.title}</p>
                                        <p className={'text-xs line-clamp-6'} style={{
                                            overflow: 'hidden',
                                            width: item.image ? '240px' : '100%',
                                        }}>
                                            {item.comments || '暂无'}
                                        </p>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </InfiniteLoading>
    )
}
export default List