import { useState, useEffect, useRef } from 'react';
import { ProList, PageContainer } from '@ant-design/pro-components';
import { ConfigProvider, Button, Flex, Input, Space, Image, Select, Row, Col, Pagination, Tag, Card, Divider, Typography, Anchor } from 'antd';
import { SearchOutlined, LikeOutlined, ArrowRightOutlined, StarOutlined } from '@ant-design/icons';
import { useModel, connect, history, Link, useSearchParams } from 'umi';
import SearchFilter from '@/components/Talent/Search/Filter/Company';
import SearchJob from '@/components/Talent/Search/Company/index';
import { Imageprefix } from '@/constants/index'

import { PostCompanySearch } from '@/services/apis/company';

import { GetAdvertscheduleList } from '@/services/apis/advertschedule';

import EmptyResult from '@/components/Common/EmptyResult'
import CommonJob from '@/components/Common/Job'
const HomePage: React.FC = () => {
    const [searchParams, setSearchParams] = useSearchParams();
    const [list, setList] = useState<object[]>([])
    const [advertscheduleList, setAdvertscheduleList] = useState<object[]>([])
    const [search, setSearch] = useState<object | null>(null)
    const [total, setTotal] = useState<number>(0)
    const [page, setPage] = useState<number>(1)
    const [pagesize, setPageSize] = useState<number>(18)

    useEffect(() => {
        GetAdvertscheduleList({ page: 1, pagesize: 4, code: 'wzsylbt' }).then(res => {
            setAdvertscheduleList(res.data.advertschedules)
        })
    }, []);

    // useEffect(() => {
    //     PostJobSearch({
    //         page: 1,
    //         pagesize: 12,
    //         sort: 'updated_at',
    //         sortby: 'desc'
    //     }).then(res => {
    //         setList(res.data.jobs)
    //         getTotal(res.data.total)
    //     })
    // }, []);

    const getSearchParams = async (value) => {
        setPage(value.page)
        setPageSize(value.pagesize)


        let res = await PostCompanySearch(value ? value : {
            page: page,
            pagesize: pagesize,
            sort: 'updated_at',
            sortby: 'desc',
        })
        setList(res.data.list)
        getTotal(res.data.total)
    }

    const getTotal = (value) => {
        setTotal(value)
    }


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

                <Space direction='vertical' size={30} style={{ minHeight: '800px' }}>
                    <SearchFilter getSearchParams={getSearchParams}

                        famous={searchParams.get('famous') ? searchParams.get('famous') : 0}
                        probation={searchParams.get('probation') ? searchParams.get('probation') : 0}
                        page={page}
                        pagesize={pagesize}></SearchFilter>
                    <Row gutter={[16, 16]}>
                        <Col span={18}>
                            <Row gutter={[16, 16]}>
                                {
                                    list && list.length > 0 && list.map((item: any, index: number) => (
                                        <>
                                            <Col span={8}>
                                                <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>

                            {
                                !list || list.length == 0 && <EmptyResult description="没有找到符合条件的企业" />
                            }

                            <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)
                                    }}
                                />
                            </Flex>
                        </Col>

                        <Col span={6}>

                            {

                                advertscheduleList && advertscheduleList.length && advertscheduleList.map((item, index) => (


                                    <div style={{ borderRadius: 8, marginBottom: 20 }}>
                                        <div style={{
                                            width: '100%',
                                            position: 'relative',
                                            paddingTop: '56.25%', /* 16:9 的比例 */
                                            overflow: 'hidden'
                                        }}>
                                            <Link to={{ pathname: item.target_url }} target='_blank'>

                                                <img src={Imageprefix + item.image_url} style={{
                                                    position: 'absolute',
                                                    top: 0,
                                                    left: 0,
                                                    width: '100%',
                                                    height: '100%',
                                                    borderRadius: 8
                                                }} />


                                            </Link>

                                        </div>
                                    </div>

                                ))

                            }

                        </Col>
                    </Row>

                </Space>

            </ConfigProvider >
        </>
    );
};

export default HomePage;