
import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import { ConfigProvider, Select, Descriptions, Radio, Modal, message, Image, Button, Row, Col, Input, Segmented, DatePicker } from 'antd';
import { GetJobseekerDetail } from '@/apis/api';
import { Imageprefix } from '@/constants';
import he from 'he';
const selectfieldNames = { label: 'name', value: 'id' };
import * as htmlDocx from "html-docx-js-typescript";
import { saveAs } from 'file-saver'

const PagesMainJobseekerListExport: React.FC = ({ dispatch, dictModel, openModel, id }: any) => {
    const [openPreview, setOpenPreview] = useState(false);
    const [detail, setDetail] = useState(null)

    useEffect(() => {
        setOpenPreview(openModel.openResumeDetailModal)
    }, [openModel.openResumeDetailModal])


    return (
        <>
            <ConfigProvider
                theme={{

                }}
            >
                <Modal
                    open={openPreview}
                    centered
                    okText="下载简历"
                    maskClosable={false}
                    destroyOnClose
                    width={1000}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenResumeDetailModal', payload: false })
                    }}
                    afterOpenChange={async (open) => {
                        if (open) {
                            let res = await GetJobseekerDetail({ customer_id: id.customer_id, application_id: id.id })
                            setDetail(res.data)
                        }
                    }}
                    onOk={async () => {
                        const htmlContent = document.getElementById('export-container'); // 获取需要转换的HTML内容
                        const convertedFile = htmlDocx.asBlob(htmlContent?.outerHTML!);
                        const fileData = await convertedFile;
                        saveAs((fileData as Blob), detail.seekername + '个人简历.docx')
                    }}
                >
                    {
                        detail && <>
                            <div id="export-container">
                                <h1 style={{
                                    fontWeight: 'bold',
                                    textAlign: 'center',
                                    marginBottom: '20px'
                                }}>个人简历</h1>
                                <div>
                                    <div>
                                        <div style={{ color: '#4fbe70', margin: '10px 0'}}>
                                            <h3 >基本资料</h3>
                                        </div>
                                        <div>
                                            <table border={1} style={{ borderCollapse: 'collapse', textAlign: 'center', width: '100%' }}>
                                                <tbody>
                                                    <tr style={{ height: '30px' }}>
                                                        <td>姓&nbsp;名</td>
                                                        <td>{detail.seekername}</td>
                                                        <td>性&nbsp;别</td>
                                                        <td>{detail.gender}</td>
                                                        <td rowspan={6} style={{ textAlign: 'center', verticalAlign: 'middle' }}>
                                                            <img src={Imageprefix + detail.photo} alt="" width="90" height="150" />
                                                        </td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td>出生日期</td>
                                                        <td>{detail.dob}</td>
                                                        <td>职&nbsp;称</td>
                                                        <td>{detail.title_txt}</td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td>现居住地</td>
                                                        <td>{detail.now_level1_txt ? detail.now_level1_txt : ''}{detail.now_level2_txt ? detail.now_level2_txt : ''}{detail.now_level3_txt ? detail.now_level3_txt : ''}{detail.now_level4_txt ? detail.now_level4_txt : ''}
                                                        </td>
                                                        <td>户口所在地</td>
                                                        <td>{detail.now_level1_txt ? detail.now_level1_txt : ''}{detail.now_level2_txt ? detail.now_level2_txt : ''}{detail.now_level3_txt ? detail.now_level3_txt : ''}{detail.now_level4_txt ? detail.now_level4_txt : ''}
                                                        </td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td>学&nbsp;历</td>
                                                        <td>{detail.education_txt}</td>
                                                        <td>婚姻状况</td>
                                                        <td>{detail.marital_status_txt}</td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td>民&nbsp;族</td>
                                                        <td>{detail.ethnicity_txt}</td>
                                                        <td>政治面貌</td>
                                                        <td>{detail.political_status_txt}</td>

                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td>体&nbsp;重</td>
                                                        <td>{detail.weight}kg</td>
                                                        <td>身&nbsp;高</td>
                                                        <td>{detail.height}cm</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    {/* 个人简介 */}
                                    <div>
                                        <div style={{ color: '#4fbe70', margin: '10px 0'}}>
                                            <h3 >个人简介</h3>
                                        </div>
                                        <div>
                                            <table border={1} style={{ borderCollapse: 'collapse', textAlign: 'center', width: '100%' }}>
                                                <tbody>
                                                    <tr >
                                                        <td style={{ width: '20%' }}>个人简介</td>
                                                        <td style={{ width: '80%' }}>
                                                        <div dangerouslySetInnerHTML={{ __html: he.decode(detail.introduction)  }} /></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    {/* 求职期望 */}
                                    <div>
                                        <div style={{ color: '#4fbe70', margin: '10px 0'}}>
                                            <h3 >求职期望</h3>
                                        </div>
                                        <div>
                                            <table border={1} style={{ borderCollapse: 'collapse', textAlign: 'center', width: '100%' }}>
                                                <tbody>
                                                    <tr style={{ height: '30px' }}>
                                                        <td style={{ width: '20%' }}>求职类型</td>
                                                        <td style={{ width: '30%' }}>{detail.job_type_txt}</td>
                                                        <td style={{ width: '20%' }}>可到职日期</td>
                                                        <td style={{ width: '30%' }}>{detail.available_date_txt}</td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td style={{ width: '20%' }}>人才类型</td>
                                                        <td style={{ width: '30%' }}>{detail.talent_type_txt}</td>
                                                        <td style={{ width: '20%' }}>工作经验</td>
                                                        <td style={{ width: '30%' }}>{detail.work_experience}</td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td style={{ width: '20%' }}>月薪要求</td>
                                                        <td colspan={3} style={{ width: '80%' }}>{detail.salary_range_txt}</td>
                                                    </tr>
                                                    {
                                                        detail.desire_areas && detail.desire_areas.map((item, index) => (
                                                            <tr style={{ height: '30px' }}>
                                                                <td style={{ width: '20%' }}>期望工作地区{index + 1}</td>
                                                                <td colspan={3} style={{ width: '80%' }}>
                                                                    {item.level1_txt ? item.level1_txt : ''}
                                                                    {item.level2_txt ? item.level2_txt : ''}
                                                                    {item.level3_txt ? item.level3_txt : ''}
                                                                    {item.level4_txt ? item.level4_txt : ''}
                                                                </td>
                                                            </tr>
                                                        ))
                                                    }
                                                    {
                                                        detail.desire_industrys && detail.desire_industrys.map((item, index) => (
                                                            <tr style={{ height: '30px' }}>
                                                                <td style={{ width: '20%' }}>期望从事行业{index + 1}</td>
                                                                <td colspan={3} style={{ width: '80%' }}>
                                                                    {item.industry_txt ? item.industry_txt : ''}
                                                                </td>
                                                            </tr>
                                                        ))
                                                    }
                                                    {
                                                        detail.desire_positions && detail.desire_positions.map((item, index) => (
                                                            <tr style={{ height: '30px' }}>
                                                                <td style={{ width: '20%' }}>期望从事职位{index + 1}</td>
                                                                <td colspan={3} style={{ width: '80%' }}>
                                                                    {item.level1_txt ? item.level1_txt : ''}
                                                                    {item.level2_txt ? item.level2_txt : ''}
                                                                </td>
                                                            </tr>
                                                        ))
                                                    }
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    {/* 教育培训 */}
                                    <div>
                                        <div style={{ color: '#4fbe70', margin: '10px 0'}}>
                                            <h3 >教育培训</h3>
                                        </div>
                                        <div>
                                            <table border={1} style={{ borderCollapse: 'collapse', textAlign: 'center', width: '100%' }}>
                                                <thead>
                                                    <th style={{ height: '30px', width: '20%' }}>起止时间</th>
                                                    <th style={{ height: '30px', width: '20%' }}>学校/培训机构</th>
                                                    <th style={{ height: '30px', width: '20%' }}>专业</th>
                                                    <th style={{ height: '30px', width: '20%' }}>曾担任的职务</th>
                                                    <th style={{ height: '30px', width: '20%' }}>获得证书奖项</th>
                                                </thead>
                                                <tbody>
                                                    {
                                                        detail.trainings && detail.trainings.map((item, index) => (
                                                            <tr style={{ height: '30px' }}>
                                                                <td style={{ width: '20%' }}>
                                                                    {item.start_year}.{item.start_month}至{item.end_year}.{item.end_month}
                                                                </td>
                                                                <td style={{ width: '20%' }}>{item.school_or_institution}</td>
                                                                <td style={{ width: '20%' }}>{item.major}</td>
                                                                <td style={{ width: '20%' }}>{item.positions_held}</td>
                                                                <td style={{ width: '20%' }}>
                                                                    <div>
                                                                        {item.certificate}
                                                                    </div>
                                                                    <div>
                                                                        {item.awards}
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        ))
                                                    }
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    {/* 工作经历 */}
                                    <div>
                                        <div style={{ color: '#4fbe70', margin: '10px 0'}}>
                                            <h3 >工作经历</h3>
                                        </div>
                                        <div>
                                            <table border={1} style={{ borderCollapse: 'collapse', textAlign: 'center', width: '100%' }}>
                                                <thead>
                                                    <th style={{ height: '30px', width: '25%' }}>起止时间</th>
                                                    <th style={{ height: '30px', width: '25%' }}>单位名称</th>
                                                    <th style={{ height: '30px', width: '25%' }}>职位</th>
                                                    <th style={{ height: '30px', width: '25%' }}>离职原因</th>
                                                </thead>
                                                <tbody>
                                                    {
                                                        detail.experiences && detail.experiences.map((item, index) => (
                                                            <tr style={{ height: '30px' }}>
                                                                <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>
                                        </div>
                                    </div>
                                    {/* 专业技能掌握能力 */}
                                    <div>
                                        <div style={{ color: '#4fbe70', margin: '10px 0'}}>
                                            <h3 >专业技能掌握能力</h3>
                                        </div>
                                        <div>
                                            <table border={1} style={{ borderCollapse: 'collapse', textAlign: 'center', width: '100%' }}>
                                                <tbody>
                                                    <tr style={{ height: '30px' }}>
                                                        <td style={{ width: '25%' }}>英&nbsp;语</td>
                                                        <td style={{ width: '25%' }}>{detail.english_txt}</td>
                                                        <td style={{ width: '25%' }}>粤&nbsp;语</td>
                                                        <td style={{ width: '25%' }}>{detail.mandarin_txt}</td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td style={{ width: '25%' }}>国&nbsp;语</td>
                                                        <td style={{ width: '25%' }}>{detail.cantonese_txt}</td>
                                                        <td style={{ width: '25%' }}>第二外语</td>
                                                        <td style={{ width: '25%' }}>{detail.other_language_txt}</td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td style={{ width: '25%' }}>计算机能力</td>
                                                        <td colspan={7} style={{ width: '75%' }}>{detail.computer_skills}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    {/* 联系信息 */}
                                    <div>
                                        <div style={{ color: '#4fbe70', margin: '10px 0'}}>
                                            <h3 >联系信息</h3>
                                        </div>
                                        <div>
                                            <table border={1} style={{ borderCollapse: 'collapse', textAlign: 'center', width: '100%' }}>
                                                <tbody>
                                                    <tr style={{ height: '30px' }}>
                                                        <td style={{ width: '15%' }}>移动电话</td>
                                                        <td style={{ width: '35%' }}>{detail.mobile}</td>
                                                        <td style={{ width: '15%' }}>固定电话</td>
                                                        <td style={{ width: '35%' }}>{detail.landline}</td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td style={{ width: '15%' }}>联系邮箱</td>
                                                        <td style={{ width: '35%' }}>{detail.email}</td>
                                                        <td style={{ width: '15%' }}>Q&nbsp;Q</td>
                                                        <td style={{ width: '35%' }}>{detail.qq}</td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td style={{ width: '15%' }}>通讯地址</td>
                                                        <td style={{ width: '35%' }}>{detail.mailing_address}</td>
                                                        <td style={{ width: '15%' }}>邮&nbsp;编</td>
                                                        <td style={{ width: '35%' }}>{detail.postal_code}</td>
                                                    </tr>
                                                    <tr style={{ height: '30px' }}>
                                                        <td style={{ width: '15%' }}>个人主页</td>
                                                        <td colspan={3} style={{ width: '85%' }}>{detail.personal_website}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        {/* 证书信息 */}
                                        <div>
                                            <div style={{ color: '#4fbe70', margin: '10px 0'}}>
                                                <h3 >证书信息</h3>
                                            </div>
                                            <div>
                                                <table border={1} style={{ borderCollapse: 'collapse', textAlign: 'center', width: '100%' }}>
                                                    <thead>
                                                        <th style={{ height: '30px', width: '25%' }}>证书名称</th>
                                                        <th style={{ height: '30px', width: '80%' }}>证书图片</th>
                                                    </thead>
                                                    <tbody>
                                                        {
                                                            detail.certificates && detail.certificates.map((item, index) => (
                                                                <tr >
                                                                    <td style={{ width: '25%' }}>{item.name}</td>
                                                                    <td style={{ width: '80%' }}>
                                                                        <img src={Imageprefix + item.certificate_photo} alt="" width="90" height="150" />
                                                                    </td>
                                                                </tr>
                                                            ))
                                                        }
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </>
                    }


                </Modal>
            </ConfigProvider >
        </>
    );
};



export default connect(({ dictModel, openModel }: any) => ({
    dictModel, openModel
}))(PagesMainJobseekerListExport);