<template>
  <page-layer>
    <template #header>
      &nbsp;&nbsp;检索依据：
      <el-select v-model="searchMethod" style="width: 120px">
        <el-option label="id号" value="patientId"></el-option>
        <el-option label="姓名" value="name"></el-option>
      </el-select>
      <el-input v-model="searchContent" style="width: 160px" clearable placeholder="请输入检索内容"></el-input>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="Search" @click="fetchAllPatients">检索</el-button>
    </template>
    <template #main>
      <el-table :data="patients" stripe highlight-current-row :height="tableHeight" size="middle">
        <el-table-column fixed prop="ghNo" label="队列号" sortable width="80"></el-table-column>
        <el-table-column fixed label="姓名" width="100">
          <template #default="scope">
            <el-popover trigger="hover" placement="right">
              <div style="color: orangered">
                <p>姓名: {{ scope.row.name }}</p>
                <p>电话：{{ scope.row.phone }}</p>
                <p>住址: {{ scope.row.address }}</p>
              </div>
              <template #reference>
                <el-tag size="small">{{ scope.row.name }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="patientId" label="id号" width="100"></el-table-column>
        <el-table-column prop="times" label="次数" width="50"></el-table-column>
        <el-table-column prop="deptName" label="科室" width="150"></el-table-column>
        <el-table-column prop="roomName" label="诊室" width="150"></el-table-column>
        <el-table-column prop="doctorName" label="医生" width="100"></el-table-column>
        <el-table-column prop="serialNo" label="流水号" width="100"></el-table-column>
        <el-table-column prop="visitDate" label="挂号时间" sortable width="180"></el-table-column>
        <el-table-column prop="reqName" label="号别" width="120"></el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="scope">
            {{ statusFlagFilter(scope.row.statusFlag) }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[15, 30, 45, 70, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          style="margin-top: 5px"
      ></el-pagination>
    </template>
  </page-layer>
</template>

<script>
import { ref } from '@vue/reactivity'
import store from '@/store'
import { getAllPatients } from '@/api/triage/triage'
import { onActivated } from 'vue'
import PageLayer from "@/layout/PageLayer";
export default {
  components: {PageLayer},
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 50
    const patients = ref([])
    const totalSize = ref(0)
    const pageSize = ref(30)
    const currentPage = ref(1)
    const searchMethod = ref('patientId')
    const searchContent = ref('')

    const handleSizeChange = (val) => {
      pageSize.value = val
      fetchAllPatients()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      fetchAllPatients()
    }

    const fetchAllPatients = () => {
      getAllPatients(searchContent.value, currentPage.value, pageSize.value).then((res) => {
        totalSize.value = res.totalSize
        patients.value = res.list
      })
    }

    onActivated(() => {
      fetchAllPatients()
    })

    return {
      tableHeight,
      statusFlagFilter,
      patients,
      totalSize,
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      searchMethod,
      searchContent,
      fetchAllPatients,
    }
  },
}

function statusFlagFilter(val) {
  switch (val) {
    case '0':
      return '初值'
    case '1':
      return '报到'
    case '2':
      return '可通知'
    case '3':
      return '已通知'
    case '4':
      return '检查'
    case '8':
      return '就诊中'
    case '9':
      return '已就诊'
  }
}
</script>
