<template>
  <div class="app-container">
    <!-- 行容器 -->
    <el-row :gutter="20">
      <!-- 列容器 -->
      <!-- 左边的列表，显示各个科室 -->
      <el-col :span="4">
        <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">
        <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 - 270px)">
          <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">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-search" @click="op('search',scope.row)" v-hasPermi="['work:dg:edit']">查看</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>
  </div>
</template>

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