<template>
  <div class="medical-record-con" id="medical-record" style="line-height: 30px;margin: 30px 0" v-loading="loading">
    <el-row>
      <el-col :span="24">
        <div class="hos-name">会诊记录</div>
      </el-col>
    </el-row>
    <div class="patient-info">
      <el-row>
        <el-col :span="10">
          <span class="label"
            >患者<span class="Arial">ID/Patient ID</span>：</span
          >
          <span class="text" v-show="consultationInfo.userInfo.healthCardNo">{{
            consultationInfo.userInfo.healthCardNo
          }}</span>
        </el-col>
        <el-col :span="9">
          <span class="label"
            >姓名<span class="Arial">/Patient Name</span>：</span
          >
          <span class="text" v-show="consultationInfo.userInfo.patientName">{{
            consultationInfo.userInfo.patientName
          }}</span>
        </el-col>
        <el-col :span="5">
          <span class="label">性别<span class="Arial">/Gender</span>：</span>
          <span class="text">{{ consultationInfo.userInfo.gender === "M" ? "男" : "女" }}</span>
        </el-col>
        <el-col :span="10">
          <span class="label"
            >科室<span class="Arial">/Department</span>：</span
          >
          <span class="text" v-show="consultationInfo.deptName">{{
            consultationInfo.deptName
          }}</span>
        </el-col>
         <el-col :span="9">
          <span class="label"
            >出生日期<span class="Arial">/Date of Birth</span>：</span
          >
          <span class="text" v-show="consultationInfo.userInfo.birthday">{{
            consultationInfo.userInfo.birthday
          }}</span>
        </el-col>
        <el-col :span="5">
          <span class="label">年龄<span class="Arial">/Age</span>：</span>
          <span class="text">{{ consultationInfo.userInfo.age }}</span><span class="label" style="margin-left:5px">岁</span>
        </el-col>
      </el-row>
    </div>
    <section style="border-bottom: 1px solid #333;">
      <div class="flex-row">
        <div class="row-con row-con-left">
          <span class="text">邀请</span>
          <span class="value underscore" style="display:inline-block;min-width:200px;">{{consultationInfo.inviteConsultants}}</span>
          <span class="text">会诊</span>
        </div>  
        <div class="row-con row-con-right">
          <span class="text">申请会诊时间</span>
          <span class="value underscore">{{consultationInfo.applyTime ? consultationInfo.applyTime.slice(0,4) : ''}}</span>
          <span class="text">年</span>
          <span class="value underscore">{{consultationInfo.applyTime ? consultationInfo.applyTime.slice(5,7) : ''}}</span>
          <span class="text">月</span>
          <span class="value underscore">{{consultationInfo.applyTime ? consultationInfo.applyTime.slice(8,10) : ''}}</span>
          <span class="text">日</span>
          <span class="value underscore">{{consultationInfo.applyTime ? consultationInfo.applyTime.slice(11,13) : ''}}</span>
          <span class="text">时</span>
          <span class="value underscore">{{consultationInfo.applyTime ? consultationInfo.applyTime.slice(14,16) : ''}}</span>
          <span class="text">分</span>
        </div> 
      </div>
      <div class="flex-row">
        <div class="row-con row-con-left" style="min-height: 50px">
          <span class="text">会诊目的：</span>
          <span class="value con-inline">{{consultationInfo.purpose}}</span>
        </div>
        <div class="row-con  row-con-right">
          <span class="text">会诊类别：</span>
          <span class="value" style="
              position: relative;">
            <el-checkbox-group v-model="consultationType">
              <el-checkbox v-for="item of typeList" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
            </el-checkbox-group>
            <div class="no-click-modal"></div>
          </span>
        </div>
      </div>
      <div class="flex-row">
        <div class="row-con" style="min-height:100px">
          <span class="text">病情简要及治疗情况：</span>
          <span class="value" style="text-indent: 30px;">{{consultationInfo.briefMedicalHistory}}</span>
        </div>
      </div>
      <div class="flex-row con-left">
        <div class="row-con">
          <span class="text">申请会诊医师：</span>
          <span class="value doctor-name">{{consultationInfo.applyConsultants}}</span>
        </div>
      </div>
    </section>
    <section>
      <div class="flex-row">
        <div class="row-con row-con-left">
          <span class="text">会诊意见:</span>
        </div>
        <div class="row-con row-con-right">
          <span class="text">会诊时间</span>
          <span class="value underscore">{{consultationInfo.consultationTime ? consultationInfo.consultationTime.slice(0,4) : ''}}</span>
          <span class="text">年</span>
          <span class="value underscore">{{consultationInfo.consultationTime ? consultationInfo.consultationTime.slice(5,7) : ''}}</span>
          <span class="text">月</span>
          <span class="value underscore">{{consultationInfo.consultationTime ? consultationInfo.consultationTime.slice(8,10) : ''}}</span>
          <span class="text">日</span>
          <span class="value underscore">{{consultationInfo.consultationTime ? consultationInfo.consultationTime.slice(11,13) : ''}}</span>
          <span class="text">时</span>
          <span class="value underscore">{{consultationInfo.consultationTime ? consultationInfo.consultationTime.slice(14,16) : ''}}</span>
          <span class="text">分</span>
        </div> 
      </div>
      <div class="flex-row">
        <div class="row-con row-con-left" style="min-height: 100px">
          <span class="value" style="text-indent: 30px;">{{consultationInfo.opinion}}</span>
        </div>
      </div>
      <div class="flex-row con-left">
        <div class="row-con">
          <span class="text">会诊医师：</span>
          <span class="value  doctor-name">{{consultationInfo.attendConsultants}}</span>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import {preImageUrl,getPcafInfo,getPcrInfo} from '@/request/common.js'
export default {
  // props: ["consultationInfo"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    visitNo: String | Number,
    type:String
  },
  data () {
    return {
      loading: false,
      consultationInfo: {
        status: 0,
        userInfo: {
          healthCardNo: '',
          patientName: '',
          gender: '',
          deptName:'',
          birthday: '',
          age: ''
        },
        applyTime: '',
        purpose: '',
        briefMedicalHistory: '',
        applyConsultants: '',
        consultationTime: '',
        opinion: '',
        attendConsultants: ''
      },
      typeList: [
        {label: '普通会诊',value: 1},
        {label: '急会诊',value: 2},
        {label: '院际会诊',value: 3},
      ],
      consultationType: []
    }
  },
  created () {
    // if(this.consultationInfo.consultationType) {
    //   this.consultationType = [this.consultationInfo.consultationType];
    // }
    this.getConsultationRecord(this.visitNo)
  },
  watch: {
    visitNo(v){
        if(v) {
          this.loading = true
            this.getConsultationRecord(v);
        }
    },
    'consultationInfo.consultationType': {
      handler(val) {
        if(val) {
          this.consultationType = [val];
        }
      }
    },
    visible(v) {
        if(!v) {
          this.consultationInfo = {
            userInfo: {
              healthCardNo: '',
              patientName: '',
              gender: '',
              deptName:'',
              birthday: '',
              age: ''
            },
            applyTime: '',
            purpose: '',
            briefMedicalHistory: '',
            applyConsultants: '',
            consultationTime: '',
            opinion: '',
            attendConsultants: ''
        }
      } else {
        if(this.type == 'rRecord') {
          this.loading = true
          this.getConsultationRecord(this.visitNo);
        }
      }
    }
  },
  methods: {
    // 会诊记录
      async getConsultationRecord(visitNo) {
        this.consultationInfo.status = 0
        const res = await getPcrInfo(visitNo);
        this.loading = false
        if (res.code === 0) {
          let {
            deptName,
            consultationType,
            applyTime,
            consultationTime,
            inviteConsultants,
            applyConsultants,
            attendConsultants,
            purpose,
            briefMedicalHistory,
            opinion
          } = res.data.pcr;
          if(consultationType) this.consultationType = [consultationType];
          this.consultationInfo = {
            deptName: deptName,
            consultationType: consultationType ? Number(consultationType) : "",
            applyTime: applyTime || "",
            consultationTime: consultationTime || "",
            inviteConsultants: inviteConsultants || "",
            applyConsultants: applyConsultants || "",
            attendConsultants: attendConsultants || "",
            purpose: purpose || "",
            briefMedicalHistory: briefMedicalHistory || "",
            opinion: opinion || "",
            userInfo: { ...res.data.patientInfo },
            status: 1
          };
        } else {
          this.$message.error(res.msg);
        }
      },
  }
};
</script>

<style scoped lang="less">
.medical-record-con {
  background-color: #ffffff;
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 970px;
  padding: 30px 30px 20px 30px;
  flex-direction: column;
  margin: 0 auto;
  .el-checkbox {
    font-size: 16px;
  }
  section {
    margin-bottom: 0px;
  }
  .label-bold {
    font-weight: bold;
    font-family: "SimSun";
    font-size: 16px;
  }
  .patient-info {
    padding: 5px 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 25px 0 15px 0;
    .label {
      font-family: "SimSun";
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
    .Arial {
      font-family: "Arial";
    }
    .text {
      font-family: "SimSun";
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
  }
  section {}
  .hos-name {
    text-align: center;
  }
  .hos-name {
     font-weight: bold;
    font-family: "SimSun";
    font-size: 20px;
    color: #2f2f2f;
    line-height: 30px;
    margin-bottom: 10px;
  }
  
  .info-content {
    
  }
  .flex-row {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    span {
      display: inline-block;
      font-family: "SimSun";
      font-size: 16px;
      text-align: left;
      color: #2f2f2f;
      line-height: 25px;
    }
    .underscore {
      text-align: center;
      border-bottom: 1px solid #333;
      padding: 0 10px;
    }
    .con-inline {
      display: inline;
    }
    .row-con-left {
      flex: 1;
    }
    .row-con-right {
      width: 400px;
      text-align: right;
    }
    .no-click-modal{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
    }
    
  }
  .con-left {
    justify-content: flex-end;
    .doctor-name {
      display: inline-block;
      min-width: 50px;
    }
  } 
  
}
</style>
