<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',
  appName: "监控详情",
  data() {
    return {
      style: {},
      monitor: {},
      width: '',
      height: '',
    }
  },
  onLoad(params) {
    this.getDetail(params.id)
  },
  onShow() {
    this.$nextTick(() => {
      this.detectOrient()
    })
  },
  methods: {
    getDetail(deviceId) {
      deviceId &&
      this.$instance
      .post('/app/appzyvideoequipment/getWebSdkUrl', null, {
        params: {deviceId},
      })
      .then((res) => {
        if (res?.data) {
          this.monitor = JSON.parse(res.data)
        }
      })
    },

    detectOrient() {
      uni.onWindowResize((res) => {
        this.width = res.size.windowWidth
        this.height = res.size.windowHeight
        console.log('变化后的窗口宽度=' + res.size.windowWidth)
        console.log('变化后的窗口高度=' + res.size.windowHeight)
      })
      // var width = document.querySelector('.monitorDetail').clientWidth
      // var height = document.querySelector('.monitorDetail').clientHeight
      if (this.width >= this.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`,
        }
      }
    },
  },
}
</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>
