<template>

  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      健康档案
    </div>
    <div class="contentx" v-if="item!=null">
        <div class="desct">
          档案信息
        </div>
        <el-descriptions title="" :column="3" border>
        <el-descriptions-item label="姓名" ><span v-if="item!=null">{{item.name}}</span></el-descriptions-item>
        <el-descriptions-item label="年龄" ><span v-if="item!=null">{{item.age}}</span></el-descriptions-item>
        <el-descriptions-item label="性别" ><dict-tag :options="sexOptions" :value="item.sex"/></el-descriptions-item>
        <el-descriptions-item label="体重KG" ><span v-if="item!=null">{{item.weight}}</span></el-descriptions-item>
        <el-descriptions-item label="身高" ><span v-if="item!=null">{{item.height}}</span></el-descriptions-item>
        <el-descriptions-item label="bmi" ><span v-if="item!=null">{{item.bmi}}</span></el-descriptions-item>
        <el-descriptions-item label="创建时间" ><span v-if="item!=null">{{item.createTime}}</span></el-descriptions-item>
        <el-descriptions-item label="修改时间" ><span v-if="item!=null">{{item.updateTime}}</span></el-descriptions-item>
        </el-descriptions>
    </div>
    <div class="contentx" v-if="item!=null">
        <div class="desct">
          健康史
        </div>
        <el-descriptions title="" :column="1" border direction="vertical">
            <el-descriptions-item label="健康史内容"  >
         <div v-show="healthHistory != null&&healthHistory!=''" style="margin-left: 30px;">
            <div  v-for="(history, index) in healthHistory"   :key="index">
                <span >{{index+1}}.{{history.name}}</span>
              <div v-if="'1' == history.type || '3' == history.type">
                 <el-row v-for="(answerItem,i) in history.question"  :key="i">
                    <el-col :span="23" :offset="1"> <el-radio disabled v-model="history.value" :label="answerItem.name"></el-radio></el-col>
                 </el-row>
              </div>
              <div v-if="'2' == history.type">
                  <el-row v-for="(answerItem,i) in history.question"  :key="i">
                     <el-col :span="23" :offset="1">
                      <el-checkbox-group v-model="(history.value).split(',')">
                         <el-checkbox :label="answerItem.name" disabled></el-checkbox>
                      </el-checkbox-group>
                    </el-col>
                  </el-row>
              </div>
        </div>
        </div>
        </el-descriptions-item>
       </el-descriptions>
    </div>
    <div class="contentx" v-if="item!=null">
        <div class="desct">
          症状史
        </div>
        <el-descriptions title="" :column="1" border direction="vertical">
            <el-descriptions-item label="症状史内容"  >
         <div v-show="symptomHistory != null&&symptomHistory!=''" style="margin-left: 30px;">
            <div  v-for="(history, index) in symptomHistory"   :key="index">
                <span >{{index+1}}.{{history.name}}</span>
              <div v-if="'1' == history.type || '3' == history.type">
                 <el-row v-for="(answerItem,i) in history.question"  :key="i">
                    <el-col :span="23" :offset="1"> <el-radio disabled v-model="history.value" :label="answerItem.name"></el-radio></el-col>
                 </el-row>
              </div>
              <div v-if="'2' == history.type">
                  <el-row v-for="(answerItem,i) in history.question"  :key="i">
                     <el-col :span="23" :offset="1">
                      <el-checkbox-group v-model="(history.value).split(',')">
                         <el-checkbox :label="answerItem.name" disabled></el-checkbox>
                      </el-checkbox-group>
                    </el-col>
                  </el-row>
              </div>
        </div>
        </div>
        </el-descriptions-item>
       </el-descriptions>
    </div>
    <div class="contentx" v-if="item!=null">
        <div class="desct">
          家族史
        </div>
        <el-descriptions title="" :column="1" border direction="vertical">
            <el-descriptions-item label="家族史内容"  >
         <div v-show="familyHistory != null&&familyHistory!=''" style="margin-left: 30px;">
            <div  v-for="(history, index) in familyHistory"   :key="index">
                <span >{{index+1}}.{{history.name}}</span>
              <div v-if="'1' == history.type || '3' == history.type">
                 <el-row v-for="(answerItem,i) in history.question"  :key="i">
                    <el-col :span="23" :offset="1"> <el-radio disabled v-model="history.value" :label="answerItem.name"></el-radio></el-col>
                 </el-row>
              </div>
              <div v-if="'2' == history.type">
                  <el-row v-for="(answerItem,i) in history.question"  :key="i">
                     <el-col :span="23" :offset="1">
                      <el-checkbox-group v-model="(history.value).split(',')">
                         <el-checkbox :label="answerItem.name" disabled></el-checkbox>
                      </el-checkbox-group>
                    </el-col>
                  </el-row>
              </div>
        </div>
        </div>
        </el-descriptions-item>
       </el-descriptions>
    </div>
    <div class="contentx" v-if="item!=null">
        <div class="desct">
          用药史
        </div>
        <el-descriptions title="" :column="1" border direction="vertical">
            <el-descriptions-item label="用药史内容"  >
         <div v-show="drugHistory != null&&drugHistory!=''" style="margin-left: 30px;">
            <div  v-for="(history, index) in drugHistory"   :key="index">
                <span >{{index+1}}.{{history.name}}</span>
              <div v-if="'1' == history.type || '3' == history.type">
                 <el-row v-for="(answerItem,i) in history.question"  :key="i">
                    <el-col :span="23" :offset="1"> <el-radio disabled v-model="history.value" :label="answerItem.name"></el-radio></el-col>
                 </el-row>
              </div>
              <div v-if="'2' == history.type">
                  <el-row v-for="(answerItem,i) in history.question"  :key="i">
                     <el-col :span="23" :offset="1">
                      <el-checkbox-group v-model="(history.value).split(',')">
                         <el-checkbox :label="answerItem.name" disabled></el-checkbox>
                      </el-checkbox-group>
                    </el-col>
                  </el-row>
              </div>
        </div>
        </div>
        </el-descriptions-item>
       </el-descriptions>
    </div>
    <div class="contentx" v-if="item!=null">
        <div class="desct">
          过敏史
        </div>
        <el-descriptions title="" :column="1" border direction="vertical">
            <el-descriptions-item label="过敏史内容"  >
         <div v-show="allergyHistory != null&&allergyHistory!=''" style="margin-left: 30px;">
            <div  v-for="(history, index) in allergyHistory"   :key="index">
                <span >{{index+1}}.{{history.name}}</span>
              <div v-if="'1' == history.type || '3' == history.type">
                 <el-row v-for="(answerItem,i) in history.question"  :key="i">
                    <el-col :span="23" :offset="1"> <el-radio disabled v-model="history.value" :label="answerItem.name"></el-radio></el-col>
                 </el-row>
              </div>
              <div v-if="'2' == history.type">
                  <el-row v-for="(answerItem,i) in history.question"  :key="i">
                     <el-col :span="23" :offset="1">
                      <el-checkbox-group v-model="(history.value).split(',')">
                         <el-checkbox :label="answerItem.name" disabled></el-checkbox>
                      </el-checkbox-group>
                    </el-col>
                  </el-row>
              </div>
        </div>
        </div>
        </el-descriptions-item>
       </el-descriptions>
    </div>


    <div class="contentx" v-if="item!=null">
          <div class="desct">
            健康数据
          </div>
      <healthDataDetails  ref="healthDataDetails" />
    </div>
    <div class="contentx" v-if="item!=null">
          <div class="desct">
            健康生活
          </div>
      <healthLifeListDetails  ref="healthLifeListDetails" />
    </div>
</div>
</template>

<script>
import { listHealthRecord, getHealthRecord, delHealthRecord, addHealthRecord, updateHealthRecord, exportHealthRecord } from "@/api/store/healthRecord";
import healthDataDetails from "../../store/components/healthDataDetails.vue";
import healthLifeListDetails from "../../store/components/healthLifeListDetails.vue";
  export default {
    name: "healthRecord",
    props:["data"],
    components: { healthDataDetails,healthLifeListDetails},
    data() {
      return {
        sexOptions: [],
        healthHistory:null,
        familyHistory:null,
        allergyHistory:null,
        drugHistory:null,
        symptomHistory:null,
        item:null,
      }
    },
    created() {
      this.getDicts("sys_user_sex").then(response => {
        this.sexOptions = response.data;
      });
    },
    methods: {
      getDetails(id) {

          this.item=null;
          this.healthHistory=null,
          this.familyHistory=null,
          this.allergyHistory=null,
          this.drugHistory=null,
          this.symptomHistory=null,
          getHealthRecord(id).then(response => {
              this.item = response.data;


              if(this.item.healthHistory!=null&&this.item.healthHistory!=''){
                this.healthHistory = JSON.parse(this.item.healthHistory)
              }
              if(this.item.symptomHistory!=null&&this.item.symptomHistory!=''){
                this.symptomHistory = JSON.parse(this.item.symptomHistory)
              }
              if(this.item.drugHistory!=null&&this.item.drugHistory!=''){
                this.drugHistory = JSON.parse(this.item.drugHistory)
              }
              if(this.item.allergyHistory!=null&&this.item.allergyHistory!=''){
                this.allergyHistory = JSON.parse(this.item.allergyHistory)
              }
              if(this.item.familyHistory!=null&&this.item.familyHistory!=''){
                this.familyHistory = JSON.parse(this.item.familyHistory)
              }

              setTimeout(() => {
                   this.$refs.healthLifeListDetails.getHealthLifeListDetails(this.item.userId);
              }, 1);
              setTimeout(() => {
                   this.$refs.healthDataDetails.getHealthDataDetails(this.item.userId);
              }, 1);
          });
      },

    }
  }
</script>
<style>
  .contentx{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;


      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>


