<template>
  <div style="padding-top:30px;width:790px">
    <div class="report-name"
    style="font-family: 'SimSun';text-align: center;
      font-size:16px;
      color: #000;
      font-weight: bold;
      margin-bottom: 10px;">北京美中爱瑞肿瘤医院检验报告单</div>
    <el-row>
      <el-col :span="8">
        <span class="label">
          <span class="SimSun" style=" font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">患者</span>
          <span class="Arial" style="font-family: 'Arial';height: 25px;line-height: 25px;font-size:12px;color: #000;">ID/Patient ID：</span>
        </span>
        <span class="con" style="font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">{{
          inspectInfo.reportPatientInfo.healthCardNo
        }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">
          <span class="SimSun" style=" font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">姓 名</span>
          <span class="Arial" style="font-family: 'Arial';height: 25px;line-height: 25px;font-size:12px;color: #000;">/Patient Name：</span>
        </span>
        <span class="con" style="font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">{{ inspectInfo.reportPatientInfo.patientName }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">
          <span class="SimSun" style=" font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">性 别</span>
          <span class="Arial" style="font-family: 'Arial';height: 25px;line-height: 25px;font-size:12px;color: #000;">/Gender：</span>
        </span>
        <span class="con" style="font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">{{
          inspectInfo.reportPatientInfo.gender === "F" ? "女" : "男"
        }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">
          <span class="SimSun" style=" font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">科 室</span>
          <span class="Arial" style="font-family: 'Arial';height: 25px;line-height: 25px;font-size:12px;color: #000;">/Department：</span>
        </span>
        <span class="con" style="font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">{{ inspectInfo.reportPatientInfo.deptName }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">
          <span class="SimSun" style=" font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">出生日期</span>
          <span class="Arial" style="font-family: 'Arial';height: 25px;line-height: 25px;font-size:12px;color: #000;">/Date of Birth：</span>
        </span>
        <span class="con" style="font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">{{ inspectInfo.reportPatientInfo.birthday }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">
          <span class="SimSun" style=" font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">年 龄</span>
          <span class="Arial" style="font-family: 'Arial';height: 25px;line-height: 25px;font-size:12px;color: #000;">/Age：</span>
        </span>
        <span class="con" style="font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">{{ inspectInfo.reportPatientInfo.age }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">
          <span class="SimSun" style=" font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">标本类型</span>
          <span class="Arial" style="font-family: 'Arial';height: 25px;line-height: 25px;font-size:12px;color: #000;">/Type of Specimen：</span>
        </span>
        <span class="con" style="font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">{{ inspectInfo.reportPatientInfo.specimen }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">
          <span class="SimSun" style=" font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">临床印象</span>
          <span class="Arial" style="font-family: 'Arial';height: 25px;line-height: 25px;font-size:12px;color: #000;">/Clinical Impression：</span>
        </span>
        <span class="con" style="font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;maxWidth: 200px">{{
          inspectInfo.reportPatientInfo.relevantClinicDiag
        }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">
          <span class="SimSun" style=" font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">检验项目</span>
          <span class="Arial" style="font-family: 'Arial';height: 25px;line-height: 25px;font-size:12px;color: #000;">/Test Name：</span>
        </span>
        <span class="con" style="font-family: 'SimSun';height: 25px;line-height: 25px;font-size:12px;color: #000;">{{
          inspectInfo.reportPatientInfo.testName
        }}</span>
      </el-col>
    </el-row>
    <div class="table-report-con">
      <table width="100%" style="border-bottom: 1px solid #333;"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th align="center" width="200px" style="border-top: 1px solid #333;font-size:12px;border-bottom: 1px solid #333;text-align: center; line-height: 30px;height: 30px;border-collapse:collapse;">分析项目</th>
          <th align="center" width="120px" style="border-top: 1px solid #333;font-size:12px;border-bottom: 1px solid #333;text-align: center; line-height: 30px;height: 30px;border-collapse:collapse;">英文名称</th>
          <th align="center" width="100px" style="border-top: 1px solid #333;font-size:12px;border-bottom: 1px solid #333;text-align: center; line-height: 30px;height: 30px;border-collapse:collapse;">结果</th>
          <th align="center" width="40px" style="border-top: 1px solid #333;font-size:12px;border-bottom: 1px solid #333;text-align: center; line-height: 25px;height: 25px;border-collapse:collapse;"></th>
          <th align="center" width="80px" style="border-top: 1px solid #333;font-size:12px;border-bottom: 1px solid #333;text-align: center; line-height: 30px;height: 30px;border-collapse:collapse;">单位</th>
          <th align="center" width="210px" style="border-top: 1px solid #333;font-size:12px;border-bottom: 1px solid #333;text-align: center; line-height: 30px;height: 30px;border-collapse:collapse;">参考区间</th>
        </tr>
        <tr v-for="(item,index) of inspectInfo.list" :key="index">
          <td align="center" width="200px" style="text-align: center;color:#000;font-size:12px; line-height: 30px;height: 30px;">{{item.itemName}}</td>
          <td align="center" width="120px" style="text-align: center;color:#000;font-size:12px; line-height: 30px;height: 30px;">{{item.itemEnName}}</td>
          <td align="center" width="100px" style="text-align: center;color:#000;font-size:12px; line-height: 30px;height: 30px;">{{item.testResult}}</td>
          <td align="center" width="40px" style="text-align: center;color:#000;font-size:12px; line-height: 25px;height: 25px;">{{item.quaResult !== '正常'?item.quaResult :''}}</td>
          <td align="center" width="80px" style="text-align: center;color:#000;font-size:12px; line-height: 30px;height: 30px;">{{item.unit}}</td>
          <td align="center" width="210px" style="text-align: center;color:#000;font-size:12px; line-height: 30px;height: 30px;">{{item.itemRef}}</td>
        </tr>
      </table>
    </div>
    <section style="display: flex;justify-content: space-between;">
      <div class="sec-item" style="display: flex;flex-direction: column;">
        <div>
          <span class="label">
            <span class="SimSun" style="display: inline-block;transform:scale(0.8);margin-left:-4px;font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">申请医师</span>
            <span class="Arial" style="display: inline-block;margin-left:-9px;transform:scale(0.8);font-family: 'Arial';height: 25px;line-height: 25px;font-size:13px;color: #000;">/Doctor：</span>
          </span>
          <span class="con" style="display: inline-block;margin-left:-10px;transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">{{
            inspectInfo.reportPatientInfo.orderingProvider
          }}</span>
        </div>
        <div>
          <span class="label">
            <span class="SimSun" style="display: inline-block;margin-left:-4px;transform:scale(0.8); font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">采样时间</span>
            <span class="Arial" style="display: inline-block;margin-left:-11px;transform:scale(0.8);font-family: 'Arial';height: 25px;line-height: 25px;font-size:13px;color: #000;">/Sampled at：</span>
          </span>
          <span class="con" style="display: inline-block;margin-left:-20px;transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">{{
            inspectInfo.reportPatientInfo.sampledDateTime
          }}</span>
        </div>
      </div>
      <div class="sec-item" style="display: flex;flex-direction: column;">
         <div>
          <span class="label">
            <span class="SimSun" style=" display: inline-block;transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">采样人</span>
            <span class="Arial" style="display: inline-block;margin-left:-12px;transform:scale(0.8);font-family: 'Arial';height: 25px;line-height: 25px;font-size:13px;color: #000;">/Sampled by：</span>
          </span>
          <span class="con" style="display: inline-block;margin-left:-16px;transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">{{ inspectInfo.reportPatientInfo.specer }}</span>
        </div>
        <div>
          <span class="label">
            <span class="SimSun" style=" display: inline-block;transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">接收时间</span>
            <span class="Arial" style="display: inline-block;margin-left:-12px;transform:scale(0.8);font-family: 'Arial';height: 25px;line-height: 25px;font-size:13px;color: #000;">/Received at：</span>
          </span>
          <span class="con" style="display: inline-block;margin-left:-18px;transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">{{
            inspectInfo.reportPatientInfo.receivedDateTime
          }}</span>
        </div>
      </div>
      <div class="sec-item" style="display: flex;flex-direction: column;">
        <div>
          <span class="label" style="">
            <span class="SimSun" style="display: inline-block;transform:scale(0.8); font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">检验者</span>
            <span class="Arial" style="display: inline-block;margin-left:-12px;transform:scale(0.8);font-family: 'Arial';height: 25px;line-height: 25px;font-size:13px;color: #000;">/Examined by：</span>
          </span>
          <span class="con" style="display: inline-block;margin-left:-14px;transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">{{
            inspectInfo.reportPatientInfo.verifiedBy
          }}</span>
       </div>
        <div>
          <span class="label">
            <span class="SimSun" style="display: inline-block;transform:scale(0.8); font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">报告时间</span>
            <span class="Arial" style="display: inline-block;margin-left:-12px;transform:scale(0.8);font-family: 'Arial';height: 25px;line-height: 25px;font-size:13px;color: #000;">/Report Time：</span>
          </span>
          <span class="con" style="display: inline-block;margin-left:-20px;transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">{{
            inspectInfo.reportPatientInfo.reviewDateTime
          }}</span>
        </div>
      </div>
      <div class="sec-item" style="display: flex;flex-direction: column;">
        <div>
        <span class="label">
          <span class="SimSun" style="display: inline-block;transform:scale(0.8); font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">审核者</span>
          <span class="Arial" style="display: inline-block;margin-left:-12px;transform:scale(0.8);font-family: 'Arial';height: 25px;line-height: 25px;font-size:13px;color: #000;">/Reviewed by：</span>
        </span>
        <span class="con" style="display: inline-block;margin-left:-16px;transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">{{ inspectInfo.reportPatientInfo.transcriptionist }}</span>
      </div>
       <div>
        <span class="label">
          <span class="SimSun" style="display: inline-block; transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">备注</span>
          <span class="Arial" style="display: inline-block;margin-left:-5px;transform:scale(0.8);font-family: 'Arial';height: 25px;line-height: 25px;font-size:13px;color: #000;">/Note：</span>
        </span>
        <span class="con" style="display: inline-block;margin-left:-16px;transform:scale(0.8);font-family: 'SimSun';height: 25px;line-height: 25px;font-size:13px;color: #000;">{{ inspectInfo.reportPatientInfo.note }}</span>
      </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  props: ["inspectInfo"],
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
div{
  justify-content: space-between;
}
</style>
