<!-- 全厂电量统计 -->
<template>
	<div class="app-container">
		<el-header>
			<div class="left-panel">
				<el-date-picker
					v-model="search_date"
					type="year"
					value-format="YYYY"
					format="YYYY"
					placeholder="年"
					style="margin-right: 6px"
					@change="dateChange"
				/>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="dateChange"
				></el-button>
				<el-button
					type="primary"
					@click="exportExcel()"
					:loading="exportLoading"
					>导出xlsx
				</el-button>
				<el-button type="primary" @click="handlePrint">打印 </el-button>
			</div>
		</el-header>
		<el-card style="margin-top: 5px">
			<div class="printWrap">
				<div ref="print" id="myReport" class="printContainer">
					<table
						border="1"
						width="1600"
						cellspacing="0"
						:key="timeStamp"
						id="myTable"
						class="myTable"
					>
						<thead class="myTableHead">
							<tr>
								<th colspan="16">电量消耗月报表</th>
							</tr>
							<tr>
								<th>工段</th>
								<th>设备</th>
								<th>单位</th>
								<th v-for="item in months" :key="item">
									{{ item }}月
								</th>
								<th>本年合计</th>
							</tr>
						</thead>
						<tr v-for="(item, index) in tableDatas" :key="index">
							<td class="numCell" v-if="index == 0" rowspan="4">
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="index == 4"
								rowspan="5"
							>
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="index == 9"
								rowspan="5"
							>
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="index == 14"
								rowspan="4"
							>
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="index == 18"
								rowspan="3"
							>
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="index == 21"
								rowspan="5"
							>
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="
									index == 26 || index == 27 || index == 28
								"
							>
								{{ item[0] }}
							</td>
							<td class="numCell">{{ item[1] }}</td>
							<td class="numCell">{{ item[2] }}</td>
							<td
								class="numCell"
								v-for="month_item in months"
								:key="month_item"
								@click="itemClick(item, index)"
							>
								{{ item[2 + month_item] }}
							</td>
							<td class="numCell">{{ item[15] }}</td>
						</tr>
					</table>
				</div>
			</div>
		</el-card>
		<el-dialog v-model="itemVisible" :title="tableName">
			<scEcharts
				height="400px"
				width="1033px"
				:option="option"
			></scEcharts>
			<template #footer>
				<slot name="footer"></slot>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import scEcharts from "@/components/scEcharts";
export default {
	components: {
		scEcharts,
	},
	data() {
		return {
			year: "",
			search_date: "",
			mpointList: [],
			tableDatas: [],
			timeStamp: null,
			itemVisible: false,
			months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
			tableName: "全厂电量月统计",
			sourceData: {},
			xAxisData: [],
			option: {
				title: {
					text: "全厂电量月统计",
					x: "center",
				},
				grid: {
					top: "20%",
					left: "3%",
					right: "10%",
					bottom: "5%",
					containLabel: true,
				},
				legend: {
					orient: "horizontal",
					x: "right",
					y: "10",
					data: [],
				},
				xAxis: {
					type: "category",
					data: [
						"1月",
						"2月",
						"3月",
						"4月",
						"5月",
						"6月",
						"7月",
						"8月",
						"9月",
						"10月",
						"11月",
						"12月",
					],
					name: "时间",
					nameTextStyle: {
						fontWeight: 600,
						fontSize: 14,
					},
					axisLine: {
						lineStyle: {
							color: "#3366CC",
						},
					},
					axisLabel: {
						rotate: 45,
						interval: 0,
					},
					boundaryGap: false,
				},
				yAxis: {
					type: "value",
					name: "对象值",
					nameTextStyle: {
						fontWeight: 500,
						fontSize: 14,
					},

					axisLine: {
						lineStyle: {
							color: "#3366CC",
						},
					},
				},
				tooltip: {
					show: true,
					trigger: "axis",
					axisPointer: {
						type: "cross",
						axis: "auto",
						snap: true,
					},
					showContent: true,
				},
				series: [
					{
						name: "",
						data: [4, 1, 9, 2, 11, 3, 5, 7, 8, 10, 6, 12],
						type: "line",
						symbolSize: 8,
						symbol: "circle",
						smooth: 0.5,
						itemStyle: {
							normal: {
								label: {
									show: true,
								},
								lineStyle: {
									width: 1,
									type: "dotted",
									color: "#3366CC",
								},
							},
						},
					},
				],
			},
		};
	},
	mounted() {
		let that = this;
		var nowDate = new Date();
		that.year = nowDate.getFullYear();
		that.search_date = that.year;
		that.timeStamp = nowDate.getTime();
		this.getMPoints();
	},
	methods: {
		dateChange() {
			let that = this;
			that.tableDatas = [];
			that.year = that.search_date;
			let nowDate = new Date();
			that.timeStamp = nowDate.getTime();
			that.dataLoop();
		},
		getMPoints() {
			let that = this;
			that.$API.enm.mpoint.list
				.req({
					page: 0,
					enabled: 1,
					need_display: 1,
					ordering: "report_sortstr",
					material__code__in: "elec,elec_0",
					query: "{ id, name, nickname, mgroup_name, unit }",
				})
				.then((res) => {
					// let data = res.slice(3);
					that.mpointList = data;
					that.dataLoop();
				});
		},
		dataLoop() {
			let that = this;
			that.tableDatas = [];
			that.mpointList.forEach((item, index) => {
				let arr = [];
				arr[0] =
					item.mgroup_name != null ? item.mgroup_name : item.name;
				arr[1] = item.nickname != null ? item.nickname : item.name;
				arr[2] = item.unit;
				for (let i = 0; i < 12; i++) {
					arr[i + 3] = 0;
				}
				that.tableDatas.push(arr);
				that.getData(item.id, index);
			});
		},
		getData(id, index) {
			let that = this;
			let obj = {};
			obj.type = "month";
			obj.year = that.year;
			obj.mpoint__material__code = "elec";
			obj.mpoint__need_display = 1;
			obj.mpoint = id;
			obj.page = 0;
			this.$API.enm.mpoint.stat.req(obj).then((res) => {
				console.log(res);
				res.forEach((item) => {
					let ind = item.month + 2;
					that.tableDatas[index][ind] = item.val;
				});
				that.$forceUpdate();
			});
		},
		itemClick(item, index) {
			let that = this;
			let lineData = that.tableDatas[index].slice(3, that.headerLength);
			that.option.xAxis.data = that.xAxisData;
			that.option.series[0].data = lineData;
			this.itemVisible = true;
		},
		exportExcel() {
			this.exportLoading = true;
			this.$XLSX("#myTable", this.tableName);
			this.exportLoading = false;
		},
		handlePrint() {
			this.$PRINT("#myReport");
		},
	},
};
</script>
<style scoped>
.printWrap {
	width: 100%;
	overflow-x: scroll;
}
</style>
