<template>

<div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
  <div style="padding: 20px; background-color: #fff;">
    常用处方
  </div>

  <div class="contentx"  >
 <div class="desct">
      常用处方
 </div>
      <el-tabs type="card" v-model="actName" @tab-click="handleClickX">
        <el-tab-pane label="全部处方" name="10"></el-tab-pane>
        <el-tab-pane  label="西药" name="1"></el-tab-pane>
        <el-tab-pane  label="中药" name="2"></el-tab-pane>
      </el-tabs>
     <el-table  :data="item" border>
          <el-table-column label="诊断" align="center" prop="diagnose" />
          <el-table-column label="店铺名称" align="center" prop="storeName" />
          <el-table-column label="处方类型" align="center" prop="prescribeType" width="100px">
            <template slot-scope="scope">
                   <span v-if="scope.row.prescribeType == 1">西药</span>
                   <span v-if="scope.row.prescribeType == 2">中药</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100px">
            <template slot-scope="scope" >
              <el-button
                size="mini"
                type="text"
                @click="handleDetails(scope.row)"
                v-hasPermi="['his:doctorPrescribe:remove']"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getDoctorPrescribeList"/>
   </div>
<el-dialog title="处方详情" :visible.sync="dialogTableVisible" append-to-body >
  <el-table :data="gridData" border>
          <el-table-column label="药品图片" align="center" prop="drugImgUrl" >
          <template slot-scope="scope">
            <el-popover
              placement="right"
              title=""
              trigger="hover">
              <img slot="reference" :src="scope.row.drugImgUrl" width="50px">
              <img :src="scope.row.drugImgUrl" style="max-width: 150px;">
            </el-popover>
          </template>
          </el-table-column>
          <el-table-column label="药品名称" align="center" prop="drugName" width="150px" show-overflow-tooltip/>
          <el-table-column label="规格" align="center" prop="drugSpec" />
          <el-table-column label="药品数量" align="center" prop="drugNum" />
          <el-table-column label="单价" align="center" prop="drugPrice" />
          <el-table-column label="类别" align="center" prop="drugType" >
            <template slot-scope="scope">
                   <span v-if="scope.row.drugType == 1">西药</span>
                   <span v-if="scope.row.drugType == 2">中药</span>
            </template>
          </el-table-column>
          <el-table-column label="使用方法" align="center" prop="usageMethod" />
          <el-table-column label="药品频次" align="center" prop="usageFrequencyUnit" />
          <el-table-column label="每次⽤药数量" align="center" prop="usagePerUseCount" />
          <el-table-column label="每次⽤药单位" align="center" prop="usagePerUseUnit" />
          <el-table-column label="天数" align="center" prop="usageDays" />
          <el-table-column label="药品数量单位" align="center" prop="saleUnit" />
          <el-table-column label="药品说明书" align="center" prop="instructions" />
  </el-table>
</el-dialog>

  <div class="contentx"  >
 <div class="desct">
      历史处方
 </div>
 <el-table  :data="inquiryOrderList" border>
   <el-table-column label="订单号" align="center" prop="orderSn" width="200px"/>
   <el-table-column label="问诊标题" align="center" prop="title" show-overflow-tooltip />
   <el-table-column label="病人名称" align="center" prop="patientName" />
   <el-table-column label="医生名称" align="center" prop="doctorName" />
   <el-table-column label="状态" align="center" prop="status" >
     <template slot-scope="scope">
       <dict-tag :options="inquiryStatusOptions" :value="scope.row.status" />
     </template>
   </el-table-column>
   <el-table-column label="订单类型" align="center" prop="orderType">
         <template slot-scope="scope">
           <dict-tag :options="inquiryOrderOptions" :value="scope.row.orderType"/>
         </template>
   </el-table-column>
   <el-table-column label="订单子类型" align="center" prop="inquirySubType">
         <template slot-scope="scope">
           <dict-tag :options="inquirySubTypeOptions" :value="scope.row.inquirySubType"/>
         </template>
   </el-table-column>
   <el-table-column label="支付类型" align="center" prop="payType" >
     <template slot-scope="scope">
       <dict-tag :options="inquiryPayOptions" :value="scope.row.payType"/>
     </template>
   </el-table-column>
   <el-table-column label="是否支付" align="center" prop="isPay" >
     <template slot-scope="scope">
       <dict-tag :options="orOptions" :value="scope.row.isPay"/>
     </template>
   </el-table-column>
   <el-table-column label="订单金额" align="center" prop="money" />
   <el-table-column label="支付金额" align="center" prop="payMoney" />
   <el-table-column label="优惠金额" align="center" prop="discountMoney" />
   <el-table-column label="支付时间" align="center" prop="payTime" width="180"/>
   <el-table-column label="审核时间" align="center" prop="auditTime" width="180"/>
   <el-table-column label="审核人" align="center" prop="userName" width="180"/>
   <el-table-column label="问诊开始时间" align="center" prop="startTime" width="180" />
   <el-table-column label="结束时间" align="center" prop="finishTime" width="180" />
   <el-table-column label="是否评价" align="center" prop="isPing" >
     <template slot-scope="scope">
       <dict-tag :options="orOptions" :value="scope.row.isPing"/>
     </template>
   </el-table-column>
   <el-table-column label="评分" align="center" prop="pingStar" width="170px">
     <template slot-scope="scope" >
       <el-rate v-if="scope.row.pingStar!=null"
         v-model="scope.row.pingStar"
         disabled
         show-score
         text-color="#ff9900"
         score-template="{value}">
       </el-rate>
     </template>

   </el-table-column>
   <el-table-column label="科室名称" align="center" prop="deptName" />
 </el-table>

 <pagination
   v-show="inquiryTotal>0"
   :total="inquiryTotal"
   :page.sync="inquiryQueryParams.pageNum"
   :limit.sync="inquiryQueryParams.pageSize"
   @pagination="getinquiryOrderList"
 />





</div>

 </div>
</template>
<script>
import { listDoctorPrescribe, getDoctorPrescribe} from "@/api/his/doctorPrescribe";
import { listDoctorPrescribeDrug, getDoctorPrescribeDrug,  } from "@/api/his/doctorPrescribeDrug";
import { listinquiryOrder, getinquiryOrder, delinquiryOrder, addinquiryOrder, updateinquiryOrder, exportinquiryOrder } from "@/api/his/inquiryOrder";
  export default {
    name: "storedet",
    data() {
      return {
        actName:"10",
        gridData: [],
        dialogTableVisible:false,
        item:null,
        total: 0,
        // 问诊订单表格数据
        inquiryOrderList: [],
        inquiryTotal: 0,
        inquiryQueryParams: {
          pageNum: 1,
          pageSize: 10,
          doctorId: null,
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          doctorId:null,
          prescribeType:null,
        },
        inquiryStatusOptions:[],
        inquiryTypeOptions:[],
        inquiryPayOptions:[],
        inquiryOrderOptions:[],
        orOptions:[],
      }
    },
    created() {
      this.getDicts("sys_inquiry_status").then(response => {
          this.inquiryStatusOptions = response.data;
        });
      this.getDicts("sys_inquiry_type").then(response => {
          this.inquiryTypeOptions = response.data;
        });
      this.getDicts("sys_inquiry_pay").then(response => {
          this.inquiryPayOptions = response.data;
        });
      this.getDicts("sys_inquiry_order_type").then(response => {
          this.inquiryOrderOptions = response.data;
        });
      this.getDicts("sys_company_or").then(response => {
          this.orOptions = response.data;
        });
      this.getDicts("sys_inquiry_sub_type").then(response => {
        this.inquirySubTypeOptions = response.data;
      });
    },
    methods: {
      handleClickX(tab, event) {
       if(tab.name=="10"){
         this.queryParams.prescribeType=null;
       }else{
         this.queryParams.prescribeType=tab.name;
       }
        this.getDoctorPrescribeList();
      },
      handleDetails(row){
         this.dialogTableVisible=true;
         var fo={
           prescribeId:row.prescribeId
         }
        listDoctorPrescribeDrug(fo).then(response => {
             this.gridData = response.rows;
         });
      },
      getDetails(doctorId) {
          this.item=null;
          this.queryParams.doctorId=doctorId
          listDoctorPrescribe(this.queryParams).then(response => {
              this.item = response.rows;
              this.total=response.total;
          });
          this.inquiryQueryParams.doctorId=doctorId;
          this.getinquiryOrderList();
      },
      getDoctorPrescribeList(){
        listDoctorPrescribe(this.queryParams).then(response => {
            this.item = response.rows;
        });
      },

      getinquiryOrderList() {
        listinquiryOrder(this.queryParams).then(response => {
          this.inquiryOrderList = response.rows;
          this.inquiryTotal = response.total;
        });
      },
    }
  }
</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: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>
