<template>
    <div style="padding: 20px; background: #f8f9fa; min-height: 100vh;" ref="bodyRef">
        <!-- 标题区域 - 强化正式感 -->
        <div
            style="text-align: center; margin-bottom: 30px; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.03);">
            <div style="font-size: 22px; color: #2d3748; letter-spacing: 1px;">长春市朝阳区中医院</div>
            <div
                style="font-size: 28px; font-weight: 700;  margin: 12px 0; padding: 8px 0; border-bottom: 2px solid #e8f4f8; display: inline-block;">
                住院患者入院沟通记录单</div>
            <div style="display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 15px; ">
                <span style="font-weight: 500;">住院号：</span>
                <span style="font-weight: 600; text-decoration: underline;">20210001</span>
            </div>
        </div>

        <!-- 基本信息模块 -->
        <div class="card-container">
            <div class="card-header">
                <span class="card-title">基本信息</span>
            </div>
            <div class="card-content grid-2col">
                <div class="info-item">
                    <span class="info-label">姓名：</span>
                    <span class="info-value">张三</span>
                </div>
                <div class="info-item">
                    <span class="info-label">性别：</span>
                    <span class="info-value">男</span>
                </div>
                <div class="info-item">
                    <span class="info-label">年龄：</span>
                    <span class="info-value">34 岁</span>
                </div>
                <div class="info-item">
                    <span class="info-label">科室/病区：</span>
                    <span class="info-value">中医科</span>
                </div>
                <div class="info-item">
                    <span class="info-label">病房/床号：</span>
                    <span class="info-value">305-2</span>
                </div>
                <div class="info-item">
                    <span class="info-label">入院日期：</span>
                    <span class="info-value">2025-02-14</span>
                </div>
            </div>
        </div>

        <!-- 团队信息模块 -->
        <div class="card-container">
            <div class="card-header">
                <span class="card-title">团队信息</span>
            </div>
            <div class="card-content grid-2col">
                <div class="info-item">
                    <span class="info-label">经治医生：</span>
                    <span class="info-value">华佗</span>
                </div>
                <div class="info-item">
                    <span class="info-label">主治医生：</span>
                    <span class="info-value">王海明</span>
                </div>
                <div class="info-item">
                    <span class="info-label">科主任：</span>
                    <span class="info-value">特斯拉</span>
                </div>
            </div>
        </div>

        <!-- 病情与诊断模块 -->
        <div class="card-container">
            <div class="card-header">
                <span class="card-title">病情与诊断</span>
            </div>
            <div class="card-content grid-2col">
                <div class="info-item">
                    <span class="info-label">病情状况：</span>
                    <div class="info-value multi-line">
                        1111111111111111111111111111111111111111111111111111111111111111111111111111</div>
                </div>
                <div class="info-item">
                    <span class="info-label">中医诊断：</span>
                    <div class="info-value multi-line">
                        1111111111111111111111111111111111111111111111111111111111111111111111111111</div>
                </div>
                <div class="info-item">
                    <span class="info-label">西医诊断：</span>
                    <div class="info-value multi-line">
                        1111111111111111111111111111111111111111111111111111111111111111111111111111</div>
                </div>
            </div>
        </div>

        <!-- 治疗与检查计划模块 -->
        <div class="card-container">
            <div class="card-header">
                <span class="card-title">治疗与检查计划</span>
            </div>
            <div class="card-content grid-2col">
                <div class="info-item">
                    <span class="info-label">治疗方案：</span>
                    <div class="info-value multi-line">
                        1111111111111111111111111111111111111111111111111111111111111111111111111111</div>
                </div>
                <div class="info-item">
                    <span class="info-label">进一步检查项目：</span>
                    <div class="info-value multi-line">血常规、肝肾功能、腹部B超、心电图、中医辨证分型检查、肿瘤标志物筛查</div>
                </div>
            </div>
        </div>

        <!-- 风险告知模块 -->
        <div class="card-container">
            <div class="card-header">
                <span class="card-title">风险告知</span>
            </div>
            <div class="card-content">
                <div class="info-item full-width">
                    <span class="info-label">告知内容：</span>
                    <div class="info-value multi-line">
                        1. 治疗过程中可能出现药物不良反应（如过敏、胃肠道不适等），若出现不适需及时告知医护人员；<br />
                        2. 检查项目存在一定的操作风险（如穿刺出血、感染等），医护人员将严格按照规范操作；<br />
                        3. 病情可能因个体差异出现变化，需根据实际情况调整治疗方案；<br />
                        4. 若患者存在隐瞒病史、不配合治疗等情况，可能影响治疗效果，相关风险由患者自行承担。
                    </div>
                </div>
            </div>
        </div>

        <!-- 签署确认模块 -->
        <div class="card-container">
            <div class="card-header">
                <span class="card-title">签署确认</span>
            </div>
            <div class="card-content grid-2col">
                <div class="info-item">
                    <span class="info-label">患者或家属：</span>
                    <span class="info-value">张三</span>
                </div>
                <div class="info-item">
                    <span class="info-label">与患者关系：</span>
                    <span class="info-value">妻子</span>
                </div>
                <div class="info-item">
                    <span class="info-label">签字日期：</span>
                    <span class="info-value">2025-02-14</span>
                </div>
                <div class="info-item">
                    <span class="info-label">沟通医师签字：</span>
                    <span class="info-value">华佗</span>
                </div>
                <div class="info-item">
                    <span class="info-label">沟通日期：</span>
                    <span class="info-value">2025-02-14</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
/* 全局卡片容器统一样式 */
.card-container {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    background: #fff;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

/* 卡片hover效果 */
.card-container:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* 卡片头部样式 */
.card-header {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #f5fafe;
    display: flex;
    align-items: center;
}

/* 卡片标题样式 */
.card-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 卡片内容区统一样式 */
.card-content {
    padding: 22px;
    gap: 20px;
}

/* 2列网格布局（桌面端） */
.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* 信息项统一样式 */
.info-item {
    display: flex;
    align-items: flex-start;
    /* 改为顶端对齐，适配多行文本 */
    padding: 9px 0;
    gap: 8px;
}

/* 信息标签样式 */
.info-label {
    font-weight: 500;
    color: #333;
    min-width: 110px;
    font-size: 15px;
    padding-top: 5px;
    /* 对齐多行文本的顶部 */
}

/* 信息值样式（单行） */
.info-value {
    font-size: 15px;
    color: #222;
    padding: 5px 12px;
    background: #f9f9f9;
    border-radius: 4px;
    flex: 1;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    min-height: 28px;
    /* 确保单行和多行高度一致 */
    display: flex;
    align-items: center;
}

/* 多行文本样式（适配长内容） */
.info-value.multi-line {
    align-items: flex-start;
    padding: 10px 12px;
    line-height: 1.6;
    min-height: 80px;
    /* 最小高度，避免内容过少时显得空旷 */
    white-space: pre-line;
    /* 支持换行符和空格 */
}

/* 全屏宽度信息项（如风险告知） */
.info-item.full-width {
    width: 100%;
}

/* 信息值hover效果 */
.info-value:hover {
    background: #f2f2f2;
    border-color: #e0e0e0;
}

/* 响应式适配（移动端1列布局） */
@media (max-width: 768px) {
    .grid-2col {
        grid-template-columns: 1fr;
    }

    .card-content {
        padding: 16px;
        gap: 16px;
    }

    .card-header {
        padding: 12px 16px;
    }

    .card-title {
        font-size: 16px;
    }

    .info-item {
        padding: 10px 0;
    }

    .info-label {
        min-width: 90px;
        font-size: 14px;
        padding-top: 4px;
    }

    .info-value {
        font-size: 14px;
        padding: 4px 10px;
        min-height: 24px;
    }

    .info-value.multi-line {
        padding: 8px 10px;
        min-height: 60px;
        line-height: 1.5;
    }

    /* 标题区域适配移动端 */
    div[style*="font-size: 28px"] {
        font-size: 24px !important;
    }

    div[style*="font-size: 22px"] {
        font-size: 20px !important;
    }
}

/* 打印样式优化 */
@media print {
    body {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        background: #fff !important;
    }

    .card-container {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        margin-bottom: 15px !important;
        transform: none !important;
    }

    .card-header {
        background: #f8f8f8 !important;
        border-bottom: 1px solid #ddd !important;
    }

    .info-value {
        background: #fff !important;
        border: 1px dashed #eee !important;
    }

    .card-container:hover {
        box-shadow: none !important;
    }
}
</style>
<script setup>

</script>