<template>
  <div style="display: flex">
    <div class="item-video">
      <div class="video-box" v-if="videoSrc">
        <video
          ref="videoPlayer"
          :preload="preload"
          :poster="videoImg"
          :height="height"
          :width="width"
          align="center"
          :controls="controls"
          autoplay
          muted
          class="video video-js vjs-default-skin vjs-big-play-centered"
        ></video>
        <div class="line"></div>
        <div class="text">
          <span
            class="items"
            v-for="(item, index) in typeList"
            :key="index"
            @click="Onchange(item)"
            :class="addClass(item)"
          >{{ item.lable }}</span
          >
        </div>
      </div>
      <div class="video-img-null" v-else>
        <img src="../../../assets/images/video-null2.png" alt="" />
        暂无资源
      </div>
    </div>
  </div>
</template>

<script>
import { getCarVideo } from '@/api/iot'
import 'video.js/dist/video-js.css'
import 'videojs-flvjs-es6'
import flvjs from 'flv.js'

export default {
  data() {
    return {
      videoSrc: null,
      videoImg: '',
      playStatus: '',
      muteStatus: '',
      isMute: true,
      isPlay: false,
      width: '420', // 设置视频播放器的显示宽度（以像素为单位）
      height: '500', // 设置视频播放器的显示高度（以像素为单位）
      preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      autoplay: true,
      typeList: [
        {
          id: 2,
          lable: '大巴摄像头',
        },
        {
          id: 3,
          lable: '驾驶员',
        },
        {
          id: 4,
          lable: '车内',
        },
        {
          id: 5,
          lable: '车前方',
        },
        {
          id: 6,
          lable: '车后方',
        },
        {
          id: 7,
          lable: '车左侧',
        },
        {
          id: 8,
          lable: '车右侧',
        },
      ],
      carId: 2,
      vehicleId: '',
    }
  },
  props: {
    carInfo: Object,
    videoid: String,
  },
  watch: {
    videoid: {
      handler(val) {
        this.vehicleId = val
        this.FunVdieoList()
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    FunVdieoList() {
      const params = {
        vehicleId: this.vehicleId,
        channel: this.carId,
      }
      getCarVideo(params).then((res) => {
        if (res.code === 500) return
        this.videoSrc = res.data
        // this.videoSrc = `blob:${res.msg.replace('http://183.66.101.92:1078/video', '/video')}`
        this.$nextTick(() => {
          if (flvjs.isSupported() && res.data) {
            var flvPlayer = flvjs.createPlayer({
              type: 'flv',
              url: res.data,
              isLive: true,
            })
            //url: xxx 为后台请求数据的视频
            flvPlayer.attachMediaElement(this.$refs.videoPlayer)
            flvPlayer.load()
          }
        })
      })
    },
    Onchange(val) {
      this.carId = val.id
      this.FunVdieoList()
    },
    addClass(v) {
      return v.id == this.carId ? 'items actives' : 'items'
    },
  },
  created() {
    // this.FunVdieoList()
  },
  mounted() {},
}
</script>

<style lang="less" scoped>
.item-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 350px;
  background: #fff;
  pointer-events: all;
  .line {
    width: 330px;
    height: 1px;
    display: inline-block;
    border-bottom: 1px dashed #000;
  }
  .text {
    display: flex;
    flex-wrap: wrap;
    .items {
      width: 80px;
      text-align: center;
      margin-top: 5px;
      border-right: 1px solid #f1f1f1;
      cursor: pointer;
    }
    .actives {
      color: rgb(0, 119, 255) !important;
    }
  }
}
.video-box {
  margin-top: 20px;
  padding: 8px 9px;
  .video {
    width: 330px;
    height: 240px;
    object-fit: fill;
  }
}
.video-img-null {
  width: 200px;
  height: 200px;
  text-align: center;
  img {
    width: 200px;
    height: 200px;
  }
}
</style>
