<template>
  <div class="medical-record-con" id="medical-record" style="line-height: 30px">
    <div id="timeLinePrint-header">
      <el-row>
        <el-col :span="24">
          <div class="hos-name" style="font-family: 'SimSun';font-size:25px;margin-bottom: 10px;">北京美中爱瑞肿瘤医院</div>
        </el-col>
        <el-col :span="24">
          <div class="type" style="font-family: 'SimSun';font-size: 25px;margin-bottom: 16px;">门(急)诊病历</div>
        </el-col>
      </el-row>
      <div class="patient-info" style="padding: 5px 0;border-top: 1px solid #333;border-bottom: 1px solid #333;margin:25px 0 0;">
        <div style="text-align: left;">
          <div  style="font-family: 'SimSun';height: 40px;line-height: 40px;font-size: 23px;color: black;width: 40%;display: inline-block;text-align: left;">
            <span class="label"
              >患者<span class="Arial">ID/Patient ID</span>：</span
            >
            <span class="text" v-show="caseHistory.patientId">{{
              caseHistory.patientId
              }}</span>
          </div>
          <div  style="font-family: 'SimSun';height: 40px;line-height: 40px;font-size: 23px;color: black;width: 40%;display: inline-block;text-align: left;">
            <span class="label"
              >姓名<span class="Arial">/Patient Name</span>：</span
            >
            <span class="text" v-show="caseHistory.patientName">{{
              caseHistory.patientName
              }}</span>
          </div>
          <div  style="font-family: 'SimSun';height: 40px;line-height: 40px;font-size: 23px;color: black;width: 40%;display: inline-block;text-align: left;">
             <span class="label"
              >出生日期<span class="Arial">/Date of Birth</span>：</span
            >
            <span class="text" v-show="caseHistory.year">{{
              caseHistory.year
              }}</span>
          </div>
          <div  style="font-family: 'SimSun';height: 40px;line-height: 40px;font-size: 23px;color: black;width: 30%;display: inline-block;text-align: left;">
            <span class="label">性别<span class="Arial">/Gender</span>：</span>
            <span class="text">{{ caseHistory.sex === "M" ? "男" : "女" }}</span>
          </div>
          <div  style="font-family: 'SimSun';height: 40px;line-height: 40px;font-size: 23px;color: black;width: 20%;display: inline-block;text-align: left;">
            <span class="label">年龄<span class="Arial">/Age</span>：</span>
            <span class="text">{{ caseHistory.age }}</span><span class="label" style="margin-left:5px">岁</span>
          </div>
          
          <!-- <el-col :span="7">
            <span class="label"
              >婚姻<span class="Arial">/Marital Status</span>：</span
            >
            <span class="text" v-show="caseHistory.marriage">{{
              caseHistory.marriage
            }}</span>
          </el-col> -->
          <div  style="font-family: 'SimSun';height: 40px;line-height: 40px;font-size: 23px;color: black;width: 50%;display: inline-block;text-align: left;" >
            <span class="label"
              >就诊科室<span class="Arial">/Department</span>：</span
            >
            <span class="text" v-show="caseHistory.deptName">{{
              caseHistory.deptName
              }}</span>
          </div>
          <!-- <el-col :span="8">
            <span class="label">民族<span class="Arial">/Ethnicity</span>：</span>
            <span class="text" v-show="caseHistory.nation">{{
              caseHistory.nation
            }}</span>
          </el-col>
          <el-col :span="7">
            <span class="label"
              >职业<span class="Arial">/Occupation</span>：</span
            >
            <span class="text" v-show="caseHistory.profession">{{
              caseHistory.profession
            }}</span>
          </el-col> -->
          <div  style="font-family: 'SimSun';height: 40px;line-height: 40px;font-size: 23px;color: black;width: 50%;display: inline-block;text-align: left;">
            <span class="label"
              >就诊日期<span class="Arial">/Arrival Time</span>：</span
            >
            <span class="text" v-show="caseHistory.date">{{
              caseHistory.date
              }}</span>
          </div>
          <!-- <el-col :span="24">
            <span class="label"
              >工作单位或地址<span class="Arial">/Employer or Address</span
              >：</span
            >
            <span class="text" v-show="caseHistory.workUnit">{{
              caseHistory.workUnit
            }}</span>
          </el-col>
          <el-col :span="24">
            <span class="label"
              >过敏史<span class="Arial">/Allergy History</span>：</span
            >
            <span
              class="text"
              v-show="caseHistory.allergyCon.length || caseHistory.allergyText"
            >
              <template v-if="caseHistory.allergyText">
                <span>{{ caseHistory.allergyText }}</span>
              </template>
              <span v-for="(item, index) of caseHistory.allergyCon" :key="index">
                <span v-if="index > 0">,</span>{{ item.allergenName }}
              </span>
            </span>
          </el-col> -->
        </div>
      </div>
    </div>
    <div id="timeLinePrint-content">
      <div>
        <span class="label-bold" style="font-weight: bold; font-family: 'SimSun';font-size: 23px;width: 150px;">主诉：</span>
        <span class="info-content" style="white-space: pre-wrap;font-family: 'SimSun';font-size: 23px;font-weight: lighter;">
          {{ caseHistory.mainSuit }}
        </span>
      </div>
      <div>
        <span class="label-bold" style="font-weight: bold;font-family: 'SimSun';font-size: 23px;width: 150px;">现病史：</span>
        <span class="info-content" style="white-space: pre-wrap;font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height:40px;">
          {{ caseHistory.historyIllness }}
        </span>
      </div>
      <div>
        <span class="label-bold" style="font-weight: bold;font-family: 'SimSun';font-size: 23px;">既往史：</span>
        <span class="info-content" style="white-space: pre-wrap;">
          <span style="font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height: 40px;">否认疫区(含境外、国内中高风险地区或重点地区)旅居史;</span>
          <span v-if="caseHistory.pastHistory" style="margin-right: 10px;white-space: pre-wrap;font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height: 40px;">{{
            "既往史:" + caseHistory.pastHistory
          }}</span>
          <span v-if="caseHistory.personalHistory" style="margin-right: 10px;white-space: pre-wrap;font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height: 40px;">{{
            "个人史:" + caseHistory.personalHistory
          }}</span>
          <span v-if="caseHistory.marryHistory" style="margin-right: 10px;white-space: pre-wrap;font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height: 40px;">{{
            "月经/婚育史:" + caseHistory.marryHistory
          }}</span>
          <span v-if="caseHistory.familyHistory" style="margin-right: 10px;white-space: pre-wrap;font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height: 40px;">{{
            "家族史:" + caseHistory.familyHistory
          }}</span>
        </span>
      </div>
      <div>
        <span class="label-bold" style="font-weight: bold;font-family: 'SimSun';font-size: 23px;">体格检查：</span>
        <span class="info-content" style="white-space: pre-wrap;font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height: 40px;">
          {{ caseHistory.physicalExamination }}
        </span>
      </div>
      <div>
        <span class="label-bold" style="font-weight: bold;font-family: 'SimSun';font-size: 23px;">辅助检查结果：</span>
        <span class="info-content" style="white-space: pre-wrap;font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height: 40px;">
          {{ caseHistory.todayCheckRemark }}
        </span>
      </div>
      <div>
        <span class="label-bold" style="font-weight: bold;font-family: 'SimSun';font-size: 23px;">诊断：</span>
        <span class="info-content"  style="white-space: pre-wrap;font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height: 40px;">{{caseHistory.diagnose}}</span>
      </div>
      <div>
        <span class="label-bold" style="font-weight: bold;font-family: 'SimSun';font-size: 23px;">诊疗意见：</span>
        <span class="info-content"  style="white-space: pre-wrap;font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height: 40px;">{{caseHistory.medicalOpinion}}</span>
      </div>
      <el-row style="margin-top: 50px">
        <el-col :span="24">
          <span class="info-content"> </span>
        </el-col>
      </el-row>
      <el-row class="flex-one" style="margin: 150px 0px 0px 0px;flex: 1;">
        <el-col :span="24">
          <div class="signature-con" style="text-align: right;">
            <span class="title" style="font-weight: bold;font-family: 'SimSun';font-size: 23px;text-align: left;color: #2f2f2f;line-height: 40px;">医师签名：</span>
            <span class="signature" style="margin-bottom: -5px;display: inline-block;width: 200px;border-bottom: 1px solid #333333;">
              <img src="" alt="" />
            </span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: ["caseHistory"],
};
</script>

<style scoped lang="less">
.medical-record-con {
  background-color: #ffffff;
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 970px;
  padding: 30px 30px 20px 30px;
  flex-direction: column;
  margin: 0 auto;
  section {
    margin-bottom: 0px;
  }
  .label-bold {
    font-weight: bold;
    font-family: "SimSun";
    font-size: 16px;
  }
  .patient-info {
    padding: 5px 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 25px 0;
    .label {
      font-family: "SimSun";
      height: 40px;
      line-height: 40px;
      font-size: 20px;
    }
    .Arial {
      font-family: "Arial";
    }
    .text {
      font-family: "SimSun";
      height: 40px;
      line-height: 40px;
      font-size: 20px;
    }
  }
  section {
    // margin-bottom: 5px;
  }
  .flex-one {
    margin: 150px 0px 0px 0px;
    flex: 1;
    // position: absolute;
    // right: 10px;
    // bottom: 40px;
    // display: flex;
    // flex-direction: column;
    // justify-info-content: space-between;
  }
  .print {
    position: absolute;
    right: -100px;
    top: 200px;
  }
  .hos-name,
  .type {
    text-align: center;
  }
  .hos-name {
     font-weight: bold;
    font-family: "SimSun";
    font-size: 20px;
    color: #2f2f2f;
    line-height: 30px;
    margin-bottom: 10px;
  }
  .type {
    font-weight: bold;
    font-family: "SimSun";
    letter-spacing: 5px;
    font-size: 20px;
    color: #2f2f2f;
    line-height: 30px;
    margin-bottom: 16px;
  }
  .info-content {
    font-family: "SimSun";
    font-size: 16px;
    text-align: left;
    color: #2f2f2f;
    line-height: 40px;
  }
  .signature-con {
    text-align: right;
    .title {
      font-weight: bold;
      font-family: "SimSun";
      font-size: 16px;
      text-align: left;
      color: #2f2f2f;
      line-height: 40px;
    }
    .signature {
      margin-bottom: -5px;
      display: inline-block;
      width: 200px;
      border-bottom: 1px solid #333333;
    }
  }
}
</style>
