import { useState, useEffect, useRef } from 'react';
import { ProList, PageContainer } from '@ant-design/pro-components';
import { ConfigProvider, Button, Flex, Card, Space, Tag, Avatar, Row, Col, Modal, Typography, Divider, Upload, Pagination, Anchor } from 'antd';
import { VideoCameraAddOutlined, PlusOutlined, EditOutlined, DownloadOutlined, FolderViewOutlined } from '@ant-design/icons';
import { useModel, connect, history, Link } from 'umi';
import './index.module.less'
import he from 'he'
import { Imageprefix } from '@/constants/index'
import { GetJobseekerDetail, GetJobapplicantContactdetail } from '@/services/apis/resume'


const HomeNewJob: React.FC = ({ bgcolor, fontcolor, id }: any) => {
    const [detail, setDetail] = useState({ mobile: '13215816085', email: '12131313@126.com', seekername: 'XXX' })
    const [list, setList] = useState<object[]>([{}, {}])
    const [total, setTotal] = useState<number>(0)
    const [page, setPage] = useState<number>(1)
    const [pageSize, setPageSize] = useState<number>(7)
    const [bgColor, setBgColor] = useState<string>(bgcolor)
    const [fontColor, setFontColor] = useState<string>(fontcolor)


    useEffect(() => {
        GetJobseekerDetail({ customer_id: id ? id : Number(localStorage.getItem('customerid')) }).then(res => {
            res.data.introduction = he.decode(res.data.introduction)
            setDetail(res.data)
        })
    }, []);

    useEffect(() => {
        setBgColor(bgcolor)
    }, [bgcolor]);
    useEffect(() => {
        setFontColor(fontcolor)
    }, [fontcolor]);


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

                    }
                }}
            >
                <Card >
                    <div id='resume-box'>
                        <h1 style={{ color: bgColor }}>{detail.seekername}</h1>
                        <h3 style={{ color: bgColor }}>
                        求职意向：   {detail.other_positions}、{
                                detail.desire_positions && detail.desire_positions.length > 0 && detail.desire_positions.map((item, index) => item.level2_txt).join('、')
                            }
                        </h3>
                        <table border={0} style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid #ffffff' }}>
                            <tbody>
                                <tr>
                                    <td style={{ border: '1px solid #ffffff' }}>年龄：{detail.age}岁</td>
                                    <td style={{ border: '1px solid #ffffff' }}>民族： {detail.ethnicity_txt}</td>
                                    <td style={{ border: '1px solid #ffffff' }}>联系方式： {detail.mobile}
                                        {
                                            localStorage.getItem('role') == 'company' &&
                                            <Button type='link' onClick={() => {
                                                Modal.confirm({
                                                    title: '获取联系方式',
                                                    content: '获取联系方式需要扣除一个点数，是否要获取联系方式',
                                                    centered: true,
                                                    okText: '获取',
                                                    cancelText: '取消',
                                                    onOk() {
                                                        GetJobapplicantContactdetail({ customer_id: detail.customer_id }).then(res => {
                                                            GetJobseekerDetail({ customer_id: detail.customer_id }).then(res => {
                                                                setDetail(res.data)
                                                            })
                                                        })
                                                    },
                                                    onCancel() {

                                                    },
                                                });
                                            }}>获取详细</Button>
                                        }

                                    </td>
                                    <td rowSpan={5} style={{ textAlign: 'center', verticalAlign: 'middle', border: '1px solid #ffffff' }}>
                                        <img src={`${Imageprefix}${detail.photo}`} alt="" width="90" height="150" />

                                    </td>
                                </tr>
                                <tr>
                                    <td style={{ border: '1px solid #ffffff' }}>籍贯：{detail.native_place_txt}</td>
                                    <td style={{ border: '1px solid #ffffff' }}>政治面貌： {detail.political_status_txt}</td>
                                    <td style={{ border: '1px solid #ffffff' }} >邮箱：{detail.email}</td>
                                </tr>

                                <tr>
                                    <td style={{ border: '1px solid #ffffff' }}>英语：{detail.english_txt}</td>
                                    <td style={{ border: '1px solid #ffffff' }}>粤语：{detail.mandarin_txt}</td>
                                    <td style={{ border: '1px solid #ffffff' }}>国语：{detail.cantonese_txt}</td>
                                </tr>
                                <tr>
                                    <td style={{ border: '1px solid #ffffff' }}>计算机能力：{detail.computer_skills}</td>
                                    <td style={{ border: '1px solid #ffffff' }}>交通工具：{detail.vehicle_type_txt}</td>
                                    <td style={{ border: '1px solid #ffffff' }}>驾照类型：{detail.drive_type}</td>
                                </tr>
                                <tr>
                                    <td style={{ border: '1px solid #ffffff' }}>到岗日期： {detail.available_date_txt}</td>
                                    <td style={{ border: '1px solid #ffffff' }} >薪资要求： {detail.salary_range_txt}</td>
                                    <td style={{ border: '1px solid #ffffff' }}>工作经验： {detail.work_experience}年</td>
                                </tr>
                            </tbody>
                        </table>
                        <h3 style={{ padding: '10px 0', color: bgColor, borderBottom: '0.25px solid #cccccc' }}>个人简介</h3>
                        <div>
                            {<div dangerouslySetInnerHTML={{ __html: detail.introduction }} />}
                        </div>
                        <h3 style={{ padding: '10px 0', color: bgColor, borderBottom: '0.25px solid #cccccc' }}>教育经历</h3>
                        <table border={0} style={{ width: '100%', borderCollapse: 'collapse', border: 'none' }}>
                            <tbody>
                                {
                                    detail.trainings && detail.trainings.map((item, index) => (
                                        <tr style={{ height: '30px', textAlign: 'center' }}>
                                            <td style={{ width: '33.33%' }}>  {item.start_year}.{item.start_month}至{item.end_year}.{item.end_month}</td>
                                            <td style={{ width: '33.33%' }}>{item.school_or_institution}</td>
                                            <td style={{ width: '33.33%' }}>{item.major}</td>
                                        </tr>
                                    ))
                                }

                            </tbody>
                        </table>
                        <h3 style={{ padding: '10px 0', color: bgColor, borderBottom: '0.25px solid #cccccc' }}>工作经历</h3>
                        <table border={0} style={{ width: '100%', borderCollapse: 'collapse', border: 'none' }}>
                            <tbody>
                                {
                                    detail.experiences && detail.experiences.length > 0 && detail.experiences.map((item, index) => (
                                        <tr style={{ height: '30px', textAlign: 'center' }}>
                                            <td style={{ width: '25%' }}>  {item.start_year}.{item.start_month}至{item.end_year}.{item.end_month}</td>
                                            <td style={{ width: '25%' }}>{item.company_name}</td>
                                            <td style={{ width: '25%' }}>{item.position}</td>
                                            <td style={{ width: '25%' }}>{item.reason_for_leaving}</td>
                                        </tr>
                                    ))
                                }
                            </tbody>
                        </table>
                        <h3 style={{ padding: '10px 0', color: bgColor, borderBottom: '0.25px solid #cccccc' }}>荣誉证书</h3>
                        <div>
                            {
                                detail.certificates && detail.certificates.map((item, index) => item.name).join('、')
                            }
                        </div>
                    </div>
                </Card>

            </ConfigProvider >

        </>
    );
};

export default HomeNewJob;