<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-input
          placeholder="输入部门关键字"
          :clearable="true"
          v-model="filterText">
        </el-input>
        <div>
          <div style="height: calc(-203px + 100vh);overflow-y: auto; margin-top: 3px">
            <el-tree
              class="filter-tree"
              :data="deptOptions"
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
              ref="tree">
            </el-tree>
          </div>
        </div>

      </el-col>
      <!-- 患者诊断记录列表 -->
      <el-col :span="20" style="height: 100%">
        <el-form :model="queryParams" ref="queryForm" :inline="true" style="margin-top: 0">
          <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-date-picker
              v-model="dischargeTime"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd"
            />
          </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">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-search"
                @click="op('search', scope.row)"
                >查看</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 window from '@/views/work/check/window.vue'
export default {
  dicts: ['discharge_method'],
  name: 'checkUser',
  data() {
    return {
      dischargeTime:[],
      filterText:'',
      total: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //科室名称
      deptName: undefined,
      // 部门树选项
      deptOptions: null,
      //患者表
      patientList: null,
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        physician: undefined,
        patientName: undefined,
        department: undefined,
        deptId: undefined,
        startTime:undefined,
        endTime: undefined
      },
    }
  },
  watch: {
    dischargeTime(newVal) {
      if (newVal && newVal.length === 2) {
        this.queryParams.startTime = newVal[0].toString(); // 开始日期
        this.queryParams.endTime = newVal[1].toString(); // 结束日期
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 表单重置
    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
        this.total = response.total
      })
    },
    /** 查询部门 */
    getDepartment() {
      this.get({
        url: '/system/user/deptTree',
      }).then((response) => {
        this.deptOptions = response.data
        this.queryParams.deptId = response.data[0].id;
        this.getList();
      })
    },
    handleNodeClick(data) {
      if(this.queryParams.deptId === data.id){
        return;
      }
      this.queryParams.deptId = data.id
      this.getList()
    },
    selects(rows) {
      this.ids = rows.map((item) => item.id)
    },
    op(tag, row) {
      console.log(row.patId)
      this.iframe({
        obj: window,
        param: { id: row.patId },
        title: '查看患者信息',
        width: '90%',
        height: '90%',
        scroll: true,
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dischargeTime = [];
      this.queryParams.startTime='';
      this.queryParams.endTime='';
      this.resetForm('queryForm');
      this.handleQuery()
    },
  },
}
</script>
