<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="mse"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import dayjs from 'dayjs'
var player = null
export default {
  data() {
    return {
      channel: []
    }
  },
  mounted() {
    this.getChannel()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    setChannel() {
      this.channel = []
      for (var i = 1; i <= 16; i++) {
        this.channel.push({
          index: i,
          title: '通道' + i
        })
      }
    },
    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)

      player = new window.HlsJsPlayer({
        id: 'mse',
        url: '',
        isLive: true,
        autoplay: false,
        playsinline: true,
        height: height,
        width: width
      })
      if (this.channel.length > 0) {
        this.onChangeUrl(this.channel[0].url)
      }
    },
    onChangeUrl(url) {
      player.src = url
      player.play()
    },
    destroy() {
      if (player != null) {
        player.destroy()
      }
      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>
