<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      问诊报告
    </div>
    <div class="my-content" v-if="item!=null">
      <el-descriptions title="患者信息" :column="2" border  v-if="patientJson!=null">
        <el-descriptions-item label="患者姓名" ><span>{{patientJson.patientName}}</span></el-descriptions-item>
        <el-descriptions-item label="患者年龄" ><span>{{patientJson.age}}</span></el-descriptions-item>
        <el-descriptions-item label="患者性别" ><span>{{patientJson.sex==1?'男':'女'}}</span></el-descriptions-item>
        <el-descriptions-item label="手机号" ><span>{{patientJson.mobile}}</span></el-descriptions-item>
        <el-descriptions-item label="身高(CM)" ><span>{{patientJson.height}}</span></el-descriptions-item>
        <el-descriptions-item label="体重(KG)" ><span>{{patientJson.weight}}</span></el-descriptions-item>
        <!-- <el-descriptions-item label="学习进度" ><span>{{patientJson.study}}</span></el-descriptions-item> -->
        <el-descriptions-item label="期望会诊方式" ><span>{{patientJson.usage}}</span></el-descriptions-item>
        <el-descriptions-item label="病情描述" ><span>{{patientJson.title}}</span></el-descriptions-item>
        <el-descriptions-item label="用药情况" ><span>{{patientJson.medication}}</span></el-descriptions-item>
        <!-- <el-descriptions-item label="本次患病时间" ><span>{{patientJson.duration}}</span></el-descriptions-item> -->
        <!-- <el-descriptions-item label="是否就诊过" ><span>{{patientJson.isVisit}}</span></el-descriptions-item> -->
        <el-descriptions-item label="舌苔照片" >
          <el-image 
            v-if="tongueImages.length>0"
            style="width: 100px; height: 100px"
            :src="tongueImages[0]" 
            :preview-src-list="tongueImages">
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="面部照片" >
          <el-image 
            v-if="faceImages.length>0"
            style="width: 100px; height: 100px"
            :src="faceImages[0]" 
            :preview-src-list="faceImages">
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="检测报告或患处照片" >
          <el-image 
            v-if="reportImages.length>0"
            style="width: 100px; height: 100px"
            :src="reportImages[0]" 
            :preview-src-list="reportImages">
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="诊断结果" >{{item.inquiryResult}}</el-descriptions-item>
        <el-descriptions-item label="医生签名" >
          <el-image :src="item.doctorSignUrl"></el-image>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="my-content"  >
      <div class="my-title">
        调理计划
      </div>
      <el-table
        border
        :data="conditioningPlanJson"
        size="small"
        style="width: 100%;margin-top: 20px" >
          <el-table-column label="名称" align="center" prop="name" width="120px" />
          <el-table-column label="内容" align="center"  prop="value"   >
          </el-table-column>
      </el-table>
    </div>
    <div class="my-content" >
      <div class="my-title">
        体检信息
      </div>
      <el-table
        border
        :data="formJson"
        size="small"
        style="width: 100%;margin-top: 20px" >
          <el-table-column label="名称" align="center" prop="title" width="120px" />
          <el-table-column label="选项" align="center"  prop="option"   >
            <template slot-scope="scope">
              <el-tag style="margin-right:5px;" v-for="(text)  in scope.row.option" >{{text}}</el-tag>
            </template>
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getInquiryOrderReport} from "@/api/inquiryOrder";
export default {
  name: "inquiryOrderReport",
  props:["data"],
  data() {
    return {
      reportImages: [],
      tongueImages:[],
      faceImages:[],
      item:null,
      statusOptions:[],
      formJson:[],
      conditioningPlanJson:[],
      patientJson:[],
    }
  },
  created() {
     
  },
  methods: {
    getDetails(orderId) {
      this.conditioningPlanJson=null;
      this.item = null;
      getInquiryOrderReport(orderId).then(response => {
          this.item = response.data;
          this.patientJson=JSON.parse(this.item.patientJson);
          this.formJson=JSON.parse(this.item.formJson);
          if(this.item.conditioningPlanJson!=null){
            this.conditioningPlanJson=JSON.parse(this.item.conditioningPlanJson);
          };
          if(this.patientJson!=null){
            if(this.patient.reportImages!=null){
              this.reportImages=this.patient.reportImages.split(",");
            }
            if(this.patient.tongueImages!=null){
              this.tongueImages=this.patient.tongueImages.split(",");
            }
            if(this.patient.faceImages!=null){
              this.faceImages=this.patient.faceImages.split(",");
            }
          }
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.my-content{
    background-color: #fff;
    padding: 20px;
    margin: 20px;
    .my-title{
      margin-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
   
}
.el-descriptions-item__label.is-bordered-label{
  font-weight: normal;
}
.el-descriptions-item__content {
  max-width: 500px;
  min-width: 100px;
}
</style>
