<template>
  <div class="hospital-record-form">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="病案首页(一)" name="first">
        <medicalRecordFirst :formData="formData"></medicalRecordFirst>
      </el-tab-pane>
      <el-tab-pane label="病案首页(二)" name="second">
        <medicalRecordSecond :formData="formData"></medicalRecordSecond>
      </el-tab-pane>
      <el-tab-pane label="病案附页(一)" name="third">
        <medicalRecordThird :formData="formData"></medicalRecordThird>
      </el-tab-pane>
    </el-tabs>

    <div class="form-footer">
      <button @click="printForm" class="print-btn">打印表单</button>
      <button @click="resetForm" class="reset-btn">重置表单</button>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: 'HospitalRecordForm',
});
import { ref, reactive } from 'vue';
// import medicalRecordFirst from './components/medicalRecordFirst.vue';
import medicalRecordFirst from '@/views/hospitalRecord/components/medicalRecordFirst.vue';
import medicalRecordSecond from '@/views/hospitalRecord/components/medicalRecordSecond.vue';
import medicalRecordThird from '@/views/hospitalRecord/components/medicalRecordThird.vue';
import medicalRecordFirstPrint from '@/views/hospitalRecord/components/medicalRecordFirstPrint.json';
import medicalRecordSecondPrint from '@/views/hospitalRecord/components/medicalRecordSecondPrint.json';
import medicalRecordThirdPrint from '@/views/hospitalRecord/components/medicalRecordThirdPrint.json';

// 表单数据
const formData = reactive({
  hospital: {
    orgCode: '41275054-7',
    paymentMethod: '城乡居民基本医疗保险'
  },
  patient: {
    healthCardNo: '',
    name: '',
    gender: '',
    birthDate: '',
    age: '',
    nationality: '中国',
    nativePlace: '',
    ethnicity: '汉族',
    idCardNo: '',
    householdAddress: '',
    workUnit: '',
    contactName: '',
    contactRelation: '',
    contactAddress: '',
    contactPhone: ''
  },
  admission: {
    times: 1,
    hospitalNo: '',
    recordNo: '',
    channel: '',
    admitTime: '',
    department: '',
    ward: '',
    confirmDate: '',
    dischargeTime: '',
    dischargeDepartment: '',
    dischargeWard: '',
    hospitalDays: ''
  },
  diagnosis: {
    mainDiagnosis: '',
    otherDiagnosis: ''
  },
  medicalInfo: {
    bloodTransfusion: '2',
    bloodType: '',
    rhType: '',
    drugAllergy: '1'
  },
  doctorInfo: {
    departmentDirector: '',
    chiefPhysician: '',
    attendingPhysician: '',
    residentPhysician: '',
    chargeNurse: '',
    chiefResident: '',
    intern: '',
    recordQuality: '1',
    coder: '',
    qualityControlDate: ''
  }
});

const activeName = ref('first');

// 打印表单
const printForm = () => {
  // 创建一个新的打印窗口
  const printWindow = window.open('', '_blank');
  let printContent
  // 获取模板字符串并替换转义的插值标记
  if(activeName.value == 'first') {
    printContent = medicalRecordFirstPrint.printContent;
  }else if(activeName.value == 'second') {
    printContent = medicalRecordSecondPrint.printContent;
  }else {
    printContent = medicalRecordThirdPrint.printContent;
  }
  // 这里可以进行实际的数据替换操作
  printContent = printContent.replace(/\$\{([^}]+)\}/g, (match, expr) => {
    // 简单示例：实际应根据expr内容进行数据提取
    return eval(expr); // 注意：实际使用中应避免eval，这里仅为示例
  });
  // 将内容写入打印窗口并打印
  printWindow.document.write(printContent);
  printWindow.document.close();
}

function handleClick() {

}

// 重置表单
const resetForm = () => {
  Object.keys(formData).forEach(key => {
    if (typeof formData[key] === 'object') {
      Object.keys(formData[key]).forEach(subKey => {
        formData[key][subKey] = '';
      });
    } else {
      formData[key] = '';
    }
  });

  // 重置默认值
  formData.hospital.orgCode = '41275054-7';
  formData.hospital.paymentMethod = '城乡居民基本医疗保险';
  formData.patient.nationality = '中国';
  formData.patient.ethnicity = '汉族';
  formData.admission.times = 1;
  formData.medicalInfo.bloodTransfusion = '2';
  formData.medicalInfo.drugAllergy = '1';
  formData.doctorInfo.recordQuality = '1';
};
</script>

<style scoped>
/*max-width: 1000px;*/
.hospital-record-form {
  font-family: 'SimSun', serif;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
}

.hospital-name {
  font-size: 24px;
  margin-bottom: 10px;
}

.form-title {
  font-size: 20px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  display: inline-block;
}

.section {
  margin-bottom: 30px;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.form-item {
  flex: 1;
  min-width: 200px;
  margin-right: 15px;
  margin-bottom: 8px;
}

.form-item.full-width {
  flex: 0 0 100%;
  min-width: 100%;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
}

input, select, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

.form-footer {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.print-btn, .reset-btn {
  padding: 10px 20px;
  margin: 0 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.print-btn {
  background-color: #4CAF50;
  color: white;
}

.reset-btn {
  background-color: #f44336;
  color: white;
}

/* 打印样式 */
@media print {
  body {
    margin: 0;
    padding: 0;
    background-color: white;
  }

  .hospital-record-form {
    box-shadow: none;
    padding: 0;
  }

  .form-footer {
    display: none;
  }

  @page {
    size: A4;
    margin: 2cm;
  }
}
</style>