<template>
  <div class="video">
    <div class="tree">
      <div v-for="(item, index) in channel" :key="index" class="earlyEducation-item" @click="onChangeUrl(item.url)">
        <div class="title">{{ item.title }}</div>
      </div>
    </div>
    <div class="video-box">
      <div id="video-container"></div>
    </div>
  </div>
</template>

<script>
var player = null
import axios from 'axios'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      channel: []
    }
  },
  mounted() {
    this.getChannel()
    // this.initPlayer()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    getChannel() {
      axios.get('http://static.harbinxiaoshi.cn/daping/' + process.env.VUE_APP_TITLE + '/json/videochannel.json?t=' + dayjs()).then(res => {
        const channel = res.data
        this.channel = []
        for (var i = 0; i < channel.length; i++) {
          this.channel.push({
            index: i + 1,
            title: channel[i].title,
            url: channel[i].url
          })
        }

        this.initPlayer()
      })
    },
    initPlayer() {
      if (player) {
        this.destroy()
      }
      var height = Math.floor(window.innerHeight / 1.24)
      var width = Math.floor(window.innerWidth / 1.2)

      axios.post('http://o2oa9.harbinxiaoshi.cn/x_program_center/jaxrs/invoke/geys7token/execute').then(response => {
        var accessToken = response.data.accessToken
        var url = ''
        if (this.channel.length > 0) {
          url = this.channel[0].url
        }
        player = new window.EZUIKit.EZUIKitPlayer({
          id: 'video-container', // 视频容器ID
          url: url,
          accessToken: accessToken,
          template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
          plugin: ['talk'], // 加载插件，talk-对讲
          width: width,
          height: height
        })
        window.player = player
      })
    },
    onChangeUrl(url) {
      player.changePlayUrl({
        url: url
      })
    },
    destroy() {
      var destroyPromise = player.destroy()
      destroyPromise.then(data => {
        console.log('promise 获取 数据', data)
      })
      player = null
    }
  }
}
</script>

<style lang="scss" scoped>
.video {
  margin-top: px2rem(20);
  height: calc(100% - #{px2rem(58+78 + 20)});
  width: 100%;
  flex: 1;
  display: flex;
  padding: 10px 20px;
}
.tree {
  width: px2rem(300);
}
.video-box {
  margin-left: 10px;
  //border: 1px solid red;
  flex: 1;
}

.earlyEducation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: px2rem(40);
  cursor: pointer;
  border-bottom: 1px solid #057dd9;
  font-size: px2rem(14);

  .title {
    margin-left: px2rem(10);
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    text-overflow: ellipsis; /* 用省略号表示被裁剪的文本 */
    padding: 0 10px;
  }
}
</style>
