<template>
  <div style="width: 100%; height: 100%">
    <div class="course-viewer-content" v-if="isLiveEnd && !hasRecord">
      <div class="empty">{{ $t('viewerLive.liveEnd') }}</div>
    </div>
    <iframe
      :src="iframeUrl"
      frameborder="0"
      width="100%"
      height="100%"
      allow="autoplay;geolocation;microphone;camera;midi;encrypted-media;"
      v-else
    ></iframe>
  </div>
</template>

<script>
// 章节视频
export default {
  name: 'ChapterLive',
  props: {
    // 当前选中的
    chapter: {
      type: Object,
      default() {
        return {}
      }
    },
    // 课程详情接口返回的数据
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    user() {
      return window.G.UserInfo ? window.G.UserInfo.student_info : {}
    },
    nickName() {
      return this.user.personal_name || '匿名'
    },
    live() {
      const live = this.chapter.live || {}
      live.live_status = parseInt(live.live_status)
      return live
    },
    // 是否直播结束
    isLiveEnd() {
      return [3, 5].includes(this.live.live_status)
    },
    // 是否有回放
    hasRecord() {
      // enable_record 0:不启用回放 1:开启回放
      return this.live.enable_record === 1 && this.live.record_url
    },
    iframeUrl() {
      if (this.live.type === 5) {
        return this.ccUrl
      }
      if (this.live.type === 8) {
        return this.zoomUrl
      }
    },
    // cc直播
    ccUrl() {
      const live = this.live
      if (this.isLiveEnd && this.hasRecord) {
        // 查看回放
        return live.record_url.replace(/^http:|^https:/, '')
      } else {
        // 直播
        live.user_name = live.user_name || this.nickName
        return `https://view.csslcloud.net/api/view/index?roomid=${live.room_id}&userid=${live.account_id}&autoLogin=true&viewername=${live.user_name}&viewertoken=${live.play_pass}`
      }
    },
    // zoom直播
    zoomUrl() {
      return this.live.record_url || this.live.join_url
    }
  }
}
</script>

<style scoped>
.empty {
  padding: 100px;
  font-size: 30px;
  text-align: center;
}
</style>
