import { useState, useEffect, useRef } from 'react';

import { Link } from '@umijs/max';
import { ProList, ProConfigProvider, ProFormCaptcha, ProFormCheckbox, ProFormText, setAlpha, ProForm, ProFormDependency } from '@ant-design/pro-components';
import { PhoneOutlined, MailOutlined, EnvironmentOutlined, ArrowRightOutlined, FireOutlined, StarOutlined, PayCircleOutlined } from '@ant-design/icons';

import { Space, Tabs, Avatar, Row, Col, Image, message, Card, ConfigProvider, Affix, Tag, Tooltip, Pagination, Flex, Descriptions, Button, Divider } from 'antd';
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'


interface SearchJobProps {
    getTotal: (value: number) => void,
    searchParams: any,
}


const SearchJob: React.FC<SearchJobProps> = ({ searchParams, getTotal }: any) => {
    const [list, setList] = useState<object[]>([])
    const [advertscheduleList, setAdvertscheduleList] = useState<object[]>([])

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

    useEffect(() => {
        PostCompanySearch(searchParams).then(res => {
            setList(res.data.jobs)
            getTotal(res.data.total)
        })
    }, [searchParams]);

    return (
        <>
            <ConfigProvider theme={{
                token: {
                    colorPrimary: '#19be6e',
                }, components: {
                    List: {
                        headerBg: '#ffffff',
                    }
                },
            }}>
                <Row gutter={[16, 16]}>
                    <Col span={18}>

                        {
                            list.length > 0 && list.map((item: any, index: number) => (
                                <>
                                    <CommonJob item={item}></CommonJob>
                                </>
                            ))
                        }
                        {
                            !list || list.length == 0 && <EmptyResult description="没有找到符合条件的职位" />
                        }
                    </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>

                {/* <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)
                            GetJobseekerRecommendJob({ page: page, pagesize: pageSize, sortby: 'desc' }).then((res: any) => {
                                setList(res.data.jobs ? res.data.jobs : [{}, {}])
                                setTotal(res.data.total)
                            })
                        }}
                    />
                </Flex> */}

            </ConfigProvider>

        </>
    );
};

export default SearchJob;