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 {getCmsNavigation} from "@/api/cms/cmsNavigation";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";

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

    const reload = async () => {
        const categoryId = Number(params.id);
        const nav = await getCmsNavigation(categoryId);
        const articles = await pageCmsArticle({categoryId});

        if(nav){
            setNavigation(nav);
        }
        if(articles){
            setList(articles?.list)
        }
    }

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

    return (
        <div className="mobile-container">
            <Image
                src={navigation?.style}
                style={{width: '100%', height: 'auto'}}
                mode="widthFix"
            />
            <div className={'bg-white rounded-lg py-3 px-2'}>
                {/* 宫格布局容器 */}
                <div className={'grid grid-cols-3'}>
                    {
                        list.map((item, index) => {
                            return (
                                <div
                                    key={index}
                                    className={'flex flex-col items-center cursor-pointer my-1'}
                                    onClick={() => Taro.navigateTo({url: `/pages/article/detail?id=${item.articleId}`})}
                                >
                                    {/* 图片容器 */}
                                    <div className={'w-full mb-2 flex justify-center'}>
                                        <img
                                            className={'object-cover rounded-lg'}
                                            src={item.image}
                                            alt={item.title || ''}
                                        />
                                    </div>
                                    {/* 标题 */}
                                    <div className={'text-xs text-center text-gray-800 leading-tight px-1'}>
                                        {item.title}
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
}
export default Article
