<template>
  <div class="page-body room-list" v-loading="loading">
    <div v-for="(item, i) in classdata" :key="item.Key">
      <template v-if="
          item.SchoolName.indexOf('武侯') == -1 &&
            item.SchoolName.indexOf('眉山') == -1
        ">
        <div class="row items-center">
          <div class="text-h6 col">{{ item.SchoolName }}</div>
          <div v-if="i == 0" class="f12">只看在线：</div>
          <div v-if="i == 0">
            <el-switch v-model="queryStatus" @change="changeViewStatusHandler"></el-switch>
          </div>
        </div>
        <div class="q-mt-md q-mb-lg row">
          <template v-for="(x, xi) in item.RoomList">
            <div class="class-room" style="width:calc(20% - 10px);margin-right:10px;margin-bottom:10px;"
              v-if="queryStatus == 0 || (queryStatus == 1 && x.StatusInfo)" :key="xi">
              <div class="img-box">
                <q-img :src="x.RoomPicList[0]" height="100%" fit="fill" spinner-color="primary" spinner-size="30px"
                  v-if="x.RoomPicList && x.RoomPicList.length > 0" />
                <q-img src="../../assets/images/classroom/bg-img.jpg" fit="fill" height="100%" spinner-color="primary"
                  spinner-size="30px" v-else />
              </div>
              <div class="xuhua"></div>
              <div class="q-pa-md">
                <div class="row items-end">
                  <div style="font-size:18px;" class="col">
                    {{ x.RoomName }}
                  </div>
                  <div class="f12 q-ml-md text-grey-5">
                    <div class="text-right">时段</div>
                    <div class="text-dark">
                      {{ x.StartTime }} - {{ x.EndTime }}
                    </div>
                  </div>
                </div>
                <div class="q-mt-lg f12 row items-center">
                  <div class="text-grey-6 f12 col">
                    <span class="q-px-xs text-white q-mr-md inline-block text-weight-bold"
                      style="border-radius:4px;font-size:15;" :class="{
                        'bg-grey-3': !x.StatusInfo,
                        'bg-negative': x.StatusInfo
                      }">
                      LIVE
                    </span>
                    <span class="text-grey-6" v-if="!x.StatusInfo">设备离线</span>
                    <span class="text-grey-6" v-else-if="x.StatusInfo.UnLockUserName == 'lock'">设备在线，未解锁</span>
                    <span class="text-grey-6" v-else>{{ x.StatusInfo.UnLockUserName }}正在使用</span>
                  </div>
                  <div v-if="x.StatusInfo">
                    <q-btn color="primary" dense class="f12" flat label="链接" @click="openVideo(x)" />
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>
    <q-dialog v-model="showVideo" @hide="clearVideo">
      <q-card class="my-card"
        style="width:64vw !important;max-width:64vw !important;max-height:32vw !important;height:32vw !important;" flat>
        <div id="player-con" style="width:100%;height:100%;overflow:hidden;"></div>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
  import {
    getUseClassRoomList
  } from "../../api/classroom/index";
  import * as signalR from "@aspnet/signalr";
  export default {
    meta: {
      title: "教室状态"
    },
    data() {
      return {
        classdata: [],
        loading: true,
        showVideo: false,
        videoObj: null,
        currentRoom: null,
        queryStatus: 0,
        player: null,
        connection: "", //signalr连接
        roomStatusList: [] //返回消息
      };
    },

    created() {
      let thisVue = this;
      this.connection = new signalR.HubConnectionBuilder()
        .withUrl(process.env.API_SIG, {
          skipNegotiation: true,
          transport: signalR.HttpTransportType.WebSockets
        })
        .configureLogging(signalR.LogLevel.Information)
        .build();
      this.connection.on("RoomStatusChange", function (message) {
        thisVue.roomStatusList = JSON.parse(message);
        thisVue.changeStatus();
      });
      this.connection.onclose(async () => {
        setTimeout(() => {
          thisVue.linkHub();
        }, 3000);
      });

      this.linkHub();
    },
    mounted() {
      this.getList();
      //this.openVideo();
    },
    methods: {
      changeViewStatusHandler() {},
      clearVideo() {
        this.player.stop();
        this.player.dispose();
        this.showVideo = false;
      },
      openVideo(item) {
        this.showVideo = true;
        this.currentRoom = item;
        let url = `http://47.96.12.235:5000/live/${item.RoomId}.m3u8`;
        this.$nextTick(() => {
          this.initPlayer(url);
        });
      },
      initPlayer(url) {
        this.player = new Aliplayer({
            id: "player-con",
            source: url,
            width: "100%",
            height: "100%",
            autoplay: true,
            isLive: true,
            rePlay: false,
            playsinline: true,
            preload: true,
            controlBarVisibility: "hover",
            useH5Prism: true
          },
          function (player) {}
        );
      },
      changeStatus() {
        this.initStatus();
        if (this.roomStatusList && this.roomStatusList.length > 0) {
          this.roomStatusList.forEach(x => {
            this.classdata.forEach(y => {
              y.RoomList.forEach(z => {
                if (z.RoomId == x.RoomId) {
                  z.StatusInfo = x;
                }
              });
            });
          });
        }
        this.$forceUpdate();
      },
      initStatus() {
        this.classdata.forEach(y => {
          y.RoomList.forEach(z => {
            this.classdata.forEach(y => {
              y.RoomList.forEach(z => {
                z.StatusInfo = null;
              });
            });
          });
        });
        this.$forceUpdate();
      },
      linkHub() {
        let thatVue = this;
        this.connection
          .start()
          .then(() => {
            thatVue.connection.invoke("RegistErp", "IMERP");
          })
          .catch(e => {
            setTimeout(() => {
              thatVue.linkHub();
            }, 3000);
          });
      },
      goUrl(x, y) {
        this.$router.push({
          path: "/classroom/useRecord",
          query: {
            key: x.Key,
            roomId: y.RoomId
          }
        });
      },
      getList() {
        getUseClassRoomList({})
          .then(res => {
            this.loading = false;
            if (res.Code === 1) {
              res.Data.forEach(e => {
                e.RoomList.forEach(_e => {
                  _e.slide = 0;
                });
              });
              this.classdata = res.Data;
              this.changeStatus();
            }
          })
          .catch(() => {
            this.loading = false;
          });
      }
    }
  };
</script>
<style>
  .class-room {
    border: 1px solid #f5f5f5;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }

  .class-room .img-box {
    height: 80px;
  }

  .class-room .xuhua {
    position: absolute;
    top: 0;
    height: 80px;
    left: 0;
    right: 0;
    backdrop-filter: blur(4px);
  }

  .class-room:hover .xuhua {
    backdrop-filter: none;
  }

  .no-data {
    height: 75px;
    font-size: 14px;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>