<template>
	<u-popup :show="open" mode="center" @close="close" closeable>
		<view class="jz-info" style="width: 95vw;">
			<view style="font-size: 16px;font-weight: 600;margin-bottom: 10px;">{{title}}</view>
			<view style="width: 100%;">
				<u-tabs :list="tabs" @click="tabsClick"></u-tabs>
			</view>
			<view style="height: 50vh;">
				<canvas id="chartRef" style="zoom: 1 ;height: 100%;width: 100%;" canvas-id="mychart"
					:canvas-type="canvasType" :data="dataList" :change:data="echarts.dataHandler" />
			</view>
		</view>
	</u-popup>
</template>

<script>
	import plugin from "@/plugins"
	import {
		timestampFormat
	} from '@/utils/common.js'
	import * as station from "@/api/iot/data_station.js";
	import * as valve from "@/api/iot/data_valve.js";

	export default {
		name: "ADC",
		components: {},
		props: {},
		data() {
			return {
				title: "设备曲线",
				open: false,
				wo: null,
				tabs: [{
						name: '当天',
						day: 0,
					},
					{
						name: '近两天',
						day: -1,
					},
					{
						name: '近三天',
						day: -2,
					},
				],
				item: null,
				type: null,
				dataList: null,
				canvasType: '2d',
			}
		},
		created() {},
		mounted() {},
		methods: {
			/**
			 * 显示方法
			 * @param type 1基站 2阀门
			 * @param row
			 * @param data 
			 */
			async show(row) {
				console.error("row：", row);
				this.open = true;
				this.type = row._type;
				this.title = `设备曲线【${row._showName}】`;
				this.item = row;
				this.getList(0);
			},
			tabsClick(e) {
				this.getList(e.day);
			},
			getList(day) {
				uni.showLoading({
					mask: true,
					icon: 'none'
				})
				if (this.type == "station") {
					let queryParams = {
						pageNum: 1,
						pageSize: 9999,
						deviceId: this.item.deviceId,
						deviceCode: this.item.deviceCode,
						reportType: "device_thing",
						params: {
							beginTime: this.getNowFormatDate(day),
							endTime: this.getNowFormatDate(1),
						}
					}
					station.list(queryParams).then(res => {
						uni.hideLoading()
						this.dataList = {
							type: this.type,
							data: res.rows || []
						};
					}).catch(error => {
						uni.hideLoading()
						plugin.modal.showToast(error)
					})
				} else if (this.type == "valve") {
					let queryParams = {
						pageNum: 1,
						pageSize: 9999,
						landId: this.item.landId,
						wogId: this.item.wogId,
						woId: this.item.woId,
						reportType: "device_thing",
						params: {
							beginTime: this.getNowFormatDate(day),
							endTime: this.getNowFormatDate(1),
						}
					}
					valve.list(queryParams).then(res => {
						uni.hideLoading()
						this.dataList = {
							type: this.type,
							data: res.rows || []
						};
					}).catch(error => {
						uni.hideLoading()
						plugin.modal.showToast(error)
					})
				}

			},
			close() {
				this.dataList = null;
				this.open = false;
				this.$emit('close');
			},
			getNowFormatDate(_day = 0) {
				let date = new Date();
				date.setDate(date.getDate() + _day);

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (month < 10) {
					month = "0" + month;
				}
				let d = date.getDate();
				if (d < 10) {
					d = "0" + d;
				}
				return year + "-" + month + "-" + d + " 00:00:00";
			},
		}
	}
</script>
<script module="echarts" lang="renderjs">
	import * as echartsJS from 'echarts';

	export default {
		data() {
			return {
				_echarts: null,
			}
		},
		created() {},
		mounted() {},
		methods: {
			dataHandler(e) {
				if (!e) {
					this.dispose();
					return;
				}
				this.setEchart(e);
			},
			setEchart(e) {
				if (this._echarts) {
					this._echarts.clear();
				}
				// 初始化 ECharts 实例
				let _echarts = echartsJS.init(document.getElementById("chartRef"));
				let xAxis = [];
				let adcObj = {
					battery: [],
					temperature: [],
					humidity: [],
					motoAdc: [],
					pressure1: [],
					pressure2: [],
					pressure3: [],
					pressure4: [],
				};
				e.data.forEach(item => {
					xAxis.push(item.reportTime);
					adcObj.battery.push(item.battery || 0);
					adcObj.temperature.push(item.temperature || 0);
					if (e.type == "valve") {
						adcObj.humidity.push(item.humidity || 0);
						adcObj.motoAdc.push(item.motoAdc ? (item.motoAdc / 1000).toFixed(3) : 0);
						if (item.pressure1 != null) {
							adcObj.pressure1.push(item.pressure1);
						}
						if (item.pressure2 != null) {
							adcObj.pressure2.push(item.pressure2);
						}
						if (item.pressure3 != null) {
							adcObj.pressure3.push(item.pressure3);
						}
						if (item.pressure4 != null) {
							adcObj.pressure4.push(item.pressure4);
						}
					}
				});
				let series = [];
				let legendName = [];
				for (const key in adcObj) {
					if (adcObj[key].length) {
						let name = "";
						switch (key) {
							case "battery":
								name = "电量(%)";
								break;
							case "temperature":
								name = "温度(℃)";
								break;
							case "humidity":
								name = "湿度(%)";
								break;
							case "motoAdc":
								name = "最大电流(A)";
								break;
							case "pressure1":
								name = "压力1";
								break;
							case "pressure2":
								name = "压力2";
								break;
							case "pressure3":
								name = "压力3";
								break;
							case "pressure4":
								name = "压力4";
								break;
						}
						legendName.push(name);
						series.push({
							name: name,
							type: "line",
							stack: key,
							data: adcObj[key],
							smooth: true
						});
					}
				}
				let option = {
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "shadow"
						},
						backgroundColor: "rgba(21, 45, 85, 0.6)",
						textStyle: {
							color: "#fff"
						}
					},
					legend: {
						data: legendName,
						textStyle: {
							color: "#333"
						}
					},
					grid: {
						left: "3%",
						right: "4%",
						bottom: "3%",
						containLabel: true
					},
					xAxis: {
						type: "category",
						boundaryGap: false,
						data: xAxis,
						axisTick: {
							show: true
						},
						axisLine: {
							lineStyle: {
								color: "red"
							}
						},
						axisLabel: {
							color: "#333"
						}
					},
					yAxis: {
						type: "value",
						axisLabel: {
							color: "#333",
							fontSize: 14
						},
						splitLine: {
							lineStyle: {
								color: "#666",
								type: "dashed"
							}
						},
						axisLine: {
							lineStyle: {
								color: "red"
							}
						}
					},
					series
				};

				_echarts.setOption(option);
				this._echarts = _echarts;
			},
			dispose() {
				if (this._echarts) {
					this._echarts.dispose();
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.jz-info {
		padding: 15px;

		view {
			display: flex;

			uni-text {
				line-height: 48rpx;
			}

			uni-text:nth-child(odd) {
				width: 100px;
				margin-right: 10px;
				color: #666;
				background: #f3f3f3;
			}

			uni-text:nth-child(even) {
				width: calc(100% - 100px);
				color: #000;
				word-wrap: break-word;
				/* 支持旧版浏览器 */
				overflow-wrap: break-word;
				/* 推荐 */
				white-space: normal;
				/* 可选：如果需要连字符 */
				hyphens: auto;
			}

		}
	}
</style>