<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;" class="my-title">
      <div>御君方互联网医院处方笺</div>
      <el-button  size="mini"   @click="showImg()">查看处方单</el-button>
    </div>
    <el-image 
      v-show="false"
      ref="elImage"
      style="width: 100px; height: 100px"
      :src="imgUrl" 
      :preview-src-list="images">
    </el-image>
    <div class="contentx" v-if="item!=null">
      <div class="desct">基本信息</div>
      <el-card shadow="never" style="margin-top: 15px">
             
        <el-descriptions :column="3" border  >
            <el-descriptions-item label="医生名称"  ><span v-if="item!=null">{{item.doctor.doctorName}}</span></el-descriptions-item>
            <el-descriptions-item label="患者姓名"  > <span v-if="item!=null">{{item.prescribe.patientName}}</span></el-descriptions-item>
            <el-descriptions-item label="患者年龄"  ><span v-if="item!=null">{{item.prescribe.patientAge}}</span></el-descriptions-item>
            <el-descriptions-item label="患者性别"  >  <dict-tag :options="sexOptions" :value="item.prescribe.patientGender"/>  </el-descriptions-item>
            <el-descriptions-item label="处方单号"  ><span v-if="item!=null">{{item.prescribe.prescribeCode}}</span></el-descriptions-item>
            <el-descriptions-item label="开方时间"  ><span v-if="item!=null">{{item.prescribe.createTime}}</span></el-descriptions-item>
            <el-descriptions-item label="医生诊断"  ><span v-if="item!=null">{{item.prescribe.diagnose}}</span> </el-descriptions-item>
            <el-descriptions-item label="审核意见"  ><span v-if="item!=null">{{item.prescribe.diagnose}}</span> </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
 <div class="contentx" v-if="item!=null" style="padding-bottom: 70px;">
  <div class="desct">
      药品信息
  </div>
  <el-table border v-if="showProd!=null" :data="showProd" size="small" style="width: 100%;margin-top: 20px" >
      <el-table-column label="药品图片" align="center" prop="drugImgUrl" width="120">
        <template slot-scope="scope">
          <el-popover
            placement="right"
            title=""
            trigger="hover"
          >
            <img slot="reference" :src="scope.row.drugImgUrl" width="100">
            <img :src="scope.row.drugImgUrl" style="max-width: 150px;">
          </el-popover>
        </template>
      </el-table-column>
        <el-table-column label="药品名称" align="center" prop="drugName" show-overflow-tooltip  width="150px"/>
        <el-table-column label="药品类型" align="center" prop="drugType" width="100px">
        <template slot-scope="scope">
          <dict-tag :options="prescribeTypeOptions" :value="scope.row.drugType"/>
        </template>
      </el-table-column>
      <el-table-column label="药品规格" align="center" prop="drugSpec"  />
      <el-table-column label="药品单价" align="center" prop="drugPrice"  />
      <el-table-column label="药品数量" align="center" prop="drugNum"  />
      <el-table-column  label="用药频率" align="center" prop="usageFrequencyUnit"  />
      <el-table-column  label="单次用量" align="center" prop="usagePerUseCount"   />
      <el-table-column  label="用药方法" align="center" prop="usageMethod"   />
      <el-table-column  label="备注" align="center" prop="remark"  />
  </el-table>
  </div>
  <div class="contentx" v-if="usageJson!=null&&prescribeType==2">
      <div class="desct">用药说明</div>
      <el-card shadow="never" style="margin-top: 15px">
        <el-descriptions :column="3" border  >
            <el-descriptions-item label="用药数量"  ><span v-if="usageJson!=null">{{usageJson.counts}}</span></el-descriptions-item>
            <el-descriptions-item label="用药频率"  > <span v-if="usageJson!=null">{{usageJson.usageFrequencyUnit}}</span></el-descriptions-item>
            <el-descriptions-item label="单次用量"  ><span v-if="usageJson!=null">{{usageJson.usagePerUseCount}}</span></el-descriptions-item>
            <el-descriptions-item label="用药方法"  > <span v-if="usageJson!=null">{{usageJson.usageMethod}}</span></el-descriptions-item>
            <el-descriptions-item label="备注"  > <span v-if="usageJson!=null">{{usageJson.remark}}</span></el-descriptions-item>
      </el-descriptions>
    </el-card>
    
  </div>
</div>
</template>

<script>
import { getPrescribe,getPrescribeImg } from "@/api/prescribe";
  export default {
      name: "prescribe",
      props:["data"],
      data() {
        return {
          images:[],
          imgUrl:null,
          prescribeId:null,
          prescribeTypeOptions: [],
          usageJson:{},
          prescribeType:null,
          showList:true,
          item:null,
          show:{
            title:"问诊详情",
            open:false,
          },
          form: {
            deliveryCode: null,
            deliveryName:null,
            deliverySn:null,
            orderId:null,
          }
        }
      },
      created() {
        this.getDicts("sys_prescribe_type").then(response => {
          this.prescribeTypeOptions = response.data;
        });
        this.getDicts("sys_patient_sex").then(response => {
         this.sexOptions = response.data;
       });
      },
      methods: {
        showImg(){
          this.images=[];
          var data={
            prescribeId:this.prescribeId
          }
          getPrescribeImg(data).then(response => {
              this.imgUrl = response.url;
              console.log(this.imgUrl)
              this.images.push(this.imgUrl)
              this.$refs.elImage.clickHandler()
          });
        },
        showListD(){
          if(this.showList){
            this.showProd=this.prod
          }else{
            this.showProd=[this.prod[0]]
          }
          this.showList=this.showList?false:true;
        },
        getDetails(prescribeId) {
          this.prescribeId=prescribeId;
          this.item=null;
          this.prescribeType = null,
          getPrescribe(prescribeId).then(response => {
                this.item = response.data;
                this.prescribeType = response.data.prescribe.prescribeType;
                this.usageJson = JSON.parse(response.data.prescribe.usageJson);
                this.prod = response.data.drugs;
                this.showProd=[this.prod[0]]
            });
        },
      }
    }
  </script>
  <style>
    .contentx{
        height: 100%;
        background-color: #fff;
        padding: 0px 20px 20px;
        margin: 20px;
    }
    .desct{
        padding-top: 20px;
        padding-bottom: 20px;
        color: #524b4a;
        font-weight: bold;
      }
  </style>

  <style scoped>
  .my-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .order-content{
    margin: 10px;

  }

  .operate-container {
    background: #F2F6FC;
    height: 60px;
    margin: -20px -20px 0;
    line-height: 60px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }
  </style>
