import { useState, useEffect, useRef } from 'react';
import { ProList, PageContainer } from '@ant-design/pro-components';
import { ConfigProvider, Button, Flex, Input, Space, Image, Select, Row, Col, Divider, Tag, Card, Avatar, Typography } from 'antd';
import { SearchOutlined, FireOutlined, MessageOutlined, RightOutlined } from '@ant-design/icons';
import { useModel, connect, history, Link } from 'umi';
import { PostCompanySearch } from '@/services/apis/company';


import { Imageprefix } from '@/constants';

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

    useEffect(() => {
        PostCompanySearch({
            page: 1,
            pagesize: 8,
            sort: 'updated_at',
            sortby: 'desc',
            probation: 1
        }).then(res => {
            setList(res.data.list)
        })
    }, []);

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

                        }
                    }
                }}
            >

                <Space direction='vertical' size={20} style={{ width: '100%' }}>
                    {/* <Flex justify='center' align='center'>
                        <Typography.Title level={2}>见习基地</Typography.Title>
                    </Flex> */}
                    <Divider orientation="left" orientationMargin="0"><Typography.Title level={2}>见习基地</Typography.Title></Divider>

                    <Row gutter={[10, 10]}>
                        {
                            list.length > 0 && list.map((item: any, index: number) => (
                                <>
                                    <Col span={6}>
                                        <Link to={{ pathname: `/talent/company/detail?id=${item.id}` }} target="_blank" style={{ width: '100%' }}>
                                            <Flex vertical align='center' justify='center' className='company-item'>
                                                <Image src={item.photo ? `${Imageprefix}${item.photo}` : '/images/logo.jpg'} preview={false} width={100} height={100} style={{ borderRadius: '4px', objectFit: 'contain' }}></Image>
                                                <Typography.Paragraph
                                                    ellipsis={{ rows: 1 }}
                                                    style={{ fontSize: 16, textAlign: 'center', whiteSpace: 'nowrap', marginTop: 8, width: '100%' }}
                                                >
                                                    {item.full_name}
                                                </Typography.Paragraph>
                                                {/* <Typography.Paragraph
                                                    ellipsis={{ rows: 1 }}
                                                    style={{ fontSize: 12, color: '#999', textAlign: 'center', whiteSpace: 'nowrap', width: '100%' }}
                                                >
                                                    {item.nature_text ? item.nature_text : '性质不限'}
                                                    {item.industry_text ? <><Divider type='vertical' />{item.industry_text}</> : <><Divider type='vertical' />行业不限</>}
                                                    {item.scale_text ? <><Divider type='vertical' />{item.scale_text}</> : <><Divider type='vertical' />规模不限</>}
                                                </Typography.Paragraph> */}
                                            </Flex >
                                        </Link>

                                    </Col>
                                </>
                            ))
                        }
                    </Row>
                    <Flex justify='center' align='center'>
                        <Space>
                            <Link to={{ pathname: '/talent/search/company?probation=1' }}>
                                <Button icon={<RightOutlined />} iconPosition='end'>更多企业</Button>
                            </Link>
                        </Space>
                    </Flex>
                </Space>

            </ConfigProvider >

        </>
    );
};

export default HomeProbation;