<template>
  <div v-loading="loading" class="manage-container">
    <el-button
      type="primary"
      size="mini"
      style="margin-bottom: 10px"
      @click="dianji"
    >
      {{ $t('defalult.qp') }}
    </el-button>
    <iframe
      id="iframeId"
      ref="iframe"
      src="https://dp.lidinghb.com/chudy_visual/view/1646708782442479616"
      style="width: 100%; height: 655px"
    ></iframe>
    <!--    <div style="width: 100%; text-align: center">-->
    <!--      <el-button type="primary" @click="jump">查看详情</el-button>-->
    <!--    </div>-->
  </div>
</template>
<script>
export default {
  name: 'Index',
  data() {
    return {
      flowData: [],
      loading: true,
      fullscreenLoading: true,
      queryForm: {
        deviceCode: '',
      },
      src: '',
    };
  },
  computed: {
    height() {
      return 500;
    },
  },
  created() {},
  mounted() {
    const { iframe } = this.$refs;
    // IE和非IE浏览器，监听icframe加载事件不一样，需要兼容
    const that = this;
    if (iframe.attachEvent) {
      // IE
      iframe.attachEvent('onload', () => {
        that.stateChange();
      });
    } else {
      // 非IE
      iframe.onload = function () {
        that.stateChange();
      };
    }
  },
  methods: {
    jump() {
      window.open('http://www.tuqiangol.com/index.jsp', '_blank');
    },
    showData(row) {
      console.log(row);
    },
    stateChange() {
      this.loading = false;
    },
    dianji() {
      //设置后就是id==con_lf_top_div 的容器 {{ $t('defalult.qp') }}
      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>
<style lang="scss" scoped>
.manage-container {
  width: 100%;
  .vab-query-form {
    margin-bottom: 30px;
    .el-input {
      width: 180px;
      margin-right: 20px;
    }
  }
}
</style>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
</style>
