<template>
  <iframe id="myIframe" :src="live.url" frameborder="0" width="100%" height="100%" allow="autoplay;geolocation;microphone;camera;midi;encrypted-media;"></iframe>
</template>

<script>
import cAction from '@action'

export default {
  props: {
    sid: { type: String, require: false },
    cid: { type: String, require: false },
    id: { type: String, require: false }
  },
  data () {
    return {
      live: {},
      ccLive: null
    }
  },
  mounted () {
    this.loadAjax()
  },
  destroyed () {
    if (window.document.getElementById('switch-btn')) {
      window.document.getElementById('switch-btn').style.display = 'block'
      window.document.getElementById('sys-help').style.display = 'none'
      window.document.getElementById('sys-callback').style.display = 'none'
    }
    if (this.ccLive) {
      this.ccLive.logout({
        success: function (res) {
        },
        error: function (res) {
        }
      })
    }
  },
  methods: {
    loadAjax () {
      /* 只能清除本域名下的cookie,不能清除其他域名下的cookie */
      // cAction.loginAction.clearCookie({
      //   cookies: [{
      //     name: 'sessionid',
      //     obj: { path: '/', domain: '.csslcloud.net' }
      //   }, {
      //     name: 'TGC',
      //     obj: { path: '/', domain: '.ezijing.com' }
      //   }]
      // }).then().finally(() => {})
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Player.getChapterList(this.cid, this.sid, this.id).then(json => {
        this.live = (json.curJson && json.curJson.live) || {}
        this.$emit('changeSideBar', '')
        setTimeout(() => {
          if (window.document.getElementById('switch-btn')) {
            window.document.getElementById('switch-btn').style.display = 'none'
            window.document.getElementById('sys-help').style.display = 'block'
            window.document.getElementById('sys-callback').style.display = 'block'
          }
        }, 1000)
        if (this.live.id) {
          if (this.live.record_id && this.live.live_status === 103) {
            this.live.url = 'https://view.csslcloud.net/api/view/callback?recordid=' + this.live.record_id + '&roomid=' + this.live.room_id + '&userid=' + this.live.user_id + '&autoLogin=true&viewername=' + this.live.viewer_name + '&viewertoken=' + this.live.viewer_token // + '&groupid=xxx'
          } else {
            this.live.viewer_name = window.G.UserInfo.student_info.personal_name || window.G.UserInfo.nickname
            this.live.url = 'https://view.csslcloud.net/api/view/index?roomid=' + this.live.room_id + '&userid=' + this.live.user_id + '&autoLogin=true&viewername=' + this.live.viewer_name + '&viewertoken=' + this.live.viewer_token // + '&groupid=xxx'
          }
          this.CCLiveInit(this.live)
        }
        loading.close()
      }).catch(e => { this.$message.error(e.message) }).finally(() => { })
    },
    CCLiveInit (live) {
      window.DWLive.init({
        userid: live.user_id, // 必须参数
        roomid: live.room_id, // 必须参数
        // groupid: "groupid", // 可选
        viewername: live.viewer_name, // 可选
        viewertoken: live.viewer_token // 如果直播间设置为密码验证，必选
        // viewercustomua: 'android', // 可选
        // language: 'en', // 可选
        // viewercustominfo: '{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}', // 可选
        // fastMode:true // 可选参数，默认为true
      })
      this.ccLive = window.DWLive
    }
  },
  watch: {
    id: {
      handler () {
        this.loadAjax()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
