<template>
	<div class="app-container">
		<el-header>
			<div class="left-panel">
				<el-date-picker
					v-model="query.year_s"
					type="year"
					value-format="YYYY"
					format="YYYY"
					placeholder="查询年份"
					class="headerSearch"
				/>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
				<el-button
					type="primary"
					@click="exportExcel()"
					:loading="exportLoading"
					v-auth="'export_excel'"
					>导出xlsx
				</el-button>
				<el-button type="primary" @click="handlePrint">打印 </el-button>
			</div>
		</el-header>
		<el-card style="margin-top: 5px">
			<div ref="print" id="myReport" class="printContainer">
				<table
					border="1"
					cellspacing="0"
					:key="timeStamp"
					id="myTable"
					class="myTable"
					width="1033px"
				>
					<thead class="myTableHead">
						<tr>
							<th colspan="12">全厂能源统计</th>
						</tr>
						<tr>
							<th rowspan="2">月份</th>
							<th rowspan="2">工业总产值（万元）</th>
							<th rowspan="2">工业增加值（万元）</th>
							<th colspan="3">综合能源消费</th>
							<th colspan="3">单位总产值能耗</th>
							<th colspan="3">单位工业增加值能耗</th>
						</tr>
						<tr>
							<th>当期值（tce）</th>
							<th>环比增长率（%）</th>
							<th>同比增长率（%）</th>
							<th>当期值（tce/万元）</th>
							<th>环比增长率（%）</th>
							<th>同比增长率（%）</th>
							<th>当期值（tce/万元）</th>
							<th>环比增长率（%）</th>
							<th>同比增长率（%）</th>
						</tr>
					</thead>
					<tr v-for="(item, index) in tableDatas" :key="index">
						<td class="numCell" v-for="item1 in item" :key="item1">
							{{ item1 }}
						</td>
					</tr>
				</table>
			</div>
				<div class="chartWrap">
			<div class="chartTitle">本年工业总产值</div>
			<scEcharts
				height="400px"
				width="1033px"
				:option="optionMonth"
			></scEcharts>
		</div>
		</el-card>
		
	</div>
</template>
<script>
const colors = ["#647bfe", "#cbd3fe", "#91CC75", "#EE6666", "#CC00CC", "#551e13"];
let tooltip = {
	show: true,
	trigger: "axis",
	axisPointer: {
		type: "cross",
	},
	confine: false,
	showContent: true,
	triggerOn: "mousemove",
};
let grid = {
	right: "7%",
	left: "4%",
	top: "15%",
};
let toolbox = {
	right: "5%",
	feature: {
		dataView: { show: true, readOnly: false },
		saveAsImage: { show: true },
	},
};
let legend = {
	top: "2%",
	data: ["总产量", "分布电耗", "总电耗", "成本", "消耗", "进厂"],
};
let yAxis = [
	{
		type: "value",
		name: "产值 (万元)",
		position: "left",
		alignTicks: true,
		axisLine: {
			show: true,
			lineStyle: {
				color: colors[0],
			},
		},
		axisLabel: {
			formatter: "{value}",
		},
	}
];
import scEcharts from "@/components/scEcharts";
import { defineAsyncComponent } from "vue";
export default {
	components: {
		scEcharts,
		charts: defineAsyncComponent(() =>
			import("@/components/scEnm/lineChartsdialog.vue")
		),
	},
	data() {
		return {
			timeStamp: 0,
			year_s: "",
			tableDatas: [],
			optionMonth:{},
			query: {"year_s":""},
			option1: {
				color: colors,
				tooltip: tooltip,
				grid: grid,
				toolbox: toolbox,
				legend: legend,
				xAxis: {
					axisTick: {
						show: true,
						length: 5,
						inside: true,
					},
					data: [],
				},
				yAxis: yAxis,
				series: [
					{
						name: "工业总产值",
						type: "bar",
						yAxisIndex: 0,
						data: [],
						barWidth: "40",
					}
				],
			},
		};
	},
	mounted() {
		let that = this;
		var myDate = new Date();
		let year = myDate.getFullYear();
		that.query.year_s = year;
		this.getData();
		let month = (that.month = myDate.getMonth() + 1);
	},
	methods: {
		handleQuery() {
			this.tableDatas = [];
			this.getData();
		},
		getData() {
			let that = this;
			let wrapArr = [],
				wrapArr2 = [];
			let obj = {};
			obj.year_s = that.query.year_s - 1;
			obj.page = 0;
			obj.type = 'month_s';
			that.$API.enm.enstat2.req(obj).then((res) => {
				if (res.length > 0) {
					res.forEach((item) => {
						let ind = 0;
						if (item.month_s == 1){
							ind = 12;
							wrapArr[ind] = item; //上年
						}else{
							ind = item.month_s;
							wrapArr[ind] = item
						}
					});
				} else {
					wrapArr = [];
				}
				let obj2 = {};
				obj2.year_s = that.query.year_s;
				obj2.page = 0;
				obj2.type = 'month_s';
				that.$API.enm.enstat2.req(obj2).then((res2) => {
					let seriesData0 = [];
					if (res2.length > 0) {
						res2.forEach((item2) => {
							let ind2 = item2.month_s - 1;
							wrapArr2[ind2] = item2; //本年
						});
					} else {
					}
					
					for (let i = 0; i < wrapArr2.length; i++) {
						if (Boolean(wrapArr2[i])) {
							if (this.tableDatas[i]) {
							} else {
								this.tableDatas[i] = [];
							}
							let ind =  wrapArr2[i].month_s - 1;
							let time =
								wrapArr2[i].year_s + "." + wrapArr2[i].month_s;
							this.tableDatas[i][0] = time;
							this.tableDatas[i][1] =
								wrapArr2[i].industry_total_val;
							seriesData0[ind] = wrapArr2[i].industry_total_val;
							this.tableDatas[i][2] =
								wrapArr2[i].industry_add_val;
							this.tableDatas[i][3] = wrapArr2[i].en_consume; //当期值
							let tValue3 = 0,
								hValue3 = 0,
								tPercent3 = 0,
								hPercent3 = 0;
								console.log(wrapArr2[i].month_s, ".month_s")
							if (wrapArr2[i].month_s > 1 && i>0) {
								tValue3 = wrapArr2[i - 1]
									? wrapArr2[i - 1].en_consume
									: "/";
							} else {
								tValue3 = wrapArr[12]
									? wrapArr[12].en_consume
									: "/";
							}
							if (tValue3 !== "/" && tValue3 !== 0) {
								tPercent3 =
									(((wrapArr2[i].en_consume - tValue3) /
										tValue3) *
									100).toFixed(2);
							} else {
								tPercent3 = "/";
							}
							hValue3 = wrapArr[i] ? wrapArr[i].en_consume : "/";
							if (hValue3 !== "/" && hValue3 !== 0) {
								hPercent3 =
									((wrapArr2[i].en_consume - hValue3) /
										hValue3) *
									100;
							} else {
								hPercent3 = "/";
							}
							this.tableDatas[i][4] = tPercent3; //环比
							this.tableDatas[i][5] = hPercent3; //同比
							this.tableDatas[i][6] = wrapArr2[i].en_consume_unit; //总产值当前
							let tValue6 = 0,
								hValue6 = 0,
								tPercent6 = 0,
								hPercent6 = 0;
							if (wrapArr2[i].month_s > 1  && i > 0) {
								tValue6 = wrapArr2[i - 1]
									? wrapArr2[i - 1].en_consume_unit
									: "/";
							} else {
								tValue6 = wrapArr[12]
									? wrapArr[12].en_consume_unit
									: "/";
							}	
							if (tValue6 !== "/" && tValue6 !== 0 && wrapArr2[i].en_consume_unit !== 0) {
								tPercent6 =
									(((wrapArr2[i].en_consume_unit - tValue6) /
										tValue6) *
									100).toFixed(2);
							} else {
								tPercent6 = "/";
							}
							if (isNaN(tPercent6)){
								tPercent6 = 0
							}
							hValue6 = wrapArr[i]
								? wrapArr[i].en_consume_unit
								: "/";
							if (hValue6 !== "/" && hValue6 !== 0) {
								hPercent6 =
									(((wrapArr2[i].en_consume_unit - hValue6) /
										hValue6) * 100).toFixed(2);
							} else {
								hPercent6 = "/";
							}
							if(isNaN(hPercent6)){
								hPercent6 = 0
							}
							this.tableDatas[i][7] = tPercent6; //总产值环比
							this.tableDatas[i][8] = hPercent6; //总产值同比
							this.tableDatas[i][9] =
								wrapArr2[i].en_add_consume_unit;
							let tValue9 = 0,
								hValue9 = 0,
								tPercent9 = 0,
								hPercent9 = 0;
							if (wrapArr2[i].month_s > 1  && i > 0) {
								tValue9 = wrapArr2[i - 1]
									? wrapArr2[i - 1].en_add_consume_unit
									: "/";
							} else {
								tValue9 = wrapArr[12]
									? wrapArr[12].en_add_consume_unit
									: "/";
							};
							if (tValue9 !== "/" && tValue9 !== 0) {
								tPercent9 =
									(((wrapArr2[i].en_add_consume_unit -
										tValue9) /
										tValue9) *
									100).toFixed(2);
							} else {
								tPercent9 = "/";
							};
							if (isNaN(tPercent9)) {
							    tPercent9=0
							};
							hValue9 = wrapArr[i]
								? wrapArr[i].en_add_consume_unit
								: "/";
							if (hValue9 !== "/" && hValue9 !== 0) {
								hPercent9 =
									(((wrapArr2[i].en_add_consume_unit -
										hValue9) /
										hValue9) *
									100).toFixed(2);
							} else {
								hPercent9 = "/";
							};
							this.tableDatas[i][10] = tPercent9;
							this.tableDatas[i][11] = hPercent9;
						} else {
						}
					}
					let options = { ...that.option1 };
					options.series[0].data = seriesData0;
					let monthXAxis = [];
					for (let i = 1; i <= 12; i++) {
						let item = i + "月";
						monthXAxis.push(item);
					}
					options.xAxis.data = monthXAxis;
					that.optionMonth = options;
				});
			});
		},
		exportExcel() {
			this.exportLoading = true;
			this.$XLSX("#myTable", this.tableName);
			this.exportLoading = false;
		},
		handlePrint() {
			this.$PRINT("#myReport");
		},
	},
};
</script>
<style></style>
