<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;
    console.log(process.env.API_SIG);
    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);
      console.log(thisVue.roomStatusList);
      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(() => {
          console.log("linke success");
          thatVue.connection.invoke("RegistErp", "IMERP");
        })
        .catch(e => {
          console.log(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>
