<template>
  <el-container>
    <el-main>
      <div style="height: 10px"></div>
      <el-table :data="patients.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe highlight-current-row :height="tableHeight" size="middle">
        <el-table-column fixed prop="fzNo" label="分诊号" sortable></el-table-column>
        <el-table-column fixed prop="name" label="姓名"></el-table-column>
        <el-table-column prop="patientId" label="id号"></el-table-column>
        <el-table-column prop="deptName" label="科室"></el-table-column>
        <el-table-column prop="roomName" label="诊室"></el-table-column>
        <el-table-column prop="doctorName" label="医生"></el-table-column>
        <el-table-column prop="serialNo" label="流水号" sortable></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            {{ statusFlagFilter(scope.row.statusFlag) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button type="primary" @click="beforeCancelTriage(scope.row)">取消分诊</el-button>
          </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="patients.length"
        style="margin-top: 5px"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from '@vue/reactivity'
import store from '@/store'
import { cancelTriage, getTriagedPatients } from '@/api/triage/triage'
import { onActivated } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 50
    const patients = ref([])

    const pageSize = ref(30)
    const currentPage = ref(1)
    const handleSizeChange = (val) => {
      pageSize.value = val
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    const fetchTriagedPatients = () => {
      getTriagedPatients().then((res) => {
        patients.value = res
      })
    }

    const beforeCancelTriage = (row) => {
      ElMessageBox.confirm('确定重置此患者的分诊信息为空么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          cancelTriage(row.serialNo).then(() => {
            ElMessage({
              message: '操作成功',
              type: 'success',
              duration: 2000,
              showClose: true,
            })
          })
        })
        .catch(() => {})
    }

    onActivated(() => {
      fetchTriagedPatients()
    })

    return {
      tableHeight,
      statusFlagFilter,
      roomStatusFilter,
      patients,
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      beforeCancelTriage,
    }
  },
}

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