<template>
  <div id="e_popup">
    <div class="equip_camera">
      <div class="header">{{ model.cameraName }}</div>
      <div class="main">
        <local-camera
          v-if="!model.online"
          ref="videoItem"
          class="videoItem"
          :video-data="model.videoUrl"
        />
        <camera-video v-if="model.online" :video-data="model" />
      </div>
    </div>
  </div>
</template>

<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
import LocalCamera from "../../../components/Standard/localCamera.vue";

export default {
  name: "cameraPopup",
  props: ["model"],
  components: { LocalCamera, CameraVideo },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    startVideo() {
      for (let item of this.$refs.videoItem) {
        item?.setTime();
      }
    },
  },
  computed: {},
  beforeDestroy() {
    console.log("camera popup destroy...");
  },
};
</script>

<style lang="less" scoped>
.videoItem {
  width: 100%;
  display: block;
  height: 100%;
}

#e_popup {
  background: transparent;
}

.equip_camera {
  width: 314PX;
  height: 210PX;
  background-image: url("../../../assets/images/sc/cameraPopup.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .header {
    height: 30PX;
    line-height: 40PX;
    padding-left: 10PX;
    color: white;
    font-size: 16PX;
    font-weight: 700;
  }

  .main {
    position: relative;
    padding: 1PX;
    height: calc(100% - 30PX);
  }
}

//video 448 328
</style>
