<template>
  <section class="monitorDetail">
    <div class="videoBox">
      <iframe ref="monitorIns" :style="style" :src="monitor.url" allow="autoplay *; microphone *; fullscreen *"
              allowfullscreen allowtransparency allowusermedia frameBorder="no"/>
    </div>
  </section>
</template>

<script>

export default {
  name: "monitorDetail",
  data() {
    return {
      style: {},
      monitor: {}
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.detectOrient()
    })
    document.title = '智慧安防'
  },

  methods: {
    getDetail(deviceId) {
      deviceId && this.$http.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
        params: {deviceId}
      }).then(res => {
        if (res?.data) {
          this.monitor = JSON.parse(res.data)
        }
      })
    },

    detectOrient() {
      var width = document.querySelector('.monitorDetail').clientWidth
      var height = document.querySelector('.monitorDetail').clientHeight
      if (width >= height) { // 竖屏
        this.style = {
          width: '100%',
          height: '100%',
          transform: 'rotate(0eg)',
          transformOrigin: `0 0`
        }
      } else {
        this.style = {
          width: height + 'px',
          height: width + 'px',
          transform: 'rotate(90deg)',
          transformOrigin: `${width / 2}px ${width / 2}px`
        }
      }
    }
  },
  onLoad(params) {
    this.getDetail(params.id)
  }
}
</script>

<style lang="scss" scoped>
.monitorDetail {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #fff;

  .videoBox {
    width: 100vw;
    height: 100vh;

    iframe {

    }
  }
}
</style>
