<template>
  <div class='home-box'>
    <div
      id="homeComtainerB"
      ref="homeComtainerB"
    >
      <div
        class='home-comtainer'
        id="homeComtainer"
        style="width: 1920px; height: 1080px"
        :style="{ transform: 'scale(' + scaleNum + ')' }"
      >
        <HomeHeader :isFullScreen="isFullScreen" @screenfullChange="screenfullChange"/>
        <div class='line-one'>
          <LossSum style='margin-right: 16px;'/>
          <EqAlarm style='margin-right: 16px;'/>
          <Count />
        </div>
        <div class='line-two'>
          <div>
            <SectionInputAndOutput style='margin-bottom: 16px;'/>
            <LineRate />
          </div>
          <LineInpurAndOutput style='margin-left: 16px;'/>
        </div>
      </div>
    </div>
  </div>
  
</template>
<script>
import HomeHeader from './components/HomeHeader.vue';
import LossSum from './components/LossSum.vue';
import EqAlarm from './components/EqAlarm.vue';
import Count from './components/Count.vue';
import SectionInputAndOutput from './components/SectionInputAndOutput.vue';
import LineRate from './components/LineRate.vue';
import LineInpurAndOutput from './components/LineInpurAndOutput.vue';
import { debounce } from '@/utils/debounce';
import screenfull from 'screenfull';
export default {
  name: 'Home',
  components: {
    HomeHeader,
    LossSum,
    EqAlarm,
    Count,
    SectionInputAndOutput,
    LineRate,
    LineInpurAndOutput
  },
  data() {
    return {
      isFullScreen: false,
      scaleNum: 1
    };
  },
  created() {
		this.init();
	},
  mounted() {
		this.boxReset();
		window.addEventListener('resize', this.boxReset);
	},
	destroyed() {
		window.removeEventListener('resize', this.boxReset);
	},
  methods: {
    boxReset() {
			debounce(() => {
				this.resetSize();
			}, 300)();
		},
		change() {
			this.isFullScreen = screenfull.isFullscreen;
		},
		init() {
			if (screenfull.isEnabled) {
				screenfull.on('change', this.change);
			}
		},
		destroy() {
			if (screenfull.isEnabled) {
				screenfull.off('change', this.change);
			}
		},
    // 全屏
		screenfullChange() {
			if (!screenfull.isEnabled) {
				this.$message({
					message: 'you browser can not work',
					type: 'warning',
				});
				return false;
			}
			screenfull.toggle(this.$refs.homeComtainerB);
		},
    resetSize() {
			let coldContainerBox = document.getElementById('homeComtainer');
			let rw = parseFloat(window.innerWidth);
			let rh = parseFloat(window.innerHeight);
			let bw = parseFloat(coldContainerBox.style.width);
			let bh = parseFloat(coldContainerBox.style.height);
			let wx = 0;
			let hx = 0;
			if (screenfull.isFullscreen) {
				wx = rw / bw;
				hx = rh / bh;
			} else {
				if (this.$store.state.app.sidebar.opened) {
					wx = (rw - 280) / bw;
					hx = (rh - 116) / bh;
				} else {
					wx = (rw - 85) / bw;
					hx = (rh - 116) / bh;
				}
			}
			this.scaleNum = wx;
		},
  },
  watch: {
  '$store.state.app.sidebar.opened': {
    handler(newVal, oldVal) {
      this.boxReset();
    },
    immediate: true
  }
}
}
</script>
<style lang='scss' scoped>
.home-box {
  min-height: calc(100vh - 56px - 72px);
  min-width: calc(100vh - 280px);
  background-color: #F2F4F9;
}
.home-comtainer{
  background-color: #F2F4F9;
  position: absolute;
  transform-origin: 16px 8px;
  top: 0px;
	left: 0px;
  padding-left: 16px;
  padding-top: 10px;
  overflow: hidden;
  .line-one {
    display: flex;
    margin-top: 16px;
  }
  .line-two {
    display: flex;
    margin-top: 16px;
  }
}
</style>