<script lang="ts" setup>
import {ref} from 'vue';
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();

// 1. 基础信息（复用已有变量，补充一致性格式）
const patientInfo = ref({
  name: '',
  department: '',
  bed: '',
  inpatientNo: '',
});

defineOptions({
  name: 'ProgressNoteform',
});

// 2. 首次病程记录（复用已有变量，补充文本格式）
const firstRecordTime = ref('');
const firstRecordIntro = ref(
  ''
);
const caseFeatures =
  ref('');

const chinaDiscussion = ref('');

const westDiscussion = ref('');

const preliminaryDiagnosis = ref('');

const treatmentPlan = ref(''); // 添加缺失的变量

// 3. 后续查房/会诊记录（新增，还原PDF所有章节）
const roundRecords = ref([
  {
    title: '',
    time: '',
    content: '',
    signature: { doctor: '', physician: '主治医师签名:' }, // 区分普通医师和主治医师签名
  },
  {
    title: '',
    time: '',
    content: '',
    signature: { doctor: '', physician: '副主任医师签名:' },
  },
  {
    title: '',
    time: '',
    content: '',
    signature: { doctor: '', physician: '' },
  },
  {
    title: '',
    time: '',
    content: '',
    signature: { doctor: '', physician: '' },
  },
  {
    title: '',
    time: '',
    content: '',
    signature: { doctor: '', physician: '' },
  },
  {
    title: '',
    time: '',
    content: '',
    signature: { doctor: '', physician: '' },
  },
  {
    title: '',
    time: '',
    content: '',
    signature: { doctor: '', physician: '' },
  },
  {
    title: '',
    time: '',
    content: '',
    signature: { doctor: '', physician: '' },
  },
]);

// 4. 签名变量（支持所有记录的签名输入）
interface Signatures {
  firstDoctor: string;
  [key: string]: string;
}

const signatures = ref<Signatures>({
  firstDoctor: '', // 首次病程记录医师签名
  ...roundRecords.value.reduce((acc, record, index) => {
    acc[`round${index}Doctor`] = '';
    acc[`round${index}Physician`] = '';
    return acc;
  }, {} as Record<string, string>),
});

// 5. 打印功能：控制打印范围+样式
const handlePrint = () => {
  // 1. 触发浏览器打印
  window.print();
};

// 暴露接口
defineExpose({ patientInfo, firstRecordTime, firstRecordIntro, caseFeatures, chinaDiscussion, westDiscussion, preliminaryDiagnosis, treatmentPlan, roundRecords, signatures });
</script>

<template>
  <div class="medical-record-container">
    <!-- 打印按钮：固定在顶部，非打印内容 -->
    <div class="print-btn-container no-print">
      <el-button type="primary" @click="handlePrint">打印病历</el-button>
    </div>

    <!-- 病历主体：打印核心内容 -->
    <div class="medical-record">
      <!-- 1. 医院头部（每一页PDF均包含，复用已有样式） -->
      <div class="hospital-header">
        <img src="./imgs/logo.png" :alt="userStore.hospitalName + 'Logo'" class="header-logo" />
        <h1 class="hospital-name">{{ userStore.hospitalName }}</h1>
      </div>

      <!-- 2. 患者信息栏（每一页PDF均包含，下划线样式） -->
      <div class="patient-info">
        <span class="info-item">姓名:{{ patientInfo.name }}</span>
        <span class="info-item">科室:{{ patientInfo.department }}</span>
        <span class="info-item">床号:{{ patientInfo.bed }}</span>
        <span class="info-item">住院号:{{ patientInfo.inpatientNo }}</span>
      </div>

      <!-- 3. 首次病程记录 -->
      <div class="record-section">
        <h2 class="section-main-title">首 次 病 程 记 录</h2>
        <div class="record-time">{{ firstRecordTime }}</div>
        <el-input v-model="firstRecordIntro" autosize type="textarea" class="clean-textarea" />

        <!-- 病例特点 -->
        <h3 class="section-sub-title">一、病例特点</h3>
        <el-input v-model="caseFeatures" autosize type="textarea" class="clean-textarea" />

        <!-- 拟诊讨论 -->
        <h3 class="section-sub-title">二、拟诊讨论</h3>
        <el-input v-model="chinaDiscussion" autosize type="textarea" class="clean-textarea" />
        <el-input v-model="westDiscussion" autosize type="textarea" class="clean-textarea" />

        <!-- 初步诊断 -->
        <el-input v-model="preliminaryDiagnosis" autosize type="textarea" class="clean-textarea" />

        <!-- 诊疗计划 -->
        <el-input v-model="treatmentPlan" autosize type="textarea" class="clean-textarea" />

        <!-- 首次病程记录签名 -->
        <div class="signature-group">
          <span class="signature-label">医师签名:</span>
          <el-input v-model="signatures.firstDoctor" autosize type="textarea" class="clean-textarea signature-input"
            :rows="1" />
        </div>
      </div>

      <!-- 4. 分页分隔线（模拟PDF分页，打印时自动分页） -->
      <div class="page-break"></div>

      <!-- 5. 后续查房/会诊记录（按时间顺序） -->
      <div v-for="(record, index) in roundRecords" :key="index" class="record-section">
        <!-- 重复患者信息（与PDF一致） -->
        <div class="patient-info page-repeated-info">
          <span class="info-item">姓名:{{ patientInfo.name }}</span>
          <span class="info-item">科室:{{ patientInfo.department }}</span>
          <span class="info-item">床号:{{ patientInfo.bed }}</span>
          <span class="info-item">住院号:{{ patientInfo.inpatientNo }}</span>
        </div>

        <!-- 查房标题+时间 -->
        <h2 class="section-main-title">{{ record.title }}</h2>
        <div class="record-time">{{ record.time }}</div>

        <!-- 查房内容 -->
        <el-input v-model="record.content" autosize type="textarea" class="clean-textarea" />

        <!-- 查房签名（区分普通医师/上级医师） -->
        <div class="signature-group">
          <span class="signature-label">医师签名:</span>
          <el-input v-model="signatures[`round${index}Doctor`]" autosize type="textarea"
            class="clean-textarea signature-input" :rows="1" />

          <span v-if="record.signature.physician" class="signature-label ml-20">
            {{ record.signature.physician }}
          </span>
          <el-input v-if="record.signature.physician" v-model="signatures[`round${index}Physician`]" autosize
            type="textarea" class="clean-textarea signature-input" :rows="1" />
        </div>

        <!-- 分页分隔线（最后一条记录无需分页） -->
        <div v-if="index !== roundRecords.length - 1" class="page-break"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 1. 容器基础样式 */
.medical-record-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.print-btn-container {
  margin-bottom: 20px;
  text-align: right;
}

/* 2. 病历主体样式（模拟A4纸） */
.medical-record {
  max-width: 210mm;
  /* A4宽度 */
  min-height: 297mm;
  /* A4高度 */
  margin: 0 auto;
  padding: 20mm;
  /* A4页边距 */
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  font-family: 'SimSun', '宋体', serif;
  /* 病历标准字体 */
}

/* 3. 医院头部样式 */
.hospital-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.header-logo {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.hospital-name {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  margin: 0;
}

/* 4. 患者信息样式 */
.patient-info {
  border-bottom: 1px solid #000;
  padding: 5px 0;
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 1.5;
}

.info-item {
  margin-right: 30px;
  white-space: nowrap;
}

/* 5. 记录章节样式 */
.record-section {
  margin-bottom: 30px;
}

.section-main-title {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  margin: 15px 0;
}

.section-sub-title {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

.record-time {
  font-size: 14px;
  margin-bottom: 15px;
  color: #666;
}

/* 6. 签名区域样式 */
.signature-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.signature-label {
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

.signature-input {
  width: 200px;
  flex-shrink: 0;
}

.ml-20 {
  margin-left: 20px;
}

/* 7. 分页分隔线（模拟PDF分页） */
.page-break {
  height: 1px;
  background-color: #eee;
  margin: 30px 0;
  page-break-after: always;
  /* 打印时强制分页 */
}

/* 8. 重复信息样式（后续页面的患者信息） */
.page-repeated-info {
  margin-top: 20px;
}

/* 9. 清洁输入框样式（复用已有，确保无边框） */
:deep(.clean-textarea .el-textarea__wrapper) {
  background-color: transparent;
  padding: 0;
  border: none;
}

:deep(.clean-textarea .el-textarea__inner) {
  border: none;
  background-color: transparent;
  padding: 0;
  resize: none;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.8;
  /* 病历标准行高 */
  color: #000;
}

:deep(.clean-textarea .el-textarea__inner:focus) {
  outline: none;
  box-shadow: none;
}

/* 10. 打印专属样式：控制打印效果 */
@media print {

  /* 隐藏非打印内容（如打印按钮） */
  .no-print {
    display: none !important;
  }

  /* 强制A4尺寸+无边距 */
  @page {
    size: A4;
    margin: 15mm;
    /* 打印页边距，匹配PDF */
  }

  /* 确保背景色打印（部分浏览器默认不打印背景） */
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background-color: #fff;
  }

  /* 病历主体无边框阴影，仅打印内容 */
  .medical-record {
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  /* 文本不换行优化 */
  .info-item {
    margin-right: 20px;
  }

  /* 确保输入框内容正常打印 */
  :deep(.el-textarea__inner) {
    border: none !important;
  }
}
</style>
