<template>
	<view class="target_water_fertilizer_PH">
		<!-- 目标水肥PH -->
		<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false"
			:title="echartName" title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>

		<view class="navbar">
			<image src="../../static/PH_bg.png" mode=""></image>
		</view>

		<view class="content">
			<view class="number">
				{{ echartName == '风向' ? getWindDirection(valuePH) : valuePH!='暂无数据'?(valuePH + unit):valuePH}}
			</view>
			<view class="data_analysis">
				<image src="../../static/data_analysis.png" mode=""></image>
				<text>数据分析</text>
			</view>
			<view class="echart">
				<view class="title">
					<image src="../../static/icon_ph.png" mode=""></image>
					<text>{{echartName }}</text>
				</view>
				<view id="echart_p">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true"
						background="none" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头部导航背景
				background: {
					backgroundColor: 'transparent',
				},

				equipmentId: '',

				chartData: {},
				opts: {
					color: ["#24B383"],
					padding: [15, 35, 0, 15],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					legend: {},
					tooltipShow: true,
					xAxis: {
						disableGrid: true,
						// scrollShow: true,
						labelCount: 4,
						// scrollAlign: 'left',
						// scrollColor: '#24B383',
						// scrollBackgroundColor: '#DFE5E4',
						// itemCount: '5',
						boundaryGap: "justify",
						// format: "",

					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						showTitle: true,
						data: [{
							title: '',
							// min: 0,
							// max: '',
							titleOffsetY: -5,
						}]
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},

				categoriesList: [],
				valuePH: '',
				valuePHList: [],
				newValuePHList: [],
				unit: '',
				equipmentName:'',

				titleName: '',
				echartName: '',
				flag:''
			};
		},
		onReady() {
			// this.getEchartsData()
			// this.getServerData();

		},
		onLoad(option) {
			console.log(option);
			if (option.id&&option.id!='undefined') {
				this.equipmentId = option.id
			}
			if (option.data&&option.data!='undefined') {
				this.valuePH = option.data
			}else{
				this.valuePH='暂无数据'
			}
			if (option.name&&option.name!='undefined') {
				this.echartName = option.name
			}else{
				this.echartName='暂无数据'
			}
			if (option.unit&&option.unit!='undefined') {
				this.unit = option.unit
				this.opts.yAxis.data[0].title = option.unit
			}else{
				this.unit=''
			}
			if(option.equipmentName&&option.equipmentName!='undefined'){
				this.equipmentName = option.equipmentName
			}else{
				this.equipmentName=''
			}
			if(option.flag){
				this.flag = option.flag
			}

			this.titleName = this.getStatus(option.equipmentNumber, option.targetValue)
			this.getEchartsData()
		},
		mounted() {
			
		},
		methods: {
			getServerData() {

				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.categoriesList,
						series: [{
							name: (this.flag != 1 ? this.titleName : '') + this.echartName,
							data: this.newValuePHList
						}, ]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
getServerData1() {

				//模拟从服务器获取数据时的延时
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [],
						series: [{
							name: '暂无数据',
							data: []
						}, ]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
			},
			// 获取折线图数据
			getEchartsData() {
				if(!this.equipmentId||this.equipmentId=='undefined'){
					this.getServerData1();
					return 
				}
				if(this.flag == 1){
					
					this.$http({
						url:this.api.equip_chartdata + '?equipmentId=' + this.equipmentId,
						method: 'get'
					}).then(res=>{
						// console.log(res,'气象站折线图数据');
						res.data.forEach((i, index) => {
							this.categoriesList.push(i.time);
							this.valuePHList.push(i.value)
						})
						this.getServerData();
											
						this.categoriesList = this.categoriesList.map(item => {
							return item.split(' ')[1]
						})
						for(let k=0;k<this.valuePHList.length;k++){
							// console.log(this.valuePHList[k]);
							this.valuePHList[k].forEach((item,index)=>{
								if(item.name == this.echartName){
									this.newValuePHList.push(item.value==undefined?'':item.value)
								}
							})
						}
					})
				}else if(this.flag == 2){
					this.$http({
						url: this.api.chart_fidata+ '?equipmentId=' + this.equipmentId,
						method: 'POST'
					}).then(res => {
						// console.log(res, '获取折线图数据');
						res.data.forEach((i, index) => {
							this.categoriesList.push(i.time);
							this.valuePHList.push(i.value)
						})
						this.getServerData();
					
						this.categoriesList = this.categoriesList.map(item => {
							return item.split(' ')[1]
						})
						// console.log(this.categoriesList,'this.categoriesList');
						// console.log(this.valuePHList,'this.valuePHList');
						for(let k=0;k<this.valuePHList.length;k++){
							// console.log(this.valuePHList[k]);
							this.valuePHList[k].forEach((item,index)=>{
								if(item.name == this.titleName + this.echartName){
									this.newValuePHList.push(item.value==undefined?'':item.value)
								}
							})
						}
						// console.log(this.newValuePHList, '121212212121211111111');
					})
					
				}else{
					this.$http({
						url: (this.equipmentName == 1 ? this.api.chart_fsdata : this.api.getcontrol_fsdata) + '?equipmentId=' + this.equipmentId,
						method: 'POST'
					}).then(res => {
						// console.log(res, '获取折线图数据');
						res.data.forEach((i, index) => {
							this.categoriesList.push(i.time);
							this.valuePHList.push(i.value)
						})
						this.getServerData();
					
						this.categoriesList = this.categoriesList.map(item => {
							return item.split(' ')[1]
						})
						// console.log(this.categoriesList,'this.categoriesList');
						// console.log(this.valuePHList,'this.valuePHList');
						for(let k=0;k<this.valuePHList.length;k++){
							// console.log(this.valuePHList[k]);
							this.valuePHList[k].forEach((item,index)=>{
								if(item.name == this.titleName + this.echartName){
									this.newValuePHList.push(item.value==undefined?'':item.value)
								}
							})
						}
						// console.log(this.newValuePHList, '121212212121211111111');
					})
				}
				
			},
			
			// 风向判定
			getWindDirection(number){
				if(number=='暂无数据'){
					return '暂无数据'
				}
				let num = Number(number)
				if(num <= 67 && num >= 22 ){
					return '东北'
				}else if(num > 67 && num < 112){
					return '东'
				}else if(num >= 112 && num <= 157){
					return '东南'
				}else if(num > 157 && num < 202){
					return '南'
				}else if(num >= 202 && num <= 247){
					return '西南'
				}else if(num > 247 && num < 292){
					return '西'
				}else if(num >= 292 && num <= 337){
					return '西北'
				}else if(num < 22){
					return '北'
				}else if(num > 337){
					return '北'
				}
			},

			// 判断是否是平均或者目标,或者是1#
			getStatus(equipmentNumber, targetValue) {
				// if (targetValue == 1) {
				// 	return '目标'
				// } else if (targetValue == 0 && equipmentNumber == 0) {
				// 	return '1#平均'
				// } else if (targetValue == 0 && equipmentNumber == 15) {
				// 	return '2#平均'
				// } else if (targetValue == 0 && equipmentNumber != 0 && equipmentNumber != 15) {
				// 	return equipmentNumber + '#'
				// }
				
				if(targetValue == 1){
					if(equipmentNumber ==0){
						return '目标'
					}else{
						return '目标'+ equipmentNumber +'#'
					}
				}else {
					if(equipmentNumber ==0){
						return '1#平均'
					}else if(equipmentNumber == 15){
						return '2#平均'
					}else {
					    return equipmentNumber +'#'
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.target_water_fertilizer_PH {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		position: relative;
		background-color: #F5F6FA;

		.navbar {
			width: 100%;
			height: 100%;

			>image {
				width: 750rpx;
				height: 440rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.content {
			position: absolute;
			z-index: 2;
			box-sizing: border-box;
			padding: 0 30rpx 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.number {
				font-size: 100rpx;
				font-family: Nexa Bold;
				font-weight: 400;
				color: #FFFFFF;
			}

			.data_analysis {
				width: 100%;
				text-align: center;
				margin-bottom: 59rpx;

				>image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}

				>text {
					font-size: 28rpx;
					font-family: PingFang-SC-Bold;
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			.echart {
				width: 690rpx;
				height: 1060rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding-top: 30rpx;

				.title {
					width: 200rpx;
					height: 44rpx;
					background: #EFFCF7;
					border: 2px solid rgba(58, 187, 144, 0.25);
					border-radius: 22rpx;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;

					>image {
						width: 36rpx;
						height: 10rpx;
						margin-right: 10rpx;
					}

					>text {
						font-size: 20rpx;
						font-family: PingFang-SC-Bold;
						font-weight: bold;
						color: #37BA8E;
					}
				}

				#echart_p {
					width: 100%;
					height: calc(100% - 74rpx);
					box-sizing: border-box;
					padding: 0 0rpx;
				}
			}
		}
	}
</style>