<template>
  <page-layer>
    <template #header>
      <el-button type="primary" icon="Refresh" @click="fetchUnTriagedPatient">刷新数据</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="100"></el-table-column>
        <el-table-column fixed prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="patientId" label="id号" width="100"></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="statusFlag" label="状态" width="100">
          <template #default="scope">
            {{ statusFlagFilter(scope.row.statusFlag) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template #default="scope">
            <el-button type="warning" @click="getDepts(scope.row, 1)">复诊</el-button>
            <el-button type="primary" @click="getMzVitalSigns(scope.row)">生命体征</el-button>
            <el-button type="success" @click="getDepts(scope.row, 0)">分诊</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="totalSize"
          style="margin-top: 5px"
      ></el-pagination>

      <div style="position: absolute; right: 10px; bottom: 10px">
        <a href="http://172.16.32.160:8888/readcard/候诊信息-Setup.exe">下载候诊展示软件</a>
      </div>

      <el-drawer title="生命体征录入" v-model="showVital" :with-header="false" direction="ltr" size="30%">
        <div style="height: 15px"></div>
        <h3 style="margin-left: 15px; font-size: 16px">生命体征录入</h3>
        <div class="vital-sign-box">
          <div>
            <el-input size="small" readonly v-model="vitalSigns.patientId">
              <template #prepend>患者ID</template>
            </el-input>
          </div>
          <div>
            <el-input size="small" readonly v-model="vitalSigns.visitDate">
              <template #prepend>录入日期</template>
            </el-input>
          </div>
          <div>
            <el-input size="small" type="number" v-model="vitalSigns.valueSg">
              <template #prepend>身高 (cm)</template>
            </el-input>
          </div>
          <div>
            <el-input size="small" type="number" v-model="vitalSigns.valueTz">
              <template #prepend>体重 (kg)</template>
            </el-input>
          </div>
          <div>
            <el-input size="small" type="number" v-model="vitalSigns.valueTw">
              <template #prepend>体温 (℃)</template>
            </el-input>
          </div>
          <div>
            <el-input size="small" type="number" v-model="vitalSigns.valueMb">
              <template #prepend>脉搏 (次/分)</template>
            </el-input>
          </div>
          <div>
            <el-input size="small" type="number" v-model="vitalSigns.valueHx">
              <template #prepend>呼吸 (次/分)</template>
            </el-input>
          </div>
          <div>
            <el-input size="small" type="number" v-model="vitalSigns.valueSsy">
              <template #prepend>血压上限 (mmHg)</template>
            </el-input>
          </div>
          <div>
            <el-input size="small" type="number" v-model="vitalSigns.valueSzy">
              <template #prepend>血压下限 (mmHg)</template>
            </el-input>
          </div>
          <div>
            <el-input size="small" text v-model="vitalSigns.visitRemark">
              <template #prepend>备注</template>
            </el-input>
          </div>
        </div>
        <el-button type="primary" size="small" :loading="drawSaving" @click="saveVitals" style="width: 200px; margin-left: 120px; margin-top: 20px"> 保存 </el-button>
      </el-drawer>

      <el-dialog v-model="showTriageDialog" title="选择诊室" width="50%">
        <div style="background-color: lightblue; padding: 4px 8px; margin-top: -16px; border-radius: 4px; color: red">
          <div class="dialog-head">
            <div style="width: 20%">病人Id：{{ currentPatient.patientId }}</div>
            <div style="width: 20%">姓名：{{ currentPatient.name }}</div>
            <div style="width: 40%">挂号时间：{{ currentPatient.visitDate }}</div>
            <div style="width: 20%">诊查费：{{ currentPatient.clinicFee }}</div>
          </div>
          <div class="dialog-head">
            <div style="width: 20%">科室：{{ currentPatient.deptName }}</div>
            <div style="width: 20%">医生：{{ currentPatient.doctorName }}</div>
            <div style="width: 40%">号别：{{ currentPatient.reqName }}</div>
            <div style="width: 20%">挂号费：{{ currentPatient.ghFee }}</div>
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 25%">
            <el-table ref="chosenDeptsTable" :data="chosenDepts" stripe highlight-current-row height="350" @row-click="fetchRooms">
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="name" label="科室"></el-table-column>
            </el-table>
          </div>
          <div style="width: 75%">
            <el-table ref="roomTable" :data="rooms" height="350" stripe highlight-current-row>
              <el-table-column fixed label="操作">
                <template #default="scope">
                  <el-button type="primary" @click="executeTriage(scope.row)">分诊</el-button>
                  <!-- <el-button type="info" @click="check(scope.row)">检查</el-button> -->
                </template>
              </el-table-column>
              <el-table-column prop="roomNo" 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="reqName" label="号别"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script>
import { ref } from 'vue'
import store from '@/store'
import { fenZhen, fetchVitalSign, getChosenDept, getRooms, getUnTriagedPatient, saveMzVitalSigns } from '@/api/triage/triage'
import { ElMessage } from 'element-plus'
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 showVital = ref(false)

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

    const fetchUnTriagedPatient = () => {
      getUnTriagedPatient(currentPage.value, pageSize.value).then((res) => {
        totalSize.value = res.totalSize
        patients.value = res.list
      })
    }

    const getMzVitalSigns = (row) => {
      fetchVitalSign(row.patientId).then((res) => {
        vitalSigns.value = res
        showVital.value = true
      })
    }
    const chosenDeptsTable = ref(null)
    const roomTable = ref(null)
    const currentPatient = ref({})
    const chosenDepts = ref([])
    const rooms = ref([])
    const getDepts = (row, fuzhenFlag) => {
      row.fuzhenFlag = fuzhenFlag
      currentPatient.value = row
      getChosenDept().then((res) => {
        chosenDepts.value = res
        showTriageDialog.value = true
        res.forEach((item) => {
          if (item.code === row.deptCode.trim()) {
            setTimeout(() => {
              chosenDeptsTable.value.setCurrentRow(item)
              fetchRooms(item)
            }, 100)
          }
        })
      })
    }
    const fetchRooms = (row) => {
      getRooms(row.code).then((res) => {
        rooms.value = res
        res.forEach((item) => {
          if (item.doctorCode.trim() === currentPatient.value.doctorCode.trim()) {
            setTimeout(() => {
              roomTable.value.setCurrentRow(item)
            }, 100)
          }
        })
      })
    }
    const executeTriage = (row) => {
      row.serialNo = currentPatient.value.serialNo
      row.fuzhenFlag = currentPatient.value.fuzhenFlag
      fenZhen(row).then((res) => {
        showTriageDialog.value = false
        fetchUnTriagedPatient()
        ElMessage({
          message: res,
          type: 'success',
          duration: 2000,
          showClose: true,
        })
      })
    }

    const vitalSigns = ref({})
    const drawSaving = ref(false)
    const saveVitals = () => {
      drawSaving.value = true
      saveMzVitalSigns(vitalSigns.value)
        .then((res) => {
          ElMessage({
            message: res,
            type: 'success',
            duration: 2000,
            showClose: true,
          })
          drawSaving.value = false
        })
        .catch(() => {
          drawSaving.value = false
        })
    }

    const showTriageDialog = ref(false)

    const fetchInteval = ref(null)
    onActivated(() => {
      fetchUnTriagedPatient()
      fetchInteval.value = setInterval(() => {
        fetchUnTriagedPatient()
      }, 1000 * 60)
    })
    onDeactivated(() => {
      clearInterval(fetchInteval.value)
    })

    return {
      tableHeight,
      patients,
      totalSize,
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      statusFlagFilter,
      roomStatusFilter,
      getMzVitalSigns,
      fetchUnTriagedPatient,
      getDepts,
      showVital,
      vitalSigns,
      drawSaving,
      saveVitals,
      showTriageDialog,
      currentPatient,
      chosenDeptsTable,
      chosenDepts,
      rooms,
      fetchRooms,
      executeTriage,
      roomTable,
    }
  },
}

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 '已就诊'
  }
}
function roomStatusFilter(val) {
  return val === 0 ? '在线' : '离线'
}
</script>

<style scoped>
.vital-sign-box {
  padding: 0 20px;
  margin-top: 15px;
}
.vital-sign-box > div {
  margin-top: 15px;
}
.dialog-head {
  display: flex;
  height: 26px;
  line-height: 26px;
}
</style>
