<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.drugs}}</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" style="width: 200px;"></el-image>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="my-content"  v-if="conditioningPlanJson!=null">
        <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" v-if="formJson!=null&&formJson!=''">
        <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 class="my-content" v-if="item!=null&&item.status!=2" >
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="诊断结果" prop="inquiryResult">
              <el-input type="textarea" placeholder="请输入诊断结果"   maxlength="500" show-word-limit v-model="form.inquiryResult"  />
            </el-form-item>
            <el-form-item :label="plan.name"   v-for="(plan) in form.conditioningPlan">
              <el-input type="textarea"   maxlength="500" show-word-limit v-model="plan.value"  />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" placeholder="请输入备注"   maxlength="500" show-word-limit v-model="form.remark"  />
            </el-form-item>
          </el-form>
          <div  class="btn-box">
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
      </div>
    </div>
</template>

<script>
import { getInquiryOrderReport,submitInquiryOrderReport} from "@/api/inquiryOrder";
  export default {
    name: "inquiryOrderReport",
    props:["data"],
    data() {
      return {
        reportImages: [],
				tongueImages:[],
				faceImages:[],
        item:null,
        statusOptions:[],
        formJson:[],
        conditioningPlanJson:[],
        patientJson:[],
        form: {
          conditioningPlan:[],
          inquiryResult:"",
          remark:""
        },
        rules: {
          inquiryResult: [
            { required: true, message: "诊断结果不能为空", trigger: "blur" }
          ],
        }
      }
    },
    created() {
      // this.getDicts("sys_inquiry_order_report_status").then(response => {
      //   this.statusOptions = response.data;
      // });
    },
    methods: {
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            var data={
              orderId:this.item.orderId,
              reportId:this.item.reportId,
              inquiryResult:this.form.inquiryResult,
              conditioningPlanJson:JSON.stringify(this.form.conditioningPlan)
            }
            submitInquiryOrderReport(data).then(response => {
              this.msgSuccess("提交成功");
              this.getDetails(this.item.orderId) ;
            });
          }
        });
      },
      getDetails(orderId) {
        this.conditioningPlanJson=null;
        this.item = null;
        getInquiryOrderReport(orderId).then(response => {
            this.item = response.data;
            if(this.item==null){
              this.item={status:1,orderId:orderId}
              this.form.conditioningPlan=[{"code":"item1","name":"解析","value":""},{"code":"item2","name":"用药调治","value":""},{"code":"item3","name":"饮食调养","value":""},{"code":"item4","name":"运动调理","value":""},{"code":"item5","name":"精神调适","value":""},{"code":"item6","name":"起居调摄","value":""}]
              return;
            }
            this.patientJson=JSON.parse(this.item.patientJson);
            this.formJson=JSON.parse(this.item.formJson);
            this.form.inquiryResult=this.item.inquiryResult;
            if(this.item.conditioningPlanJson!=null){
              this.form.conditioningPlan=JSON.parse(this.item.conditioningPlanJson)
              this.conditioningPlanJson=JSON.parse(this.item.conditioningPlanJson);
              console.log(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;
      }
      .btn-box{
        margin:15px 0px;
        text-align:right;
      }
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 500px;
    min-width: 100px;
  }
</style>
