import { List, Skeleton, Typography } from "antd"
import { useState } from "react"
import { useNavigate } from "react-router-dom"
import { NEWSLIST, TABLIST } from "./const"
import moment from "moment"
import useScrollToTop from "../../Hook/useScrollToTop"
const { Text } = Typography;

/**
 * 新闻中心
 * @returns 
 */
const News: React.FC = () => {

    useScrollToTop();
    /***********************************/
    const navigate = useNavigate();
    const [active, setActive] = useState<string>('zx')
    /***********************************/

    return <div className="news">
        <div className="bg-box" style={{ height: '100%' }}>
            <div className="bg bg-top"></div>
            <div className="bg bg-btm"></div>
        </div>
        <div className="mainbody">
            <div className="age-tip"></div>
            <div className="news-nav">
                <div className="location-box">
                    <a className="goback" onClick={() => navigate(-1)}></a>
                    <div className="location">当前位置：新闻中心</div>
                </div>
                <div className="news-nav-con">
                    <h2 className="news-tit-text">新闻中心</h2>
                    <ul className="news-nav-con-ul">
                        {TABLIST.map(item => <li
                            className={active === item.value ? 'active' : ''}
                            key={item.value}
                            onClick={() => {
                                setActive(item.value)
                            }}
                        >{item.lable}</li>)}
                    </ul>
                </div>
            </div>
            <List
                className="news-con"
                itemLayout="horizontal"
                size="small"
                dataSource={NEWSLIST.filter(item => ['382', '383', '384'].includes(active) ? item.category_id === active : true).sort((a, b) => moment(b.post_date) > moment(a.post_date) ? 1 : -1)}
                rowKey={'post_id'}
                renderItem={(item) => (
                    <List.Item onClick={() => {
                        navigate('/article', { state: item });
                    }}>
                        <Skeleton title={false} loading={false} active>
                            <List.Item.Meta
                                description={<Text ellipsis className="list-text"><strong>【{item.category_name}】</strong><span>{item.post_title}</span></Text>}
                            />
                            <div className="list-time">{moment(item.post_date).format('YYYY-MM-DD')}</div>
                        </Skeleton>
                    </List.Item>
                )}
            />
        </div>
    </div>
}

export default News