import { Button } from "antd";
import ReactDOM from "react-dom";
import "./index.less";

const ComplaintForwardingProcess = () => {
    // 附件1 结构（已根据您的要求优化）
    const Attachment1 = () => (
        <div className="printContainer attachment1">
            <div className="printTitle">附件1：投诉受理工单</div>
            <div style={{ textAlign: 'left', marginBottom: '5px' }}>编号：</div>
            <table className="printTable">
                <tbody>
                    <tr>
                        <td className="labelCell">投诉人</td>
                        <td className="contentCell"></td>
                        <td className="labelCell">联系电话</td>
                        <td className="contentCell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">受理部门</td>
                        <td className="contentCell"></td>
                        <td className="labelCell">受理时间</td>
                        <td className="contentCell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">转办部门</td>
                        <td className="contentCell"></td>
                        <td className="labelCell">来电类别</td>
                        <td className="contentCell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">来电内容</td>
                        <td colSpan={3} className="contentCell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">转办要求</td>
                        <td colSpan={3} className="requirement-cell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">处理反馈结果（可附页）</td>
                        <td colSpan={3} className="feedback-cell">
                            <div className="feedback-content-wrapper">
                                <div className="feedback-text"></div>
                                <div className="feedback-footer">
                                    反馈人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 时间：&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;时&nbsp;&nbsp;&nbsp;分
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div style={{ textAlign: 'left', marginTop: '5px', marginBottom: '5px' }}>备注：投诉受理工单根据全年投诉发生的时间先后排序，并以彩云驿CYY、投诉GY、年份、工单编号（0001以此类推）。</div>
        </div>
    );

    // 附件2 结构（恢复独立，不受附件1样式影响）
    const Attachment2 = () => (
        <div className="printContainer attachment2">
            <div className="printTitle">“12328”交通运输服务监督电话话务转办单</div>
            <div style={{ textAlign: 'left', marginBottom: '5px' }}>编号：</div>
            <table className="printTable">
                <tbody>
                    <tr>
                        <td className="labelCell">来电人</td>
                        <td className="contentCell"></td>
                        <td className="labelCell">联系电话</td>
                        <td className="contentCell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">受理部门</td>
                        <td className="contentCell"></td>
                        <td className="labelCell">受理时间</td>
                        <td className="contentCell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">转办单位</td>
                        <td className="contentCell"></td>
                        <td className="labelCell">来电类别</td>
                        <td className="contentCell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">来电内容</td>
                        <td colSpan={3} className="requirement-cell">
                            <div className="feedback-content-wrapper">
                                <div className="feedback-text"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td className="labelCell">转办要求</td>
                        <td colSpan={3} className="requirement-cell">
                            <div className="feedback-content-wrapper">
                                <div className="feedback-text"></div>
                                <div className="feedback-footer">
                                    转办人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 时间：
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td className="labelCell">处理反馈结果（可附页）</td>
                        <td colSpan={3} className="feedback-cell">
                            <div className="feedback-content-wrapper">
                                <div className="feedback-text"></div>
                                <div className="feedback-footer">
                                    反馈人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 时间：
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    );

    // 附件3 结构（已加入高度优化）
    const Attachment3 = () => (
        <div className="printContainer attachment3">
            <div className="printTitle">网络舆情处置报告书</div>
            <div style={{ textAlign: 'right', marginBottom: '5px' }}>反馈时间：&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;日</div>
            <table className="printTable">
                <tbody>
                    <tr>
                        <td className="labelCell">反馈单位（加盖公章）</td>
                        <td colSpan={3} className="contentCell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">签发人</td>
                        <td colSpan={3} className="contentCell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">联系人</td>
                        <td className="contentCell"></td>
                        <td className="labelCell">手机号码</td>
                        <td className="contentCell"></td>
                    </tr>
                    <tr>
                        <td className="labelCell">舆情概况</td>
                        <td colSpan={3} className="requirement-cell">
                            <div className="feedback-content-wrapper">
                                <div className="feedback-text"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td className="labelCell">核实及处置情况（可另附页）</td>
                        <td colSpan={3} className="feedback-cell">
                            <div className="feedback-content-wrapper">
                                <div className="feedback-text"></div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    );

    // 真正的打印函数，使用 Iframe 隔离
    const handlePrintByIframe = (AttachmentComponent: React.ComponentType) => {
        // 1. 创建隐藏的 iframe
        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;

        // 2. 注入样式和容器
        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; }
                        /* 来电内容和转办要求：默认四行 (约 130px) */
                        .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;
                        }

                        /* 关键修复：只有真正的反馈区域才需要 min-height 来撑开全页 */
                        .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; }
                        /* 舆情概况：默认两行 (约 70px) */
                        .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();

        // 3. 将 React 组件渲染到 iframe 中
        const printRoot = iframeDoc.getElementById('print-root');
        if (printRoot) {
            ReactDOM.render(<AttachmentComponent />, printRoot);
        }

        // 4. 调用打印
        setTimeout(() => {
            iframe.contentWindow?.focus();
            iframe.contentWindow?.print();
            // 5. 打印完成后清理
            setTimeout(() => {
                document.body.removeChild(iframe);
            }, 1000);
        }, 300);
    };

    return (
        <div style={{ padding: '24px' }}>
            <div style={{ display: 'flex', gap: '16px', marginBottom: '24px' }}>
                <Button type="primary" onClick={() => handlePrintByIframe(Attachment1)}>打印附件1</Button>
                <Button type="primary" onClick={() => handlePrintByIframe(Attachment2)}>打印附件2</Button>
                <Button type="primary" onClick={() => handlePrintByIframe(Attachment3)}>打印附件3</Button>
            </div>

            <div style={{ color: '#999', fontSize: '14px' }}>
                提示：点击按钮将使用 Iframe 隔离技术打开打印预览。这能确保**只打印表格内容**，而不会包含页面上的其他元素。
                当前已优化布局：转办要求默认2行，反馈结果自动填充剩余页面高度。
            </div>
        </div>
    );
};

export default ComplaintForwardingProcess;
