<template>
  <div>
    <div class="camera-list">
      <camera
        v-for="(item, index) in cameraList"
        :key="index"
        :name="item.name"
        :source="item.source"
      ></camera>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import camera from "./camera.vue";

const cameraList = ref([
  {
    name: "CAMERA01",
    source:
      "http://101.34.251.155:10000/sms/34020000002020000001/flv/hls/34020000001320000001_34020000001320000002.flv",
  },
  {
    name: "CAMERA02",
  },
  {
    name: "CAMERA03",
  },
  {
    name: "CAMERA04",
  },
  {
    name: "CAMERA06",
  },
  {
    name: "CAMERA07",
  },
]);
// const videoElementRef = ref();
// const playBtnRef = ref();
// let flvPlayer = flvjs.createPlayer({
//   type: "flv",
//   url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
//   //   url: "http://localhost:8000/lycoris_recoil.flv",
// });

// const flvPlayerEventHandler = (e) => {
//   console.log(e);
// };
// onMounted(() => {
//   if (flvjs.isSupported()) {
//     flvPlayer.attachMediaElement(videoElementRef.value);
//     flvPlayer.load();
//     flvPlayer.on("ERROR", flvPlayerEventHandler);
//     // flvPlayer.play();
//   }
// });
</script>
<style>
page {
  background-color: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.nav-bar {
  top: 0;
  width: 750px;
  z-index: 9999;
  height: 88px;
  background: linear-gradient(to top right, #496df6, #2e9ee8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  position: fixed;
}
.camera-list {
  //   margin-top: 108px;
  padding: 0px 20px 0px;
}
</style>
