<script>
// 渲染科室-患者关系的通用模板

export default {
  name: 'DepartmentTemplate',
  dicts: ['discharge_method'],
  props: {
    patientId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      total: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //科室名称
      deptName: undefined,
      // 部门树选项
      deptOptions: null,
      //患者表
      patientList: null,
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        physician: undefined,
        patientName: undefined,
        departmentName: undefined,
      },
      dialogVisible: false,
      patient: {},
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        physician: undefined,
        name: undefined,
      }
      this.resetForm('form')
    },
    /** 查询患者列表*/
    getList() {
      this.get({
        url: '/work/visit/patientCard',
        data: {
          ...this.queryParams,
        },
      }).then((response) => {
        this.patientList = response.rows
        // console.log(this.patientList)
        this.total = response.total
      })
    },
    /** 查询部门 */
    getDepartment() {
      this.get({
        url: '/system/user/deptTree',
        //
      }).then((response) => {
        this.deptOptions = response.data
        console.log(this.patientList)
      })
    },
    handleNodeClick(data) {
      this.queryParams.departmentName = data.label
      this.getList()
    },
    selects(rows) {
      this.ids = rows.map((item) => item.id)
    },
    op(tag, row) {
      if (tag === 'search') {
        this.iframe({
          obj: search,
          param: {
            id: row.patId,
            cardId: row.cardId,
            name: row.name,
            department: row.department,
          },
          title: '查看患者信息',
          width: '90%',
          height: '90%',
        })
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
  },
}
</script>

<template>
  <div class="app-container">
    <!-- 行容器 -->
    <el-row :gutter="20" style="height: 100%">
      <!-- 列容器 -->
      <!-- 左边的列表，显示各个科室 -->
      <el-col
        :span="4"
        style="
          box-shadow: 0 3px 10px 0 rgb(0 0 0 / 6%);
          border-right: 1px solid #f1f2f4;
          overflow-y: auto;
          height: 100%;
        ">
        <el-tree
          :data="deptOptions"
          @node-click="handleNodeClick"
          default-expand-all>
        </el-tree>

        <!--        <el-menu v-for="(item, index) in deptOptions">-->
        <!--          <el-menu-item @click="handleNodeClick(item.department)" :key="index">-->
        <!--            <span slot="title">{{ item.department }}</span>-->
        <!--          </el-menu-item>-->
        <!--        </el-menu>-->
      </el-col>
      <!-- 患者诊断记录列表 -->
      <el-col :span="20" style="height: 100%">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item prop="physician">
            <el-input
              v-model="queryParams.physician"
              placeholder="请输入主治医生"
              clearable
              @keyup.enter.native="handleQuery"
              class="se" />
          </el-form-item>
          <el-form-item prop="patientName">
            <el-input
              v-model="queryParams.patientName"
              placeholder="请输入患者姓名"
              clearable
              @keyup.enter.native="handleQuery"
              class="se" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          :data="patientList"
          border
          @selection-change="selects"
          height="calc(100vh - 230px)">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="科室" align="center" prop="department" />
          <el-table-column label="患者姓名" align="center" prop="name" />
          <el-table-column label="主治医生" align="center" prop="physician" />
          <el-table-column
            label="出院方式"
            align="center"
            prop="dischargeMethod">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.discharge_method"
                :value="scope.row.dischargeMethod"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="出院时间"
            align="center"
            prop="dischargeTime" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-search"
                @click="
                  dialogVisible = true
                  patient = scope.row
                  $emit('update:patientId', scope.row.patId)
                ">
                <!--  通过patId获取orc和obr的结果  -->
                查看该患者相关检测报告
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-if="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>
    <!-- 检查信息弹窗 -->
    <el-dialog
      width="90%"
      top="5vh"
      style="height: 90vh"
      title="患者检查报告相关信息"
      :before-close="
        () => {
          dialogVisible = false
        }
      "
      :visible.sync="dialogVisible">
      <slot :patient="patient"> 渲染{{ patient }}的弹窗内容 </slot>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss"></style>
