<template>
  <div v-loading="loading">
    <el-button
      type="primary"
      size="mini"
      style="margin-bottom: 10px"
      @click="dianji"
    >
      全屏
    </el-button>
    <iframe
      id="iframeId"
      ref="iframe"
      :src="src"
      style="width: 100%; height: 495px"
    ></iframe>
  </div>
</template>

<script>
export default {
  props: {
    deviceCode: {
      type: String,
      default: '',
    },
    // screenView: {
    //   type: String,
    //   default: '',
    // },
  },
  data() {
    return {
      technologyData: [],
      loading: true,
      fullscreenLoading: true,
      queryForm: {
        deviceCode: '',
      },
      src: '',
    };
  },
  watch: {
    deviceCode: function (newVal, oldVal) {
      this.queryForm.deviceCode = newVal;
      this.src =
        'https://dp.lidinghb.com/chudy_visual/view/' +
        newVal[1] +
        '?' +
        'deviceCode=' +
        newVal[0];
      console.log(111, newVal);
      console.log(123, this.src);
    },
  },
  created() {},
  mounted() {
    const { iframe } = this.$refs;
    // IE和非IE浏览器，监听iframe加载事件不一样，需要兼容
    const that = this;
    if (iframe.attachEvent) {
      // IE
      iframe.attachEvent('onload', () => {
        that.stateChange();
      });
    } else {
      // 非IE
      iframe.onload = function () {
        that.stateChange();
      };
    }
  },
  methods: {
    showData(row) {
      console.log(row);
    },
    stateChange() {
      this.loading = false;
    },
    dianji() {
      //设置后就是id==con_lf_top_div 的容器全屏
      const case1 = document.getElementById('iframeId');
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (case1.requestFullscreen) {
          case1.requestFullscreen();
        } else if (case1.webkitRequestFullScreen) {
          case1.webkitRequestFullScreen();
        } else if (case1.mozRequestFullScreen) {
          case1.mozRequestFullScreen();
        } else if (case1.msRequestFullscreen) {
          // IE11
          case1.msRequestFullscreen();
        }
      }
    },
  },
};
</script>
