<template>
<div class="data-bg">
    <div class="data">
        <el-collapse  accordion>
            <el-collapse-item title="一般资料" name="2" >
                <div class="item">
                    <p class="name">姓名</p>
                    <p class="text">{{patient.name}}</p>
                </div>
                <div class="item">
                    <p class="name">别名</p>
                    <p class="text">{{patient.alias}}</p>
                </div>
                <div class="item">
                    <p class="name">身份证号</p>
                    <p class="text">{{patient.id_card_no}}</p>
                </div>
                <div class="item">
                    <p class="name">透析号</p>
                    <p class="text">{{patient.dialysis_no}}</p>
                </div>
                <div class="item">
                    <p class="name">性别</p>
                    <p class="text">{{patient.gender}}</p>
                </div>
                <div class="item">
                    <p class="name">出生日期</p>
                    <p class="text">{{patient.birthday}}</p>
                </div>
                <div class="item">
                    <p class="name">身高(cm)</p>
                    <p class="text">{{patient.height}}</p>
                </div>
                <div class="item">
                    <p class="name">婚姻状况</p>
                    <p class="text">{{patient.marital_status}}</p>
                </div>
                <div class="item">
                    <p class="name">子女情况</p>
                    <p class="text">{{patient.children}} 孩</p>
                </div>
                <div class="item">
                    <p class="name">住院(门诊)号</p>
                    <p class="text">{{patient.admission_number}}</p>
                </div>
                <div class="item">
                    <p class="name">医保类型</p>
                    <p class="text">{{patient.reimbursement_way_id}}</p>
                </div>
                <div class="item">
                    <p class="name">医保号</p>
                    <p class="text">{{patient.health_care_no}}</p>
                </div>
                <div class="item">
                    <p class="name">本人电话</p>
                    <p class="text">{{patient.phone}} </p>
                </div>
                <div class="item">
                    <p class="name">家属电话</p>
                    <p class="text">{{patient.home_telephone}} </p>
                </div>
                <div class="item">
                    <p class="name">亲友电话</p>
                    <p class="text">{{patient.relative_phone}}</p>
                </div>
                <div class="item">
                    <p class="name">亲友关系</p>
                    <p class="text">{{patient.relative_relations}}</p>
                </div>
                <div class="item">
                    <p class="name">家庭住址</p>
                    <p class="text">{{patient.home_address}}</p>
                </div>
                <div class="item">
                    <p class="name">工作单位</p>
                    <p class="text">{{patient.work_unit}}</p>
                </div>
                <div class="item">
                    <p class="name">单位地址</p>
                    <p class="text">{{patient.unit_address}}</p>
                </div>
                <div class="item">
                    <p class="name">职业</p>
                    <p class="text">{{patient.profession}}</p>
                </div>
                 <div class="item">
                    <p class="name">教育程度</p>
                    <p class="text">{{patient.education_level}}</p>
                </div>
                 <div class="item">
                    <p class="name">患者来源</p>
                    <p class="text">{{patient.source}}</p>
                </div>
            </el-collapse-item>
        </el-collapse>
      <el-collapse  accordion>
      <el-collapse-item name="1" title="治疗信息" >
        <div class="item">
          <p class="name">本院首次透析</p>
          <p class="text">{{patient.is_hospital_first_dialysis}}</p>
        </div>
        <div class="item">
          <p class="name">首次透析日期</p>
          <p class="text">{{patient.first_dialysis_date}}</p>
        </div>
        <div class="item">
          <p class="name">首次透析医院</p>
          <p class="text">{{patient.first_dialysis_hospital}}</p>
        </div>
        <div class="item">
          <p class="name">透析之前情况</p>
          <p class="text">{{patient.predialysis_condition}}</p>
        </div>
        <div class="item">
          <p class="name">本院前透析频率</p>
          <p class="text">{{patient.pre_hospital_dialysis_frequency}}</p>
        </div>
        <div class="item">
          <p class="name">本院前透析次数</p>
          <p class="text">{{patient.pre_hospital_dialysis_times}}</p>
        </div>
        <div class="item">
          <p class="name">本院首次透析</p>
          <p class="text">{{patient.hospital_first_dialysis_date}}</p>
        </div>
        <div class="item">
          <p class="name">传染病</p>
          <p class="text">{{patient.contagions}}</p>
        </div>
        <div class="item">
          <p class="name">慢性病</p>
          <p class="text">{{patient.diseases}}</p>
        </div>
        <div class="item">
          <p class="name">备注</p>
          <p class="text">{{patient.remark}} </p>
        </div>

      </el-collapse-item name="2">
      </el-collapse>


    </div>
</div>
</template>

<script>
import { parseTime } from "@/utils";
import { GetPatientInfoWithDiseases } from "@/api/patient";
import { Toast } from "vant";

export default {
  name: "RecordsTab",
  data() {
    return {
      activeName: "2",
      activeName2: "1",
      avatarDialogVisible: false,
      avatar: "avatarbox",
      maritalOptions: [],
      wayOptions: [],
      professionOptions: [],
      educationOptions: [],
      checkDisease: [],
      contagionList: [],
      patient: {
        contagions: [],
        diseases: []
      },
      device_number: {
        number: ""
      }
    };
  },
  created() {
    this.initData();
    var patient_id = this.$route.query.patient_id;
    this.GetPatientInfoWithDiseases(patient_id);
  },
  methods: {
    GetPatientInfoWithDiseases(id) {
      GetPatientInfoWithDiseases(id)
        .then(response => {
          if (response.data.state == 1) {
            this.patient = response.data.data.patient;
            this.patient.gender =
              this.patient.gender == 1
                ? "男"
                : this.patient.gender == 2 ? "女" : "未知";
            this.patient.birthday = parseTime(
              this.patient.birthday,
              "{y}/{m}/{d}"
            );

            var maritalStatus = this.patient.marital_status;
            this.patient.marital_status = "未填";
            var mLen = this.maritalOptions.length;
            if (maritalStatus > 0) {
              for (let index = 0; index < mLen; index++) {
                if (maritalStatus == this.maritalOptions[index].id) {
                  this.patient.marital_status = this.maritalOptions[index].name;
                  break;
                }
              }
            }

            var reimbursementWayId = this.patient.reimbursement_way_id;
            this.patient.reimbursement_way_id = "未填";
            var wLen = this.wayOptions.length;
            if (reimbursementWayId > 0) {
              for (let index = 0; index < wLen; index++) {
                if (reimbursementWayId == this.wayOptions[index].id) {
                  this.patient.reimbursement_way_id = this.wayOptions[
                    index
                  ].name;
                  break;
                }
              }
            }

            var profession = this.patient.profession;
            this.patient.profession = "未填";
            var pLen = this.professionOptions.length;
            if (profession > 0) {
              for (let index = 0; index < pLen; index++) {
                if (profession == this.professionOptions[index].id) {
                  this.patient.profession = this.professionOptions[index].name;
                  break;
                }
              }
            }

            var educationLevel = this.patient.education_level;
            this.patient.education_level = "未填";
            var eLen = this.educationOptions.length;
            if (educationLevel > 0) {
              for (let index = 0; index < eLen; index++) {
                if (educationLevel == this.educationOptions[index].id) {
                  this.patient.education_level = this.educationOptions[
                    index
                  ].name;
                  break;
                }
              }
            }

            this.patient.is_hospital_first_dialysis =
              this.patient.is_hospital_first_dialysis == 1
                ? "是"
                : this.patient.is_hospital_first_dialysis == 2 ? "否" : "未填";

            if (this.patient.first_dialysis_date != 0) {
              this.patient.first_dialysis_date = parseTime(
                this.patient.first_dialysis_date,
                "{y}/{m}/{d}"
              );
            } else {
              this.patient.first_dialysis_date = "";
            }

            if (this.patient.hospital_first_dialysis_date != 0) {
              this.patient.hospital_first_dialysis_date = parseTime(
                this.patient.hospital_first_dialysis_date,
                "{y}/{m}/{d}"
              );
            } else {
              this.patient.hospital_first_dialysis_date = "";
            }

            var contagions = {};
            var contagionsName = [];
            if (this.patient.contagions.length > 0) {
              var clen = this.patient.contagions.length;
              for (let index = 0; index < clen; index++) {
                contagions[
                  this.patient.contagions[index].disease_id
                ] = this.patient.contagions[index].disease_id;
              }

              var cLen = this.contagionList.length;
              for (let index = 0; index < cLen; index++) {
                if (this.contagionList[index].id in contagions) {
                  contagionsName.push(this.contagionList[index].name);
                }
              }
              this.patient.contagions = contagionsName.join("、");
            }

            var diseases = {};
            var diseasesName = [];
            if (this.patient.diseases.length > 0) {
              var dlen = this.patient.diseases.length;
              for (let index = 0; index < dlen; index++) {
                diseases[
                  this.patient.diseases[index].disease_id
                ] = this.patient.diseases[index].disease_id;
              }

              var cLen = this.checkDisease.length;
              for (let index = 0; index < cLen; index++) {
                if (this.checkDisease[index].id in diseases) {
                  diseasesName.push(this.checkDisease[index].name);
                }
              }
              this.patient.diseases = diseasesName.join("、");
            } else {
              this.patient.diseases = "";
            }

            this.patient.source = this.patient.source == 1 ? "门诊" : "住院";
          } else {
            Toast.fail("网络异常");
            return false;
          }
        })
        .catch(() => {
          // on cancel
          Toast.fail("网络异常");
          return false;
        });
    },
    initData() {
      this.maritalOptions = this.$store.getters.marital_options;
      this.wayOptions = this.$store.getters.reimbursement_ways;
      this.professionOptions = this.$store.getters.profession_options;
      this.educationOptions = this.$store.getters.education_types;
      this.contagionList = this.$store.getters.contagions;
      this.checkDisease = this.$store.getters.disease;
    }
  }
};
</script>

<style  style="stylesheet/scss" lang="scss"  scoped>
.el-collapse {
  border-top: none;
}
.data-bg {
  width: 100%;
  padding-top:62px; 
  min-height: calc(100vh - 130px);
  .data {
    width: 11rem;
    margin: 0 auto;
    padding: 0 0.5rem;
    background: #fff;
    border-radius: 6px;
    .item {
      border-bottom: 1px #f5f5f5 solid;
      padding: 0.25rem 0;
      margin: 0 0.2rem 0 0;
      .name {
        font-size: 0.32rem;
        color: $pgh-color;
      }
      .text {
        font-size: 0.3rem;
        color: $pgh-color;
      }
    }
  }
}
</style>

