<template>
  <div>
    <MMCPlayer
      title="测试播放器"
      :streamOptions="streamOptions"
      @close="onClose"
      :obstacleData="obstacleData"
      :isCenter="true"
      :size="1"
    >
      <el-button class="test-btn">测试悬浮按钮</el-button>
    </MMCPlayer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      streamOptions: [
        {
          label: "flv",
          brand: "flv", //支持以下品牌播放器"srs|fly|liveNVR|QingLiu|webrtc", 为空则根据url判断使用liveNVR或QingLiu
          url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
        },
        {
          label: "liveNVR",
          brand: "liveNVR",
          url: "http://pull.mmcuav.cn/live/1680771689946.m3u8",
          //只有liveNVR支持fpvUrl
          fpvUrl: "webrtc://live.mmcuav.cn/hls/shouguang01",
        },
        {
          label: "srs",
          brand: "srs",
          url: "webrtc://live.mmcuav.cn/hls/shouguang01",
        },
        {
          label: "QingLiu",
          url: "pzsp://pzlink999bju.powzamedia.com:7788/live/ld/trans/test/mlinkm/channel1?ndselect=2&linkmode=8&fstusrd=1&us=1&wsinfo=pzlink999bju.powzamedia.com-13000&only-video=1&rct=500",
        },
        {
          label: "WebRtc",
          brand: "webrtc",
          url: "webrtc://live.mmcuav.cn/hls/shouguang01",
        },
      ],
      obstacleData: null,
      /* { 
          distances: [], //array<int>（36个值每10度一个与障碍物的距离厘米）; 
          obsDistance: 0,  //int(避障警告距离米)}
        } */
    };
  },
  mounted() {
    //模拟数据
    setInterval(() => {
      let data = {
        distances: [],
        obsDistance: 15,
      };
      for (let i = 0; i < 36; i++) {
        data.distances.push(Math.random() * 10 * 100);
      }
      this.obstacleData = data;
    }, 1000);
  },
  methods: {
    onClose() {
      alert("关闭");
    },
  },
};
</script>

<style lang="scss" scoped>
.test-btn {
  position: absolute;
  top: 50%;
  left: 50%;
}
</style>