<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.reportSn}}</span></el-descriptions-item>
          <el-descriptions-item label="用户昵称"><span v-if="item!=null">{{item.nickName}}</span></el-descriptions-item>
          <el-descriptions-item label="用户电话"><span v-if="item!=null">{{item.phone}}</span></el-descriptions-item>
          <el-descriptions-item label="诊断结果"><span v-if="item!=null">{{item.testResult}}</span></el-descriptions-item>
          <el-descriptions-item label="分数"><span v-if="item!=null">{{item.score}}</span></el-descriptions-item>
          <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.remark}}</span></el-descriptions-item>
          <el-descriptions-item label="创建时间"><span v-if="item!=null">{{item.createTime}}</span></el-descriptions-item>
        </el-descriptions>
  </div>
  <div class="contentx" v-if="patientJson!=null">
        <div class="desct" > 
          <span v-if="patientInfo">
            {{ patientInfo }}
          </span>
          <span v-else>
            患者信息
          </span>
        </div>
        <el-descriptions title="" :column="3" border >
            <el-descriptions-item label="患者名称"><span >{{patientJson.name}}</span></el-descriptions-item>
            <el-descriptions-item label="患者性别">
              <dict-tag :options="sexOptions" :value="patientJson.sex"/>
        </el-descriptions-item>
            <el-descriptions-item label="患者年龄"><span >{{patientJson.age}}</span></el-descriptions-item>
        </el-descriptions>
  </div>
  <div class="contentx" v-if="conditioningPlanJson!=null">
        <div class="desct"> 调理方案</div>
        <el-descriptions title="" :column="1" border >
            <el-descriptions-item :label="form.name" v-for=" form in conditioningPlanJson" ><span >{{form.value}}</span></el-descriptions-item>
        </el-descriptions>
  </div>
  <div class="contentx" v-if="formJson!=null">
        <div class="desct"> 表单信息</div>
        <el-descriptions title="" :column="3" border >
            <el-descriptions-item :label="form.title" v-for=" form in formJson" ><span >{{form.option}}</span></el-descriptions-item>
        </el-descriptions>
  </div>
</div>
</template>

<script>
import { listTestReport, getTestReport, delTestReport, addTestReport, updateTestReport, exportTestReport } from "@/api/his/testReport";
  export default {
    name: "testReport",
    props:["data"],
    data() {
      return {
        patientInfo: process.env.VUE_APP_PATIENT_INFO,
        item:null,
        formJson:null,
        conditioningPlanJson:null,
        patientJson:null,
        sexOptions:[],
      }
    },
    created() {
      this.getDicts("sys_patient_sex").then(response => {
         this.sexOptions = response.data;
       });
    },
    methods: {
      getDetails(orderId) {
        this.item=null;
        this.conditioningPlanJson=null;
        this.formJson=null;
        this.patientJson=null;
        getTestReport(orderId).then(response => {
            this.item = response.data;
            if(response.data.formJson!=null){
              this.formJson=JSON.parse(response.data.formJson);
              console.log(this.formJson)
            };
            if(response.data.conditioningPlanJson!=null){
              this.conditioningPlanJson=JSON.parse(response.data.conditioningPlanJson)
            };
            if(response.data.patientJson!=null){
              this.patientJson=JSON.parse(response.data.patientJson)
            };
        });
      },
    }
  }
</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: 500px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }

</style>
