<template>
	<view class="pack-warp">

				<view class="all-con-item-box" style="margin-top: 0!important;">
					<Section :title="VolNumber">
					</Section>
					<view class="chart-box">
						<zero-loading v-if="volLoading" position="absolute"></zero-loading>
						<charts v-else :id="'pcsChart'" :options="vol_option"></charts>
					</view>
				</view>

				<view class="all-con-item-box">
					<Section :title="TemNumber">
					</Section>
					<view class="chart-box">
						<zero-loading v-if="temLoading" position="absolute"></zero-loading>
						<charts v-else :id="'pcsChart'" :options="tem_option"></charts>
					</view>
				</view>

				<view class="all-con-item-box">
					<Section :title="$t('homePage.device.volRatio')">
					</Section>
					<view class="chart-box">
					<zero-loading v-if="temLoading" position="absolute"></zero-loading>
						<charts v-else :id="'pcsChart'" :options="val_option"></charts>
					</view>
				</view>

				<view class="all-con-item-box">
					<Section :title="$t('homePage.device.runData')" />
					<zero-loading v-if="temLoading" position="absolute"></zero-loading>
					<template v-else>
						<view class="group-box border-bottom padding-top-30 padding-bottom-30">
							<view class="other-value">
								<view class="top-value">
									<view class="title">
										{{ $t('homePage.device.maxVol') }}
									</view>
									<view class="value">
										{{panelData.csingleMaxVolData | isNull}}V
									</view>
								</view>
								<view class="bottom-value">
									{{ $t('homePage.device.cellPostion') }}：{{panelData.csingleMaxVolPosition | isNull}}
								</view>
							</view>
						</view>
						
						<view class="group-box border-bottom padding-top-30 padding-bottom-30">
							<view class="other-value">
								<view class="top-value">
									<view class="title">
										{{ $t('homePage.device.minVol') }}
									</view>
									<view class="value">
										{{panelData.csingleMinVolData | isNull}}V
									</view>
								</view>
								<view class="bottom-value">
									{{ $t('homePage.device.cellPostion') }}：{{panelData.csingleMinVolPosition | isNull}}
								</view>
							</view>
						</view>
						
						<view class="group-box border-bottom padding-top-30 padding-bottom-30">
							<view class="other-value">
								<view class="top-value">
									<view class="title">
										{{ $t('homePage.device.maxTem') }}
									</view>
									<view class="value">
										{{panelData.csingleMaxTemData | isNull}}℃
									</view>
								</view>
								<view class="bottom-value">
									{{ $t('homePage.device.cellPostion') }}：{{panelData.csingleMaxTemPosition | isNull}}
								</view>
							</view>
						</view>
						
						<view class="group-box  padding-top-30 ">
							<view class="other-value">
								<view class="top-value">
									<view class="title">
										{{ $t('homePage.device.minTem') }}
									</view>
									<view class="value">
										{{panelData.csingleMinTemData | isNull}}℃
									</view>
								</view>
								<view class="bottom-value">
									{{ $t('homePage.device.cellPostion') }}：{{panelData.csingleMinTemPosition | isNull}}
								</view>
							</view>
						</view>
						
						
					</template>
		

				</view>



	</view>
</template>

<script>
	import Section from '@/components/section/index.vue'
	import charts from "@/components/charts/index";
	export default {
		data() {
			return {
				loading: false,
				stationId: null,
				srcId: null,
				vol_option: {},
				tem_option: {},
				val_option: {},
				panelData: {},
				volLoading:false,
				temLoading:false,
				valLoading:false,
				runLoading:false,
				VolNumber:this.$t('homePage.device.cellVolChart'),
				TemNumber:this.$t('homePage.device.cellTemChart')
			}
		},
		components: {
			Section,
			charts
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation
			}
		},
		watch: {
			currentStation: {
				handler(val) {
					this.stationId = val.id;
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			getData(srcId) {
				this.srcId = srcId
				this.loading = true
				const api = [
					this.getTemVol(),
					this.getTemVolData()
				]
				Promise.all(api).then(result => {
					this.err = result
					this.loading = false
				})

			},
			getTemVolData() {
				this.volLoading = true
				const self = this
				return new Promise((resolve, reject) => {
					self.$u.api.deviceList
						.GetTemperatureVoltageData({
							stationId: this.stationId,
							srcId: this.srcId
						})
						.then((res) => {
							self.initVolTem(res.data);
							resolve(res);
						})
						.finally(() => {
							this.volLoading = false
						})
				});
			},
			getTemVol() {
				this.temLoading = true
				const self = this
				return new Promise((resolve, reject) => {
					self.$u.api.deviceList
						.GetTemVolData({
							stationId: this.stationId,
							srcId: this.srcId
						})
						.then((res) => {
							self.panelData = res.data?.packData
							self.initVolChart(res.data?.voltageList);
							this.VolNumber = res.data.voltageList.length  ?  this.VolNumber + `(${res.data.voltageList.length})` : this.VolNumber
							
							self.initTemChart(res.data?.temperatureList)
							this.TemNumber = res.data.temperatureList.length  ? this.TemNumber + `(${res.data.temperatureList.length})` : this.TemNumber
							resolve(res);
						})
						.finally((err) => {
							this.temLoading = false
						})
				});
			},
			initTemChart(val) {

				const yValue = []
				const xAxis = []
				val.forEach((el) => {
					xAxis.push(el.xvalue)
					yValue.push(el.yvalue)
				})

				this.tem_option = {
					animationDuration: 500,
					animationEasing: "cubicInOut",
					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];
						},
					},
					grid: {
						top: '15%',
						left: '5%',
						right: '3%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: xAxis,
						splitLine: {
							show: false
						},
						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: {
						axisLine: {
							show: false
						},	
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#A3A3A3'
						},
						nameTextStyle: {
							color: '#A3A3A3'
						},
						type: 'value',
						name: '(℃)'
					},
					dataZoom: [{
							type: 'inside',
							start: 0,
							end: 100
						},
						{
							start: 0,
							height: 20,
							bottom: 10,
							end: 100
						}
					],
					series: {
						barWidth: 15,
						type: 'bar',
						itemStyle: {
							color: '#009458',
							emphasis: {
								color: '#faba11' // hover拐点颜色定义
							}
						},
						data: yValue
					},
				}
			},
			initVolChart(val) {

				const yValue = []
				const xAxis = []
				val.forEach((el) => {
					xAxis.push(el.xvalue)
					yValue.push(el.yvalue)
				})

				this.vol_option = {
					animationDuration: 500,
					animationEasing: "cubicInOut",
					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];
						},
					},
					grid: {
						top: '15%',
						left: '5%',
						right: '3%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: {

						type: 'category',
						data: xAxis,
						splitLine: {
							show: false
						},
						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: {
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#A3A3A3'
						},
						nameTextStyle: {
							color: '#A3A3A3'
						},
						type: 'value',
						name: '(V)'
					},
					dataZoom: [{
							type: 'inside',
							start: 0,
							end: 100
						},
						{
							start: 0,
							height: 20,
							bottom: 10,
							end: 100
						}
					],
					series: {
						barWidth: 12,
						type: 'bar',
						itemStyle: {
							color: '#009458',
							emphasis: {
								color: '#faba11' // hover拐点颜色定义
							}
						},
						data: yValue
					},
				}
			},
			initVolTem(val) {
				const categories = []
				const categories2 = []
				const data = []
				const data2 = []
				let _that = this

				if (val) {
					val.voltageList.forEach(i => {
						categories2.push(i.xvalue)
						data2.push(i.yvalue)
					})
					val.temperatureList.forEach(i => {
						categories.push(i.xvalue)
						data.push(i.yvalue)
					})
				}
				this.val_option = {
					animationDuration: 500,
					animationEasing: "cubicInOut",
					tooltip: {
						trigger: "axis",
						axisPointer: {},
						textStyle: {
							textShadowBlur: 10, // 重点
							textShadowColor: 'transparent', // 重点
						},
						confine: true,
						formatter: function (params) {
						    var relNameV = ''
							var relValV = ''
							var relNameT = ''
							var relValT = ''
						    relNameV +=  params[0].name  + 'V'
							relValV +=  params[0].value + _that.$t('homePage.device.num')
						    relNameT +=  params[1].name  + '℃'
							relValT +=  params[1].value + _that.$t('homePage.device.num')
						    return `${params[0].marker}${_that.$t('homePage.device.tem')}(${relNameV})`  + '\n' + relValV  + '\n' + `${ params[1].marker}${_that.$t('homePage.device.vol')}(${relNameT})` + '\n' + relValT
						  },
						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];
						},
					},
					grid: {
						top: '15%',
						left: '5%',
						right: '3%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: [{
							type: 'category',
							boundaryGap: true,
							data: categories2,
							axisLabel: {
								color: '#A3A3A3',
								formatter: '{value} V'
							}
						},
						{
							type: 'category',
							boundaryGap: true,
							data: categories,
							axisLabel: {
								formatter: '{value} ℃',
								color: '#A3A3A3',
								margin: 2
							}
						}
					],
					yAxis: [

						{
							type: 'value',
							name: this.$t('homePage.device.volUnit'),
							axisLabel: {
								color: '#A3A3A3'
							},
							nameTextStyle: {
								color: '#A3A3A3',
								padding: [0, 0, 0, 40]
							},
							min: 0,
							
						},
						{
							type: 'value',
							name: this.$t('homePage.device.temUnit'),
							boundaryGap: [0.2, 0.2],
							min: 0,
							axisLabel: {
								color: '#A3A3A3'
							},
							nameTextStyle: {
								color: '#A3A3A3',
								padding: [0, 80, 0, 0]
							},
							
						}
					],
					dataZoom: [{
							type: 'inside',
							start: 0,
							end: 100
						},
						{
							start: 0,
							height: 20,
							bottom: 10,
							end: 100
						}
					],
					series: [{
							name: this.$t('homePage.device.vol'),
							barWidth: '15',
							type: 'bar',
							itemStyle: {
								color: '#009458',
								emphasis: {
									color: '#fbbb11'
								}
							},
							data: data2
						},
						{
							itemStyle: {
								color: '#1F78B4',
								emphasis: {
									color: '#fbbb11'
								}
							},
							name: this.$t('homePage.device.tem'),
							type: 'line',
							xAxisIndex: 1,
							yAxisIndex: 1,
							data: data
						}
					]
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.pack-warp {
		height: 100% !important;
		background-color: #f5f5f5;

		.all-con-item-box {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
			width: 710rpx;
			border: 16rpx;
			position: relative;
			margin-top: 30rpx;
			box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.08);

			.group-box {
				display: flex;
				flex-direction: row;
				align-items: center;


				.other-value {
					display: flex;
					flex-direction: column;
					width: 100%;

					.top-value {
						display: flex;
						justify-content: space-between;
						position: relative;

						.title {
							font-size: 24rpx;
							color: rgba(40, 40, 40, 1);
						}

						.zhexian-icon {
							position: absolute;
							right: 70%;

							image {
								width: 28rpx;
								height: 28rpx;
							}
						}

						.value {
							font-size: 32rpx;
							color: rgba(0, 156, 119, 1);
							font-weight: 400;
						}
					}

					.bottom-value {
						width: 100%;
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						color: rgba(153, 153, 153, 1);
					}
				}
			}


			.chart-box {
				width: 650rpx;
				height: 500rpx;
				margin-top: 20rpx;
				position: relative;
			}

			.border-bottom {
				border-bottom: 4rpx dotted #e5e5e5;
			}

			.border-right {
				border-right: 4rpx dotted #e5e5e5;
			}

			.padding-top-30 {
				padding-top: 30rpx;
			}

			.padding-bottom-30 {
				padding-bottom: 30rpx;
			}

		}

	}
</style>