
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';


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.openExportModal)
    }, [openModel.openExportModal])


    return (
        <>
            <ConfigProvider
                theme={{

                }}
            >
                <Modal
                    open={openPreview}
                    centered
                    maskClosable={false}
                    destroyOnClose
                    width={1000}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenExportModal', 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>
                                <table  // 10
                                    border={1}
                                    style={{ tableLayout: 'fixed', borderCollapse: 'collapse', width: '100%', fontSize: '12px' }}>
                                    <tbody>
                                        <tr style={{ height: '30px' }} >
                                            <td style={{ width: '10%', textAlign: 'center' }}>姓名</td>
                                            <td colSpan={2}>
                                                {detail?.seekername ?? ''}
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>性别</td>
                                            <td style={{ width: '10%' }}>
                                                {detail?.gender ?? ''}
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>出生日期</td>
                                            <td colSpan={2}>
                                                {detail?.dob ?? ''}
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>婚姻状况</td>
                                            <td style={{ width: '10%' }}>
                                                {detail?.marital_status_txt ?? ''}
                                            </td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td style={{ width: '10%', textAlign: 'center' }}>文化程度</td>
                                            <td style={{ width: '10%' }}>
                                                {detail?.education_txt ?? ''}
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>毕业学校</td>
                                            <td colSpan={2}>
                                                毕业学校毕业学校
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>专业</td>
                                            <td colSpan={2}>
                                                毕业学校毕业学校
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>民族</td>
                                            <td style={{ width: '10%' }}>
                                                {detail?.ethnicity_txt ?? ''}
                                            </td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td style={{ width: '10%', textAlign: 'center' }}>联系方式</td>
                                            <td colSpan={4}>
                                                {detail?.mobile ?? ''}
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>身份证号</td>
                                            <td colSpan={4}>
                                                {detail?.id_number ?? ''}
                                            </td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td style={{ width: '10%', textAlign: 'center' }}>现居住地</td>
                                            <td colSpan={4}>
                                                {detail?.now_level1_txt ?? ''}{detail?.now_level2_txt ?? ''}{detail?.now_level3_txt ?? ''}{detail?.now_level4_txt ?? ''}
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>户口所地</td>
                                            <td colSpan={4}>
                                                {detail?.reg_level1_txt ?? ''}{detail?.reg_level2_txt ?? ''}{detail?.reg_level3_txt ?? ''}{detail?.reg_level4_txt ?? ''}
                                            </td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td style={{ width: '10%', textAlign: 'center' }}>人员类别</td>
                                            <td colSpan={9}>
                                                {detail.talent_type == 1001091 ? '☑' : '□'}
                                                退伍人员
                                                &nbsp;
                                                {detail.talent_type == 1001092 ? '☑' : '□'}
                                                残疾人
                                                &nbsp;

                                                {detail.talent_type == 1001093 ? '☑' : '□'}
                                                “40、50”人员
                                                &nbsp;

                                                {detail.talent_type == 1001028 ? '☑' : '□'}
                                                应届毕业生
                                                &nbsp;

                                                {detail.talent_type == 0 ? '☑' : '□'}
                                                其他
                                            </td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td style={{ width: '10%', textAlign: 'center' }}>电脑水平</td>
                                            <td colSpan={3}>
                                                {detail.talent_type == 1001028 ? '☑' : '□'}
                                                熟悉
                                                &nbsp;
                                                {detail.talent_type == 1001028 ? '☑' : '□'}
                                                一般
                                                &nbsp;
                                                {detail.talent_type == 1001028 ? '☑' : '□'}
                                                不懂
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>普通话水平</td>
                                            <td colSpan={3}>
                                                {detail.talent_type == 1001028 ? '☑' : '□'}
                                                流利
                                                &nbsp;
                                                {detail.talent_type == 1001028 ? '☑' : '□'}
                                                一般
                                                &nbsp;
                                                {detail.talent_type == 1001028 ? '☑' : '□'}
                                                不懂
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>外语水平</td>
                                            <td style={{ width: '10%' }}>

                                            </td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td style={{ width: '10%', textAlign: 'center' }}>交通工具</td>
                                            <td colSpan={3}>
                                                {detail.talent_type == 1001098 ? '☑' : '□'}
                                                小车
                                                &nbsp;
                                                {detail.talent_type == 1001099 ? '☑' : '□'}
                                                摩托车
                                                &nbsp;
                                                {detail.talent_type == 1001100 ? '☑' : '□'}
                                                自行车
                                                &nbsp;
                                                {detail.talent_type == 1001101 ? '☑' : '□'}
                                                其他
                                                &nbsp;
                                            </td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>驾照类型</td>
                                            <td style={{ width: '10%', textAlign: 'center' }}></td>
                                            <td style={{ width: '10%', textAlign: 'center' }}>可否加夜班</td>
                                            <td colSpan={3}>
                                                {detail.talent_type == 1001103 ? '☑' : '□'}
                                                可以
                                                &nbsp;
                                                {detail.talent_type == 1001104 ? '☑' : '□'}
                                                不可以
                                                &nbsp;
                                                {detail.talent_type == 1001105 ? '☑' : '□'}
                                                偶然可以
                                            </td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td rowSpan={4} style={{ width: '10%', textAlign: 'center' }}>学习或工作经历</td>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}>起止时间</td>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}>学校/工作单位</td>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}>职务/工作岗位</td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}></td>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}></td>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}></td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}></td>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}></td>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}></td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}></td>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}></td>
                                            <td colSpan={3} style={{ width: '10%', textAlign: 'center' }}></td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td rowSpan={2} style={{ width: '10%', textAlign: 'center' }}>求职意向</td>
                                            <td rowSpan={2} style={{ width: '10%', textAlign: 'center' }}>想从事职位</td>
                                            <td colSpan={8} >学校/工作单位</td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td colSpan={5}>是否接收其他职位的推荐（  ）</td>
                                            <td colSpan={3}>薪酬要求： 20000元/月</td>
                                        </tr>
                                        <tr style={{ height: '30px' }}>
                                            <td style={{ width: '10%', textAlign: 'center' }}>获何种证书或奖励</td>
                                            <td colSpan={9}></td>
                                        </tr>
                                        {
                                            detail.intros ? <>
                                                <tr style={{ height: '30px' }}>
                                                    <td rowSpan={detail.intros && detail.intros.length > 5 ? detail.intros.length + 2 : 7} style={{ width: '10%', textAlign: 'center' }}>介绍工作情况</td>
                                                    {/* 放第一条数据在第一行 */}
                                                    <td colSpan={5}>
                                                        {detail.intros && detail.intros.length > 0 && detail.intros[0].content}
                                                    </td>
                                                    <td rowSpan={5} colSpan={4}>
                                                        相片或身份证复印处
                                                    </td>
                                                </tr>
                                                {
                                                    detail.intros && detail.intros.length > 5 ? <>
                                                        {/* 放第二条到第五条数据 */}
                                                        {detail.intros && detail.intros.length > 5 && detail.intros.slice(1, 5).map((item, index) => (<>
                                                            <tr style={{ height: '30px' }}>
                                                                <td colSpan={5}>{item.content}</td>
                                                            </tr>
                                                        </>))}
                                                        {/* 放第六条数据以及后面的 */}
                                                        {detail.intros && detail.intros.length > 5 && detail.intros.slice(5).map((item, index) => (<>
                                                            <tr style={{ height: '30px' }}>
                                                                <td colSpan={9}>{item.content}</td>
                                                            </tr>
                                                        </>))}
                                                        <tr style={{ height: '30px' }}>
                                                            <td colSpan={9}></td>
                                                        </tr>
                                                        <tr style={{ height: '30px' }}>
                                                            <td colSpan={9}></td>
                                                        </tr>
                                                    </> : <>
                                                        {detail.intros && detail.intros.slice(1, detail.intros.length).map((item, index) => (<>
                                                            <tr style={{ height: '30px' }}>
                                                                <td colSpan={9}>{item.content}</td>
                                                            </tr>
                                                        </>))}
                                                        {
                                                            detail.intros.length < 5 && <>
                                                                {Array(7 - detail.intros.length).fill(0).map((item, index) => (<>
                                                                    <tr style={{ height: '30px' }}>
                                                                        <td colSpan={9}></td>
                                                                    </tr>
                                                                </>))}
                                                            </>
                                                        }
                                                    </>
                                                }

                                            </> : <>
                                                <tr style={{ height: '30px' }}>
                                                    <td rowSpan={7} style={{ width: '10%', textAlign: 'center' }}>介绍工作情况</td>
                                                    <td colSpan={5}>
                                                    </td>
                                                    <td rowSpan={5} colSpan={4}>
                                                        相片或身份证复印处
                                                    </td>
                                                </tr>
                                                <tr style={{ height: '30px' }}>
                                                    <td colSpan={5}></td>
                                                </tr>
                                                <tr style={{ height: '30px' }}>
                                                    <td colSpan={5}></td>
                                                </tr>
                                                <tr style={{ height: '30px' }}>
                                                    <td colSpan={5}></td>
                                                </tr>
                                                <tr style={{ height: '30px' }}>
                                                    <td colSpan={5}></td>
                                                </tr>
                                                <tr style={{ height: '30px' }}>
                                                    <td colSpan={9}></td>
                                                </tr>
                                                <tr style={{ height: '30px' }}>
                                                    <td colSpan={9}></td>
                                                </tr>
                                            </>
                                        }
                                        {
                                            detail.assists ? <>
                                                <tr style={{ height: '30px' }}>
                                                    <td rowSpan={detail.assists && detail.assists.length > 4 ? detail.assists.length + 2 : 4} style={{ width: '10%', textAlign: 'center' }}>帮扶情况</td>
                                                    <td colSpan={9}>
                                                        {detail.assists && detail.assists.length > 0 && detail.assists[0].content}
                                                    </td>
                                                </tr>
                                                {/* 帮扶情况 */}

                                                {detail.assists && detail.assists.length > 0 && detail.assists.slice(1).map((item, index) => (<>
                                                    <tr style={{ height: '30px' }}>
                                                        <td colSpan={9}>{item.content}</td>
                                                    </tr>
                                                </>))}
                                                {Array(4 - detail.assists.length).fill(0).map((item, index) => (<>
                                                    <tr style={{ height: '30px' }}>
                                                        <td colSpan={9}></td>
                                                    </tr>
                                                </>))}
                                            </> : <>
                                                <tr style={{ height: '30px' }}>
                                                    <td rowSpan={4} style={{ width: '10%', textAlign: 'center' }}>帮扶情况</td>
                                                    <td colSpan={9}>
                                                    </td>
                                                </tr>
                                                <tr style={{ height: '30px' }}>
                                                    <td colSpan={9}></td>
                                                </tr>
                                                <tr style={{ height: '30px' }}>
                                                    <td colSpan={9}></td>
                                                </tr>
                                                <tr style={{ height: '30px' }}>
                                                    <td colSpan={9}></td>
                                                </tr>
                                            </>
                                        }


                                    </tbody>
                                </table>
                            </div>

                        </>
                    }


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



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