<template>
	<el-dialog
		v-model="visible"
		:fullscreen="isFullscreen"
		v-bind="$attrs"
		:show-close="showClose"
	>
		<template #header>
			<slot name="header">
				<span class="el-dialog__title">{{ title }}</span>
			</slot>
			<div class="sc-dialog__headerbtn">
				<button
					v-if="showFullscreen"
					aria-label="fullscreen"
					type="button"
					@click="setFullscreen"
				>
					<el-icon v-if="isFullscreen" class="el-dialog__close"
						><el-icon-bottom-left
					/></el-icon>
					<el-icon v-else class="el-dialog__close"
						><el-icon-full-screen
					/></el-icon>
				</button>
				<button
					v-if="showClose"
					aria-label="close"
					type="button"
					@click="closeDialog"
				>
					<el-icon class="el-dialog__close"></el-icon>
				</button>
			</div>
		</template>
		<div v-loading="loading">
			<div class="searchHead" v-if="type == 'hour_s'">
				<el-date-picker
					v-model="query.start_time"
					type="datetime"
					placeholder="选择时间"
					format="YYYY-MM-DD HH"
					value-format="YYYY-MM-DD HH"
					:picker-options="pickerOptions"
				/>
				<span class="middleText">至</span>
				<el-date-picker
					v-model="query.end_time"
					type="datetime"
					format="YYYY-MM-DD HH"
					value-format="YYYY-MM-DD HH"
					start-placeholder="结束日期"
					:picker-options="pickerOptions"
				/>
				<el-button type="primary" class="searchBtnx" @click="dataSearch"
					>查询</el-button
				>
			</div>
			<div class="searchHead" v-if="type == 'day_s'">
				<el-date-picker
					v-model="query.start_time"
					type="date"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					start-placeholder="开始日期"
					:picker-options="pickerOptions"
				/>
				<el-date-picker
					v-model="query.end_time"
					type="date"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					start-placeholder="结束日期"
					:picker-options="pickerOptions"
				/>
				<el-button type="primary" class="searchBtnx" @click="dataSearch"
					>查询</el-button
				>
			</div>
			<div class="searchHead" v-if="type == 'month_s'">
				<el-date-picker
					v-model="query.start_time"
					type="month"
					format="YYYY-MM"
					value-format="YYYY-MM"
					start-placeholder="开始月份"
					:picker-options="pickerOptions"
				/>
				<el-date-picker
					v-model="query.end_time"
					type="month"
					format="YYYY-MM"
					value-format="YYYY-MM"
					start-placeholder="结束月份"
					:picker-options="pickerOptions"
				/>
				<el-button type="primary" class="searchBtnx" @click="dataSearch"
					>查询</el-button
				>
			</div>
			<div class="searchHead" v-if="type == 'year_s'">
				<el-date-picker
					v-model="query.start_time"
					type="year"
					format="YYYY"
					value-format="YYYY"
					start-placeholder="开始日期"
					:picker-options="pickerOptions"
				/>
				<el-date-picker
					v-model="query.end_time"
					type="year"
					format="YYYY"
					value-format="YYYY"
					start-placeholder="结束日期"
					:picker-options="pickerOptions"
				/>
				<el-button type="primary" class="searchBtnx" @click="dataSearch"
					>查询</el-button
				>
			</div>
			<div id="myChart" style="width: 100%; height: 400px"></div>
		</div>
		<template #footer>
			<slot name="footer"></slot>
		</template>
	</el-dialog>
</template>

<script>
import * as echarts from "echarts";
export default {
	props: {
		cate: { type: String, default: "" },
		type: { type: String, default: "hours_s" },
		title: { type: String, default: "" },
		mgroup: { type: String, default: "" },
		mpoint: { type: String, default: "" },
		apiObj: { type: Object, default: () => {} },
		showClose: { type: Boolean, default: true },
		echartType: { type: String, default: "bar" },
		modelValue: { type: Boolean, default: false },
		showFullscreen: { type: Boolean, default: true },
		loading: { type: Boolean, default: false },
	},
	data() {
		return {
			visible: false,
			isFullscreen: false,
			query: {
				time: "",
			},
			code: "",
			cateName: "",
			myChart: null,
			isMpoint:false,
			dictData: [],
			option: {
				title: {
					text: "",
					x: "center",
				},
				grid: {
					// 图表距离边框的距离，可用百分比和数字（px）配置
					top: "20%",
					left: "3%",
					right: "10%",
					bottom: "5%",
					containLabel: true,
				},
				legend: {
					// 图例配置选项
					orient: "horizontal", //图例布局方式：水平 'horizontal' 、垂直 'vertical'
					x: "right", // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
					y: "10", // 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
					data: [],
				},
				xAxis: {
					type: "category",
					data: [
						"1",
						"2",
						"3",
						"4",
						"5",
						"6",
						"7",
						"8",
						"9",
						"10",
						"11",
						"12",
					],
					name: "时间",
					// x轴名称样式
					nameTextStyle: {
						fontWeight: 600,
						fontSize: 14,
					},
					axisLine: {
						lineStyle: {
							// X 轴颜色配置
							color: "#3366CC",
						},
					},
					axisLabel: {
						rotate: 45, // X 轴标签文字旋转角度
						interval: 0, //设置 X 轴数据间隔几个显示一个，为0表示都显示
					},
					boundaryGap: false, //数据从 Y 轴起始
				},
				yAxis: {
					type: "value",
					// name: '对象值',
					// y轴名称样式
					nameTextStyle: {
						fontWeight: 500,
						fontSize: 14,
					},
					//min:0, // 配置 Y 轴刻度最小值
					//max:4000,  // 配置 Y 轴刻度最大值
					//splitNumber:7,  // 配置 Y 轴数值间隔
					axisLine: {
						lineStyle: {
							// Y 轴颜色配置
							color: "#3366CC",
						},
					},
				},
				tooltip: {
					show: true, // 是否显示
					trigger: "axis", // axis   item   none
					axisPointer: {
						// 坐标轴指示器配置项。
						type: "cross", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  '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: function(value) {  // 点的大小跟随数值增加而变大
						//     return value / 150;
						// },
						symbolSize: 8, //设置折线上圆点大小
						symbol: "circle",
						smooth: 0.5, // 设置折线弧度
						itemStyle: {
							normal: {
								label: {
									show: true, // 在折线拐点上显示数据
								},
								lineStyle: {
									width: 1, // 设置虚线宽度
									type: "dotted", // 虚线'dotted' 实线'solid'
									color: "#3366CC", // 折线颜色设置为0，即只显示点，不显示折线
								},
							},
						},
					},
				],
			},
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
			},
		};
	},
	watch: {
		modelValue() {
			this.visible = this.modelValue;
			if (this.visible) {
				this.isFullscreen = false;
			}
		},
	},
	mounted() {
		let that = this;
		var myDate = new Date();
		let year = (that.year = myDate.getFullYear());
		let month = (that.month = myDate.getMonth() + 1);
		let day = (that.days = myDate.getDate());
		let start_time = "",
			end_time = "";
		if (this.type == "hour_s") {
			start_time = year + "-" + month + "-" + day + " 00";
			end_time = year + "-" + month + "-" + day + " 23";
		} else if (this.type == "day_s") {
			start_time = year + "-" + month + "-01";
			end_time = year + "-" + month + "-15";
		} else if (this.type == "month_s") {
			start_time = year + "-01";
			end_time = year + "-12";
		} else if (this.type == "year_s") {
			start_time = year - 1;
			end_time = year;
		}
		this.query.start_time = start_time;
		this.query.end_time = end_time;
		this.visible = this.modelValue;
		this.option.legend.data.push(that.cate);
		this.option.series[0].name = that.cate;
		console.log(that.mgroup)
		if (that.mgroup) {
			if (that.cate == "总产量（t）" || that.cate == "出厂水泥合计（t）" || that.cate == "电石渣干粉总产量（t）") {
				that.cateName = "total_production";
			} else if (
				that.cate == "单位产品分布电耗（kW·h/t）" ||
				that.cate == "生料分布电耗（kW·h/t）" ||
				that.cate == "煤磨分布电耗（kW·h/t）" ||
				that.cate == "电石渣干粉分布电耗（kW·h/t）"
			) {
				that.cateName = "elec_consume_unit";
			} else if (that.cate == "台时产量（t/h）") {
				that.cateName = "production_hour";
			} else if (that.cate == "运转时间（h）") {
				that.cateName = "run_hour";
			} else if (that.cate == "运转率（%）") {
				that.cateName = "run_rate";
			} else if (
				that.cate == "单位产品成本（元/吨）" ||
				that.cate == "电石渣成本（元/吨）" ||
				that.cate == "电石渣成本（元/吨）" ||
				that.cate == "生料成本（元/吨）"
			) {
				that.cateName = "production_cost_unit";
			} else if (that.cate == "单位产品综合电耗（kW·h/t）") {
				that.cateName = "celec_consume_unit";
			} else if (that.cate == "单位产品标煤耗（kgce/t）") {
				that.cateName = "coal_consume_unit";
			} else if (that.cate == "单位产品综合能耗（kgce/t）") {
				that.cateName = "cen_consume_unit";
			} else if (that.cate == "发电功率（kW·h）") {
				that.cateName = "production_hour";
			} else if (that.cate == "吨熟料发电量（kW·h/t）") {
				that.cateName = "production_elec_unit";
			} else if (that.cate == "总电耗（kW·h）"||
					that.cate =="总电量（kW·h）" ||
					that.cate == "电石渣工段总电量（kW·h）"
				) {
				that.cateName = "elec_consume";
			}else if (that.cate == "消耗") {
				that.cateName = "amount_consume";
			}else if (that.cate == "进厂") {
				that.cateName = "amount_consume";
			}else if (that.cate == "氨水消耗量(t)") {
				that.cateName = "ammonia_consume";
			}else if (that.cate == "单位氨水消耗量(kg/t)") {
				that.cateName = "ammonia_consume_unit";
			}
			else if (that.cate == "P.O42.5R 散装（t）") {
				that.cateName = "C90002056";
				that.isMpoint = true;
			}else if (that.cate == "P.O42.5R 袋装（t）") {
				that.cateName = "C90002055";
				that.isMpoint = true;
			}else if (that.cate == "P.O42.5 袋装（t）") {
				that.cateName = "x水泥+P.O42.5 袋装";
				that.isMpoint = true;
			}else if (that.cate == "P.O42.5 散装（t）") {
				that.cateName = "C90001124";
				that.isMpoint = true;
			}else if (that.cate == "复合硅酸盐水泥;42.5R;袋装水泥(t)") {
				that.cateName = "C90001612";
				that.isMpoint = true;
			}else if (that.cate == "复合硅酸盐水泥;42.5R;散装水泥(t)") {
				that.cateName = "C90001609";
				that.isMpoint = true;
			}else if (that.cate == "普通硅酸盐水泥;52.5;散装水泥(t)") {
				that.cateName = "C90001125";
				that.isMpoint = true;
			}else if (that.cate == "散装水泥(t)") {
				that.cateName = "szsn_hj";
				that.isMpoint = true;
			}else if (that.cate == "袋装水泥(t)") {
				that.cateName = "dzsn_hj";
				that.isMpoint = true;
			}else if (that.cate == "出厂水泥合计（t）") {
				that.cateName = "ccsn_hj";
				that.isMpoint = true;
			}else if (that.cate == "熟料（t）") {
				that.cateName = "x通用水泥熟料";
				that.isMpoint = true;
			}
		} else {
			that.cateName = "elec_consume_unit";
		}
		this.$nextTick((res) => {
			console.log('that.isMpoint',that.isMpoint);
			this.getChartsData();
			this.getDict();
			
		});
	},
	methods: {
		getDict() {
			let that = this;
			let params = {};
			params.page = 0;
			params.type__code = "goal_cate";
			this.$API.system.dict.list.req(params).then((res) => {
				that.dictData = res;
				res.forEach((item) => {
					if (item.name == that.cate) {
						that.code = item.code;
					}
				});
			});
		},
		getChartsData() {
			let that = this;
			let params = {};
			params.page = 0;
			params.type = this.type;
			let start_time = "",
				end_time = "",
				type = that.type,
				unit = "时";
			if (this.type == "hour_s") {
				type = "hour";
				start_time = this.query.start_time + ":00:00";
				end_time = this.query.end_time + ":00:00";
			} else if (this.type == "day_s") {
				unit = "日";
				start_time = this.query.start_time + " 00:00:00";
				end_time = this.query.end_time + " 00:00:00";
			} else if (this.type == "month_s") {
				unit = "月";
				start_time = this.query.start_time + "-01 00:00:00";
				end_time = this.query.end_time + "-01 00:00:00";
			} else if (this.type == "year_s") {
				unit = "年";
				start_time = that.query.start_time + "-01-01 00:00:00";
				end_time = that.query.end_time + "-01-01 00:00:00";
			}
			params.start_time = start_time;
			params.end_time = end_time;
			if (that.mgroup) {
				params.mgroup = that.mgroup;
			} else {
				params.mpoint = that.mpoint;
			}
			console.log(params);
			console.log(that.cateName);
			if(that.isMpoint){
				params.mpoint__code = that.cateName;
				that.$API.enm.mpointstat.list.req(params).then((res1) => {
					let xAxisData = [],
						lineData = [];
					if(res1.length>0){
						res1.reverse();
						res1.forEach((item) => {
						    let ind = 0;
							if (type == "hour_s") {
								ind = item[type];
								xAxisData[ind] = item[type] + unit;
								lineData[ind] = item.val;
							} else {
								lineData.push(item.val);
								let xAxis = item[type] + unit;
								xAxisData.push(xAxis);
							}
						})
						let chartDom = document.getElementById("myChart");
						that.myChart = echarts.init(chartDom);
						that.option.xAxis.data = xAxisData;
						that.option.series[0].data = lineData;
						that.myChart.setOption(that.option);
						console.log(that.option);
					}
				})
			}else{
				that.apiObj.req(params).then((res) => {
					let xAxisData = [],
						lineData = [];
					res.forEach((item) => {
						let ind = 0;
						let values = 0;
						if(that.cateName === "amount_consume"){
							if(that.cate == "消耗"){
								values = item.imaterial_data_dict.湿电石渣消耗.amount_consume;
							}else{
								values = item.imaterial_data_dict.湿电石渣进厂.amount_consume;
							}
						}else if(that.cateName ==="ammonia_consume_unit"){
							values = (item.ammonia_consume*1000/item.total_production).toFixed(2);
						}else{
							values = Number(item[that.cateName]);
						}
						if (type == "hour_s") {
							ind = item[type];
							xAxisData[ind] = item[type] + unit;
							lineData[ind] = values;
						} else {
							lineData.push(values);
							let xAxis = item[type] + unit;
							xAxisData.push(xAxis);
						}
					});
					let chartDom = document.getElementById("myChart");
					that.myChart = echarts.init(chartDom);
					that.option.xAxis.data = xAxisData;
					that.option.series[0].data = lineData;
					that.myChart.setOption(that.option);
				});
			}
		},
		getChartsData2(){

		},
		dataSearch() {
			this.getChartsData();
		},
		//关闭
		closeDialog() {
			this.visible = false;
		},
		//最大化
		setFullscreen() {
			this.isFullscreen = !this.isFullscreen;
		},
	},
};
</script>

<style scoped>
.searchHead {
	display: flex;
}
.middleText {
	height: 32px;
	line-height: 32px;
	margin: 0 5px;
	display: inline-block;
}
.searchBtnx {
	margin-left: 5px;
}
.sc-dialog__headerbtn {
	position: absolute;
	top: var(--el-dialog-padding-primary);
	right: var(--el-dialog-padding-primary);
}
.sc-dialog__headerbtn button {
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	font-size: var(--el-message-close-size, 16px);
	margin-left: 15px;
	color: var(--el-color-info);
}
.sc-dialog__headerbtn button:hover .el-dialog__close {
	color: var(--el-color-primary);
}
.sc-dialog:deep(.el-dialog).is-fullscreen {
	display: flex;
	flex-direction: column;
	top: 0px !important;
	left: 0px !important;
}
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__header {
}
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__body {
	flex: 1;
	overflow: auto;
}
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {
	padding-bottom: 10px;
	border-top: 1px solid var(--el-border-color-base);
}
</style>
