<template>
	<el-container>
		<el-main>
			<el-container>
				<el-header style="height: 400px; padding: 0">
					<el-container>
						<el-header>
							<div class="left-panel">
								<div class="left-panel">
									时间段1：
									<el-date-picker
										v-model="query.searchData"
										type="daterange"
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期"
										value-format="YYYY-MM-DD"
										@change="getList1"
									/>
									<el-button
										type="primary"
										@click="exportExcel()"
										:loading="exportLoading"
										>导出xlsx
									</el-button>
								</div>
							</div>
						</el-header>
						<el-main style="background: #ffffff">
							<div
								ref="print"
								id="myReport"
								class="printContainer"
							>
								<table
									border="1"
									width="1200"
									cellspacing="0"
									:key="timeStamp"
									id="myTable"
									class="myTable"
								>
									<thead class="myTableHead">
										<tr>
											<th>工段</th>
											<th>总产量</th>
											<th>台时产量</th>
											<th>运转时间</th>
											<th>运转率</th>
											<th>单位产品电耗</th>
											<th>单位产品综合电耗</th>
											<th>单位产品标煤耗</th>
											<th>单位产品综合能耗</th>
										</tr>
									</thead>
									<tr
										v-for="(item, index) in tableDatas1"
										:key="index"
									>
										<td>{{ item.mgroup_name }}</td>
										<td>{{ item.total_production }}</td>
										<td>{{ item.production_hour }}</td>
										<td>{{ item.run_hour }}</td>
										<td>{{ item.run_rate }}</td>
										<td>{{ item.elec_consume_unit }}</td>
										<td>{{ item.celec_consume_unit }}</td>
										<td>{{ item.coal_consume_unit }}</td>
										<td>{{ item.cen_consume_unit }}</td>
									</tr>
								</table>
							</div>
						</el-main>
					</el-container>
				</el-header>
				<el-main style="padding: 8px 0 0 0">
					<el-container>
						<el-header>
							<div class="left-panel">
								时间2：
								<el-date-picker
									v-model="query.searchData2"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="YYYY-MM-DD"
									@change="getList2"
								/>
								<el-button type="primary" @click="comparas"
									>对比
								</el-button>
							</div>
						</el-header>
						<el-main style="background: #ffffff">
							<div
								ref="print"
								id="myReport"
								class="printContainer"
							>
								<table
									border="1"
									width="1200"
									cellspacing="0"
									:key="timeStamp"
									id="myTable"
									class="myTable"
								>
									<thead class="myTableHead">
										<tr>
											<th>工段</th>
											<th>总产量</th>
											<th>台时产量</th>
											<th>运转时间</th>
											<th>运转率</th>
											<th>单位产品电耗</th>
											<th>单位产品综合电耗</th>
											<th>单位产品标煤耗</th>
											<th>单位产品综合能耗</th>
										</tr>
									</thead>
									<tr
										v-for="(item, index) in tableDatas2"
										:key="index"
									>
										<td>{{ item.mgroup_name }}</td>
										<td>{{ item.total_production }}</td>
										<td>{{ item.production_hour }}</td>
										<td>{{ item.run_hour }}</td>
										<td>{{ item.run_rate }}</td>
										<td>{{ item.elec_consume_unit }}</td>
										<td>{{ item.celec_consume_unit }}</td>
										<td>{{ item.coal_consume_unit }}</td>
										<td>{{ item.cen_consume_unit }}</td>
									</tr>
								</table>
							</div>
						</el-main>
					</el-container>
				</el-main>
			</el-container>
		</el-main>
		<el-dialog title="对比" v-model="dialogVisible" width="1224">
			<el-select
				v-model="mgroupName"
				placeholder="工段"
				@change="mgroupChange"
			>
				<el-option
					v-for="item in mgroups"
					:key="item"
					:label="item"
					:value="item"
				></el-option>
			</el-select>
			<el-select
				v-model="mgDataName"
				placeholder="指标"
				@change="mgroupChange"
			>
				<el-option
					v-for="(item, index) in mgData"
					:key="index"
					:label="item"
					:value="item"
				></el-option>
			</el-select>
			<div id="myChart" style="width: 1200px; height: 400px"></div>
		</el-dialog>
	</el-container>
</template>
<script>
import * as echarts from "echarts";
import mockData from "./mock.json";
import mockData2 from "./mock2.json";
const colors = ["#647bfe", "#91CC75"];
export default {
	data() {
		return {
			mgroupName: "",
			mgDataName:"",
			timeStamp: 0,
			mockData: mockData,
			mockData2: mockData2,
			query: {
				searchData: "",
				searchData2: "",
				page: 0,
				type: "month_st",
				mgroup: "",
			},
			tableDatas1: [],
			tableDatas2: [],
			chartData1: {},
			chartData2: {},
			mgroups: [],
			mgData: [	"总产量",
						"台时产量",
						"运转时间",
						"运转率",
						"单位产品电耗",
						"单位产品综合电耗",
						"单位产品标煤耗",
						"单位产品综合能耗",
					],
			searchData: [],
			searchData2: [],
			exportLoading: false,
			dialogVisible: false,
			options: {
				color: ["#647bfe", "#91CC75"],
				tooltip: {
					show: true,
					// trigger: "axis",
					// axisPointer: {
					// 	type: "cross",
					// },
					// confine: false,
					showContent: true,
					triggerOn: "mousemove",
				},
				grid: {
					right: "7%",
					left: "7%",
					top: "15%",
				},
				legend: {
					top: "2%",
					data: ["时段一", "时段二"],
				},
				xAxis: {
					axisTick: {
						show: false,
						length: 5,
						inside: true,
					},
					data: [
						
					],
				},
				yAxis: [
					{
						type: "value",
						name: "",
						position: "left",
						alignTicks: true,
						axisLine: {
							show: true,
							lineStyle: {
								color: colors[0],
							},
						},
						axisLabel: {
							formatter: "{value}",
						},
					},
				],
				series: [
					{
						name: "时段一",
						type: "bar",
						yAxisIndex: 0,
						data: [],
					},
					{
						name: "时段二",
						type: "bar",
						yAxisIndex: 0,
						data: [],
					},
				],
			},
			myChart: null,
		};
	},
	// mounted() {
	// 	this.useMock();
	// },
	methods: {
		// useMock() {
		// 	let that = this;
		// 	// that.tableDatas1 = that.mockData;
			
		// 	that.mockData.forEach((item) => {
		// 		that.mgroups.push(item.mgroup_name);
		// 		that.chartData1[item.mgroup_name] = [];
		// 		let arr = [];
		// 		arr[0] = item.total_production;
		// 		arr[1] = item.production_hour;
		// 		arr[2] = item.run_hour;
		// 		arr[3] = item.run_rate;
		// 		arr[4] = item.elec_consume_unit;
		// 		arr[5] = item.celec_consume_unit;
		// 		arr[6] = item.coal_consume_unit;
		// 		arr[7] = item.cccen_consume_unit;
		// 		arr[8] = item.production_elec_unit;
		// 		that.chartData1[item.mgroup_name] = arr;
		// 	});

		// 	that.tableDatas2 = that.mockData2;
		// 	that.mockData2.forEach((item) => {
		// 		that.chartData2[item.mgroup_name] = [];
		// 		let arr = [];
		// 		arr[0] = item.total_production;
		// 		arr[1] = item.production_hour;
		// 		arr[2] = item.run_hour;
		// 		arr[3] = item.run_rate;
		// 		arr[4] = item.elec_consume_unit;
		// 		arr[5] = item.celec_consume_unit;
		// 		arr[6] = item.coal_consume_unit;
		// 		arr[7] = item.cccen_consume_unit;
		// 		arr[8] = item.production_elec_unit;
		// 		that.chartData2[item.mgroup_name] = arr;
		// 	});
		// },
		getList1(val) {
			let that = this;
			if (!val || val.length == 0) {
				return;
			}
			let start_date = val[0];
			let end_date = val[1];
			this.$API.enm.analyze
				.req({
					start_date: start_date,
					end_date: end_date,
				})
				.then((res) => {
					that.tableDatas1 = res;
					res.forEach((item) => {
						that.mgroups.push(item.mgroup_name);
						that.chartData1[item.mgroup_name] = [];
						let arr = [];
						arr[0] = item.total_production;
						arr[1] = item.production_hour;
						arr[2] = item.run_hour;
						arr[3] = item.run_rate;
						arr[4] = item.elec_consume_unit;
						arr[5] = item.celec_consume_unit;
						arr[6] = item.coal_consume_unit;
						arr[7] = item.cen_consume_unit;
						that.chartData1[item.mgroup_name] = arr;
					});
				});
		},
		getList2(val) {
			let that = this;
			if (!val || val.length == 0) {
				return;
			}
			let start_date = val[0];
			let end_date = val[1];
			this.$API.enm.analyze
				.req({
					start_date: start_date,
					end_date: end_date,
				})
				.then((res) => {
					that.tableDatas2 = res;
					res.forEach((item) => {
						that.chartData2[item.mgroup_name] = [];
						let arr = [];
						arr[0] = item.total_production;
						arr[1] = item.production_hour;
						arr[2] = item.run_hour;
						arr[3] = item.run_rate;
						arr[4] = item.elec_consume_unit;
						arr[5] = item.celec_consume_unit;
						arr[6] = item.coal_consume_unit;
						arr[7] = item.cen_consume_unit;
						that.chartData2[item.mgroup_name] = arr;
					});
				});
		},
		getMgroup() {
			this.$API.mtm.mgroup.list.req({ page: 0 }).then((res) => {
				this.mgroups = res;
			});
		},
		//对比
		comparas() {
			let that = this;
			that.dialogVisible = true;
			setTimeout(() => {
				let chartDom = document.getElementById("myChart");
				that.myChart = echarts.init(chartDom);
				that.myChart.setOption(that.options);
			}, 100);
			() => {};
		},
		mgroupChange() {
			let that = this;
			let val = that.mgroupName;
			let mgData = that.mgDataName;
			console.log("---------",val, mgData)
			if(!val){
				return;
			}
			if(mgData == "总产量"){
				that.options.xAxis.data = ["总产量"]
				that.options.yAxis[0].name = "(t)"
				that.options.series[0].data = [this.chartData1[val][0]];
				that.options.series[1].data = [this.chartData2[val][0]];
			} else if(mgData == "台时产量"){
				that.options.xAxis.data = ["台时产量"]
				that.options.yAxis[0].name = "(t/h)"
				that.options.series[0].data = [this.chartData1[val][1]];
				that.options.series[1].data = [this.chartData2[val][1]];
			} else if(mgData == "运转时间"){
				that.options.xAxis.data = ["运转时间"]
				that.options.yAxis[0].name = "(h)"
				that.options.series[0].data = [this.chartData1[val][2]];
				that.options.series[1].data = [this.chartData2[val][2]];
			} else if(mgData == "运转率"){
				that.options.xAxis.data = ["运转率"]
				that.options.yAxis[0].name = "(%)"
				that.options.series[0].data = [this.chartData1[val][3]];
				that.options.series[1].data = [this.chartData2[val][3]];
			} else if(mgData == "单位产品电耗"){
				that.options.xAxis.data = ["单位产品电耗"]
				that.options.yAxis[0].name = "(kW/h)"
				that.options.series[0].data = [this.chartData1[val][4]];
				that.options.series[1].data = [this.chartData2[val][4]];
			} else if(mgData == "单位产品综合电耗"){
				that.options.xAxis.data = ["单位产品综合电耗"]
				that.options.yAxis[0].name = "(kW/h)"
				that.options.series[0].data = [this.chartData1[val][5]];
				that.options.series[1].data = [this.chartData2[val][5]];
			} else if(mgData == "单位产品标煤耗"){
				that.options.xAxis.data = ["单位产品标煤耗"]
				that.options.yAxis[0].name = "(t)"
				that.options.series[0].data = [this.chartData1[val][6]];
				that.options.series[1].data = [this.chartData2[val][6]];
			} else if(mgData == "单位产品综合能耗"){
				console.log(this.chartData1[val][7])
				that.options.xAxis.data = ["单位产品综合能耗"]
				that.options.yAxis[0].name = "(kW/h)"
				that.options.series[0].data = [this.chartData1[val][7]];
				that.options.series[1].data = [this.chartData2[val][7]];
			}
			that.myChart.clear();
			that.myChart.setOption(that.options);
		},
		handleQuery() {
			this.tableDatas1 = [];
			this.getData();
		},
		itemClick(type, item) {
			this.type = type;
			this.asynDialog = true;
		},

		handlePrint() {
			this.$PRINT("#myReport");
		},
		exportExcel() {
			this.exportLoading = true;
			this.$XLSX("#myTable", this.tableName);
			this.exportLoading = false;
		},
	},
};
</script>
<style scoped>
.printWrap {
	width: 100%;
	overflow-x: scroll;
}
</style>
