<template>
  <TrainChunkBox :title="title">
    <div class="train-video-box">
      <div
        v-for="(item, index) in videoList"
        :key="index"
        class="train-video-item"
      >
        <video :id="item.url" muted loop controls type="rtmp/flv"></video>
        {{ item.deviceInfo.name }}
      </div>
    </div>
  </TrainChunkBox>
</template>

<script>
import TrainChunkBox from '@/views/training/training/components/train-chunk-box.vue'
// import mpegts from "mpegts.js";
export default {
  components: { TrainChunkBox },
  props: {
    title: {
      type: String,
      default: '训练实时画面'
    },
    trainInfo: {
      type: Object,
      default: () => {}
    },
    checkedGroup: {
      type: Number,
      default: 0
    },
    stepInfo: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      viedeoPlayer: []
      // videoList: []
    }
  },
  mounted () {
    // console.log(mpegts,'aaaaaaaaaaaaaa');
  },
  beforeDestroy () {},
  methods: {
    async initVideoList (url) {
      const videoDom = document.getElementById(url)
      try {
        if (mpegts.isSupported() && videoDom) {
          const mediaDataSource = {
            type: 'mse',
            isLive: true,
            url,
            withCredentials: true,
            liveBufferLatencyChasing: true
          }
          const player = mpegts.createPlayer(mediaDataSource, {
            enableWorker: true,
            lazyLoadMaxDuration: 3 * 60,
            seekType: 'range'
          })
          player.attachMediaElement(videoDom)
          player.load()
          player.play()
          player.on('error', () => {
            player.pause()
            player.unload()
            player.detachMediaElement()
            player.destroy()
            this.initVideoList(url)
          })
          this.viedeoPlayer.push(player)
        }
      } catch (error) {
        console.log(error)
        // alert(66666666666);
      }
    }
  },
  watch: {
    videoList (newD) {
      this.$nextTick(() => {
        if (this.viedeoPlayer?.length) {
          // console.log("111");
          this.viedeoPlayer.forEach((item) => {
            item.pause()
            item.unload()
            item.detachMediaElement()
            item.destroy()
            item = null
          })
        }
        this.viedeoPlayer = []
        const videoList = []
        this.$nextTick(() => {
          newD.forEach((item) => {
            this.initVideoList(item.url)
          })
        })
      })
    }
  },
  computed: {
    videoList () {
      if (!this.checkedGroup) {
        return []
      }
      const videoList = []
      this.trainInfo.settings?.[this.checkedGroup - 1]?.forEach((device) => {
        videoList.push({
          ...device,
          url: NginxLiveStream + device.ip.ip
        })
      })
      return videoList
    }
  }
}
</script>

<style lang="scss" scoped>
.train-video-box {
  height: fit-content;
  min-height: 296px;
  // width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 50% 50%;

  .train-video-item {
    overflow: hidden;
    display: flex;
    height: fit-content;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    padding-top: 10px;
    font-size: 15px;
    video {
      margin-bottom: 10px;
      width: 100%;
      height: 90%;
      object-fit: fill;
    }
  }
}
</style>
