<template>
  <LiveLayout ref="liveLayout" :liveInfo="room" class="live-student" @quitLive="quitLive">
    <template v-slot:liveBodyLeftMenu>

        <div class="live-body-left">
          <div class="left-menu-item" @click="toAnswering">
            <i class="i-x-zxks-canjiakaoshi"></i>
            答题
          </div>
        </div>
    </template>
    <template v-slot:playingBox>
      <div class="live-playing" v-show="isPlaying">
        <video
          controls
          muted
          autoplay
          class="video-play"
          ref="videoPlayer"
        ></video>
      </div>
      <div class="live-not-start" v-show="!isPlaying">
        直播{{ liveInfo?.status == 1 ? "已暂停" : "未开始" }}，稍等一下吧！
      </div>
    </template>
  </LiveLayout>
</template>

<script>
import LiveLayout from '../components/live-layout.vue'
import { getLiveWatchInfoAPI } from '@/api/online-teaching/live-student'
import { SrsRtcPlayerAsync } from '@/views/assessment-evaluation/utils/gy.srs.sdk'
import chatListmixins from '../live-play/mixins/live'
export default {
  components: {
    LiveLayout
  },
  data () {
    return {
      liveInfo: null,
      isPlaying: false,
      room: null
    }
  },
  mixins: [chatListmixins],
  async created () {},
  mounted () {
    // this.$refs.videoPlayer
  },
  async activated () {
    if (this.liveInfo) {
      this.liveInfo = null
    }
    this.isPlaying = false
    await this.getLiveInfo(this.$route.query.id).then(() => {
      this.$refs.videoPlayer.onloadeddata = () => {
        this.isPlaying = true
        this.$refs.liveLayout.warmAudio?.pause()
      }
      this.playVideo()
      document.addEventListener('click', this.cancelMuted)
    })
  },
  methods: {
    async getLiveInfo (id) {
      const res = await getLiveWatchInfoAPI(id)
      this.liveInfo = res.data
      this.room = this.liveInfo
    },
    playVideo () {
      if (this.sdk) {
        this.sdk.close()
      }
      this.$refs.videoPlayer.muted = true
      this.sdk = new SrsRtcPlayerAsync()
      this.$refs.videoPlayer.srcObject = this.sdk.stream
      const url = window.GyConfig.webRtcUrl + this.$route.query.id
      this.sdk.play(url).catch((err) => {
        console.info(err)
        this.sdk.close()
      })
    },
    cancelMuted () {
      this.$refs.videoPlayer.muted = false
      this.$refs.videoPlayer.play()
      document.removeEventListener('click', this.cancelMuted)
    },
    quitLive () {
      this.$confirm('即将退出直播, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.room = this.liveInfo
          await this.ws_leave_live_room(() => {
            // this.$router.push('/online-teaching/live-in-class').then(() => {
            this.$router.push('/online-course/live-in-class').then(() => {
              location.reload()
            })
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
    toAnswering () {
      // window.open('/online-teaching/live-watch/answering')
      if (this.liveInfo.question && this.liveInfo.question.length <= 0) {
        this.$message.error('暂无试题')
        return
      }
      const answerUrl = this.$router.resolve({
        // path: '/online-teaching/live-in-class/live-watch/answering',
        path: '/online-course/live-in-class/live-watch/answering',
        query: { liveId: this.liveInfo.id }
      })
      console.log(answerUrl)
      window.open(answerUrl.href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.live-student {
  height: 100%;
  width: 100%;
}
</style>
<style>
.v-card:has(.live-student) {
  padding: 0 !important;
}
</style>
