import { useState, useEffect, useRef } from 'react';
import { ProList, PageContainer } from '@ant-design/pro-components';
import { ConfigProvider, Button, Flex, Input, Space, Tabs, Tooltip, Row, Col, Pagination, Tag, Image, Affix, Typography, Anchor } from 'antd';
import { SearchOutlined, LikeOutlined, ArrowRightOutlined, RightOutlined } from '@ant-design/icons';
import { useModel, connect, history, Link } from 'umi';
import { Imageprefix } from '@/constants/index'

import { GetSectionList, GetArticleList, GetSectionDetailByCode } from '@/services/apis/information';

import TitleIndex from '@/components/Common/Title';
import EmptyResult from '@/components/Common/EmptyResult'

const HomePage: React.FC = () => {
    const [list, setList] = useState<object[]>([])
    const [total, setTotal] = useState<number>(0)
    const [page, setPage] = useState<number>(1)
    const [pageSize, setPageSize] = useState<number>(7)



    useEffect(() => {
        GetSectionDetailByCode({ code: 'KCYTZGG' }).then(res => {
            GetArticleList({ page: 1, pagesize: 6, section_id: res.data.id }).then(res1 => {
                setList(res1.data.articles)
                setTotal(res1.data.total)
            })
        })
    }, [])


    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#19be6e',
                    },
                    components: {
                        Button: {
                            colorText: '#19be6e'
                        }
                    }
                }}
            >

                <div style={{ minHeight: 1000 }}>
                    <Space direction='vertical' size={10} style={{ width: '100%' }}>
                        {
                            list && list.length > 0 && list.map((item, index) => (
                                <>
                                    <Link to={{ pathname: `/sciencetechnologypark/information/detail?id=${item.id}` }} target='_blank'>
                                        <Flex justify='space-between' align='center' style={{ width: '100%', padding: '16px', color: '#000000', background: '#ffffff', cursor: 'pointer' }}>
                                            <Space size={20}>
                                                <h3>{item.title}</h3>
                                            </Space>
                                            <Space size={20}>
                                                <div style={{ color: '#999' }}>
                                                    {item.updated_at}
                                                </div>
                                                <RightOutlined style={{ color: '#999' }} />
                                            </Space>
                                        </Flex>
                                    </Link>
                                    {/* <Link to={{pathname:  `/sciencetechnologypark/information/detail?id=${item.id}`  }} target='_blank'>
                                        <Flex justify='space-between' align='center' style={{ width: '100%', padding: '16px', color: '#000000', background: '#ffffff', borderRadius: 8, cursor: 'pointer' }}>
                                            <Space size={20}>
                                                <Image src={`${Imageprefix}${item.cover_img}`} width={100} height={100}></Image>
                                                <h3>{item.title}</h3>
                                            </Space>
                                            <Space size={20}>
                                                <div>
                                                    {item.updated_at}
                                                </div>
                                                <RightOutlined />
                                            </Space>

                                        </Flex>
                                    </Link> */}
                                </>
                            ))
                        }
                        {
                            !list || list.length == 0 && <Flex justify='center' align='center' style={{ padding: '16px', borderRadius: 8, cursor: 'pointer' }}>
                                <EmptyResult description="暂无数据" />
                            </Flex>
                        }
                    </Space>

                    <Flex justify='center' align='center' style={{ margin: '40px 0' }}>
                        <Pagination
                            hideOnSinglePage
                            total={total}
                            showTotal={(total) => `总共${total}条`}
                            current={page}
                            pageSize={pageSize}
                            pageSizeOptions={['12', '24', '36']}
                            onChange={(page, pageSize) => {
                                setPage(page)
                                setPageSize(pageSize)
                                GetSectionDetailByCode({ code: 'KCYTZGG' }).then(res => {
                                    GetArticleList({ page: page, pagesize: pageSize, section_id: res.data.id }).then(res1 => {
                                        setList(res1.data.articles)
                                        setTotal(res1.data.total)
                                    })
                                })
                            }}
                        />
                    </Flex>
                </div>



            </ConfigProvider >
        </>
    );
};

export default HomePage;