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,InfiniteLoading} from '@nutui/nutui-react-taro'
import {getCmsNavigation, pageCmsNavigation} from "@/api/cms/cmsNavigation";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";

/**
 * 文章终极列表
 * @constructor
 */
const Index = () => {
    const {params} = useRouter();
    const [navigation, setNavigation] = useState<CmsNavigation>()
    const [childCategory, setChildCategory] = useState<CmsNavigation[]>([])
    const [list, setList] = useState<CmsArticle[]>([])

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

        // 当前栏目信息
        if (navs) {
            setNavigation(navs);
        }
        // 获取子级栏目
        if (childCateogry) {
            setChildCategory(childCateogry.list)
        }
        // 新闻列表
        if (articles) {
            setList(articles?.list || [])
        }
    }

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

    return (
        <InfiniteLoading className={'bg-red-200 h-full'}>
            <div style={{padding: navigation?.span + 'px'}}>
                <Image src={navigation?.style} width={'100%'}
                       height={'auto'}/>
            </div>
            <div className={'py-3 px-3'}>
                {
                    // 子级栏目
                    childCategory && childCategory.map((item, index) => {
                        return (
                            <div
                                key={index}
                                className={'relative'}
                                style={{
                                    background: 'url(https://oss.wsdns.cn/20250706/4dd93518d88f4b4a9028a769ad010295.png)',
                                    backgroundSize: '100%',
                                    backgroundRepeat: 'no-repeat',
                                    margin: '10px 0',
                                    width: '100%',
                                    height: '66px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}
                                onClick={() => Taro.navigateTo({url: `./list?id=${item.navigationId}`})}
                            >
                                {/* 标题 */}
                                <div
                                    className={'absolute z-50 text-sm text-center text-[#F2FE03] font-bold leading-tight px-1'}
                                    style={{
                                        backgroundImage: `url(https://oss.wsdns.cn/20250706/4dd93518d88f4b4a9028a769ad010295.png})`,
                                        width: '100%',
                                        height: 'auto'
                                    }}>
                                    {item.title}
                                </div>
                            </div>
                        )
                    })
                }
                {
                    // 终极文章列表
                    list.map((item, index) => {
                        return (
                            <div
                                key={index}
                                className={'relative'}
                                style={{
                                    background: 'url(https://oss.wsdns.cn/20250706/4dd93518d88f4b4a9028a769ad010295.png)',
                                    backgroundSize: '100%',
                                    backgroundRepeat: 'no-repeat',
                                    margin: '10px 0',
                                    width: '100%',
                                    height: '66px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}
                                onClick={() => Taro.navigateTo({url: `./detail?id=${item.articleId}`})}
                            >
                                {/* 标题 */}
                                <div
                                    className={'absolute z-50 text-sm text-center text-[#F2FE03] font-bold leading-tight px-1'}
                                    style={{
                                        backgroundImage: `url(https://oss.wsdns.cn/20250706/4dd93518d88f4b4a9028a769ad010295.png})`,
                                        width: '100%',
                                        height: 'auto'
                                    }}>
                                    {item.title}
                                </div>
                            </div>
                        )
                    })
                }
            </div>

        </InfiniteLoading>
    )
}
export default Index
