<template>
	<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;">
		<div
			id='deepProcessingContainer'
			ref='deepProcessingContainer'
			class="deepProcessingBoard"
			style="
				position: absolute;
				transform-origin: left top;
				font-size: 16px;
				top: 0px;
				left: 0px;
				width: 1920px;
				height: 1080px;
				display: flex;
				flex-direction: column;
				gap: 24px;
			"
			:style="{transform:'scale('+scaleNum+')'}">
			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
			<div
				class="main-body"
				style="
					display: grid;
					gap: 16px;
					grid-template-rows: 462px 462px;
				">
				<TopThree />
				<BottomTwo />
			</div>

			<!-- <div
				class="main-body"
				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
				<div class="left-side" style="flex: 1">
					<TopThree />
				</div>
				<div class="middle-side" style="flex: 1">
					<BottomTwo />
				</div>
			</div> -->
		</div>
	</div>
</template>

<script>
import KHeader from '../components/Header';
import TopThree from './TopThree';
import BottomTwo from './BottomTwo';
import screenfull from 'screenfull'
import { debounce } from '@/utils/debounce'
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'

export default {
	name: 'deepProcessingBoard',
	components: {
		KHeader,
		TopThree,
		BottomTwo
	},
	// provide() {
	// 	return {
	// 		resizeChart: null,
	// 	};
	// },
	data() {
		return {
			isFullScreen: false,
			scaleNum: 0.8
		};
	},
	created() {
		this.init()
	},
	destroy() {
		this.destroy()
	},
	mounted() {
		this.boxReset = debounce(() => {
      this.resetSize()
    }, 300)
    this.boxReset()
    window.addEventListener('resize', () => {
      this.boxReset()
    })
		// closeWebsocket()
		// getDcsMsg()
		// getMesMsg()
		console.log('mounted...........')
	},
	destroyed() {
		console.log('destroyed...........')
	},
	methods: {
		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.deepProcessingContainerB)
    },
		resetSize() {
      let deepProcessingContainer = document.querySelector('#deepProcessingContainer')
      let rw = parseFloat(window.innerWidth)
      let rh = parseFloat(window.innerHeight)
      let bw = parseFloat(deepProcessingContainer.style.width)
      let bh = parseFloat(deepProcessingContainer.style.height)
			let wx = 0
			let hx = 0
			if (screenfull.isFullscreen) {
				console.log('全屏')
				wx = rw / bw
				hx = rh / bh
				console.log(this.scaleNum)
			}else{
				console.log('非全屏')
				console.log(this.$store.state.app.sidebar.opened)
				if (this.$store.state.app.sidebar.opened) {
					wx = (rw-264) / bw
					hx = (rh-116) / bh
				}else{
					wx = (rw-78) / bw
					hx = (rh-116) / bh
				}
			}
			this.scaleNum = wx
    }
	}
};
</script>

<style scoped lang="scss">
.deepProcessingBoard {
	background: url(../assets/bg.png) no-repeat;
	background-size: cover;
	background-position: 0 0;
	overflow: auto;
}
</style>
