<template>
  <div class="medical-record-con" id="medical-record" style="line-height: 30px;padding: 30px 0">
    <div style="background:#fff;padding:30px 30px 20px">
    <el-row>
      <el-col :span="24">
        <div class="hos-name" style="text-align: left">
          <img :src="logopng" alt="" style="width: 15%" />
        </div>
      </el-col>
      <el-col :span="24">
        <div class="hos-name">北京美中爱瑞肿瘤医院</div>
      </el-col>
      <el-col :span="24">
        <div class="type">门(急)诊病历</div>
      </el-col>
    </el-row>
    <!-- <div>{{pathologicalOutpatientRecords}}</div> -->
    <div class="patient-info">
      <el-row>
        <el-col :span="8">
          <span class="label"
            >患者<span class="Arial">ID/Patient ID</span>：</span
          >
          <span class="text" v-show="pathologicalOutpatientRecords.patientId">{{
            pathologicalOutpatientRecords.patientId
          }}</span>
        </el-col>
        <el-col :span="7">
          <span class="label"
            >姓名<span class="Arial">/Patient Name</span>：</span
          >
          <span
            class="text"
            v-show="pathologicalOutpatientRecords.patientName"
            >{{ pathologicalOutpatientRecords.patientName }}</span
          >
        </el-col>
        <el-col :span="4">
          <span class="label">性别<span class="Arial">/Gender</span>：</span>
          <span class="text">{{
            pathologicalOutpatientRecords.sex === "M" ? "男" : "女"
          }}</span>
        </el-col>
        <el-col :span="5">
          <span class="label">年龄<span class="Arial">/Age</span>：</span>
          <span class="text">{{ pathologicalOutpatientRecords.age }}</span
          ><span class="label" style="margin-left: 5px">岁</span>
        </el-col>
        <el-col :span="8">
          <span class="label"
            >出生日期<span class="Arial">/Date of Birth</span>：</span
          >
          <span class="text" v-show="pathologicalOutpatientRecords.birthday">{{
            pathologicalOutpatientRecords.birthday
          }}</span>
        </el-col>
        <el-col :span="8">
          <span class="label"
            >就诊科室<span class="Arial">/Department</span>：</span
          >
          <span class="text" v-show="pathologicalOutpatientRecords.deptName">{{
            pathologicalOutpatientRecords.deptName
          }}</span>
        </el-col>
        <el-col :span="8">
          <span class="label"
            >就诊日期<span class="Arial">/Arrival Time</span>：</span
          >
          <span
            class="text"
            v-show="pathologicalOutpatientRecords.appointmentTime"
            >{{ pathologicalOutpatientRecords.appointmentTime }}</span
          >
        </el-col>
      </el-row>
    </div>
    <section class="checkList">
      <div style="display: flex; align-items: center">
        <span class="label-bold">就诊目的：</span>
        <el-checkbox-group
          v-model="checkList"
          style="
            display: flex;
            margin-left: 12px;
            align-items: center;
            margin-top: 5px;
          "
        >
          <el-checkbox
            :label="numberArr.one"
            style="display: flex; align-items: center"
            :disabled="!showStatus"
            >病理咨询</el-checkbox
          >
          <el-checkbox
            :label="numberArr.two"
            style="display: flex; align-items: center"
            :disabled="!showStatus"
            >病理会诊</el-checkbox
          >
          <el-checkbox
            :label="numberArr.three"
            style="display: flex; align-items: center"
            :disabled="!showStatus"
            >其他：</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <span
        class="info-content"
        style="white-space: pre-wrap"
        v-for="item in pathologicalOutpatientRecords.purposeOfVisitList"
        :key="item"
        >{{ geiClinicPurpose(item) }}</span
      >
    </section>
    <section>
      <span class="label-bold">诊断：</span>
      <span class="info-content" style="white-space: pre-wrap">{{
        pathologicalOutpatientRecords.diagnose
      }}</span>
    </section>
    <section>
      <span class="label-bold">处理意见：</span>
      <span class="info-content" style="white-space: pre-wrap">{{
        pathologicalOutpatientRecords.handleOpinion
      }}</span>
    </section>
    <el-row style="margin-top: 50px">
      <el-col :span="24">
        <span class="info-content"> </span>
      </el-col>
    </el-row>
    <el-row class="flex-one">
      <el-col :span="24">
        <div class="signature-con">
          <span class="title">医师签名：</span>
          <span
            class="signature"
            v-if="pathologicalOutpatientRecords.doctorSignature"
          >
            <img
              :src="pathologicalOutpatientRecords.doctorSignature"
              alt=""
              style="width: 100px"
            />
          </span>
          <span v-else>
            {{ pathologicalOutpatientRecords.doctorName }}
          </span>
        </div>
      </el-col>
    </el-row>
    </div>
  </div>
</template>
  
  <script>
import { getPathologicalOutpatient } from "@/request/timeline";
import logo from "../risp-show/images/logopng";
export default {
  name: "",
  props: ["visitNo","type","visible"],
  data() {
    return {
      showStatus: false,
      checkList: [],
      numberArr: {
        one: 1,
        two: 2,
        three: 3,
      },
      logopng: logo.img,
      pathologicalOutpatientRecords: {
        status: 0,
        patientId: "",
        patientName: "",
        sex: "",
        age: "",
        birthday: "",
        deptName: "",
        appointmentTime: "",
        purposeOfVisitList: [],
        diagnose: "",
        handleOpinion: "",
        doctorName: "",
        doctorSignature: "",
      },
    };
  },
  mounted() {
    // this.checkList = this.pathologicalOutpatientRecords.purposeOfVisitList;
    if (this.visitNo) this.getPOutRecords(this.visitNo);
  },
  watch: {
    visible(v) {
      if(v && type =='pOutRecords') this.getPOutRecords(this.visitNo)
    }
  },
  methods: {
    geiClinicPurpose(val) {
      if (val == 3) {
        return `${this.pathologicalOutpatientRecords.purposeOfVisitText}`;
      } else {
        return "";
      }
    },
    //病理门诊病历
    async getPOutRecords(visitNo) {
      this.pathologicalOutpatientRecords = {
        ...this.pathologicalOutpatientRecords,
        status: 0,
      };
      const res = await getPathologicalOutpatient(visitNo);
      if (res.code === 0) {
        let {
          age,
          healthCardNo,
          gender,
          deptName,
          birthday,
          appointmentTime,
          patientName,
        } = res?.data?.outpatients;
        let {
          purposeOfVisitText,
          purposeOfVisit,
          handleOpinion,
          hisSignImage,
          doctorName,
        } = res?.data?.patientMedicalCertPathology;
        let str = "";
        for (let i = 0; i < res.data.diagnoses.length; i++) {
          if (i == res.data.diagnoses.length - 1) {
            str += `${res.data.diagnoses.length}、${res.data.diagnoses[i].diagnosesName}`;
          } else {
            str += `${i + 1}、${res.data.diagnoses[i].diagnosesName}  `;
          }
        }
        this.pathologicalOutpatientRecords = {
          age,
          patientId: healthCardNo,
          gender,
          deptName,
          birthday,
          appointmentTime,
          patientName,
          purposeOfVisitText,
          purposeOfVisitList: eval("(" + purposeOfVisit + ")"),
          handleOpinion,
          diagnose: str,
          doctorSignature: hisSignImage,
          doctorName,
          status: 1,
        };
        this.checkList = this.pathologicalOutpatientRecords.purposeOfVisitList
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</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;
  margin-bottom: 30px;
  >div {
    background-color: #fff;
  }
  section {
    margin-bottom: 0px;
    background-color: #fff;
  }
  .checkList {
    margin-top: -12px;
    .el-checkbox {
      margin-right: 12px;
    }
    /deep/.el-checkbox__inner {
      margin-top: 0px !important;
    }
    /deep/.el-checkbox__label {
      color: rgba(0, 0, 0, 0.7);
      padding-left: 8px;
      margin-top: -5px;
    }
  }
  .label-bold {
    font-weight: bold;
    font-family: "SimSun";
    font-size: 16px;
    color: #000;
  }
  .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: 14px;
    }
    .Arial {
      font-family: "Arial";
    }
    .text {
      font-family: "SimSun";
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
  }
  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>
  