<template>
	<view class="warp">
		<zero-loading v-if="chartLoading" position="absolute"></zero-loading>
		<charts v-else :id="'pcChart'" :options="curve_option"></charts>
	</view>
</template>
<script>
	import charts from "@/components/charts/index";
	import {
		chartYIndex,
		beforeDayTime
	} from '@/common/common.js'
	export default {
		components: {
			charts
		},
		data() {
			return {
				curve_option: {},
				stationId: null,
				name_data: [],
				color: ["#2D8CF0", "#19BE6B","#FF9900","#E46CBB"],
				colorList: [
					[{
							offset: 0.0,
							color: "rgba(45, 140, 240, 0.1)",
						},
						{
							offset: 1,
							color: "rgba(25, 190, 107, 0.2)",
						},
					],
					[{
							offset: 0.0,
							color: "rgba(255, 153, 0, 0.1)",
						},
						{
							offset: 1,
							color: "rgba(228, 108,187, 0.2)",
						},
					],
				],
				serviceList: [],
				time: [],
				chartLoading: false,
				nameArr: []
			}
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},

		},
		onShow() {
			console.log(123);
			this.time = beforeDayTime()
			this.GetRealtimeCurve()
		},
		watch: {
			currentStation: {
				handler(val) {
					if (val && val.id) {
						this.stationId = val.id
						this.time = beforeDayTime()
						this.GetRealtimeCurve()
					}
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			getData(){
				this.time = beforeDayTime()
				this.GetRealtimeCurve()
			},
			async selectChartApi(val) {
				if (val && val.length) {
					this.chartLoading = false
					this.initCurveChart(val);
				} else {
					this.chartLoading = true
					//运行曲线
					let self = this;
					return new Promise((resolve, reject) => {
						self.$u.api.homePageData
							.GetRealtimeCurve({
								beginTime: this.time[0],
								endTime: this.time[1],
								stationId: this.stationId,
							})
							.then((res) => {
								this.chartLoading = false
								this.initCurveChart(res.data);
								resolve(res);
							})
							.catch((err) => {
								reject("错误:运行曲线");
							});
					});

				}
			},
			async GetRealtimeCurve() {
				this.chartLoading = true
				//运行曲线
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicRealTimeCurve({
							beginTime: this.time[0],
							endTime: this.time[1],
							pageLocation: 'runChart',
							stationId: this.stationId,
						})
						.then((res) => {
							this.selectChartApi(res.data);
							resolve(res);
						})
						.catch((err) => {
							reject("错误:运行曲线");
						});
				});
			},
			initCurveChart(val) {
				let x_data = []
				let valueArr = []
				this.nameArr = []
				if (val && val.length > 0) {
					val.forEach((item, index) => {
						valueArr.push(item.list)
						this.nameArr.push(item.name)
					})
					val[0].list.forEach((el) => {
						x_data.push(el.date)
					})
					const valueArr2 = []
					valueArr.forEach((item, index) => {
						const arr = []
						item.forEach((item2, index2) => {
							arr.push(item2.digital)
							valueArr2[index] = arr
						})
					})
					this.serviceList = []
					valueArr2.forEach((item, index) => {
						this.serviceList.push({
							data: item,
							type: 'line',
							name: this.nameArr[index],
							showSymbol: false,
							yAxisIndex: chartYIndex(val[index]),
							color: this.color[index],
							lineStyle: {
								color: this.color[index]
							},
							areaStyle: {
								color: new this.$echarts.graphic.LinearGradient(
									0,
									1,
									0,
									0,
									this.colorList[index]
								),
							},
						})
					})
	
				} else {
					this.serviceList = [];
					this.nameArr = [];
					x_data = []
				}
				this.curve_option = {
					color: ["#2D8CF0", "#19BE6B","#FF9900","#E46CBB"],
					grid: {
						left: "17%",
						right: "13%",
						top: "15%",
						bottom: "25%",
					},

					tooltip: {
						trigger: "axis",
						textStyle: {
							textShadowBlur: 10, // 重点
							textShadowColor: 'transparent', // 重点
						},
						axisPointer: {},
						confine: true,
						position: function(point, params, dom, rect, size) {
							// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
							// 提示框位置
							var x = 0; // x坐标位置
							var y = 0; // y坐标位置

							// 当前鼠标位置
							var pointX = point[0];
							var pointY = point[1];

							// 外层div大小
							// var viewWidth = size.viewSize[0];
							// var viewHeight = size.viewSize[1];

							// 提示框大小
							var boxWidth = size.contentSize[0];
							var boxHeight = size.contentSize[1];

							// boxWidth > pointX 说明鼠标左边放不下提示框
							if (boxWidth > pointX) {
								x = 5; // 自己定个x坐标值，以防出屏
								y -= 15; // 防止点被覆盖住，可根据情况自行调节
							} else {
								// 左边放的下
								x = pointX - boxWidth - 15;
							}

							// boxHeight > pointY 说明鼠标上边放不下提示框
							if (boxHeight + 20 > pointY) {
								y = pointY + 15;
							} else if (boxHeight > pointY) {
								y = 5;
							} else {
								// 上边放得下
								y += pointY - boxHeight;
							}
							return [x, y];
						},
					},
					legend: {
						type: 'scroll',
						orient: 'horizontal',
						icon: "rect",
						bottom: 0,
						left: 0,
						right: 0,
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							fontSize: 10,
						},
					},
					xAxis: {
						data: x_data,
						axisLine: {
							show: true,
							lineStyle: {
								color: "#A3A3A3",
							},
						},
						axisLabel: {
							show: true,
							color: "#A3A3A3",
							formatter: function(params) {
								let newParamsName = "";
								const paramsNameNumber = params.length; // 文字总长度
								const provideNumber = 11; //一行显示几个字
								const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (let p = 0; p < rowNumber; p++) {
										const start = p * provideNumber;
										const end = start + provideNumber;
										const tempStr =
											p === rowNumber - 1 ?
											params.substring(start, paramsNameNumber) :
											params.substring(start, end) + "\n";
										newParamsName += tempStr;
									}
								} else {
									newParamsName = params;
								}
								return newParamsName;
							},
						},
					},
					yAxis: [{
							name: this.$t('homePage.home.power'),
							nameTextStyle: {
								fontSize: 12,
								padding: [0, 0, 0, 20],
							},
							type: "value",
							axisLine: {
								show: false,
								lineStyle: {
									color: "#A3A3A3",
								},
							},
							axisLabel: {
								show: true,
								color: "#A3A3A3",
							},

							min: function(value) {
								return Math.floor(
									(Math.abs(value.min) < value.max ?
										-value.max * 1.05 :
										value.min * 1.05
									).toFixed(2)
								);
							},
							max: function(value) {
								return Math.ceil(
									(Math.abs(value.min) < value.max ?
										value.max * 1.05 :
										-value.min * 1.05
									).toFixed(2)
								);
							},
						},
						{
							name: "SOC(%)",
							nameTextStyle: {
								fontSize: 12,
								padding: [0, 0, 0, 30],
							},
							type: "value",
							max: 100,
							min: -100,
							ming: 0,
							axisLine: {
								show: false,
								lineStyle: {
									color: "#A3A3A3",
								},
							},
							axisLabel: {
								show: true,
								color: "#A3A3A3",
							},

							axisTick: {
								show: false,
							},
						},
					],
					series: this.serviceList,
				};
			}
		},
	}
</script>
<style lang="scss" scoped>
	.warp {
		width: 650rpx;
		height: 500rpx;
		margin-top: 20rpx;
		position: relative;
	}
</style>