import moment from 'moment';
import React from 'react';
import ReactDOM from 'react-dom';

let SUGGESTION_TYPEOBJ: any = {
    1000: "小程序",
    2000: "12328交通运输",
    3000: "网络舆情",
    4000: "监控中心值班电话",
    5000: "话务转办",
}

// 附件1 结构
export const Attachment1 = ({ record }: { record: any }) => {
    // 根据 record 数据处理显示逻辑
    return (
        <div className="printContainer attachment1">
            <div className="printTitle">附件1：投诉受理工单</div>
            <div style={{ textAlign: 'left', marginBottom: '5px' }}>编号：{record?.SUGGESTION_CODE || ''}</div>
            <table className="printTable">
                <tbody>
                    <tr>
                        <td className="labelCell">投诉人</td>
                        <td className="contentCell">{record?.SUGGESTION_NAME || ''}</td>
                        <td className="labelCell">联系电话</td>
                        <td className="contentCell">{record?.PHONE_NUMBER || ''}</td>
                    </tr>
                    <tr>
                        <td className="labelCell">受理部门</td>
                        <td className="contentCell">{record?.DISPOSITION_PERSON || ''}</td>
                        <td className="labelCell">受理时间</td>
                        <td className="contentCell">{record?.OPERATE_DATE ? moment(record?.OPERATE_DATE).format('YYYY-MM-DD HH:mm:ss') : ''}</td>
                    </tr>
                    <tr>
                        <td className="labelCell">转办部门</td>
                        <td className="contentCell">{record?.MANAGER_NAME || ''}</td>
                        <td className="labelCell">来电类别</td>
                        <td className="contentCell">{record?.SUGGESTION_TYPE ? SUGGESTION_TYPEOBJ[Number(record?.SUGGESTION_TYPE)] : ''}</td>
                    </tr>
                    <tr>
                        <td className="labelCell">来电内容</td>
                        <td colSpan={3} className="contentCell">{record?.SUGGESTION_REASON || ''}</td>
                    </tr>
                    <tr>
                        <td className="labelCell">转办要求</td>
                        <td colSpan={3} className="requirement-cell">{record?.SUGGESTION_INFO || ''}</td>
                    </tr>
                    <tr>
                        <td className="labelCell">处理反馈结果（可附页）</td>
                        <td colSpan={3} className="feedback-cell">
                            <div className="feedback-content-wrapper">
                                <div className="feedback-text">{record?.FEEDBACK_INFO || ''}</div>
                                <div className="feedback-footer">
                                    反馈人：{record?.LEADERSHIP_NAME || ''} 时间：{record?.FEEDBACK_DATE ? moment(record?.FEEDBACK_DATE).format('YYYY年MM月DD日 HH时mm分') : ''}
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div style={{ textAlign: 'left', marginTop: '5px', marginBottom: '5px' }}>备注：投诉受理工单根据全年投诉发生的时间先后排序，并以彩云驿CYY、投诉GY、年份、工单编号（0001以此类推）。</div>
        </div>
    );
};

// 附件2 结构
export const Attachment2 = ({ record }: { record: any }) => (
    <div className="printContainer attachment2">
        <div className="printTitle">“12328”交通运输服务监督电话话务转办单</div>
        <div style={{ textAlign: 'left', marginBottom: '5px' }}>编号：{record?.SUGGESTION_CODE || ''}</div>
        <table className="printTable">
            <tbody>
                <tr>
                    <td className="labelCell">来电人</td>
                    <td className="contentCell">{record?.SUGGESTION_NAME || ''}</td>
                    <td className="labelCell">联系电话</td>
                    <td className="contentCell">{record?.PHONE_NUMBER || ''}</td>
                </tr>
                <tr>
                    <td className="labelCell">受理部门</td>
                    <td className="contentCell">{record?.SERVERPART_NAME || ''}</td>
                    <td className="labelCell">受理时间</td>
                    <td className="contentCell">{record?.SUGGESTION_CREATEDATE || ''}</td>
                </tr>
                <tr>
                    <td className="labelCell">转办单位</td>
                    <td className="contentCell">{record?.MANAGER_NAME || ''}</td>
                    <td className="labelCell">来电类别</td>
                    <td className="contentCell">{record?.SUGGESTION_TYPE ? SUGGESTION_TYPEOBJ[Number(record?.SUGGESTION_TYPE)] : ''}</td>
                </tr>
                <tr>
                    <td className="labelCell">来电内容</td>
                    <td colSpan={3} className="requirement-cell">
                        <div className="feedback-content-wrapper">
                            <div className="feedback-text">{record?.SUGGESTION_REASON || ''}</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className="labelCell">转办要求</td>
                    <td colSpan={3} className="requirement-cell">
                        <div className="feedback-content-wrapper">
                            <div className="feedback-text">{record?.SUGGESTION_INFO || ''}</div>
                            <div className="feedback-footer">
                                转办人：{record?.DISPOSITION_PERSON || ''} 时间：{record?.OPERATE_DATE ? moment(record?.OPERATE_DATE).format('YYYY年MM月DD日 HH时mm分') : ''}
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className="labelCell">处理反馈结果（可附页）</td>
                    <td colSpan={3} className="feedback-cell">
                        <div className="feedback-content-wrapper">
                            <div className="feedback-text">{record?.FEEDBACK_INFO || ''}</div>
                            <div className="feedback-footer">
                                反馈人：{record?.LEADERSHIP_NAME || ''} 时间：{record?.FEEDBACK_DATE ? moment(record?.FEEDBACK_DATE).format('YYYY年MM月DD日 HH时mm分') : ''}
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
);

// 附件3 结构
export const Attachment3 = ({ record }: { record: any }) => (
    <div className="printContainer attachment3">
        <div className="printTitle">网络舆情处置报告书</div>
        <div style={{ textAlign: 'right', marginBottom: '5px' }}>反馈时间：{record?.SUGGESTION_CREATEDATE ? moment(record?.SUGGESTION_CREATEDATE).format('YYYY年MM月DD日 HH时mm分') : ''}</div>
        <table className="printTable">
            <tbody>
                <tr>
                    <td className="labelCell">反馈单位（加盖公章）</td>
                    <td colSpan={3} className="contentCell">{record?.MANAGER_NAME || ''}</td>
                </tr>
                <tr>
                    <td className="labelCell">签发人</td>
                    <td colSpan={3} className="contentCell">{record?.LEADERSHIP_NAME || ''}</td>
                </tr>
                <tr>
                    <td className="labelCell">联系人</td>
                    <td className="contentCell">{record?.LEADERSHIP_NAME || ''}</td>
                    <td className="labelCell">手机号码</td>
                    <td className="contentCell">{record?.PHONE_NUMBER || ''}</td>
                </tr>
                <tr>
                    <td className="labelCell">舆情概况</td>
                    <td colSpan={3} className="requirement-cell">
                        <div className="feedback-content-wrapper">
                            <div className="feedback-text">{record?.SUGGESTION_REASON || ''}</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className="labelCell">核实及处置情况（可另附页）</td>
                    <td colSpan={3} className="feedback-cell">
                        <div className="feedback-content-wrapper">
                            <div className="feedback-text">{record?.SUGGESTION_INFO || ''}</div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
);

// 打印函数
export const handlePrintByIframe = (AttachmentComponent: React.ComponentType<any>, record: any) => {
    const iframe = document.createElement('iframe');
    iframe.style.position = 'fixed';
    iframe.style.right = '0';
    iframe.style.bottom = '0';
    iframe.style.width = '0';
    iframe.style.height = '0';
    iframe.style.border = '0';
    document.body.appendChild(iframe);

    const iframeDoc = iframe.contentWindow?.document;
    if (!iframeDoc) return;

    iframeDoc.open();
    iframeDoc.write(`
        <html>
            <head>
                <title>打印预览</title>
                <style>
                    @page { size: A4; margin: 15mm; }
                    body { margin: 0; padding: 0; font-family: SimSun, STSong, serif; }
                    .printContainer { 
                        width: 100%; 
                        box-sizing: border-box; 
                    }
                    .printTitle { text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 25px; margin-top: 10px; }
                    .printTable { 
                        width: 100%; 
                        border-collapse: collapse; 
                        border: 2px solid #000; 
                        table-layout: fixed; 
                    }
                    .printTable td { border: 1px solid #000; padding: 10px 12px; font-size: 15px; word-break: break-all; }
                    .labelCell { background-color: #f2f2f2 !important; width: 110px; font-weight: bold; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
                    .contentCell { text-align: left; }
                    
                    /* --- 附件1 专用样式 --- */
                    .attachment1 {
                        min-height: 260mm; 
                        display: flex; 
                        flex-direction: column; 
                    }
                    .attachment1 .printTable { height: auto; }
                    .attachment1 .requirement-cell { height: 100px; vertical-align: top; }
                    .attachment1 .feedback-cell { vertical-align: top; padding: 0 !important; }
                    .attachment1 .feedback-content-wrapper { 
                        display: flex; flex-direction: column; min-height: 550px; padding: 12px; box-sizing: border-box;
                    }
                    .attachment1 .feedback-text { flex: 1; }
                    .attachment1 .feedback-footer { text-align: right; margin-top: 20px; }

                    /* --- 附件2 专用样式 --- */
                    .attachment2 {
                        min-height: 260mm; 
                        display: flex; 
                        flex-direction: column; 
                    }
                    .attachment2 .printTable { height: auto; }
                    .attachment2 .requirement-cell { height: 130px; vertical-align: top; padding: 0 !important; }
                    .attachment2 .feedback-cell { vertical-align: top; padding: 0 !important; }
                    
                    .attachment2 .feedback-content-wrapper { 
                        display: flex; 
                        flex-direction: column; 
                        height: 100%;
                        padding: 12px; 
                        box-sizing: border-box;
                    }

                    .attachment2 .feedback-cell .feedback-content-wrapper { 
                        min-height: 400px; 
                    }

                    .attachment2 .feedback-text { flex: 1; }
                    .attachment2 .feedback-footer { text-align: right; margin-top: 10px; }

                    /* --- 附件3 专用样式 --- */
                    .attachment3 {
                        min-height: 260mm; 
                        display: flex; 
                        flex-direction: column; 
                    }
                    .attachment3 .printTable { height: auto; }
                    .attachment3 .requirement-cell { height: 70px; vertical-align: top; padding: 0 !important; }
                    .attachment3 .feedback-cell { vertical-align: top; padding: 0 !important; }
                    
                    .attachment3 .feedback-content-wrapper { 
                        display: flex; 
                        flex-direction: column; 
                        height: 100%;
                        padding: 12px; 
                        box-sizing: border-box;
                    }
                    .attachment3 .feedback-cell .feedback-content-wrapper { 
                        min-height: 500px; 
                    }
                    .attachment3 .feedback-text { flex: 1; }
                </style>
            </head>
            <body>
                <div id="print-root"></div>
            </body>
        </html>
    `);
    iframeDoc.close();

    const printRoot = iframeDoc.getElementById('print-root');
    if (printRoot) {
        ReactDOM.render(React.createElement(AttachmentComponent, { record }), printRoot);
    }

    setTimeout(() => {
        iframe.contentWindow?.focus();
        iframe.contentWindow?.print();
        setTimeout(() => {
            document.body.removeChild(iframe);
        }, 1000);
    }, 300);
};
