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

<script>
import { px2rem } from '@/utils'
var player = null
import axios from 'axios'
export default {
  data() {
    return {
      channel: []
    }
  },
  mounted() {
    this.setChannel()
    this.initPlayer()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    setChannel() {
      this.channel = []
      for (var i = 1; i <= 16; i++) {
        this.channel.push({
          index: i,
          title: '通道' + i
        })
      }
      console.log(this.channel)
    },
    initPlayer() {
      if (player) {
        this.destroy()
      }
      var height = Math.floor(window.innerHeight / 1.24)
      var width = Math.floor(window.innerWidth / 1.2)

      axios.post('http://1.190.195.54:9057/x_program_center/jaxrs/invoke/getyingshi/execute').then(response => {
        var accessToken = response.data.accessToken
        player = new window.EZUIKit.EZUIKitPlayer({
          id: 'video-container', // 视频容器ID
          url: `ezopen://open.ys7.com/F58893625/1.hd.live`,
          accessToken: accessToken,
          template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
          plugin: ['talk'], // 加载插件，talk-对讲
          width: width,
          height: height
        })
        window.player = player
      })
    },
    onChangeUrl(index) {
      player.changePlayUrl({
        url: `ezopen://open.ys7.com/F58893625/${index}.hd.live`
      })
    },
    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>
