
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <div class="query-box">
        <div class="query-box__left">
          <el-form-item label="" prop="yljgId">
            <el-select
              v-model="queryParams.yljgId"
              placeholder="请选择医疗机构"
              class="defwidth"
            >
              <el-option
                v-for="item in listMedicalMechanismArr"
                :key="item.id"
                :value="item.id"
                :label="item.name"
                :disabled="item.state == 1 ? false : true"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="checkState">
            <el-select
              v-model="queryParams.checkState"
              placeholder="请选择审核状态"
              class="defwidth"
            >
              <el-option value="0" label="待审核"></el-option>
              <el-option value="1" label="审核通过"></el-option>
              <el-option value="2" label="审核不通过"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="preNo">
            <el-input
              v-model="queryParams.preNo"
              class="defwidth"
              placeholder="请输入处方号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入患者姓名"
              class="defwidth"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="" prop="prescriptionTime">
            <el-date-picker
              style="width:260px"
              clearable
              class="defwidth"
              size="small"
              v-model="queryParams.prescriptionTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              start-placeholder="开方开始时间"
              end-placeholder="开方结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-table
      v-loading="loading"
      :data="prescriptionCoreList"
      @selection-change="handleSelectionChange"
      border
      size="mini"
      class="prescriptionCore"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column label="处方号" align="center" prop="preNo" show-overflow-tooltip />
      <el-table-column label="医疗机构" align="center" prop="yijgName" show-overflow-tooltip />
      <el-table-column label="门诊/住院" align="center" prop="preMzZy">
        <template slot-scope="scope">{{scope.row.preMzZy==1?'门诊':'住院'}}</template>
      </el-table-column>
      <el-table-column label="患者姓名" align="center" prop="name" />
      <el-table-column label="性别" align="center" prop="sex" />
      <el-table-column label="临床诊断" align="center" prop="symName">
        <template slot-scope="scope">{{scope.row.disName}}-{{scope.row.symName}}</template>
      </el-table-column>
      <el-table-column label="开方医生" align="center" prop="doctor" />
      <el-table-column label="处方类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.type == 1 ? "中药处方" : "中药制剂" }}
        </template>
      </el-table-column>
      <el-table-column
        label="开方时间"
        align="center"
        prop="prescriptionTime"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="调配状态" align="center" prop="checkState">
        <template slot-scope="scope">
          {{
            scope.row.checkState == 0
              ? "待审核"
              : scope.row.checkState == 1
              ? "审核通过"
              : scope.row.checkState == 2
              ? "审核不通过"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remarks" />
      <el-table-column label="审核人" align="center" prop="checkBy" />
      <el-table-column label="审核时间" align="center" prop="checkTime" show-overflow-tooltip />
      <el-table-column label="打印次数" align="center" prop="num" />

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            style="width: 40px"
            @click="handleUpdate(1, scope.row)"
            v-hasPermi="['rescription:prescriptionCore:query']"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="primary"
            style="width: 40px"
            v-if="scope.row.checkState==0"
            @click="handleUpdate(2, scope.row)"
            v-hasPermi="['rescription:prescriptionCore:check']"
            >审核</el-button
          >
          <el-button
            size="mini"
            type="primary"
            style="width: 40px"
            v-if="scope.row.checkState==1"
            @click="handleRelease(scope.row)"
            v-hasPermi="['rescription:prescriptionCore:check']"
          >释放</el-button
          >
          <el-button
            size="mini"
            class="printbtn"
            style="width: 40px"
            @click="consoleBtn(scope.row)"
            v-if="scope.row.checkState == 1"
            v-hasPermi="['prescription:prescriptionCore:edit']"
            >打印</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改处方审核对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1280px"
      append-to-body
    >
      <div>
        <div style="display: flex; align-items: center;margin-bottom:20px;">
          <h3>处方信息</h3>
          <div style="margin: 0 0 0 30px">处方号：{{detailData.preNo}}</div>
        </div>
        <div style="display: flex; align-items: center;">
          <h3>审核状态：</h3>
          <span style="color:#fff" :class="detailData.checkState==0?'yellow-btn':detailData.checkState==1?'green-btn':detailData.checkState==2?'red-btn':''">{{detailData.checkState == 0
              ? "待审核"
              : detailData.checkState == 1
              ? "审核通过"
              : detailData.checkState == 2
              ? "审核不通过"
              : ""}}</span>
          <h3 style="margin-left:50px">审核人：</h3>
          <span>{{detailData.checkBy}}</span>
          <h3 style="margin-left:50px">审核时间：</h3>
          <span>{{detailData.checkTime}}</span>
        </div>
        <el-divider></el-divider>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-descriptions title="" :column="5">
              <el-descriptions-item label="患者姓名">{{
                detailData.name
              }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{
                detailData.sex
              }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{
                detailData.age
              }}</el-descriptions-item>
              <el-descriptions-item label="科室">{{
                detailData.department
              }}</el-descriptions-item>
              <el-descriptions-item label="临床诊断">
                {{detailData.disName}}-{{detailData.symName}}
              </el-descriptions-item>
              <el-descriptions-item label="开方医生">{{
                detailData.doctor
              }}</el-descriptions-item>
              <el-descriptions-item label="处方类型">{{
                detailData.type == 1 ? "中药处方" : "中药制剂"
              }}</el-descriptions-item>
              <el-descriptions-item label="发药状态">{{ detailData.fyState == 0 ? "未发药": detailData.fyState==1?'已发药' : "取消发药" }}</el-descriptions-item>
              <el-descriptions-item label="煎药方式">{{
                detailData.oralPre && detailData.oralPre.decoctingMethod
              }} <span v-if="detailData.oralPre && detailData.oralPre.decoctingMethod=='浓煎'">{{detailData.oralPre && detailData.oralPre.concentration}}</span></el-descriptions-item>

              <!-- <el-descriptions-item
                label="取药方式
              "
                >{{ detailData.takingMethod }}</el-descriptions-item
              >
              <el-descriptions-item label="处方名">{{
                detailData.preName
              }}</el-descriptions-item> -->
              <el-descriptions-item label="处方金额">{{
                detailData.type == 1
                  ? detailData.oralPre &&
                    detailData.oralPre.prescriptionSum
                  : detailData.solidPre &&
                    detailData.solidPre.prescriptionSum
              }}</el-descriptions-item>
              <el-descriptions-item label="剂型">{{
                detailData.oralPre && detailData.oralPre.dosageForm
              }}</el-descriptions-item>
              <el-descriptions-item label="剂数">{{
                detailData.oralPre && detailData.oralPre.number
              }}</el-descriptions-item>
              <el-descriptions-item label="代煎剂数">{{
                detailData.oralPre && detailData.oralPre.daijianNumber
              }}</el-descriptions-item>
              <el-descriptions-item label="代煎费用">{{
                detailData.oralPre && detailData.oralPre.daijianCost
              }}</el-descriptions-item>
              <el-descriptions-item label="处方用法">{{
                detailData.oralPre && detailData.oralPre.prescriptionusage
              }}</el-descriptions-item>
              <el-descriptions-item label="服药时间">{{
                detailData.oralPre && detailData.oralPre.medicationTime
              }}</el-descriptions-item>
              <el-descriptions-item label="频次">{{
                detailData.oralPre && detailData.oralPre.frequency
              }}</el-descriptions-item>
              <el-descriptions-item label="快递单号">{{
                detailData.expressCode
              }}</el-descriptions-item>
              <el-descriptions-item label="收件人">{{
                detailData.consignee
              }}</el-descriptions-item>
              <el-descriptions-item label="收货电话">{{
                detailData.contactNumber
              }}</el-descriptions-item>
              <el-descriptions-item label="配送费用">{{
                detailData.oralPre && detailData.oralPre.distributionCost
              }}</el-descriptions-item>
              <el-descriptions-item label="总金额">{{
                detailData.oralPre && detailData.oralPre.prescriptionTotleSum
              }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions>
              <el-descriptions-item label="嘱托">{{
                detailData.oralPre && detailData.oralPre.entrust
              }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions>
              <el-descriptions-item label="收货地址">{{
                detailData.address
              }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="24">
            <el-table
              v-loading="loading"
              :data="detailData && detailData.oralPreItemList"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" width="55" align="center" />
              <el-table-column label="药品名称" align="center" prop="matName" />
              <el-table-column
                label="药品规格"
                align="center"
                prop="ypggCenter"
              />
              <el-table-column label="单位" align="center" prop="matUnitName" />
              <el-table-column label="用法" align="center" prop="matUsageName" />
              <el-table-column label="剂量" align="center" prop="matDose" />
              <el-table-column label="零售价" align="center" prop="matXsj" />
              <el-table-column label="产地" align="center" prop="matOrigin" />
              <el-table-column
                label="小计"
                align="center"
                prop="subtotalMoney"
              />
              <!-- <el-table-column label="库存数量" align="center" prop="stock" /> -->
            </el-table>
          </el-col>
        </el-row>

        <div style="margin-top: 20px" v-if="btnState === 2">
          <span>备注</span>
          <el-input
            placeholder="请输入拒绝原因"
            style="margin-top: 10px"
            v-model="remarks"
          ></el-input>
        </div>

        <!-- <h3 style="margin: 60px 0 0 0">调配记录</h3>
        <el-divider></el-divider>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="抓药记录" name="first">
            <el-table
              v-loading="loading"
              :data="detailData.zy"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" width="55" align="center" />
              <el-table-column
                label="扫码时间"
                align="center"
                prop="createTime"
              />
              <el-table-column label="操作人" align="center" prop="createBy" />
              <el-table-column
                label="照片"
                align="center"
                prop="prescriptionFiles"
              >
                <template slot-scope="scope">
                  <span v-show="scope.row.prescriptionFiles.length > 0">
                    <img
                      v-for="(item, index) in scope.row.prescriptionFiles"
                      :key="index"
                      :src="$baseUrl+'/image/uploadPath/'+item.url.substr(33)"
                      alt=""
                      style="width: 100px; height: 100px"
                    />
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="remarks" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="复核记录" name="second">
            <el-table
              v-loading="loading"
              :data="detailData.fh"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" width="55" align="center" />
              <el-table-column
                label="扫码时间"
                align="center"
                prop="createTime"
              />
              <el-table-column label="操作人" align="center" prop="createBy" />
              <el-table-column
                label="照片"
                align="center"
                prop="prescriptionFiles"
              >
                <template slot-scope="scope">
                  <span v-show="scope.row.prescriptionFiles.length > 0">
                    <img
                      v-for="(item, index) in scope.row.prescriptionFiles"
                      :key="index"
                      :src="$baseUrl+'/image/uploadPath/'+item.url.substr(33)"
                      alt=""
                      style="width: 100px; height: 100px"
                    />
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="remarks" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="浸泡记录" name="third">
            <el-table
              v-loading="loading"
              :data="detailData.jp"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" width="55" align="center" />
              <el-table-column
                label="扫码时间"
                align="center"
                prop="createTime"
              />
              <el-table-column label="操作人" align="center" prop="createBy" />
              <el-table-column
                label="照片"
                align="center"
                prop="prescriptionFiles"
              >
                <template slot-scope="scope">
                  <span v-show="scope.row.prescriptionFiles.length > 0">
                    <img
                      v-for="(item, index) in scope.row.prescriptionFiles"
                      :key="index"
                      :src="$baseUrl+'/image/uploadPath/'+item.url.substr(33)"
                      alt=""
                      style="width: 100px; height: 100px"
                    />
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="remarks" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="煎煮记录" name="decoct">
            <el-table
              v-loading="loading"
              :data="detailData.jz"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" width="55" align="center" />
              <el-table-column
                label="扫码时间"
                align="center"
                prop="createTime"
              />
              <el-table-column label="操作人" align="center" prop="createBy" />
              <el-table-column
                label="照片"
                align="center"
                prop="prescriptionFiles"
              >
                <template slot-scope="scope">
                  <span v-show="scope.row.prescriptionFiles.length > 0">
                    <img
                      v-for="(item, index) in scope.row.prescriptionFiles"
                      :key="index"
                      :src="$baseUrl+'/image/uploadPath/'+item.url.substr(33)"
                      alt=""
                      style="width: 100px; height: 100px"
                    />
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                align="center"
                prop="remarks"
              /> </el-table
          ></el-tab-pane>
          <el-tab-pane label="打包记录" name="pack">
            <el-table
              v-loading="loading"
              :data="detailData.db"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                label="扫码时间"
                align="center"
                prop="createTime"
              />
              <el-table-column label="操作人" align="center" prop="createBy" />
              <el-table-column
                label="照片"
                align="center"
                prop="prescriptionFiles"
              >
                <template slot-scope="scope">
                  <span v-show="scope.row.prescriptionFiles.length > 0">
                    <img
                      v-for="(item, index) in scope.row.prescriptionFiles"
                      :key="index"
                      :src="$baseUrl+'/image/uploadPath/'+item.url.substr(33)"
                      alt=""
                      style="width: 100px; height: 100px"
                    />
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                align="center"
                prop="remarks"
              /> </el-table
          ></el-tab-pane>
        </el-tabs> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="checkBtn(1)" v-if="btnState === 2"
          >通 过</el-button
        >
        <el-popover placement="top" width="160" v-model="visible">
          <p>不通过理由未输入，确定现在提交？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="checkBtn(2)"
              >确定</el-button
            >
          </div>
          <el-button
            slot="reference"
            v-if="btnState === 2"
            @click="remarks ? checkBtn(2) : (visible = true)"
            style="margin: 0 10px"
            >拒 绝</el-button
          >
        </el-popover>

        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- <el-dialog
      title="打印"
      :visible.sync="openConsole"
      width="500px"
      append-to-body
      @close="closeCode"
    >
      <div id="qrcode" ref="qrcode"></div>
    </el-dialog> -->
<!--    <el-dialog-->
<!--      title=""-->
<!--      :visible.sync="openConsole"-->
<!--      width="640px"-->
<!--      append-to-body-->
<!--      @close="closeCode">-->
<!--      <div id="printMe">-->
<!--        <div style="display:flex;align-items:center;font-size:14px;position:relative;">-->
<!--          &lt;!&ndash; <div style="flex:1">普通处方</div> &ndash;&gt;-->
<!--          <div style="flex:1;text-align:center;font-size:18px;font-weight:bold;">处方笺</div>-->
<!--          <div id="qrcode" ref="qrcode" style="position:absolute;top:0;right:0;width:100px;height:100px;"></div>-->
<!--        </div>-->
<!--        <div style="display:flex;align-items:center;font-size:14px;margin-top:30px;">-->
<!--          <div style="flex:1">门诊/住院：{{detailData.preMzZy==1?'门诊':'住院'}}</div>-->
<!--          <div style="flex:3;text-align:right">NO:{{detailData.preNo}}</div>-->
<!--          <div style="flex:1"></div>-->
<!--        </div>-->
<!--        <div style="display:flex;align-items:center;font-size:14px;margin-top:10px;">-->
<!--          <div style="flex:2">就诊科室：{{detailData.department}}</div>-->
<!--          <div style="flex:2;text-align:right">开方时间：{{detailData.prescriptionTime}}</div>-->
<!--          <div style="flex:1"></div>-->
<!--        </div>-->
<!--        <table style="width:100%;border-collapse:collapse;margin-top:20px;line-height:32px;">-->
<!--          <tr>-->
<!--            <td rowspan="2" style="width:10%;border:1px solid #000;padding-left:10px;;">姓名</td>-->
<!--            <td rowspan="2" style="width:14%;border:1px solid #000;padding-left:10px;">{{detailData.name}}</td>-->
<!--            <td style="width:11%;border:1px solid #000;padding-left:10px;">性别</td>-->
<!--            <td style="width:24%;border:1px solid #000;padding-left:10px;">{{detailData.sex}}</td>-->
<!--            <td style="width:14%;border:1px solid #000;padding-left:10px;">年龄</td>-->
<!--            <td style="width:29%;border:1px solid #000;padding-left:10px;">{{detailData.age}}</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td style="border:1px solid #000;padding-left:10px;">电话</td>-->
<!--            <td style="border:1px solid #000;padding-left:10px;">{{detailData.contactNumber}}</td>-->
<!--            <td style="border:1px solid #000;padding-left:10px;">病历号</td>-->
<!--            <td style="border:1px solid #000;padding-left:10px;line-height:14px;">{{detailData.visitNo}}</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td colspan="2" style="border:1px solid #000;padding-left:10px;">联系地址</td>-->
<!--            <td colspan="4" style="border:1px solid #000;padding-left:10px;">{{detailData.address}}</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td style="border:1px solid #000;padding-left:10px;" colspan="2">临床诊断</td>-->
<!--            <td style="border:1px solid #000;padding-left:10px;" colspan="4">{{detailData.disName}}-{{detailData.symName}}</td>-->
<!--          </tr>-->
<!--        </table>-->
<!--        <div>-->
<!--          <h2 style="font-weight:bold">RP:</h2>-->
<!--          <div style="height:320px">-->
<!--            <div class="flex">-->
<!--              <div class="flex-sub" v-for="(v,i) in detailData.oralPreItemList">-->
<!--                {{v.matName}} {{v.matDose}}g&lt;!&ndash; {{v.matUnitName}} &ndash;&gt;-->
<!--              </div>-->
<!--            </div>-->

<!--          </div>-->
<!--        </div>-->
<!--        <div>-->
<!--          <div class="flex totaltip">-->
<!--            <span>-->
<!--              <span>{{ detailData.type == 1 ? "中药处方" : "中药制剂" }}: </span>-->
<!--              <span>{{detailData.oralPre && detailData.oralPre.number}}（代煎数：{{detailData.oralPre&&detailData.oralPre.daijianNumber}}）</span>-->
<!--            </span>-->
<!--            <span>{{detailData.oralPre && detailData.oralPre.decoctingMethod}}</span>-->
<!--            <span>{{detailData.oralPre && detailData.oralPre.medicationTime}}</span>-->
<!--            <span>{{detailData.oralPre && detailData.oralPre.frequency}}</span>-->
<!--            &lt;!&ndash; <span>{{detailData.oralPre && detailData.takingMethod}}</span> &ndash;&gt;-->
<!--          </div>-->
<!--          &lt;!&ndash; <h3>贴数:</h3> &ndash;&gt;-->
<!--          <table style="width:100%;border-collapse:collapse;margin-top:10px;line-height:32px;">-->
<!--            <tr>-->
<!--              <td colspan="2" style="width:12%;border:1px solid #000;text-align:center;">开方医生</td>-->
<!--              <td colspan="3" style="width:21%;border:1px solid #000;padding-left:10px;">{{detailData.doctor}}</td>-->
<!--              <td colspan="3" style="width:21%;border:1px solid #000;padding-left:10px;">药品金额及收收讫章</td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--              <td style="width:10%;border:1px solid #000;padding-left:10px;;">审核</td>-->
<!--              <td style="width:15%;border:1px solid #000;padding-left:10px;;">{{detailData.checkBy}}</td>-->
<!--              <td style="width:10%;border:1px solid #000;padding-left:10px;;">调配</td>-->
<!--              <td style="width:15%;border:1px solid #000;padding-left:10px;;"></td>-->
<!--              <td style="width:10%;border:1px solid #000;padding-left:10px;;">核对</td>-->
<!--              <td style="width:15%;border:1px solid #000;padding-left:10px;;"></td>-->
<!--              <td style="width:10%;border:1px solid #000;padding-left:10px;;">发药</td>-->
<!--              <td style="width:15%;border:1px solid #000;padding-left:10px;;"></td>-->
<!--            </tr>-->
<!--          </table>-->
<!--          <div style="line-height:24px;">-->
<!--            <p style="margin:10px 0 0;">注：1、本处方2日内有效</p>-->
<!--            <p style="margin:0">2、取药时请您当面核对药品名称、规格、数量。</p>-->
<!--            <p style="margin:0">3、延长处方用量时间原因：慢性 其他老年病 外地。</p>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <span slot="footer">-->
<!--        <el-button type="primary" v-print="'#printMe'">打印</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->

<!--     new print-->
    <el-dialog
      :title="title"
      :visible.sync="openPrint"
      width="1280px"
      append-to-body
    >
      <div style="display: flex;padding: 10px;">
        <div style="display: flex;width: 170px;flex-direction: column;align-items: center;border-right: 1px solid #1ab394;">
          <div style="display: flex;justify-content: center;align-items: center;height: 50px;width: 150px;font-size: 25px;padding: 10px;color: #1ab394;"
               v-for="item in printType" :key="item.id"
               @click="handlePrintType(item)"
               :class="activePrint===item.name?'active':''" >{{item.name}}</div>
        </div>

        <div style="display: flex;flex-direction: column;justify-content:center;align-items:center;width: 1120px;">
          <div class="print" id="print">
            <div style="display: flex;flex-direction: column;width:400px;height: 250px;padding: 20px;"  v-if="activePrint==='标签'">
              <div style="font-size: 25px;font-weight: 500;margin: 10px 0;display: flex;align-items: center;justify-content:center;">{{detailData.yljgName || '默默事中医院取药标签打印(门诊)'}}</div>
              <div style="display: flex;justify-content:space-between;height:100px;margin-top: 20px;">
                <div style="display: flex;flex-direction: column;width: 200px;height:100px;justify-content:center;">
                  <JsBarcode
                    :presno="detailData.preNo"
                  ></JsBarcode>
                </div>
                <div style="display: flex;flex-direction: column;width: 160px;margin-top: 10px">
                  <div style="display: flex;margin: 6px 0 5px;font-size: 15px;width: 160px;">患者：<div style="font-weight: 500;">{{detailData.name}}，{{detailData.sex}}，{{detailData.age}}岁</div></div>
                  <div style="display: flex;margin: 6px 0 5px;font-size: 15px;width: 160px;">出生日期：<div style="font-weight: 500;">{{detailData.patientBirthday}}</div></div>
                </div>
              </div>
            </div>

            <div v-else style="display: flex;margin: 5px;background-color: #fff;flex-direction:column;align-items: center;height: 1030px;width: 680px;box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);">
              <div style="display: flex;flex-direction:column;width: 660px;">
                <div style="display: flex;flex-direction:row;justify-content: space-between;margin-top: 15px;">
                  <div style="display: flex;align-items: flex-start;border-right:0!important;">
                    <div style="display: flex;flex-direction:column;">
                      <JsBarcode
                        :presno="detailData.preNo"
                      ></JsBarcode>
                    </div>
                  </div>
                  <div style="display: flex;justify-content:center;align-items:center;margin-right: 150px;font-size: 23.75px;font-weight: 800;">
                    中药处方笺
                  </div>
                  <div style="display: flex;justify-content:center;font-size: 16px;width: 40px;font-weight: 300;">{{detailData.type=='1'?"中药处方":detailData.type=='2'?"中药制剂":""}}</div>
                </div>
                <div style="display: flex;flex-direction:column;margin: 20px 10px 10px;padding-bottom: 15px;border-bottom: 1px solid #979797;">
                  <div style="display: flex;flex-direction:row;margin-bottom:5px;">
                    <div style="font-size: 12px;font-weight: 400;margin-right: 30px;"><span style="color:#999999;">姓名：</span>{{detailData.name}}</div>
                    <div style="font-size: 12px;font-weight: 400;margin-right: 30px;"><span style="color:#999999;">性别：</span>{{detailData.sex}}</div>
                    <div style="font-size: 12px;font-weight: 400;margin-right: 30px;"><span style="color:#999999;">年龄：</span>{{detailData.age}}岁</div>
                    <div style="font-size: 12px;font-weight: 400;margin-right: 30px;"><span style="color:#999999;">电话：</span>{{detailData.contactNumber}}</div>
                    <div style="font-size: 12px;font-weight: 400;margin-right: 30px;"><span style="color:#999999;">当前处方状态：</span>{{detailData.state=="1"?"配药":detailData.state=="2"?"煎药":detailData.state=="3"?"发药":detailData.state=="4"?"配送":""}}</div>
                  </div>
                  <div style="display: flex;flex-direction:row;margin-bottom:5px;">
                    <div style="font-size: 12px;font-weight: 400;margin-right: 30px;"><span style="color:#999999;">就诊科室：</span>{{detailData.department}}</div>
                    <div style="font-size: 12px;font-weight: 400;margin-right: 30px;"><span style="color:#999999;">临床诊断：</span>{{detailData.disName}}—{{detailData.symName}}</div>
                    <div style="font-size: 12px;font-weight: 400;margin-right: 30px;"><span style="color:#999999;">开方时间：</span>{{detailData.prescriptionTime}}</div>
                  </div>
                  <div style="display: flex;flex-direction:row;font-size: 12px;"><span style="color:#999999;">联系地址：</span>{{detailData.address}}</div>
                </div>
              </div>
              <div style="display: flex;flex-direction:column;width: 640px;align-items:flex-start;border-bottom: 1px solid #5a5e66;margin:0px 10px 10px;">
                <div style="display: flex;font-size: 22px;">
                  Rp:
                </div>
                <div style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content:flex-start;align-content:flex-start;margin-left:20px;height: 515px;">
                  <div style="display: flex;justify-content:center;width: 150px;align-items: center;margin: 0 0 10px 0;" v-for="(x, i) in detailData.detailList" :key="i">
                    <div style="display: flex;font-size: 15px;width: 100px;word-wrap: break-word;z-index: 100;justify-content:center;align-items: center;padding: 2px 5px;">
                      <!--                      <el-tag effect="plain" >{{x.matName}} {{x.matDose}} {{x.matUnitName}}</el-tag>-->
                      {{x.matName}}{{x.matDose}}{{x.matUnitName}}
                    </div>
                    <div style="display: flex;flex-direction:column;margin-left: 5.31px;z-index: 200;">
                      <div style="font-size: 10px;height: 12.5px;"> {{x.matUsageName}}</div>
                      <div style="font-size: 10px;height: 12.5px;"> {{x.sign}}</div>
                    </div>
                  </div>
                </div>
                <div style="margin: 0 10px 10px;display: flex;font-size: 15px;">
                  <div style="display: flex;margin-right: 54.4px;">
                    剂数：{{detailData.number}}
                    <div v-if="detailData.daijianCost!==''" class="pies_tips">
                      (代煎)
                    </div>
                  </div>
                  <div style="display: flex;margin-right: 54.4px;">{{detailData.dosageForm}}</div>
                  <div style="display: flex;margin-right: 54.4px;">{{detailData.prescriptionUsage}}</div>
                  <div style="display: flex;margin-right: 54.4px;">每次{{detailData.concentration}}</div>
                  <div style="display: flex;margin-right: 54.4px;">{{detailData.frequency}}</div>
                  <div >{{detailData.medicationTime}}</div>
                </div>
                <div style="display: flex;justify-content:flex-end;font-size: 15px;margin-right: 10px;">{{detailData.entrust}}</div>
              </div>
              <div style="display: flex;margin: 0 10px 0;padding-bottom: 5px;border-bottom: 1px solid #979797;">
                <div style="display: flex;flex-direction:column;">
                  <div style="border: 1px solid #979797;font-size: 15px;width: 287.5px;display: flex;justify-content:center;align-items: center;height: 30px;">
                    <div class="pijw">药品金额：{{detailData.prescriptionSum}}</div>
                  </div>
                  <div style="display: flex;justify-content:center;align-items: center;font-size: 15px;height: 30px;width: 287.5px;border-left: 1px solid #979797;border-right: 1px solid #979797;">
                    <div style="width: 143.93px;display: flex;justify-content:center;align-items: center;height: 30px;">煎药费：{{detailData.daijianCost}}</div>
                    <div style="border-left: 1px solid #979797;width: 143.93px;display: flex;justify-content:center;align-items: center;height: 30px;">配送费：{{detailData.distributionCost}}</div>
                  </div>
                  <div style="display: flex;justify-content:center;align-items: center;height: 30px;font-size: 15px;border: 1px solid #979797;">
                    总金额：{{detailData.prescriptionTotalSum}}
                    <!-- <div class="zjw"></div> -->
                  </div>
                </div>
                <div style="display: flex;flex-wrap: wrap;margin-left: 20px;">
                  <div style="font-size: 15px;margin-right: 60px;width:90px;"><span style="font-size: 15px;color:#999999;">开方：</span>{{operateList[0].operater}}</div>
                  <div style="font-size: 15px;margin-right: 60px;width:90px;"><span style="font-size: 15px;color:#999999;">审核：</span>{{operateList[1].operater}}</div>
                  <div style="font-size: 15px;margin-right: 60px;width:90px;"><span style="font-size: 15px;color:#999999;">调配：</span>{{operateList[2].operater}}</div>
                  <div style="font-size: 15px;margin-right: 60px;width:90px;"><span style="font-size: 15px;color:#999999;">复核：</span>{{operateList[3].operater}}</div>
                  <div style="font-size: 15px;margin-right: 60px;width:90px;"><span style="font-size: 15px;color:#999999;">浸泡：</span>{{operateList[4].operater}}</div>
                  <div style="font-size: 15px;margin-right: 60px;width:90px;"><span style="font-size: 15px;color:#999999;">煎煮：</span>{{operateList[5].operater}}</div>
                  <div style="font-size: 15px;margin-right: 60px;width:90px;"><span style="font-size: 15px;color:#999999;">打包：</span>{{operateList[6].operater}}</div>
                  <div style="font-size: 15px;margin-right: 60px;width:90px;"><span style="font-size: 15px;color:#999999;">发药：</span>{{operateList[7].operater}}</div>
                </div>
              </div>
              <div style="margin: 10px 16px 10px;font-size: 15px;display: flex;">
                <div class="z">注：</div>
                <div>{{entrust1111}}</div>
              </div>
            </div>
          </div>
          <el-button style="margin-top: 50px;display: flex;justify-content:center;align-items:center;background-color: #1ab394;color: #FFFFFF;font-size: 20px;margin-top: 40px;width: 300px;height: 50px;" v-print="'#print'">打 印</el-button>
        </div>

      </div>
    </el-dialog>


  </div>
</template>

<script>
import {
  listPrescriptionCore,
  getPrescriptionCore,
  delPrescriptionCore,
  addPrescriptionCore,
  updatePrescriptionCore,
  exportPrescriptionCore,
  check,
  addNum,
} from "@/api/prescription/prescriptionCore";


import { listMedicalMechanism } from "@/api/medical/mechanism";

import QRCode from "qrcodejs2";
import {releaseOrder, selectOrderDetail} from "@/api/prescription/prescriptionAudit";
import Pres from "@/components/Pres/index.vue";
import JsBarcode from "@/components/JsBarcode/index.vue";

export default {
  name: "PrescriptionCore",
  components:{Pres, JsBarcode,},
  data() {
    return {
      $baseUrl: this.$baseUrl,
      operateList:[
        {py:'kf',title:'开方',operater:''},
        {py:'sh',title:'审核',operater:''},
        {py:'tp',title:'调配',operater:''},
        {py:'fh',title:'复核',operater:''},
        {py:'jp',title:'浸泡',operater:''},
        {py:'jz',title:'煎煮',operater:''},
        {py:'db',title:'打包',operater:''},
        {py:'fy',title:'发药',operater:''},
      ],
      entrust1111:'1、本处方当日有效\n  2、取药时请您当面核对。。。。 \n  3、延长处方用量时间原油：慢性病 其他老年病 外地 其他',
      visible: false,
      remarks: "",
      btnState: 1,
      rowId: null,
      detailData: {
        oralPreItemList: []
      },
      activeName: "first",
      state: {
        1: "配药",
        2: "煎药",
        3: "发药",
        4: "配送",
      },
      openConsole: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 处方审核表格数据
      prescriptionCoreList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // print相关
      openPrint: false,
      activePrint: '标签',
      printType:[
        {name:'标签', id:0},
        {name:'中药处方笺', id:1}
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        //state: 1,
        appId: null,
        yljgId: null,
        timeStamp: null,
        token: null,
        preNo: null,
        preName: null,
        name: null,
        sex: null,
        age: null,
        department: null,
        doctor: null,
        prescriptionTime: [],
        disCode: null,
        disName: null,
        symCode: null,
        symName: null,
        westernDisease: null,
        westernCode: null,
        patientContent: null,
        nowDesc: null,
        pastDesc: null,
        fourDiagnosis: null,
        physical: null,
        auxiliaryExam: null,
        premzzy: null,
        visitNo: null,
        checkState: null,
        remarks: null,
        extendedTxt: null,
        address: null,
        contactNumber: null,
        consignee: null,
        takingMethod: null,
        yfId: window.localStorage.getItem("pharmacyId"),
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      listMedicalMechanismArr: [],
    };
  },
  created() {
    this.getList();
    this.getListMedicalMechanism();
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (row.checkState == 0) {
        return 'warning-row';
      }
      return '';
    },
    //打印
    // consoleBtn({ id }) {
    consoleBtn(row) {
      // this.rowId = id;
      // this.openConsole = true;
      // this.payOrder();
      // addNum(id)
      // getPrescriptionCore(id).then((response) => {
      //   // this.form = response.data;
      //   this.detailData = response.data
      // });
      this.reset();
      const id = row.id;
      console.log('id>>>>',id)
      selectOrderDetail({id:id}).then((response) => {
        this.form = response.data;
        this.detailData = response.data;
        this.detailData.patientBirthday = this.detailData.patientBirthday?this.detailData.patientBirthday.substring(0,10):'';
        this.detailData.presType = '普通处方'; //TODO neo
        console.log('handlePrint detailData', this.detailData)
        this.openPrint = true;
        this.operateList[0].operater = this.detailData.doctor|| '';
        this.operateList[1].operater = this.detailData.checkBy|| '';
        this.operateList[2].operater = this.detailData.tiaopeiName || '';
        const length = response.data.operateList
        if(length > 0){
          response.data.operateList.forEach((item)=>{
            switch(item.type){
              case '2':
                this.operateList[3].operater = item.createBy
                break
              case '3':
                this.operateList[4].operater = item.createBy
                break
              case '4':
                this.operateList[5].operater = item.createBy
                break
              case '5':
                this.operateList[6].operater = item.createBy
                break
              case '6':
                this.operateList[7].operater = item.createBy
                break
                defalut:console.log('处方签res.data.operateList数据异常',item.type)
            }
          })
        }
        // this.title = "查看处/**/方审核";
        //console.log(response);
      });
    },
    handlePrintType(e) {
      console.log('this.activePrint',this.activePrint)
      console.log('click>>>',e.name)
      if(e.name && e.name!==this.activePrint){
        this.activePrint = e.name
        console.log(' change this.activePrint',this.activePrint)
      } else {
        console.log('nochange this.activePrint',this.activePrint)
      }

    },
    /** 释放订单 */
    handleRelease(row) {
      const ids = row.id || this.ids;
      this.$confirm(
        '是否确认释放处方编号为"' + row.preNo + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return releaseOrder({ids:ids});
        })
        .then(() => {
          this.getList();
          this.msgSuccess("释放成功");
        })
        .catch(() => {
        });
    },
    payOrder() {
      this.innerVisible = true;
      // 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接
      this.qrcode = `https://yaofang.hzxunmai.com/doc#/input?id=${this.rowId}`;
      // 使用$nextTick确保数据渲染
      this.$nextTick(() => {
        this.crateQrcode();
      });
    },
    // 生成二维码
    crateQrcode() {
      this.qr = new QRCode("qrcode", {
        width: 100,
        height: 100, // 高度
        text: this.qrcode, // 二维码内容
      });
    },
    // 关闭弹框,清除已经生成的二维码
    closeCode() {
      this.$refs.qrcode.innerHTML = "";
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    /** 查询处方审核列表 */
    getList() {
      this.loading = true;
      var form = Object.assign({}, this.queryParams)
      if (this.queryParams.prescriptionTime && this.queryParams.prescriptionTime.length) {
        form.startTime = this.queryParams.prescriptionTime[0]
        form.endTime = this.queryParams.prescriptionTime[1]
      } else {
        form.startTime = ''
        form.endTime = ''
      }
      delete form.prescriptionTime
      listPrescriptionCore(form).then((response) => {
        this.prescriptionCoreList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getListMedicalMechanism() {
      listMedicalMechanism().then((res) => {
        this.listMedicalMechanismArr = res.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //审核拒绝
    checkBtn(num) {
      //console.log(num);
      let params = {
        checkState: num,
        id: this.rowId,
        remarks: this.remarks,
      };
      check(params).then((res) => {
        //console.log(res);
        if (res.code) {
          this.msgSuccess("修改成功");
          this.open = false;
          this.visible = false;
          this.getList()
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        remarks: null,
      };
      this.remarks = null;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加处方审核";
    },
    /** 修改按钮操作 */
    handleUpdate(num, row) {
      this.reset();
      const id = row.id || this.ids;
      this.btnState = num;
      this.rowId = id;
      (this.rowId = id), (this.btnState = num);
      getPrescriptionCore(id).then((response) => {
        // this.form = response.data;
        this.detailData = response.data;

        this.open = true;
        this.title = "查看处方审核";
        //console.log(response);
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updatePrescriptionCore(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPrescriptionCore(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm("确定需要删除选中数据吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delPrescriptionCore(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有处方审核数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return exportPrescriptionCore(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
h3 {
  margin: 0;
}
#qrcode {
  width: 160px;
  margin: 0 auto;
}
.defwidth { width: 160px; }
.prescriptionCore >>> .warning-row, .prescriptionCore >>> .el-table__body tr.warning-row.current-row > td, .prescriptionCore >>> .el-table__body tr.warning-row.hover-row > td {
  background: #E6A23C;
  color: #fff
}
.printbtn { background: #409eff; color: #fff; }
.flex { display: flex; align-items: center; flex-wrap: wrap;padding:0 30px; }
.flex-sub { flex: 0 0 33.333333%; margin-top: 6px; }
.totaltip { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.active{ background-color: #1ab394; color: #FFFFFF!important;}
</style>
