<template>
  <el-container>
    <el-header>
      <my-clock></my-clock>
    </el-header>
    <div style="height: 15px"></div>
    <el-container>
      <el-aside width="30%">
        <el-card v-show="notifyMsg.fzNo">
          <div class="large-notify">
            <div>
              请 <strong>{{ notifyMsg.fzNo }}</strong>
              号
              <strong>{{ notifyMsg.name }}</strong>
              到
            </div>
            <div>
              <strong>{{ notifyMsg.deptName }}-诊室{{ notifyMsg.roomNo }}</strong>
            </div>
            <div>就诊</div>
          </div>
        </el-card>
        <div style="height: 30px"></div>
        <div v-for="(n, index) in notifies" :key="index">
          <el-card>
            <div v-if="n.fzNo" class="mid-notify">
              <el-tag style="height: 42px; line-height: 42px">{{ n.fzNo }}号{{ n.name }}</el-tag>
              <span style="font-size: 25px; color: dodgerblue; margin: 0 5px">→</span>
              <el-tag style="height: 42px; line-height: 42px" type="danger">{{ n.deptName }}诊室 {{ n.roomNo }}</el-tag>
            </div>
          </el-card>
          <div style="height: 10px"></div>
        </div>
      </el-aside>
      <el-main>
        <div style="padding: 0 20px">
          <div v-for="(room, index) in roomList.slice((roomPage - 1) * lineNum, roomPage * lineNum)" :key="index">
            <el-row :gutter="5">
              <el-col :span="6">
                <el-card>
                  <div class="small-notify center-text">
                    <el-tag effect="dark" style="height: 42px; line-height: 42px" type="danger"> {{ room.deptName }} </el-tag>
                    <el-divider></el-divider>
                    <el-tag effect="dark" style="height: 42px; line-height: 42px" type="danger"> 诊室{{ room.roomNo }} </el-tag>
                  </div>
                </el-card>
              </el-col>
              <el-col v-for="(p, index) in room.patients.slice((room.page - 1) * 3, room.page * 3)" :key="index" :span="6">
                <el-card>
                  <div class="small-notify center-text">
                    <el-tag effect="dark" style="height: 42px; line-height: 42px" type="success">{{ p.fzNo }}号</el-tag>
                    <el-tag effect="dark" style="height: 42px; line-height: 42px">{{ p.name }}</el-tag>
                    <el-divider></el-divider>
                    <el-tag effect="dark" style="height: 42px; line-height: 42px" type="danger"> 医师：{{ room.doctorName }} </el-tag>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import store from '@/store'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { initWebSocket, setCallback } from '@/utils/websocket'
import MyClock from '@/components/MyClock.vue'
import { getBigScreenData, notifyComplete } from '@/api/triage/triage'

export default {
  components: {
    MyClock,
  },
  setup() {
    const notifyMsg = ref({})
    const notifies = reactive([])

    const roomList = ref([])
    const roomPage = ref(1)
    const maxRoomPage = ref(1)
    const timer = 1000 * 50000
    const lineNum = 4
    const maxPatientPageSize = ref(1)
    const mInterval = ref(null)

    const fetchScreenData = (needInterval) => {
      getBigScreenData(true).then((res) => {
        roomList.value = res
        roomPage.value = 1
        maxRoomPage.value = Math.ceil(res.length / lineNum)
        getMaxPatientPageSize()
        if (needInterval) {
          mInterval.value = setInterval(() => {
            nextPatientPage()
          }, timer)
        }
      })
    }

    const getMaxPatientPageSize = () => {
      maxPatientPageSize.value = 1
      roomList.value.slice((roomPage.value - 1) * lineNum, roomPage.value * lineNum).forEach((room) => {
        if (room.pageNum > maxPatientPageSize.value) {
          maxPatientPageSize.value = room.pageNum
        }
      })
    }

    const nextPatientPage = () => {
      roomList.value.slice((roomPage.value - 1) * lineNum, roomPage.value * lineNum).forEach((room) => {
        room.page++
        if (room.page > room.pageNum) {
          room.page = 1
          if (room.pageNum === maxPatientPageSize.value) {
            nextRoomPage()
          }
        }
      })
    }

    const nextRoomPage = () => {
      if (roomPage.value <= maxRoomPage.value) {
        roomPage.value++
        if (roomPage.value > maxRoomPage.value) {
          fetchScreenData(false)
        } else {
          getMaxPatientPageSize()
        }
      }
    }

    const audio = new Audio()
    const playCount = ref(0)
    const audioPlay = () => {
      for (let i = 0; i < 2; i++) {
        if (i === playCount.value) {
          audio.play()
        }
      }
      playCount.value++
    }
    audio.onended = () => {
      audioPlay()
    }
    const socketCallback = (data) => {
      if (data.action === 1) {
        // audio.src = 'http://172.16.32.160:8888/voices/' + data.serialNo + '.mp3' // 生产
        audio.src = 'http://172.16.30.26:8888/voices/' + data.serialNo + '.mp3' // 测试
        playCount.value = 0
        audioPlay()
        notifyMsg.value = data
        notifies.push(data)
        if (notifies.length > 3) {
          notifies.splice(0, 1)
        }
        notifyComplete(data.serialNo).then(() => {
          fetchScreenData(false)
        })
      }
    }

    onMounted(() => {
      const sid = store.state.user.sid + '-triageFloorScreen'
      initWebSocket(sid, true)
      setCallback(socketCallback)
      fetchScreenData(true)
    })

    onUnmounted(() => {
      clearInterval(mInterval.value)
    })

    return {
      notifyMsg,
      notifies,
      roomList,
      roomPage,
      lineNum,
    }
  },
}
</script>

<style scoped>
.large-notify * {
  font-size: 55px;
}

.mid-notify * {
  font-size: 30px;
}

.small-notify * {
  font-size: 28px;
}

strong {
  color: #409eff;
}

.center-text {
  width: 100%;
  text-align: center;
}

:deep(.el-divider) {
  background-color: #0a84fd;
}
</style>
