<template>
  <div>
    <el-card header="患者信息">
      <el-form :model="filterQuery" v-if="showSearch" label-width="auto" size="mini">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="患者编号:" class="query-form-item">
              <el-input v-model="filterQuery.code" placeholder="请输入患者编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="患者姓名:" class="query-form-item">
              <el-input v-model="filterQuery.name" placeholder="请输入患者姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="住院号:" class="query-form-item">
              <el-input v-model="filterQuery.adNum" placeholder="请输入住院号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button-group class="top-right-btn">
        <el-button type="primary" icon="el-icon-refresh" @click="showSearch = !showSearch">显示/隐藏搜索栏</el-button>
        <el-button type="primary" icon="el-icon-download" :loading="dlSickLoading" @click="onDownload">下载患者信息
        </el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
      </el-button-group>
      <el-divider></el-divider>

      <el-table v-loading="loading" :data="list"
                @row-click="sickerClick"
                border highlight-current-row
                style="width: 100%">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="患者编号" prop="code" width="120"></el-table-column>
        <el-table-column label="患者姓名" prop="name" width="120"></el-table-column>
        <el-table-column label="性别" prop="gender" width="80"></el-table-column>
        <el-table-column label="住院号" prop="adNum" width="120"></el-table-column>
        <el-table-column label="就诊卡号" prop="idNum" width="160"></el-table-column>
        <el-table-column label="职业" prop="job" width="120"></el-table-column>
        <el-table-column label="最后更新时间" prop="createTime" width="140"></el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="showSickerInfo(scope.row)">患者详情</el-button>
            <el-button type="text" @click="showPrescribeDiInfo(scope.row)">使用耗材</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="getList"
      ></pagination>
    </el-card>

    <el-card>
      <template slot="header">
        {{ '处方信息' + (sickerInfo ? '--' + sickerInfo.name + `(${sickerInfo.code})` : "") }}
      </template>

      <el-button-group class="top-right-btn" style="margin-top: -10px">
        <el-button type="primary" icon="el-icon-download" :loading="dlSickLoading" @click="updatePrecribe">更新处方信息
        </el-button>
      </el-button-group>
      <el-table v-loading="prescribeLoading" :data="prescribeList" style="width: 100%">
        <el-table-column label="序号" type="index" width="50"/>
        <el-table-column label="处方编号" prop="code" width="120"/>
        <el-table-column label="开方时间" prop="prescribeDate" width="150"/>
        <el-table-column label="开方医生" prop="createDr" width="120"/>
        <el-table-column label="科室名称" prop="deptName" width="120"/>
        <el-table-column label="处方费用" prop="amount" width="140">
          <template slot-scope="scope">
            {{ scope.row.amount ? '¥' + scope.row.amount : "--" }}
          </template>
        </el-table-column>
        <el-table-column label="诊断内容" prop="diagnosis" width="280"/>
        <el-table-column label="备注" prop="remark" width="280"/>
        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="showPrescribeDetail(scope.row)"
                       v-loading.fullscreen.lock="fullscreenLoading">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="prescribeTotal>0"
        :total="prescribeTotal"
        :limit.sync="prescribeQuery.limit"
        :page.sync="prescribeQuery.page"
        @pagination="getPrescribeList"
      ></pagination>
    </el-card>

    <el-dialog
      :title="`患者详情(${sicker.name})`"
      :visible="true"
      v-if="showSickerDialog"
      @clos="showSickerDialog = false"
      width="55%"
    >
      <el-descriptions title="" :column="2"
                       label-style="width:80px;font-weight:bolder;font-size:14px;color:black;" border>
        <el-descriptions-item label="姓名">{{ sicker.name }}</el-descriptions-item>
        <el-descriptions-item label="编号">{{ sicker.code }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ sicker.gender || "--" }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ sicker.age || "--" }}</el-descriptions-item>
        <el-descriptions-item label="住院号">{{ sicker.adNum || "--" }}</el-descriptions-item>
      </el-descriptions>
      <el-row class="mt10">
        <el-col align="center">
          <el-button type="primary" @click.native="showSickerDialog = false">关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog
      :title="`处方详情(编号:${prescribeDetail.code})`"
      :visible="true"
      v-if="showPrescribeDetailDialog"
      @close="showPrescribeDetailDialog = false"
      width="55%"
    >
      <el-divider content-position="left"><span type="info" style="font-size: 16px;font-weight: bold">患者信息</span>
      </el-divider>
      <el-descriptions title="" :column="4" class="mt10 mb20"
                       label-style="width:80px;font-weight:bolder;font-size:14px;color:black;" border>
        <el-descriptions-item label="姓名">{{ prescribeDetail.sicker.name }}</el-descriptions-item>
        <el-descriptions-item label="编号">{{ prescribeDetail.sicker.code }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ prescribeDetail.sicker.gender || "--" }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ prescribeDetail.sicker.age || "--" }}</el-descriptions-item>
      </el-descriptions>
      <el-divider content-position="left"><span type="info" style="font-size: 16px;font-weight: bold">处方信息</span>
      </el-divider>
      <el-tabs type="border-card">
        <el-tab-pane label="处方内容">
          <el-descriptions title="" :column="4" label-style="width:80px;font-weight:bolder;font-size:14px;color:black;"
                           border>
            <el-descriptions-item label="处方编号">{{ prescribeDetail.code }}</el-descriptions-item>
            <el-descriptions-item label="开方医生">{{ prescribeDetail.createDr }}</el-descriptions-item>
            <el-descriptions-item label="就诊科室">{{ prescribeDetail.deptName }}</el-descriptions-item>
            <el-descriptions-item label="费用">{{
                prescribeDetail.amount ? '¥' + prescribeDetail.amount : "--"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="开方日期" :span="4">{{ prescribeDetail.prescribeDate }}</el-descriptions-item>
            <el-descriptions-item label="诊断内容" :span="4">
              <div style="min-height: 250px;max-height:500px;margin: 10px;overflow-y: auto;font-size: 14px;color:red;">
                {{ prescribeDetail.diagnosis }}
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="处方明细" class="mt10">
          <el-table :data="prescribeDetail.items">
            <el-table-column label="序号" type="index" width="50px"/>
            <el-table-column label="名称" prop="itemName" width="160px"/>
            <el-table-column label="计量数量" prop="measureCount" width="80px"/>
            <el-table-column label="计量单位" prop="measureUnit" width="80px"/>
            <el-table-column label="类别" prop="category" width="80px"/>
            <el-table-column label="频次" prop="frequency" width="100px"/>
            <el-table-column label="规格型号" prop="ggxh" width="120px"/>
            <el-table-column label="数量" prop="count" width="80px"/>
            <el-table-column label="单价" prop="price" width="140px"/>
            <el-table-column label="总价" prop="amount" width="140px"/>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-row class="mt10">
        <el-col align="center">
          <el-button type="primary" @click.native="showPrescribeDetailDialog = false">关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog
      :title="`患者使用耗材(${sicker.name})`"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="sickDiDialog"
      width="75%"
      append-to-body
      v-if="sickDiDialog"
    >
      <skPrescribeDi :perscribeData="sicker"
      ></skPrescribeDi>
    </el-dialog>

    <el-dialog
      title="患者信息下载"
      :visible.sync="sickDlDialog"
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="sickDlDialog"
    >
      <skPersonDownload
        v-on:cancelDialog="cancelDialog"
      ></skPersonDownload>
    </el-dialog>

  </div>
</template>

<script src="./skPerson.js"/>

<style lang="scss" scoped>
.query-form-item {
  .el-input {
    width: 90%;
  }
}
</style>
