<template>
	<div
		id="wholePlantContainerB"
		ref="wholePlantContainerB"
		style="width: 100%; height: 100%">
		<div
			id="wholePlantContainer"
			ref="wholePlantContainer"
			class="wholePlantBoard"
			style="
				position: absolute;
				transform-origin: 16px 8px;
				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">
				<div style="flex: 1" class="bz25-2 bz-top">
					<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
					<div class="topText">昨日总成本/万元</div>
				</div>
				<div style="flex: 1" class="bz25-3 bz-top">
					<div class="topNum" style="margin-left: 50px">{{ Number(topData.yestodayRatio).toFixed(1) }}%</div>
					<div class="topText">昨日良品率</div>
				</div>
				<div style="flex: 1" class="bz25-5 bz-top">
					<div class="topNum">{{ Number(topData.yestodayMat).toFixed(1) }}</div>
					<div class="topText">昨日原料成本/万元</div>
				</div>

				<div style="flex: 1" class="bz25-4 bz-top">
					<div class="topNum">{{ Number(topData.monthOut).toFixed(1) }}</div>
					<div class="topText">本月原片产量/万m²</div>
				</div>
				<div style="flex: 1" class="bz25-7 bz-top">
					<div class="topNum">{{ Number(topData.monthMat).toFixed(1) }}</div>
					<div class="topText">本月原料成本/万元</div>
				</div>

				<div style="flex: 1" class="bz25-8 bz-top">
					<div class="topNum">{{ Number(topData.monthAreaCost).toFixed(1) }}</div>
					<div class="topText">本月每平米总成本/元</div>
				</div>
			</div>
			<div class="main-body">
				<div style="flex: 2" class="middle middle1">
					<div class="title">
						<svg-icon icon-class="energy" />
						能源统计
					</div>
					<base-table
						:id="'table1'"
						style="margin: 5px 12px 12px 12px"
						:table-props="tableProps1"
						:table-data="tableData1"
						:height="230"></base-table>
				</div>
				<div style="flex: 1" class="middle middle2">
					<div class="title">
						<svg-icon icon-class="yanqi" />
						烟气处理
					</div>
					<div
						style="
							display: flex;
							flex-wrap: wrap;
							margin: 10px 30px;
							gap: 12px;
						">
						<div class="yanqi" style="width: 566px;">
							<div class="content middle2-left" style="margin-left: 50px;width: 210px;">
								<el-image class="imageClass" :src="imgUrl.so2"></el-image>
								二氧化硫 排放浓度
							</div>
							<div class="content middle2-right">
								{{ Number(topData.so2).toFixed(1) }}
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
							</div>
						</div>
						<div class="yanqi">
							<div class="content middle2-left">
								<el-image class="imageClass" :src="imgUrl.fc"></el-image>
								粉尘排放
							</div>
							<div class="content middle2-right">
								{{ Number(topData.fc).toFixed(1) }}
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
							</div>
						</div>
						<div class="yanqi">
							<div class="content middle2-left">
								<el-image class="imageClass" :src="imgUrl.no"></el-image>
								氮氧化物 排放浓度
							</div>
							<div class="content middle2-right">
								{{ Number(topData.no).toFixed(1) }}
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="main-body">
				<div style="flex: 2" class="footer footer1">
					<div class="title">
						<svg-icon icon-class="costchart" />
						近12个月成本 · 产量趋势
					</div>
					<bar-chart
						ref="chartRef"
						style="margin-top: -50px"
						:echart-data="echartData"></bar-chart>
				</div>
				<div style="flex: 1" class="footer footer2">
					<div class="title">
						<svg-icon icon-class="cost" />
						成本及产量统计
					</div>
					<base-table
						:id="'table2'"
						style="margin: 5px 12px 12px 12px"
						:table-props="tableProps2"
						:table-data="tableData2"
						:height="310"></base-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import KHeader from '../components/Header';
import screenfull from 'screenfull';
import { debounce } from '@/utils/debounce';
import baseTable from '../components/baseTable.vue';
import BarChart from './BarChart.vue';

const tableProps1 = [
	{
		prop: 'title',
		label: '',
		align: 'center',
	},
	{
		prop: 'elec',
		label: '电消耗量',
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
	},
	{
		prop: 'elecPrice',
		label: '电总价',
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
	},
	{
		prop: 'gas',
		label: '气消耗量',
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
	},
	{
		prop: 'gasPrice',
		label: '气总价',
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
	},
	{
		prop: 'price',
		label: '能源总价',
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
	},
];

const tableProps2 = [
	{
		prop: 'title',
		label: '',
		align: 'center',
	},
	{
		prop: 'priceO',
		label: '成本/万元',
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
	},
	{
		prop: 'outO',
		label: '产量/万m²',
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
	},
	{
		prop: 'ratioO',
		label: '良品率',
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
	},
];
export default {
	name: '',
	components: {
		KHeader,
		baseTable,
		BarChart,
	},
	// provide() {
	// 	return {
	// 		resizeChart: null,
	// 	};
	// },
	data() {
		return {
			isFullScreen: false,
			scaleNum: 0.8,
			url: process.env.VUE_APP_WS_API,
			websock: '',
			topData: {},
			imgUrl: {
				fc: require('@/views/dashboard/assets/fc.png'),
				no: require('@/views/dashboard/assets/NO.png'),
				so2: require('@/views/dashboard/assets/SO2.png'),
			},
			tableProps1,
			tableData1: [],
			tableProps2,
			tableData2: [],
			echartData: [],
		};
	},
	created() {
		this.init();
		this.initWebSocket();
	},
	destroy() {
		this.destroy();
	},
	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.wholePlantContainerB);
		},
		resetSize() {
			let wholePlantContainerBox = document.getElementById(
				'wholePlantContainer'
			);
			let rw = parseFloat(window.innerWidth);
			let rh = parseFloat(window.innerHeight);
			let bw = parseFloat(wholePlantContainerBox.style.width);
			let bh = parseFloat(wholePlantContainerBox.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;
		},

		initWebSocket() {
			// 初始化weosocket
			const path = `${this.url}/websocket/message?userId=2`;
			this.websock = new WebSocket(path);
			this.websock.onmessage = this.websocketonmessage;
			this.websock.onopen = this.websocketonopen;
			this.websock.onerror = this.websocketonerror;
			this.websock.onclose = this.websocketclose;
		},

		websocketonopen() {
			// 连接建立之后执行send方法发送数据
			this.websocketsend();
		},
		websocketonerror() {
			// 连接建立失败重连
			this.initWebSocket();
		},
		websocketonmessage(e) {
			let dataJson = JSON.parse(e.data);
			console.log(dataJson);
			// 数据接收
			if ('OriginState' in dataJson) {
				this.topData = dataJson.OriginState;
			}
			if ('OriginEnergyTableList' in dataJson) {
				this.tableData1 = dataJson.OriginEnergyTableList;
			}
			if ('OriginCostTableList' in dataJson) {
				this.tableData2 = dataJson.OriginCostTableList;
			}
			if ('OriginCostTrendList' in dataJson) {
				this.echartData = dataJson.OriginCostTrendList;
        this.$nextTick(()=>{
          this.$refs.chartRef.initChart();
        })
			}
		},
		websocketsend(val) {
			// 数据发送
			this.websock.send(val);
		},
		websocketclose(e) {
			// 关闭
			console.log('断开连接', e);
		},
	},
};
</script>

<style scoped lang="scss">
.wholePlantBoard {
	background: url(../assets/bg1.png) no-repeat;
	background-size: cover;
	background-position: 0 0;
	overflow: auto;
}
.main-body {
	display: flex;
	gap: 20px;
	padding: 0px 16px;
}
.bz-top {
	text-align: center;
}
.bz25-2 {
	background: url(../assets/bz25-2.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
	height: 147px;
	margin-top: -17px;
}
.bz25-3 {
	background: url(../assets/bz25-3.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
	height: 147px;
	margin-top: -17px;
}
.bz25-4 {
	background: url(../assets/bz25-4.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
	height: 147px;
	margin-top: -17px;
}
.bz25-5 {
	background: url(../assets/bz25-5.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
	height: 147px;
	margin-top: -17px;
}
.bz25-7 {
	background: url(../assets/bz25-7.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
	height: 147px;
	margin-top: -17px;
}
.bz25-8 {
	background: url(../assets/bz25-8.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
	height: 147px;
	margin-top: -17px;
}
.topNum {
	font-weight: 600;
	font-size: 44px;
	color: #ffffff;
	line-height: 43px;
	font-style: normal;
	margin-top: 50px;
	margin-left: 40px;
}
.topText {
	font-weight: 400;
	font-size: 18px;
	color: #95caff;
	line-height: 20px;
	font-style: normal;
	margin-top: 3px;
	margin-left: 40px;
}
.title {
	height: 50px;
	line-height: 50px;
	font-weight: 400;
	font-size: 22px;
	color: #ffffff;
	padding: 0 20px;
}
.middle {
	height: 322px;
}
.middle1 {
	background: url(../assets/1.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
}
.middle2 {
	background: url(../assets/2.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
}
.yanqi {
	width: 275px;
	height: 108px;
	background: url(../assets/yanqi.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
}
.content {
	height: 108px;
}
.imageClass {
	width: 40px;
	height: 30px;
	display: block;
	margin: 8px auto;
}
.middle2-left {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 17px;
	letter-spacing: 5px;
	width: 110px;
	padding-top: 12px;
	padding-left: 12px;
	float: left;
  margin-right: 10px;
}
.middle2-right {
	font-weight: 600;
	font-size: 35px;
	color: #ffffff;
	line-height: 106px;
}
.footer {
	height: 410px;
}
.footer1 {
	background: url(../assets/3.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
}
.footer2 {
	background: url(../assets/4.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	overflow: auto;
	height: 402px;
}
</style>