<template>
  <div class="form-header">
  <h2 class="form-title">住院病案首页</h2>
</div>

<div class="form-content">
  <!-- 医院信息 -->
  <div class="section">
    <div class="section-title">医院信息</div>
    <div class="form-row">
      <div class="form-item">
        <label>组织机构代码:</label>
        <el-input type="text" v-model="formData.hospital.orgCode" placeholder="41275054-7" />
      </div>
      <div class="form-item">
        <label>医疗付费方式:</label>
        <el-select v-model="formData.hospital.paymentMethod">
          <el-option value="">请选择</el-option>
          <el-option value="城镇职工基本医疗保险">城镇职工基本医疗保险</el-option>
          <el-option value="城乡居民基本医疗保险">城乡居民基本医疗保险</el-option>
          <el-option value="自费">自费</el-option>
          <el-option value="其他">其他</el-option>
        </el-select>
      </div>
    </div>
  </div>

  <!-- 患者基本信息 -->
  <div class="section">
    <div class="section-title">患者基本信息</div>
    <div class="form-row">
      <div class="form-item">
        <label>健康卡号:</label>
        <el-input type="text" v-model="formData.patient.healthCardNo" />
      </div>
      <div class="form-item">
        <label>姓名:</label>
        <el-input type="text" v-model="formData.patient.name" />
      </div>
      <div class="form-item">
        <label>性别:</label>
        <el-select v-model="formData.patient.gender">
          <el-option value="" label="请选择"></el-option>
          <el-option value="1" label="男"></el-option>
          <el-option value="2" label="女"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>出生日期:</label>
        <el-date-picker v-model="formData.patient.birthDate" type="date" size="default"></el-date-picker>
      </div>
      <div class="form-item">
        <label>年龄:</label>
        <el-input type="number" max="120" min="0" v-model="formData.patient.age" />
      </div>
      <div class="form-item">
        <label>国籍:</label>
        <el-input type="text" v-model="formData.patient.nationality" placeholder="中国" />
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>籍贯:</label>
        <el-input type="text" v-model="formData.patient.nativePlace" />
      </div>
      <div class="form-item">
        <label>民族:</label>
        <el-input type="text" v-model="formData.patient.ethnicity" placeholder="汉族" />
      </div>
      <div class="form-item">
        <label>身份证号:</label>
        <el-input type="text" v-model="formData.patient.idCardNo" />
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>户口地址:</label>
        <el-input type="text" v-model="formData.patient.householdAddress" />
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>工作单位及地址:</label>
        <el-input type="text" v-model="formData.patient.workUnit" />
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>联系人姓名:</label>
        <el-input type="text" v-model="formData.patient.contactName" />
      </div>
      <div class="form-item">
        <label>关系:</label>
        <el-input type="text" v-model="formData.patient.contactRelation" />
      </div>
      <div class="form-item">
        <label>地址:</label>
        <el-input type="text" v-model="formData.patient.contactAddress" />
      </div>
      <div class="form-item">
        <label>电话:</label>
        <el-input type="text" v-model="formData.patient.contactPhone" />
      </div>
    </div>
  </div>

  <!-- 住院信息 -->
  <div class="section">
    <div class="section-title">住院信息</div>
    <div class="form-row">
      <div class="form-item">
        <label>第几次住院:</label>
        <el-input type="number" v-model="formData.admission.times" min="1" />
      </div>
      <div class="form-item">
        <label>住院号:</label>
        <el-input type="text" v-model="formData.admission.hospitalNo" />
      </div>
      <div class="form-item">
        <label>病案号:</label>
        <el-input type="text" v-model="formData.admission.recordNo" />
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>入院途径:</label>
        <el-select v-model="formData.admission.channel">
          <el-option value="">请选择</el-option>
          <el-option value="1">急诊</el-option>
          <el-option value="2">门诊</el-option>
          <el-option value="3">其他医疗机构转入</el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>入院时间:</label>
        <el-input type="date" v-model="formData.admission.admitTime" />
      </div>
      <div class="form-item">
        <label>入院科室:</label>
        <el-input type="text" v-model="formData.admission.department" />
      </div>
      <div class="form-item">
        <label>病房:</label>
        <el-input type="text" v-model="formData.admission.ward" />
      </div>
      <div class="form-item">
        <label>确诊日期:</label>
        <el-input type="date" v-model="formData.admission.confirmDate" />
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>出院时间:</label>
        <el-input type="datetime-local" v-model="formData.admission.dischargeTime" />
      </div>
      <div class="form-item">
        <label>出院科室:</label>
        <el-input type="text" v-model="formData.admission.dischargeDepartment" />
      </div>
      <div class="form-item">
        <label>病房:</label>
        <el-input type="text" v-model="formData.admission.dischargeWard" />
      </div>
      <div class="form-item">
        <label>实际住院天数:</label>
        <el-input type="number" v-model="formData.admission.hospitalDays" />
      </div>
    </div>
  </div>

  <!-- 诊断信息 -->
  <div class="section">
    <div class="section-title">诊断信息</div>
    <div class="form-row">
      <div class="form-item full-width">
        <label>主要诊断:</label>
        <el-input type="text" v-model="formData.diagnosis.mainDiagnosis" placeholder="腰椎间盘突出症(L4-5)" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-item full-width">
        <label>其他诊断:</label>
        <el-input type="textarea" v-model="formData.diagnosis.otherDiagnosis" placeholder="腰椎管狭窄(L4-5)\n右下肢不全瘫"></el-input>
      </div>
    </div>
  </div>

  <!-- 医疗信息 -->
  <div class="section">
    <div class="section-title">医疗信息</div>
    <div class="form-row">
      <div class="form-item">
        <label>是否输血:</label>
        <el-select v-model="formData.medicalInfo.bloodTransfusion">
          <el-option value="">请选择</el-option>
          <el-option value="1">是</el-option>
          <el-option value="2">否</el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>血型:</label>
        <el-select v-model="formData.medicalInfo.bloodType">
          <el-option value="">请选择</el-option>
          <el-option value="A">A</el-option>
          <el-option value="B">B</el-option>
          <el-option value="AB">AB</el-option>
          <el-option value="O">O</el-option>
          <el-option value="不详">不详</el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>Rh:</label>
        <el-select v-model="formData.medicalInfo.rhType">
          <el-option value="">请选择</el-option>
          <el-option value="1">阴</el-option>
          <el-option value="2">阳</el-option>
          <el-option value="3">不详</el-option>
        </el-select>
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>药物过敏史:</label>
        <el-select v-model="formData.medicalInfo.drugAllergy">
          <el-option value="">请选择</el-option>
          <el-option value="1" label="无"></el-option>
          <el-option value="2" label="有过敏药物"></el-option>
        </el-select>
      </div>
    </div>
  </div>

  <!-- 医师信息 -->
  <div class="section">
    <div class="section-title">医师信息</div>
    <div class="form-row">
      <div class="form-item">
        <label>科主任:</label>
        <el-input type="text" v-model="formData.doctorInfo.departmentDirector" />
      </div>
      <div class="form-item">
        <label>主任(副主任)医师:</label>
        <el-input type="text" v-model="formData.doctorInfo.chiefPhysician" />
      </div>
      <div class="form-item">
        <label>主治医师:</label>
        <el-input type="text" v-model="formData.doctorInfo.attendingPhysician" />
      </div>
      <div class="form-item">
        <label>住院医师:</label>
        <el-input type="text" v-model="formData.doctorInfo.residentPhysician" />
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>责任护士:</label>
        <el-input type="text" v-model="formData.doctorInfo.chargeNurse" />
      </div>
      <div class="form-item">
        <label>住院总医师:</label>
        <el-input type="text" v-model="formData.doctorInfo.chiefResident" />
      </div>
      <div class="form-item">
        <label>实习医师:</label>
        <el-input type="text" v-model="formData.doctorInfo.intern" />
      </div>
    </div>

    <div class="form-row">
      <div class="form-item">
        <label>病案质量:</label>
        <el-select v-model="formData.doctorInfo.recordQuality">
          <el-option value="">请选择</el-option>
          <el-option value="1" label="甲"></el-option>
          <el-option value="2" label="乙"></el-option>
          <el-option value="3" label="丙"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label>编码员:</label>
        <el-input type="text" v-model="formData.doctorInfo.coder" />
      </div>
      <div class="form-item">
        <label>质控日期:</label>
        <el-input type="date" v-model="formData.doctorInfo.qualityControlDate" />
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 表单数据
const formData = reactive({
  //组织机构代码
  medins_orgcode: '',

  //医疗付费方式


  //健康卡号


  //姓名--患者姓名
  patient_name: '',

  //性别--患者性别
  gend: '',

  //出生日期
  brdy: '',

  //年龄
  age: '',

  //国籍
  ntly: '',

  //籍贯
  napl: '',

  //民族
  naty: '',

  //身份证号
  certNo: '',

  //户口地址
  resd_addr:'',

  //工作单位及地址
  empr_addr: '',

  //联系人姓名
  coner_name: '',

  //关系
  patn_rlts: '',

  //地址
  addr: '',

  //电话
  tel: '',

  //第几次住院
  patn_ipt_cnt: '',

  //住院号  mdtrtsn
  ipt_no: '',

  //病案号
  medcasno: '',

  //入院途径
  adm_way: '',

  //入院时间
  adm_time: '',

  //入院科室  adm_dept_codg
  adm_dept_name: '',

  //病房 入院病房
  adm_ward: '',

  //实际住院天数
  act_ipt_days: '',

  //主要诊断----不确定
  diag_code: '',

  //其他诊断


  //是否输血


  //血型


  //Rh


  //药物过敏史


  //科主任    科主任姓名--deptort_name:
  deptort: '',

  //主任(副主任)医师
  chfdr_name: '',

  //主治医师 主诊医师姓名--chfpdr_name
  atddr_no: '',

  //住院医师   住院医师姓名--ipdr_name
  ipdr_code: '',

  //责任护士  责任护士姓名--resp_nurs_name
  resp_nurs_code: '',

  //住院总医师


  //实习医师
  intn_dr_name: '',

  //病案质量  病案质量名称--medcas_qlt_name
  medcas_qlt_code: '',

  //编码员
  codr_name: '',

  //质控日期
  qltctrl_date: '',





















  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: ''
  }
});


</script>

<style scoped>
.hospital-record-form {
  font-family: 'SimSun', serif;
  max-width: 1000px;
  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;
}
</style>
