<!--课程列表最新直播-->
<template>
  <div class="course-latest-live" v-if="data.live">
    <div class="txt">{{ $t('pages.learn.course.title2') }}</div>
    <div class="txt">
      <!-- 直播中 -->
      <template v-if="data.live.live_status === 2">
        您的直播课程《{{ data.course_name }}》正在直播中，邀您进入直播课堂
      </template>
      <template v-else>
        {{ $t('pages.learn.course.msg') }} 《{{ data.course_name }}》 {{ $t('pages.learn.course.msg1') }}
        {{ data.live.start_time }}
        {{ $t('pages.learn.course.msg2') }}
      </template>
    </div>
    <el-button class="in-btn" type="primary" size="small" round @click="handleClick">
      {{ $t('pages.learn.course.Enterlive') }}
    </el-button>
  </div>
</template>

<script>
import cAction from '@action'
export default {
  data() {
    return {
      data: {},
      timer: null
    }
  },
  methods: {
    // 进入直播
    handleClick() {
      // 5:CC直播; 6:腾讯会议; 8:Zoom
      const live = this.data.live
      if (live.type === 5) {
        this.$router.push({
          name: 'viewerCourseChapter',
          params: { sid: this.data.semester_id, cid: this.data.course_id, id: this.data.chapter_id }
        })
      } else {
        window.open(live.record_url || live.join_url)
      }
    },
    // 获取最新直播
    getLatestLive() {
      cAction.Player.getNewLiveMsg().then(res => {
        this.data = res.data
      })
    },
    // 定时刷新直播列表
    setTimer() {
      this.timer = setInterval(this.getLatestLive, 10000)
    },
    // 清除定时刷新
    clearTimer() {
      this.timer && setInterval(this.timer)
    }
  },
  mounted() {
    this.getLatestLive()
    // 定时刷新直播列表
    // this.setTimer()
  },
  destroyed() {
    this.clearTimer()
  }
}
</script>

<style lang="scss">
.course-latest-live {
  position: relative;
  padding: 40px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  margin: 0.3rem;
  background-color: #fff;
  .txt {
    padding: 5px 100px 5px 0;
    font-size: 16px;
    font-weight: bold;
  }
  .in-btn {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #d21f28;
    border-color: #d21f28;
  }
}
</style>
