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 Index = () => {
    const {params} = useRouter();
    const [navigation, setNavigation] = useState<CmsNavigation>()
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore] = useState(true)
    const [list, setList] = useState<CmsArticle[]>([])

    const categoryId = Number(params.id);

    const reload = async () => {
        console.log('初始化加载 - 分类ID:', categoryId);
        // 重置状态
        setPage(1);
        setList([]);
        setHasMore(true);

        // 当前栏目信息
        const navs = await getCmsNavigation(categoryId);
        if (navs) {
            setNavigation(navs);
        }

        // 加载第一页数据
        getList(1);
    }

    // 终极新闻列表
    const getList = (currentPage = page) => {
        console.log('请求数据 - 页码:', currentPage, '分类ID:', categoryId);
        pageCmsArticle({categoryId, page: currentPage}).then(res => {
            console.log('获取到数据:', res);
            if (res?.list && res?.list.length > 0) {
                if (currentPage === 1) {
                    // 第一页，直接设置
                    setList(res.list);
                } else {
                    // 后续页面，追加到现有列表
                    setList(prevList => {
                        const newList = [...prevList, ...res.list];
                        console.log('合并后的列表长度:', newList.length);
                        return newList;
                    });
                }
                setHasMore(true);
            } else {
                console.log('没有更多数据了');
                setHasMore(false);
            }
        }).catch(error => {
            console.error('获取数据失败:', error);
            setHasMore(false);
        });
    }

    const reloadMore = async () => {
        const nextPage = page + 1;
        console.log('加载更多 - 下一页:', nextPage);
        setPage(nextPage);
        getList(nextPage);
    }

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

    return (
        <InfiniteLoading
            className={'bg-red-200 h-full'}
            hasMore={hasMore}
            onLoadMore={reloadMore}
            loadingText={
                <>
                    加载中
                </>
            }
            loadMoreText={
                <>
                    没有更多了
                </>
            }>
            <div style={{padding: navigation?.span + 'px'}}>
                <Image src={navigation?.style} width={'100%'}
                       height={'auto'}/>
            </div>
            <div className={'rounded-lg py-3 px-2'}>
                <div className={'grid grid-cols-1 gap-3'}>
                    {
                        // 终极文章列表
                        list.map((item, index) => {
                            return (
                                <div
                                    key={item.articleId || `article-${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}`})}
                                >
                                    {/* 图片容器 */}
                                    <div className={'w-full m-3 flex justify-center'}
                                         style={{
                                             width: '108px',
                                             height: '160px',
                                         }}>
                                        <img
                                            className={'object-cover'}
                                            src={item.image}
                                            alt={item.title || ''}
                                        />
                                    </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={{
                                            width: '240px',
                                            overflow: 'hidden',
                                        }}>
                                            {item.comments || '暂无'}
                                        </p>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </InfiniteLoading>
    )
}
export default Index
