import { useState, useEffect, useRef } from 'react';
import { useModel, connect, history, Link } from 'umi';
import { ConfigProvider, Button, Flex, Input, Space, Image, Select, Row, Col, Carousel, Tag, Card, Avatar, Typography } from 'antd';
import { ProList, PageContainer } from '@ant-design/pro-components';
import { SearchOutlined, RightOutlined, ArrowRightOutlined, StarOutlined } from '@ant-design/icons';
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 ScienceTechnologyParkHomeIntroduction: React.FC = () => {
    const [list, setList] = useState<object[]>([{}])

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

    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#19be6e',
                    },
                    components: {
                        Button: {
                            colorText: '#19be6e'
                        }
                    }
                }}
            >
                <Space direction='vertical' size={10} style={{
                    width: '100%',
                }}>
                    <TitleIndex title="最新动态" link="/sciencetechnologypark/news"></TitleIndex>
                    <Space direction='vertical' size={10} style={{ width: '100%', minHeight: '300px' }}>
                        {
                            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={68} height={68}></Image>
                                                <div style={{fontWeight: 'bold', fontSize: 16}}>{item.title}</div>
                                            </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>

                </Space>



            </ConfigProvider >

        </>
    );
};

export default ScienceTechnologyParkHomeIntroduction;