<template>
  <page-layer>
    <template #main>
      <el-table stripe highlight-current-row :height="tableHeight" :data="rooms">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="deptName" label="科室" width="150"></el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="scope">
            {{ filterStatus(scope.row.statusFlag) }}
          </template>
        </el-table-column>
        <el-table-column prop="roomNo" label="诊室号" width="100"></el-table-column>
        <el-table-column prop="roomName" label="诊室名称" width="150"></el-table-column>
        <el-table-column prop="doctorName" label="坐诊医生" width="120"></el-table-column>
        <el-table-column label="当前号别" width="160">
          <template #default="scope">
            {{ filterReqTypeName(scope.row.reqType) }}
          </template>
        </el-table-column>
        <el-table-column prop="patientNum" label="待诊人数" width="100"></el-table-column>
        <el-table-column label="操作" width="130">
          <template #default="scope">
            <el-button text icon="Edit" @click="editRoom(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="editVisible" title="诊室编辑" width="300px">
        <div id="crtRoom">
          <div>科室名称：{{ currentRoom.deptName }}</div>
          <div>诊室名称：{{ currentRoom.roomName }}</div>
          <div>诊室编号：{{ currentRoom.roomNo }}</div>
          <div>
            诊室状态：
            <el-select v-model="currentRoom.statusFlag">
              <el-option v-for="item in statuses" :key="item.code" :label="item.name" :value="item.code" :style="statusClass(item.code)">
                <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.name }}</span>
              </el-option>
            </el-select>
          </div>
          <div>
            坐诊医师：
            <el-autocomplete @click="currentRoom.doctorName = ''" v-model="currentRoom.doctorName" :fetch-suggestions="fetchDoctors" clearable @select="handleSelectDoctor">
              <template #default="{ item }">
                <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.name }}</span>
              </template>
            </el-autocomplete>
          </div>
          <div>
            医师号别：
            <el-select v-model="currentRoom.reqType" filterable :filter-method="filterReq" @change="handleSelectReq">
              <el-option v-for="item in reqOptions" :key="item.code" :label="item.name" :value="item.code">
                <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.name }}</span>
              </el-option>
            </el-select>
          </div>
          <div style="margin: 10px 0 0 0; width: 100%; text-align: center">
            <el-button type="primary" icon="Check" @click="saveRoomChange">保存更改</el-button>
          </div>
        </div>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script>
import { ref } from '@vue/reactivity'
import store from '@/store'
import { getChosenRoom, getReqs, searchDoctor, updateRoomSettings } from '@/api/triage/triage'
import { onActivated } from 'vue'
import { clone } from '@/utils/clone'
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
    const rooms = ref([])
    const statuses = [
      { code: 0, name: '在线' },
      { code: 1, name: '离线' },
    ]
    const editVisible = ref(false)
    const currentRoom = ref({})
    const editRoom = (row) => {
      currentRoom.value = clone(row)
      editVisible.value = true
    }

    const reqOptions = ref([])
    const reqs = ref([])
    const statusClass = (status) => {
      return status === 1 ? 'color: red' : 'color: green'
    }

    const fetchDoctors = (queryString, cb) => {
      if (!queryString || queryString.length < 2) {
        return
      }
      searchDoctor(queryString).then((res) => {
        cb(res)
      })
    }

    const handleSelectDoctor = (item) => {
      currentRoom.value.doctorCode = item.code
      currentRoom.value.doctorName = item.name
    }

    const filterReq = (py) => {
      reqOptions.value = reqs.value.filter((item) => {
        return item.pyCode.indexOf(py.toUpperCase()) === 0
      })
    }

    const handleSelectReq = () => {
      reqOptions.value = reqs.value
    }

    const saveRoomChange = () => {
      updateRoomSettings(currentRoom.value).then((res) => {
        getChosenRoom().then((res2) => {
          rooms.value = res2
          editVisible.value = false
          ElMessage({
            message: res,
            type: 'success',
            duration: 2000,
            showClose: true,
          })
        })
      })
    }

    onActivated(() => {
      getChosenRoom().then((res) => {
        rooms.value = res
        getReqs().then((res2) => {
          reqs.value = res2
          reqOptions.value = res2
        })
      })
    })

    return {
      tableHeight,
      rooms,
      statuses,
      fetchDoctors,
      statusClass,
      handleSelectDoctor,
      filterReq,
      handleSelectReq,
      reqs,
      reqOptions,
      filterStatus,
      filterReqTypeName,
      editVisible,
      currentRoom,
      editRoom,
      saveRoomChange,
    }
  },
}

function filterStatus(val) {
  return val === 1 ? '离线' : '在线'
}

function filterReqTypeName(val) {
  switch (val) {
    case '01':
      return '住院医师'
    case '02':
      return '主治医师'
    case '03':
      return '副主任医师'
    case '04':
      return '主任医师'
    case '05':
      return '知名专家号'
    case '06':
      return '急诊号'
    case '07':
      return '住院医师(急)'
    case '08':
      return '副主任医师(急)'
    case '09':
      return '主任医师(急)'
    case '10':
      return '简易门诊号'
    case '13':
      return '主治医生（急）'
    case '14':
      return '副主任医师'
    case '16':
      return '免挂号'
    case '19':
      return '急诊记账'
    case '22':
      return '儿科急诊'
    case '23':
      return '专家咨询'
    case '24':
      return '假日门诊'
    case '25':
      return '主管护师'
    case '26':
      return '视力筛查'
    case '27':
      return '驾驶员体检'
    case '28':
      return '复诊号'
    case '29':
      return '专家（儿科）'
    case '30':
      return '中医专家'
    case '31':
      return '护师'
  }
}
</script>

<style scoped>
#crtRoom > div {
  height: 36px;
  line-height: 36px;
}
</style>
