<template>
  <div class="pages">
    <div class="head">
      <img class="logo5" alt="logo" src="@/assets/images/logo-header.png">
      <div class="userinfo">
        <div class="login-out" @click="goOutLogin()">退出</div>
        <div class="name">{{ name }}</div>
      </div>
    </div>

    <div class="hint" v-show="latest && latest.live" @click="opencc(latest)" >
      <div class="left">
        <div class="left-1">直播提醒</div>
        <div class="left-2">《{{latest.course_name}}》将于 {{latest.live && latest.live.start_time.slice(5)}} 开始</div>
      </div>
      <div class="right">进入直播 ></div>
    </div>
    <div class="tips">提示语：已参加的课程请到电脑端学习系统观看回放</div>
    <div class="list-box">
      <div class="curriculum" v-for="(item, index) in obj" v-bind:key="index" >
        <h4 class="curriculum-name">{{item.course_name}}</h4>
        <div class="curriculum-box" @click="opencc(item)" >
          <img  class="curriculum-picture" :src="item.curriculum.curriculum_picture" />
          <div class="curriculum-introduce">
            <div class="title">{{item.curriculum.curriculum_name}}</div>
            <div class="time">{{item.live ? item.live.time : ''}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cAction from '@action'
export default {
  data () {
    return {
      name: (window.G.UserInfo && window.G.UserInfo.student_info && window.G.UserInfo.student_info.personal_name) || '匿名',
      latest: '',
      obj: [],
      loading: null
    }
  },
  metaInfo () {
    return {
      title: '清华大学五道口金融学院',
      meta: [
        // { vmid: 'description', name: 'description', content: this.description }
      ]
    }
  },
  mounted () {
    const _this = this
    this.loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })

    this.dealRender()
    _this.getNewLiveMsg()
    _this.getLiveLis()
    setInterval(function () {
      _this.getNewLiveMsg()
      _this.getLiveLis()
    }, 3000)
  },
  methods: {
    /* 退出登录 - 跳转方法 */
    goOutLogin () {
      // cAction.Ohter.outLogin().then(str => {
      //   if (/^login/gi.test(str)) {
      //     window.G.UserInfo = {}
      //     // this.$router.push({ path: '/login/index' })
      //     // this.$router.push({ path: '/' })
      //     window.location.href = 'https://pbcsf.ezijing.com/login/index'
      //   } else {
      //     /* 出错 */
      //   }
      // }).catch(e => {
      //   this.$message.error(e.message)
      // })
      /* 清空一下记录，然后调整到登录页 */
      this.$router.push({ path: '/login/index' })
    },
    getNewLiveMsg: function () {
      // 获取最新直播提醒
      const _this = this
      // const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Player.getNewLiveMsg().then(json => {
        if (json.status === 200) {
          _this.latest = json.data
          window.console.log(_this.latest)
        }
        if (_this.loading) {
          _this.loading.close()
          _this.loading = null
        }
      }).catch(e => { this.$message.error(e.message) }).finally(() => { })
    },
    getLiveLis: function () {
      // 获取最新直播列表
      const _this = this
      cAction.Player.getLiveList().then(json => {
        if (json.status === 200) {
          json.data.map(function (item, index, arr) {
            if (item.live && (item.live.length || item.live.user_id)) {
              let _time = item.live.start_time
              const _status = item.live.live_status
              const enableRecord = item.live.enable_record // 0: 不启用回放 1: 开启回放
              let str = ''
              switch (_status) {
                case 0: str = '直播未开始'; break
                case 1: str = '正在直播'; break
                case 2: str = '直播结束'; break
                case 101: str = '直播结束，视频剪辑中'; break // 录制开始
                case 102: str = '直播结束，视频剪辑中'; break // 录制结束
                case 103: str = '观看回放'; break
                default: str = '直播未开始'
              }
              if (_status === 103 && !enableRecord) str = ''
              if (_status === 0 && _time) {
                _time = _time.replace(/-/g, '/')
                const time = (new Date(_time).getTime() - new Date().getTime()) / 1000
                if (time <= 5 * 60) {
                  str = '即将开始'
                } else if (time <= 1 * 60 * 60) {
                  str = parseInt(time / 60) + '分钟后开始'
                } else if (time <= 24 * 60 * 60) {
                  str = parseInt(time / (60 * 60)) + '小时' + parseInt(time / 60 % 60) + '分钟后开始'
                } else {
                  str = parseInt(time / (24 * 60 * 60)) + '天后开始'
                }
              }
              item.live.time = str
            }
            return item
          })
          _this.obj = json.data
        }
        if (_this.loading) {
          _this.loading.close()
          _this.loading = null
        }
      }).catch(e => { this.$message.error(e.message) }).finally(() => { })
    },
    dealRender: () => {
      (function (win, doc) {
        let wWidth = (win.screen.width > 0) ? (win.innerWidth >= win.screen.width || win.innerWidth === 0) ? win.screen.width : win.innerWidth : win.innerWidth // eslint-disable-line
        const wFsize = (wWidth > 640 ? 640 : wWidth) / 375 * 100
        // wFsize = wFsize > 32 ? wFsize : 32;
        doc.documentElement.style.fontSize = wFsize + 'px'
      })(window, document)
    },
    opencc: function (obj) {
      const _live = obj.live
      if (!_live || !_live.user_id) {
        this.$message.error('网络错误，刷新重试')
        return
      }
      const userid = _live.user_id
      const roomid = _live.room_id
      const viewertoken = _live.viewer_token
      const recordid = _live.record_id
      const liveStatus = _live.live_status
      const enableRecord = _live.enable_record // 0: 不启用回放 1: 开启回放
      const viewername = this.name
      let _url = 'https://view.csslcloud.net/api/view'
      if (recordid && liveStatus === 103) {
        if (!enableRecord) {
          this.$message.warning('该直播没有回放')
          return
        }
        // 可以回放
        // https://view.csslcloud.net/api/view/callback?recordid=xxx&roomid=xxx&userid=xxx&autoLogin=true&viewername=xxx&viewertoken=xxx&groupid=xxx
        _url = _url + '/callback?autoLogin=true&roomid=' + roomid + '&userid=' + userid + '&recordid=' + recordid + '&viewername=' + viewername + '&viewertoken=' + viewertoken
      } else {
        // 可以直播
        // https://view.csslcloud.net/api/view/index?roomid=xxx&userid=xxx&autoLogin=true&viewername=xxx&viewertoken=xxx&groupid=xxx
        _url = _url + '/index?autoLogin=true&roomid=' + roomid + '&userid=' + userid + '&viewername=' + viewername + '&viewertoken=' + viewertoken
      }
      window.console.log(_url)
      window.open(_url, '_blank')
    }
  }
}
</script>
<style>
html{
    font-size: 100px;
}
body{
    padding: 0;
    margin: 0;
}
.float-left{
    float: left;
}
.float-right{
    float: right;
}
</style>
<style scoped >

.pages{
     font-size: .14rem;
     padding-top: .2rem;
}
 .head{
     height: 0.48rem;
     padding: 0 0.2rem;
}
.head .logo5{
    width: 1.18rem;
    height: .3rem;
    float: left;
}
 .name{
    padding: 0 0.1rem;
    width: 1.1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
 .login-out{
     color: #999;
}
 .userinfo{
     height: 0.68rem;
}
 .userinfo > div {
     float: right;
}
 .hint{
     min-height: 0.7rem;
     display: flex;
     background: rgba(176,28,61,.1) ;
     padding: 0 0.2rem .1rem;
     justify-content: space-between;
     font-size: .14rem;
}
.hint .left{
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-right: .08rem;
}
.hint .left .left-1{
    height: .4rem;
    line-height: .4rem;
}

.hint .left .left-2{
  margin-left: - 0.08rem;
}
.hint .right{
    width: .78rem;
    flex-shrink:0;
    color: #b01c3d;
    align-self:center;
}
.tips{
    height: .4rem;
    line-height: .4rem;
    padding: 0 .2rem;
    color: #999;
    font-size: .14rem;
    overflow: hidden;
}
.list-box{
    padding: 0 .2rem;
}
.curriculum{
    width: 100%;
    padding-top: .05rem;
    height: 1.2rem;
    border-bottom: 1px solid #ccc ;
}
.curriculum-name{
    padding: 0;
    margin: 0;
    height: .4rem;
    line-height: .4rem;
    color: #333;
}
.curriculum-box{
    display: flex;
    width: 100%;
    height: .6rem;
    cursor: pointer;
}
.curriculum-picture{
    width: .86rem;
    height: .6rem;
}
.curriculum-introduce{
    padding-left: 10px;
    flex-grow:1;
    display: flex;
    flex-direction:column;
    justify-content:space-between;
}
.curriculum-introduce .time{
    color: #b01c3d;
    text-align: right;
}

</style>
