<template>
  <div class="living-room">
    <Header></Header>

    <div class="container">
      <div class="clearfix top-line">
        <el-button
          class="float-right"
          type="primary"
          size="small"
          round
          @click="$router.back(-1)"
          >返回</el-button
        >
      </div>
    </div>
    <!-- pc端 -->
    <div class="plv-watch-pc">
      <div class="plv-watch-pc__top" id="plv-pc-top">
        <div class="plv-watch-pc__screen plv-watch-pc__screen-main">
          <div class="plv-watch-pc__screen__height">
            <div class="plv-watch-pc__screen__inner" id="plv-pc-main"></div>
          </div>
        </div>

        <div class="plv-watch-pc__screen plv-watch-pc__screen-sub">
          <div class="plv-watch-pc__screen__height">
            <div class="plv-watch-pc__screen__inner" id="plv-pc-side"></div>
          </div>
        </div>

        <div class="plv-watch-pc__side">
          <div class="plv-watch-pc__chat plv-skin--dark" id="plv-pc-chat"></div>
        </div>
      </div>

      <div id="plv-pc-channel-info" class="plv-watch-pc__info">
        <img
          class="plv-watch-pc__info__logo"
          src="https://live.polyv.cn/assets/wimages/pc_images/logo.png"
        />
        <div class="plv-watch-pc__info__desc">
          <p class="plv-watch-pc__info__desc__name"></p>
          <span class="plv-watch-pc__info__desc__publisher-ico"></span>
          <span class="plv-watch-pc__info__desc__publisher"></span>
          <span class="plv-watch-pc__info__desc__view"></span>
        </div>
      </div>
    </div>

    <!-- pc菜单栏 -->
    <!-- <div class="plv-pc-menu">
        <div class="plv-pc-menu__container">
          <ul id="plv-menu-tab" class="plv-pc-menu__tab"></ul>
          <div id="plv-menu-content" class="plv-pc-menu__content"></div>
        </div>
      </div> -->
    <!-- </div> -->
    <!-- <div class="container">
      <div ref="living" id="living" class="living">
        <div
          :style="
            changeState
              ? { left: 0, top: 0, width: 600 + 'px', height: 600 + 'px' }
              : {}
          "
          id="ppt"
          ref="ppt"
          class="ppt"
        ></div>
        <div
          :style="
            changeState
              ? {
                  left: 600 + 'px',
                  top: 0,
                  width: 300 + 'px',
                  height: 200 + 'px',
                }
              : {}
          "
          id="player"
          ref="player"
          class="player"
        ></div>
        <div ref="wrap" id="wrap"></div>
        <div class="controller" ref="controller"></div>
      </div>
    </div> -->
    <Footer></Footer>

    <el-dialog
      width="462px"
      class="sign-modal"
      :visible.sync="signModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="sign-modal__content">
        <img class="img" src="@/assets/sign.png" alt="" />
        <div class="box">
          <div class="title">直播已经开始啦，赶紧签到进入直播吧！</div>
          <el-button type="primary" class="btn" @click="close"
            >立即签到</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      width="400px"
      class="sign-success"
      :visible.sync="signSuccess"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="sign-success__content">
        <img class="img" src="@/assets/appoinsuccess.png" alt="" />
        <div class="title">签到成功！</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import { mapGetters, mapMutations } from "vuex";
import "@/assets/jquery.min.js";
import "@/assets/css/chatroom.css";
import "@/assets/css/pc.css";
import "@/assets/css/tool.css";
import "@/assets/css/public.css";

export default {
  components: {
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {
      signSuccess: false,
      signModal: false,
      playerJs: "https://player.polyv.net/livesdk/polyv-live.min.js",
      chatroomJs: "https://player.polyv.net/jssdk/polyv-chatroom.min.js",
      uidzb: "egsxlptzdq",
      channelId: "",
      appId: "",
      sign: "",
      timestamp: "",
      timer: null,
      mediaChannelKey: "",
      changeState: false,
      liveSdk: null,
      token: "",
      plv: {
        liveSdk: null, // 保存直播 JS-SDK 实例
        socket: null, // 保存 WebSocket 实例
        scene: "", // 场景
        mainPosition: "player", // 用于记录当前主屏幕是文档还是播放器
      },
      sectionId: 0,
      goodsId: 0,
      courseId: 0,
      orderGoodsId: 0,
      gradeId: 0,
      chapterId: 0,
      moduleId: 0,
      playTime: 0,
      duraing: 0,
      timer: null,
      liveLast: null,
      isFirst: true,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.sectionId = this.$route.query.sectionId;
    this.goodsId = this.$route.query.goodsId;
    this.courseId = this.$route.query.courseId;
    this.orderGoodsId = this.$route.query.orderGoodsId;
    this.gradeId = +this.$route.query.gradeId;
    this.chapterId = this.$route.query.chapterId;
    this.moduleId = this.$route.query.moduleId;
    this.channelId = this.$route.params.channelId;
    this.playVideo();
    this.studyRecordGetLastLive();
  },
  beforeDestroy() {
    this.plv.liveSdk.destroy();
    clearInterval(this.timer);
  },
  methods: {
    ...mapMutations(["getCartCount"]),
    close() {
      this.signModal = false;
      this.signSuccess = true;
      setTimeout(() => {
        this.signSuccess = false;
      }, 1000);
    },
    polyvLivesign() {
      console.log(this.channelId);
      this.$request
        .polyvLivesign({
          channelId: this.channelId,
        })
        .then((res) => {
          this.sign = res.data.sign;
          this.token = res.data.token;
          this.mediaChannelKey = res.data.mediaChannelKey;
          this.timestamp = res.data.timestamp;
          this.appId = res.data.appId;

          this.loadPlayerzb();
        });
    },

    async playVideo() {
      // await this.jquery();
      await this.loadPlayerScriptzb();
      await this.loadChatroomScriptzb();
      console.log(this.userInfo);
      this.polyvLivesign();
    },

    /**
     * 获取上次观看的直播
     */
    studyRecordGetLastLive() {
      if (!this.gradeId && this.sectionId) {
        this.$request
          .studyRecordGetLastLive({
            orderGoodsId: this.orderGoodsId,
            courseId: this.courseId,
          })
          .then((res) => {
            if (!res.data) {
              this.signModal = true;
            }
          });
      }
    },

    jquery() {
      return new Promise((resolve) => {
        if (!window.polyvLivePlayer) {
          const myScript = document.createElement("script");
          myScript.setAttribute("src", "../../assets/jquery.min.js");
          document.body.appendChild(myScript);
          myScript.onload = resolve;
        } else {
          resolve();
        }
      });
    },

    loadPlayerzb() {
      var els = {
        playerEl: "", // 播放器容器选择器, 移动端和PC的el参数设置不
        pptEl: "", // 文档容器选择器, 普通直播不需要设置pptEl
        controllerEl: "", // 三分屏控制栏的容器选择器， pc三分屏的场景才需要设置controllerEl,
        chatContainer: "", // 聊天室的容器选择器
        pptEl: "#tab-ppt",
      };

      els.chatContainer = "#plv-pc-chat"; // DOM选择器，HTML元素，用于渲染聊天室
      els.pptEl = "#plv-pc-side"; // ppt文档元素选择器，非云课堂可不填
      els.playerEl = "#plv-pc-main"; // 讲师区域元素
      els.controllerEl = $("#plv-pc-top")[0]; // 控制栏父元素
      var chatroom = new PolyvChatRoom({
        //实例聊天室SDK
        roomId: this.channelId,
        userId: this.userInfo.userAccount,
        nick: this.userInfo.realname,
        accountId: this.userInfo.userAccount,
        pic:
          this.$tools.splitImgHost(this.userInfo.avatar, true) ||
          "http://livestatic.videocc.net/assets/wimages/missing_face.png",
        container: els.chatContainer,
        userType: "slice",
        version: "2.0",
        showUserList: false,
        width: "100%",
        height: "100%",
        token: this.token,
        mediaChannelKey: this.mediaChannelKey,
        roomMessage: (data) => {
          // data为聊天室socket消息，当有聊天室消息时会触发此方法
          console.log(data);
          if (this.plv.liveSdk && this.plv.liveSdk.player) {
            var event = data.EVENT;
            if (event === "sendMessage" || event === "SPEAK") {
              this.plv.liveSdk.player.sendBarrage(data.content);
            }
          }
        },
      });

      this.plv.socket = chatroom.chat.socket;

      this.plv.liveSdk = new PolyvLiveSdk({
        //实例直播SDK
        channelId: this.channelId,
        appId: this.appId,
        sign: this.sign,
        timestamp: this.timestamp,
        socket: chatroom.chat.socket, //传入聊天室的socket
        user: {
          userId: this.userInfo.userAccount,
          userName: this.userInfo.realname,
          pic:
            this.$tools.splitImgHost(this.userInfo.avatar, true) ||
            "http://livestatic.videocc.net/assets/wimages/missing_face.png",
        },
      });

      this.plv.liveSdk.on(
        PolyvLiveSdk.EVENTS.STREAM_UPDATE,
        (event, status) => {
          if (status == "end") {
            clearInterval(this.timer);
            let duraing = this.playTime - this.duraing;
            this.duraing = 0;
            this.studyRecord(1, duraing);
          }
        }
      ); // 监听流状态变化

      // 第四步：监听频道信息读取完成事件，初始化播放器
      this.plv.liveSdk.on(
        PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT,
        (event, data) => {
          this.plv.liveSdk.setupPlayer({
            el: els.playerEl,
            pptEl: els.pptEl,
            pptPlaceholder: true,
            switchPlayer: true,
            controllerPosition: "ppt",
            fixedController: true,
            controllerEl: els.controllerEl,
            pptNavBottom: "80px",
            barrage: true, // 是否开启弹幕
            defaultBarrageStatus: true,
            autoplay: true,
          });

          this.plv.liveSdk.player.on(
            "fullscreenChange",
            this.handleFullscreenChange
          );
          this.plv.liveSdk.player.on("switchPlayer", this.handleSwitchPlayer); // 点击控制栏切换按钮触发
          this.plv.liveSdk.player.on("switchMainScreen", this.switchPlayer);

          // this.plv.liveSdk.player.on("switchPlayer", () => {
          //   var switchPosition = plv.mainPosition === 'ppt' ? 'player' : 'ppt';
          //   switchPlayer(switchPosition);
          // });

          // this.plv.liveSdk.player.on("switchMainScreen", (main) => {
          //   console.log("切换主讲位置，当前主屏为", main); // 'player'|'ppt'
          // });

          // this.plv.liveSdk.player.on("ended", () => {
          //   this.duraing += this.playTime;
          //   clearInterval(this.timer);
          //   this.studyRecord(1);
          // });

          this.plv.liveSdk.player.on("pause", (state) => {
            let duraing = this.playTime - this.duraing;
            this.duraing = 0;
            this.studyRecord(0, duraing);
            clearInterval(this.timer);
          });

          this.plv.liveSdk.player.on("loadedmetadata", (state) => {
            if (this.isFirst) {
              this.studyRecord(0);
              this.isFirst = false;
            }

            clearInterval(this.timer);
            this.timer = setInterval(() => {
              this.studyRecord(0, 20);
              this.duraing += 20;
            }, 20000);
          });

          this.plv.liveSdk.player.on("timeupdate", (time) => {
            this.playTime = time;
          });
        }
      );
    },

    studyRecord(status, duraing) {
      if (!this.sectionId) {
        return;
      }
      let self = this;
      this.$request.studyRecord({
        sectionId: parseInt(this.sectionId),
        goodsId: parseInt(self.goodsId),
        courseId: parseInt(self.courseId),
        orderGoodsId: this.orderGoodsId,
        studyDuration: parseInt(duraing) || 0,
        gradeId: parseInt(self.gradeId),
        chapterId: parseInt(self.chapterId),
        moduleId: parseInt(self.moduleId),
        videoCurrentTime: 2,
        status: status,
      });
    },
    /**
     * @param {String} 直播js加载
     */
    loadChatroomScriptzb() {
      return new Promise((resolve) => {
        if (!window.polyvLivePlayer) {
          const myScript = document.createElement("script");
          myScript.setAttribute("src", this.chatroomJs);
          document.body.appendChild(myScript);
          myScript.onload = resolve;
        } else {
          resolve();
        }
      });
    },
    /**
     * @param {String} 聊天室js加载
     */
    loadPlayerScriptzb() {
      return new Promise((resolve) => {
        if (!window.polyvLivePlayer) {
          const myScript = document.createElement("script");
          myScript.setAttribute("src", this.playerJs);
          document.body.appendChild(myScript);
          myScript.onload = resolve;
        } else {
          resolve();
        }
      });
    },

    handleSwitchPlayer() {
      var switchPosition = this.plv.mainPosition === "ppt" ? "player" : "ppt";
      this.switchPlayer(switchPosition);
    },

    // 控制栏切换按钮的点击处理函数，仅适用PC端
    handleSwitchPlayer() {
      var switchPosition = this.plv.mainPosition === "ppt" ? "player" : "ppt";
      this.switchPlayer(switchPosition);
    },

    // 点击到文档tab时调用播放器的resize方法，原因：
    // ppt父容器样式改变会导致ppt显示异常，需要调用resize刷新ppt尺寸，该函数用于移动端三分屏场景
    handlePptTabClick() {
      $("[data-type=ppt]").click(function () {
        setTimeout(function () {
          this.plv.liveSdk.player.resize();
        }, 0);
      });
    },

    // 全屏/退出全屏回调
    handleFullscreenChange(isFullScreen, fullScreenElement) {
      if (isFullScreen) {
        $(fullScreenElement).addClass("plv-watch-pc__top--fullscreen");
      } else {
        $(fullScreenElement).removeClass("plv-watch-pc__top--fullscreen");
      }
    },

    // 切换主副屏，如需兼容ie，建议通过css的方式去切换位置，dom操作可能导致播放器异常
    switchPlayer(nextMainPosition) {
      var pcScreens = $(".plv-watch-pc__screen").removeClass(
        "plv-watch-pc__screen-main plv-watch-pc__screen-sub"
      );

      switch (nextMainPosition) {
        case "player":
          pcScreens.eq(0).addClass("plv-watch-pc__screen-sub");
          pcScreens.eq(1).addClass("plv-watch-pc__screen-main");
          break;

        case "ppt":
          pcScreens.eq(0).addClass("plv-watch-pc__screen-main");
          pcScreens.eq(1).addClass("plv-watch-pc__screen-sub");
          break;
      }

      this.plv.mainPosition = nextMainPosition;
      this.plv.liveSdk.player.resize(); // ppt容器宽高修改，调用resize刷新ppt尺寸
      this.plv.liveSdk.player.resizeBarrage(); // 刷新弹幕显示区域尺寸
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.living-room {
  background: #eee;
  .top-line {
    margin: 10px 0;
    .float-right {
      float: right;
      width: 100px;
    }
  }

  .living {
    position: relative;
    width: 900px;
    height: 600px;
    margin: 0 auto;

    #wrap {
      position: absolute;
      width: 300px;
      height: 400px;
      left: 600px;
      top: 200px;

      /deep/ .polyv-cr-head {
        background: #ccc;
      }
    }

    #ppt {
      position: absolute;
      left: 600px;
      top: 0;
      width: 300px;
      height: 200px;
    }

    #player {
      position: absolute;
      width: 600px;
      height: 600px;
      left: 0;
      top: 0;
    }

    .controller {
      position: absolute;
      width: 600px;
      height: 48px;
      left: 0;
      bottom: 0;
    }
  }

  .sign-modal {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__content {
      .img {
        width: 462px;
        display: block;
      }

      .box {
        padding: 24px 0;
        background: #ffffff;

        .title {
          font-size: 16px;
          font-weight: bold;
          color: #333333;
          line-height: 24px;
          text-align: center;
        }

        .btn {
          display: block;
          margin: 40px auto 0;
          width: 200px;
          height: 40px;
          padding: 0;
          text-align: center;
          line-height: 40px;
          border-radius: 8px;
        }
      }
    }
  }

  .sign-success {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__content {
      width: 400px;
      height: 200px;
      position: relative;
      background: #ffffff;
      border-radius: 8px;
      .img {
        position: absolute;
        left: 50%;
        top: -54px;
        width: 196px;
        margin-left: -98px;
        display: block;
      }
      .title {
        padding-top: 120px;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        line-height: 24px;
        text-align: center;
      }
    }
  }
}
</style>
