<template>
  <div id="prescription-print">
    <div class="prescription-print">
      <div class="printTitle">{{ orgname }}门诊血液净化治疗病历首页</div>
      <!-- <div class="record_Title">
            <div>年龄：{{patient.age?patient.age:''}}岁</div>
            <div>透析病历号:{{patient.id?patient.id:''}}</div>
        </div> -->
      <div class="infoTitle" style="margin-top: 20px">
        <div class="name_slot">
          首次治疗日期：<span>{{ getTime(patient.first_dialysis_date) }}</span>
        </div>
        <div class="name_slot">医保卡号：<span></span></div>
        <div class="name_slot">
          ID号：<span class="name_slot_1" style="min-width: 100px"></span>
        </div>
      </div>
      <div
        class="infoTitle"
        style="margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid"
      >
        <div class="name_slot_2" style="width: 273px">
          诊断：<span class="name_slot_1" style="min-width: 100px"></span>
        </div>
        <div class="name_slot" style="width: 640px">
          合并症或并发症：<span style="width: 220px"></span>
        </div>
      </div>

      <div class="infoTitle" style="margin-top: 15px">
        <div class="name_slot">
          姓名：<span style="min-width: 180px">{{
            patient.name ? patient.name : ""
          }}</span>
        </div>
        <div>
          性别：
<!--          <label-box-->
<!--            :isChecked="patient.gender == 1 ? true : false"-->
<!--            showValue="男"-->
<!--          ></label-box>-->
<!--          <label-box-->
<!--            :isChecked="patient.gender == 2 ? true : false"-->
<!--            showValue="女"-->
<!--          ></label-box>-->
        </div>
        <!-- <div class="address_slot">
          家庭住址：<span>{{ patient.home_address ? patient.home_address : "" }}</span>
        </div> -->
      </div>

      <div class="infoTitle">
        <div class="full_slot">
          身份证号：
          <span class="id_card" v-for="i in patient.id_card_no" :key="i">{{
            i
          }}</span>
        </div>
      </div>

      <div class="infoTitle">
        <div class="address_slot_1" style="width: 100%">
          现住址（详填）<span></span>省<span></span>市<span></span>区<span
            style="min-width: 190px"
          ></span>
        </div>
      </div>
      <div class="infoTitle">
        <div class="address_slot_1" style="width: 100%">
          户口住址（详填）<span></span>省<span></span>市<span
          ></span>县（区）<span style="min-width: 135px"></span>
        </div>
      </div>
      <div class="infoTitle">
        <div class="address_slot_1" style="width: 100%">
          工作单位：<span>{{ patient.work_unit }}</span
          >地址：<span></span>省<span></span>市/县<span
            style="min-width: 174px"
          ></span>
        </div>
      </div>
      <div class="infoTitle">
        <div class="name_slot">
          电话：<span>{{ patient.phone ? patient.phone : "" }}</span>
        </div>
        <div class="name_slot">手机：<span></span></div>
        <div class="name_slot">
          联系人：<span>{{ patient.contact_name }}</span>
        </div>
        <div class="name_slot">关系：<span></span></div>
      </div>

      <table class="print-table" border="1" style="margin-top: 20px">
        <thead>
          <tr>
            <td colspan="2">干体重</td>
            <td colspan="2">血管通路</td>
            <td colspan="2">抗凝剂</td>
          </tr>
          <tr>
            <td>日期</td>
            <td>体重（kg）</td>
            <td>日期</td>
            <td>名称</td>
            <td>日期</td>
            <td>种类</td>
          </tr>
        </thead>
        <tbody class="print-table-body">
          <tr v-for="(index, el) in table_list" :key="index">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>
              <table class="print-table-no" border="1">
                <tr>
                  <td rowspan="6">传 <br />染<br />病<br />等<br />级</td>
                  <td>日期</td>
                </tr>
                <tr v-for="(index, list) in table_list_child" :key="index">
                  <td></td>
                </tr>
                <tr></tr>
              </table>
            </td>
            <td>
              <table class="print-table-no-1" border="1">
                <tr class="no-1-tr">
                  <td>名称</td>
                </tr>
                <tr v-for="(index, list) in table_list_child" :key="index">
                  <td></td>
                </tr>
                <tr></tr>
              </table>
            </td>

            <td>
              <table class="print-table-no" border="1">
                <tr>
                  <td rowspan="6" style="line-height: 50px">
                    肿<br />瘤<br />登<br />记<br />
                  </td>
                  <td>日期</td>
                </tr>
                <tr v-for="(index, list) in table_list_child" :key="index">
                  <td></td>
                </tr>
                <tr></tr>
              </table>
            </td>
            <td>
              <table class="print-table-no-1" border="1">
                <tr class="no-1-tr">
                  <td>名称</td>
                </tr>
                <tr v-for="(index, list) in table_list_child" :key="index">
                  <td></td>
                </tr>
                <tr></tr>
              </table>
            </td>

            <td>
              <table class="print-table-no" border="1">
                <tr>
                  <td rowspan="6" style="line-height: 50px">
                    过<br />敏<br />反<br />应<br />
                  </td>
                  <td>日期</td>
                </tr>
                <tr v-for="(index, list) in table_list_child" :key="index">
                  <td></td>
                </tr>
                <tr></tr>
              </table>
            </td>
            <td>
              <table class="print-table-no-1" border="1">
                <tr class="no-1-tr">
                  <td>药物反应</td>
                </tr>
                <tr v-for="(index, list) in table_list_child" :key="index">
                  <td></td>
                </tr>
                <tr></tr>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="printTitle" style="border-bottom: none">
      {{ orgname }}血液透析治疗方案调整
    </div>
    <table class="print-table-end" border="1" style="margin-top: 20px">
      <thead>
        <tr>
          <td width="12.5%">治疗频率</td>
          <td width="12.5%">调整日期</td>
          <td>治疗方式</td>
          <td>调整日期</td>
          <td>钙浓度</td>
          <td>调整日期</td>
          <td>钾浓度</td>
          <td width="12.5%">调整日期</td>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(index, item) in tablelist_2" :key="index">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <!-- <div class="prescription-print">
      <div class="recordTitle">
        <div>体格检查</div>
        <div
          class="recordContent"
          style="height: fit-content; min-height: 250px"
        >
          <div>
            <span
              >体温：{{
                history.temperature ? history.temperature + "℃" : "/"
              }}</span
            >
            <span
              >脉搏：{{ history.pulse ? history.pulse + "次/分" : "/" }}</span
            >
            <span
              >呼吸：{{
                history.breathing ? history.breathing + "次/分" : "/"
              }}</span
            >
            <span>血压：{{ history.sbp }}/{{ history.dbp }}mmHg</span>
          </div>
          <div style="text-align: left">
            {{ history.physical_examination }}
          </div>
        </div>
      </div>
      <div class="recordTitle">
        <div>专科检查</div>
        <div class="recordContent">{{ history.special_inspection }}</div>
      </div>
      <div class="recordTitle" style="border-bottom: 1px solid">
        <div>实验室及器械检查</div>
        <div
          class="recordContent"
          style="height: fit-content; min-height: 250px"
        >
          {{ history.lab_apparatus }}
        </div>
      </div>
      <div style="display: flex; justify-content: flex-end">
        <div class="endInfo">
          <div style="height: 100px">
            诊断：{{ history.diagnostic ? history.diagnostic : "" }}
          </div>
          <div style="display: flex">
            <div>
              医师：{{
                getDoctor(history.doctor) ? getDoctor(history.doctor) : ""
              }}
            </div>
            <div>手签：</div>
          </div>
          <div
            style="text-align: center; letter-spacing: 3px; padding-top: 20px"
          >
            {{ getTime(history.record_date) }}
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import { jsGetAge, uParseTime } from "@/utils/tools";

import { getDataConfig } from "@/utils/data";
import { getAllDoctorList, getPatientCaseHistory } from "@/api/project/project";
import { getAccessList } from "@/api/patient";
// import LabelBox from "../zujian/labelbox.vue";
// import CheckBox from "../zujian/checkbox.vue";
export default {
  props: {
    patient: Object,
    hispatient: Object,
    patientid: Number,
    //   history:Object,
  },
  components: {
    // LabelBox,
    // CheckBox,
  },
  data() {
    return {
      educationOptions: [],
      departmentList: [],
      orgname: "",
      history: {},
      printDate: "",
      accessList: {},
      blood_access_part_opera: [],
      table_list: [],
      table_list_child: [],
      tablelist_2: [],
    };
  },

  methods: {
    // 默认表格行数
    gettable() {
      let obj = {
        date1: "2020-06-28",
        weight: "00",
        date2: "2020-06-28",
        name: "hh",
        date3: "2020-06-28",
        type: "ss",
      };
      if (this.table_list.length < 12) {
        var nl = 12 - this.table_list.length;
        for (let index = 0; index < nl; index++) {
          this.table_list.push([]);
        }
      }
      if (this.table_list_child.length < 5) {
        var nl = 5 - this.table_list_child.length;
        for (let index = 0; index < nl; index++) {
          this.table_list_child.push([]);
        }
      }

      if (this.tablelist_2.length < 5) {
        var nl = 5 - this.tablelist_2.length;
        for (let index = 0; index < nl; index++) {
          this.tablelist_2.push([]);
        }
      }
      console.log(this.table_list, "this.table_list");
    },

    getAge(patient) {
      var thisLen = patient.id_card_no.length;
      var birth = "";
      if (thisLen == 15) {
        birth = "19" + patient.id_card_no.substr(6, 6);
      } else {
        birth = patient.id_card_no.substr(6, 8);
      }
      var births =
        birth.substr(0, 4) +
        "-" +
        birth.substr(4, 2) +
        "-" +
        birth.substr(6, 2);
      return jsGetAge(births, "-");
    },
    show(val) {
      this.patientid = val;
      this.getAllDoctorList();
      this.getPatientCaseHistory();
    },
    getProfession(id) {
      var name = "";
      for (let i = 0; i < this.educationOptions.length; i++) {
        if (id == this.educationOptions[i].id) {
          name = this.educationOptions[i].name;
        }
      }
      return name;
    },
    getAllDoctorList() {
      getAllDoctorList().then((response) => {
        if (response.data.state == 1) {
          var doctor = response.data.data.doctor;

          this.doctorList = doctor;
          var department = response.data.data.department;
          this.departmentList = department;
        }
      });
    },
    getDoctor(id) {
      var name = "";
      for (let i = 0; i < this.doctorList.length; i++) {
        if (id == this.doctorList[i].admin_user_id) {
          name = this.doctorList[i].user_name;
        }
      }
      return name;
    },
    getPatientCaseHistory() {
      const params = {
        patient_id: this.patientid,
      };
      getPatientCaseHistory(params).then((response) => {
        if (response.data.state == 1) {
          var patient = response.data.data.patient;
          this.patient = patient;
          var history = response.data.data.history;
          this.history = history;
          var hispatient = response.data.data.hispatient;
          this.hispatient = hispatient;
          var accessList = response.data.data.accessList;
          this.accessList = accessList;
        }
      });
    },
    getDeparment(id) {
      var name = "";
      for (let i = 0; i < this.departmentList.length; i++) {
        if (id == this.departmentList[i].id) {
          name = this.departmentList[i].name;
        }
      }
      return name;
    },
    getTime(val) {
      if (val < 0) {
        return "";
      }
      if (val == "") {
        return "";
      } else {
        return uParseTime(val, "{y}-{m}-{d}");
      }
    },
    getAccessList() {
      getAccessList().then((response) => {
        if (response.data.state == 1) {
          var blood_access_part_opera =
            response.data.data.blood_access_part_opera;
          this.blood_access_part_opera = blood_access_part_opera;
        }
      });
    },
    getAccess(id) {
      var name = "";
      for (let i = 0; i < this.blood_access_part_opera.length; i++) {
        if (id == this.blood_access_part_opera[i].value) {
          name = this.blood_access_part_opera[i].name;
        }
      }
      return name;
    },
  },
  created() {
    this.gettable();
    this.educationOptions = getDataConfig("patient", "education_types");
    // this.getAllDoctorList();
    // this.getPatientCaseHistory();
    // this.getAccessList();
    var xtuser = this.$store.getters.xt_user;
    this.orgname = xtuser.org.org_name;
    var data = new Date();
    var month =
      data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
    var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
    this.printDate = data.getFullYear() + "-" + month + "-" + date;
  },
};
</script>


<style lang="scss" scoped>
.prescription-print {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
    0 0 60px rgba(0, 0, 0, 0.06) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
    0 0 40px rgba(0, 0, 0, 0.06) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  margin-bottom: 20px;
  padding: 20px 10px;
}
.printTitle {
  font-size: 22px;
  text-align: center;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid;
}
.infoTitle {
  display: flex;
  margin-top: 10px;
  line-height: 24px;
  padding: 0 10px;
}
.infoTitle div {
  width: 200px;
}

.infoTitle .address_slot {
  width: 400px;
}
.infoTitle .full_slot {
  width: 100%;
}

.infoTitle .full_slot .id_card {
  border: 1px solid;
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: center;
  margin-right: 6px;
}

.infoTitle .name_slot {
  width: 250px;
  display: flex;
}

// .name_slot_2{
//     min-width: 100px;
//     display: inline-block;
//     border-bottom: 1px solid;
// }
.name_slot_1 {
  display: inline-block;
  min-width: 70px;
  border-bottom: 1px solid;
}

.name_slot span {
  display: inline-block;
  min-width: 70px;
  border-bottom: 1px solid;
}

.address_slot_1 span {
  display: inline-block;
  min-width: 60px;
  border-bottom: 1px solid;
}

.otherInfo {
  display: flex;
  margin-top: 10px;
  line-height: 24px;
  padding: 0 10px;
}
.endInfo {
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin-top: 10px;
  line-height: 24px;
}
.endInfo div {
  width: 300px;
}
.recordTitle {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 10px;
  line-height: 24px;
  padding: 0 10px;
  border-top: 1px solid;
}
.recordTitle div {
  width: 100%;
  text-align: center;
}
.recordTitle .recordContent {
  width: 100%;
  height: fit-content;
  min-height: 150px;
  text-align: left;
}

.record_Title {
  display: flex;
  margin-top: 10px;
  line-height: 24px;
  padding: 0 10px;
  border-bottom: 2px solid #000;
}

.record_Title div {
  width: 200px;
}

.print-table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  line-height: 40px;
  font-size: 14px;
}

.print-table thead tr td {
  width: 16%;
}

.print-table-body tr td {
  height: 25px;
}

.print-table-no {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  line-height: 40px;
  font-size: 14px;
}
.print-table-no-1 {
  height: 100%;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  line-height: 40px;
  font-size: 14px;
}

.print-table-no-1 tr {
  height: 1px;
}

.print-table-no-1 .no-1-tr {
  height: 41px;
}

.print-table-end {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  line-height: 40px;
  font-size: 14px;
}

.print-table-end tbody tr td {
  height: 25px;
}


</style>
