<template>
  <div id="roomScreen" :style="windowSize">
    <el-container>
      <el-main>
        <my-clock size="small"></my-clock>
        <el-row :gutter="5" class="room-name">
          <el-col :span="11" class="text-right">诊室{{ room.code }}</el-col>
          <el-col :span="2" class="text-center">
            <el-divider direction="vertical"></el-divider>
          </el-col>
          <el-col :span="11" class="text-left">{{ room.name }}</el-col>
        </el-row>
        <div :style="mainInfoRow">
          <div :style="doctorCard" id="doctorCard">
            <el-card :style="doctorCard">
              <div style="display: flex">
                <div :style="avatarStyle">
                  <img :style="avatarStyle" :src="doctorPortraitUrl" />
                </div>
                <div>
                  <p class="doctor-title">医师</p>
                  <p class="doctor-content">
                    {{ doctor.name }}
                  </p>
                  <p class="doctor-title">职称</p>
                  <p class="doctor-content">
                    {{ doctor.titleName }}
                  </p>
                </div>
              </div>
              <p class="doctor-title">专长</p>
              <p class="doctor-content">
                {{ doctor.specialty }}
              </p>
            </el-card>
          </div>
          <div :style="doctorCard">
            <div :style="nowJzBox" id="nowJzBox">
              <el-card :style="nowJzBox">
                <template #header> ● 正在就诊 </template>
                <div class="now-jz-content">
                  <el-tag type="success" effect="dark" style="height: 36px; line-height: 36px">{{ nowJz.no }} - {{ nowJz.name }}</el-tag>
                </div>
              </el-card>
            </div>
            <div style="height: 10px"></div>
            <div :style="nextJzBox" id="nextJzBox">
              <el-card :style="nextJzBox">
                <template #header> ● 候诊列表 </template>
                <div ref="myScrollRef" id="myScroll" :style="scrollStyle">
                  <div v-for="(next, index) in nextJzList" :key="index">{{ next.fzNo }} - {{ next.name }}</div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
        <div class="video-row">
          <video id="video" controls autoplay muted></video>
        </div>
        <div class="bottom-row">
          {{ occupyMsg }}
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import MyClock from '@/components/MyClock.vue'
import { onMounted } from 'vue'
import { getNextJzList, getRoomNoAndDept, getVideoList, getDoctorInfo, notifyComplete } from '@/api/triage/triage'
import { initWebSocket, setCallback } from '@/utils/websocket'
import $ from 'jquery'
import Cookies from 'js-cookie'
export default {
  components: {
    MyClock,
  },
  setup() {
    const windowSize = getWindowSize()
    const mainInfoRow = {
      display: 'flex',
      width: windowSize.w - 20 + 'px',
      height: windowSize.h / 2 + 'px',
      padding: '15px 0',
    }
    const doctorCard = {
      width: windowSize.w / 2 + 'px',
      height: mainInfoRow.height,
    }
    const avatarStyle = {
      width: windowSize.w / 5 + 'px',
    }

    const nowJzBox = {
      width: windowSize.w / 2 - 5 + 'px',
      height: windowSize.h / 7 + 'px',
    }

    const nextJzBox = {
      width: nowJzBox.width,
      height: windowSize.h / 2 - windowSize.h / 7 - 10 + 'px',
    }

    const scrollStyle = {
      width: nextJzBox.width,
      height: windowSize.h / 2 - windowSize.h / 7 - 70 + 'px',
      overflowY: 'scroll',
    }

    const doctorPortraitUrl = ref(null)
    const roomCode = ref('')
    const room = ref({})
    const doctor = ref({})
    const nowJz = ref({})
    const nextJz = ref({})
    const nextJzList = ref([])
    const occupyMsg = ref('-')
    const offset = ref(600)
    const duration = ref(5000)

    const fetchDoctorInfo = () => {
      getDoctorInfo(roomCode.value)
        .then((res) => {
          doctor.value = res || {}
          doctorPortraitUrl.value = 'data:image/png;base64,' + doctor.value.portrait
        })
        .catch(() => {
          doctor.value = {}
        })
      getRoomNoAndDept(roomCode.value)
        .then((res) => {
          room.value = res || {}
        })
        .catch(() => {
          room.value = {}
        })
    }

    const myScrollRef = ref(null)
    const scrollPage = () => {
      const target = $('#myScroll')
      target.animate(
        {
          scrollTop: offset.value,
        },
        duration.value,
        null,
        () => {
          target.animate(
            {
              scrollTop: 0,
            },
            0,
            null,
            scrollPage()
          )
        }
      )
    }

    const setJzList = (data) => {
      nextJzList.value = data
      const size = nextJzList.value.length
      if (size > 6) {
        offset.value = 32 * (size - 6)
        duration.value = 2000 * (size - 6)
        scrollPage()
      }
    }

    const updateNowJzAndSoOn = (param) => {
      nowJz.value = { no: param.fzNo, name: param.name }
      getNextJzList(param).then((res) => {
        setJzList(res)
      })
    }

    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' // 生产
        playCount.value = 0
        audioPlay()
        occupyMsg.value = '请' + data.fzNo + '号 ' + data.name + ' 到' + data.deptName + data.roomNo + '号诊室就诊'
        setTimeout(() => {
          occupyMsg.value = ''
        }, 30 * 1000)
        updateNowJzAndSoOn(data)
        notifyComplete(data.serialNo).then(() => {})
      } else if (data.action === 2) {
        updateNowJzAndSoOn(data)
      } else if (data.action === 3) {
        location.reload()
      }
    }

    const getQueryVariable = (variable) => {
      let query = window.location.search.substring(1)
      let vars = query.split('&')
      for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split('=')
        if (pair[0] === variable) {
          return pair[1]
        }
      }
      return false
    }

    onMounted(() => {
      roomCode.value = getQueryVariable('roomCode')
      const sid = roomCode.value + '-triageRoomScreen'
      Cookies.set('room-screen-sid', sid)
      initWebSocket(sid)
      setCallback(socketCallback)
      fetchDoctorInfo()
      getVideoList().then((res) => {
        const videoList = res
        const video = document.getElementById('video')
        let vLen = videoList.length
        let curr = 0
        video.onended = () => {
          videoPlay()
        }
        videoPlay()
        function videoPlay() {
          for (let i = 0; i < vLen; i++) {
            let url = videoList[i]
            if (i === curr) {
              video.src = url
            }
          }
          curr++
          if (curr >= vLen) {
            curr = 0
          }
        }
      })

      getNextJzList({ roomCode: roomCode.value }).then((res) => {
        setJzList(res)
      })
    })

    return {
      room,
      doctor,
      nowJz,
      nextJz,
      nextJzList,
      occupyMsg,
      windowSize,
      mainInfoRow,
      doctorCard,
      avatarStyle,
      nowJzBox,
      nextJzBox,
      scrollStyle,
      myScrollRef,
      doctorPortraitUrl,
    }
  },
}

function getWindowSize() {
  const w = window.innerWidth
  const h = window.innerHeight
  const width = w + 'px'
  const height = h + 'px'
  return { w, h, width, height }
}
</script>

<style scoped>
#roomScreen {
  background: url('@/assets/room-screen.jpg');
}
:deep(.el-card__body) {
  padding: 15px 5px !important;
}
:deep(#nextJzBox .el-card, #nowJzBox .el-card, #doctorCard .el-card, ) {
  height: 100% !important;
}
.doctor-title {
  width: 100%;
  padding: 0 10px;
  background: linear-gradient(to top left, #66b1ff, #8abafb, #0183ff);
  font-size: 16px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
}
.doctor-content {
  width: 100%;
  font-size: 15px;
  padding: 0 5px;
  font-weight: bold;
}
:deep(#nowJzBox .el-card__header) {
  padding: 5px 10px !important;
  font-size: 15px;
  font-weight: bold;
  color: #67c23a;
}

:deep(#nextJzBox .el-card__header) {
  padding: 5px 10px !important;
  font-size: 15px;
  font-weight: bold;
  color: #409eff;
}

.now-jz-content * {
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.text-left {
  text-align: left;
  text-align-last: left;
}
.text-right {
  text-align: right;
  text-align-last: right;
}
.room-name {
  height: 40px;
  line-height: 40px;
}
.room-name * {
  font-size: 30px !important;
  font-weight: bold;
}

#myScroll > div {
  padding: 0 20px;
  height: 32px;
  line-height: 32px;
  font-size: 20px;
  color: #409eff;
  font-weight: bold;
  word-break: keep-all;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.video-row {
  height: 25vh;
  background-color: gray;
}
video {
  width: 100%;
  height: 100%;
}
.bottom-row {
  height: 7vh;
  line-height: 7vh;
  text-align: center;
  text-align-last: center;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(to right bottom, #66b1ff, #bdd8fe, #0183ff);
  color: #333333;
  border: 5px solid #ddd;
  border-image: linear-gradient(to right bottom, #66b1ff, #bdd8fe, #0183ff) 30 30;
}
img {
  border-radius: 50%;
}
</style>
