<template>
	<view class="meteorological-page">
		<view class="content-box">
			<!-- <view class="screen-box">筛选条件</view> -->
			<view class="secreen-section">
				<u-dropdown ref="uDropdown" @open="openDropDown">
					<u-dropdown-item v-model="addressValue" title="基地" 
					:options="deviceAddressList" @change="change"></u-dropdown-item>
					<u-dropdown-item v-model="device_id" title="检测点" 
					:options="options2" @change="change2"></u-dropdown-item>
					<u-dropdown-item title="日期">
						<view class="slot-content" style="background-color: #FFFFFF;">
							<view class="select-date u-border-bottom" >
								<view class="name" @click="calendarShow = true">
									<u-icon name="calendar" color="#333" size="32"></u-icon>
									<text style="margin-left: 6rpx;">选择日期：</text>
								</view>
								<view class="time_box">
									<view class="tip_txt" v-if="!start_date_c"
									@click="calendarShow = true">开始日期-结束日期</view>
									<view class="tile_val" v-else
									@click="calendarShow = true">{{start_date_c}} ~ {{end_date_c}}</view>
									<view class="delete_btn" v-if="start_date_c" @click="deleteDateFn()">
										<u-icon name="close-circle" color="#333" size="34"></u-icon>
									</view>
								</view>
								
							</view>
							<u-button type="primary" @click="selectedDateConform()">确定</u-button>
						</view>
					</u-dropdown-item>
				</u-dropdown>
				<view class="quick_times">
					<u-subsection :list="sublist" :animation="false" 
					:current="currentIndex" @change="subChange1"></u-subsection>
				</view>
			</view>
			<!-- 空气温度 -->
			<view class="chart_section">
			  <view class="top_box u-border-bottom">
				  <view class="tit">空气温度<text class="unit">℃</text></view>
				  <view class="name">{{addressName}}</view>
			  </view>
			  <view class="cart_box">
				  <qiun-data-charts 
					type="area"
					:opts="optsc"
					:chartData="chart_air_temperature"
				  />
			  </view>
			</view>
			  <!-- 空气湿度 -->
			  <view class="chart_section">
				<view class="top_box u-border-bottom">
				  <view class="tit">空气湿度<text class="unit">%RH</text></view>
				  <view class="name">{{addressName}}</view>
				</view>
				<view class="cart_box">
				  <qiun-data-charts
					type="area"
					:opts="opts"
					:chartData="chart_air_humidity"
				  />
				</view>
			  </view>
			  <!-- 光照强度 -->
			  <view class="chart_section">
				<view class="top_box u-border-bottom">
				  <view class="tit">光照强度<text class="unit">Lux</text></view>
				  <view class="name">{{addressName}}</view>
				</view>
				<view class="cart_box">
				  <qiun-data-charts
					type="mix"
					:opts="opts2"
					:chartData="chart_illumination"
				  />
				</view>
			  </view>
			 <!-- 降雨量 -->
			 <view class="chart_section">
			   <view class="top_box u-border-bottom">
				  <view class="tit">降雨量<text class="unit">mm</text></view>
				  <view class="name">{{addressName}}</view>
			   </view>
			   <view class="cart_box">
				  <qiun-data-charts
					type="mix"
					:opts="opts2"
					:chartData="chart_rainfall"
				  />
				 </view>
			  </view>
			  <!-- 风速 -->
			  <view class="chart_section">
				<view class="top_box u-border-bottom">
				  <view class="tit">风速<text class="unit">m/s</text></view>
				  <view class="name">{{addressName}}</view>
				</view>
				<view class="cart_box">
				  <qiun-data-charts
					type="area"
					:opts="opts3"
					:chartData="chart_wind_speed"
				  />
				</view>
			  </view>
			 <!-- 风向 -->
			<view class="chart_section">
			  <view class="top_box u-border-bottom">
				  <view class="tit">风向<text class="unit"></text></view>
				  <view class="name">{{addressName}}</view>
			  </view>
			  <view class="cart_box">	
				 <qiun-data-charts
					type="mix"
					:opts="opts4"
					:chartData="chart_wind_direction"
				 />
				</view>
			 </view>
			 <!-- 噪音 -->
			 <view class="chart_section">
			   <view class="top_box u-border-bottom">
				  <view class="tit">噪音<text class="unit">db</text></view>
				  <view class="name">{{addressName}}</view>
			   </view>
			   <view class="cart_box">
				 <qiun-data-charts
					type="area"
					:opts="opts3"
					:chartData="chart_noise"
				 />
				 </view>
			 </view>
			 <!-- pm10 -->
			 <view class="chart_section">
			   <view class="top_box u-border-bottom">
				  <view class="tit">PM10<text class="unit">ug/m3</text></view>
				  <view class="name">{{addressName}}</view>
			   </view>
			   <view class="cart_box">
				 <qiun-data-charts
					type="area"
					:opts="opts3"
					:chartData="chart_pm10"
				 />
				 </view>
			 </view>
			 <!-- pm25 -->
			 <view class="chart_section">
			   <view class="top_box u-border-bottom">
				  <view class="tit">PM25<text class="unit">ug/m3</text></view>
				  <view class="name">{{addressName}}</view>
			   </view>
			   <view class="cart_box">
				 <qiun-data-charts
					type="area"
					:opts="opts3"
					:chartData="chart_pm25"
				 />
				 </view>
			 </view>
			 <!-- co2 -->
			 <view class="chart_section">
			   <view class="top_box u-border-bottom">
				  <view class="tit">CO2<text class="unit">ppm</text></view>
				  <view class="name">{{addressName}}</view>
			   </view>
			   <view class="cart_box">
				 <qiun-data-charts
					type="area"
					:opts="opts3"
					:chartData="chart_co2"
				 />
				 </view>
			 </view>
		</view>
		<u-calendar v-model="calendarShow" :mode="'range'" @change="calendarChange"></u-calendar>
	</view>
</template>

<script>
	import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
	import {showLoading,getLastWeekRange,getLastMonthRange} from '@/com/utils.js'
	export default {
		components: { QiunDataCharts },
		data() {
			return {
				optsc:{},
				opts: {
					dataLabel:false,//显示数据
					padding:[10,40,25,25],
					xAxis: {
					  disableGrid: true,
					  labelCount:5
					},
					yAxis: {
					  gridType: "dash",
					  dashLength: 5,
					  data:[
						  {
							  min:0
						  }
					  ]
					},
					extra: {
					  area: {
						type: "curve",
						opacity: 0.9,
						addLine: true,
						gradient: true,
					  },
					}
				},
				
				opts2: {
					dataLabel:false,//显示数据
					padding:[10,40,25,25],
					xAxis: {
					  disableGrid: true,
					  labelCount:5
					},
					yAxis: {
					  data: [
						{
						  position: "left",
						  title: "",
						  textAlign: "left",
						}
					  ]
					},
				},
				opts3: {
					dataLabel:false,//显示数据
					padding:[10,40,25,25],
					xAxis: {
					  disableGrid: true,
					  labelCount:5
					},
					yAxis: {
					  data: [
						{
						  position: "left",
						  title: "",
						  textAlign: "left",
						}
					  ]
					},
					extra: {
					  area: {
						type: "curve",
						opacity: 0.9,
						addLine: true,
						gradient: true,
					  },
					}
				},
				opts4: {//风向的配置
					dataLabel:false,//显示数据
					padding:[10,40,25,25],
					xAxis: {
					  disableGrid: true,
					  labelCount:5
					},
					yAxis: {
					  splitNumber:7,
					  data: [
						{
						  max:7,
						  min:0,
						  position: "left",
						  title: "",
						  textAlign: "left",
						  format:"windDirection"
						}
					  ]
					},
				},
				air_temperature:{},
				chart_air_temperature:{},
				air_humidity:{},//空气湿度
				chart_air_humidity:{},
				illumination:{},//光照强度
				chart_illumination:{},
				chart_rainfall:{},//降雨量
				chart_wind_speed:{},//风速
				chart_wind_direction:{},//风向
				chart_noise:{},//噪音
				chart_pm10:{},//pm10
				chart_pm25:{},//pm25
				chart_co2:{},//co2
				//筛选
				q_start_time:'',
				q_end_time:'',
				deviceAddressList:[],//筛选设备地区列表
				addressName:'',
				addressValue:'',
				device_id:'11',//检测点 - options2中的设备id
				options2:[],
				calendarShow:false,//选择日期
				start_date_c:'',
				end_date_c:'',
				sublist:[
					{
						name: '今天'
					},
					 {
					 	name: '近一周'
					 }, 
					 {
					 	name: '近一月'
					 }, 
				],
				currentIndex:0,
			};
		},
		onLoad(){
			this.queryDeviceBasics();
			this.optsc = JSON.parse(JSON.stringify(this.opts));
		},
		onReady() {
		    
	    },
		methods:{
			
			//地区
			change(val){
				console.log(val);
				let narray = this.deviceAddressList.filter(item=>{
					return item.value==val;
				})
				console.log(narray);
				this.addressName = narray[0].name;
				this.$refs.uDropdown.highlight();
				this.queryAddressDevicePoints(val);
			},
			
			//地区下设备id
			change2(val){
				this.$refs.uDropdown.highlight();
				this.queryMonitoringData();
			},
			//日期范围
			calendarChange(e){
				console.log(e,'日期范围')
				this.start_date_c = e.startDate;
				this.end_date_c = e.endDate;
			},
			selectedDateConform(){
				this.q_start_time = this.start_date_c;
				this.q_end_time = this.end_date_c;
				this.queryMonitoringData();
				this.$refs.uDropdown.close();
			},
			//删除选择的时间
			deleteDateFn(){
				this.start_date_c = '';
				this.end_date_c = '';
			},
			//时间筛选
			openDropDown(index){
				console.log(index,'openDropDown');
				if(index==2){//日期
					this.start_date_c = this.q_start_time;
					this.end_date_c = this.q_end_time;
				}
			},
			//快捷时间
			subChange1(index){
				console.log(index)
				this.currentIndex = index;
				if(index==1){
					
					let lastWeekDate = getLastWeekRange();
					let startDate = this.$u.timeFormat(lastWeekDate.startDate, 'yyyy-mm-dd');
					let endDate = this.$u.timeFormat(lastWeekDate.endDate, 'yyyy-mm-dd');
					console.log(startDate,endDate);
					this.q_start_time = startDate;
					this.q_end_time = endDate;
				}else if(index==2){
					let lastMonthRange = getLastMonthRange();
					let startDate = this.$u.timeFormat(lastMonthRange.startDate, 'yyyy-mm-dd');
					let endDate = this.$u.timeFormat(lastMonthRange.endDate, 'yyyy-mm-dd');
					console.log(startDate,endDate);
					this.q_start_time = startDate;
					this.q_end_time = endDate;
				}else{
					this.q_start_time = '';
					this.q_end_time = '';
				}
				this.queryMonitoringData();
			},
			//查询地址筛选
			queryDeviceBasics(){
				let params = {
					device_type:4,
					_t: new Date().getTime()
				}
				this.$http.get('/api/agricultural-device-basic',{params:params}).then(({data})=>{
					console.log(data);
					if(data.code==200){
						let _data = data.data;
						for(let item of _data){
							item['label'] = item.name;
							item['value'] = item.id;
						}
						this.deviceAddressList = _data;
						this.addressValue = _data[0].id;
						this.addressName = _data[0].name;
						this.queryAddressDevicePoints(this.addressValue);
					}
				}).catch(()=>{
					
				})
			},
			//查询地址下的设备监控点
			queryAddressDevicePoints(id){
				let params = {
					device_type:4,
					agricultural_basic:id,
					_t: new Date().getTime()
				}
				this.$http.get(`/api/agricultural-device-point/${id}`,{params:params}).then(({data})=>{
					console.log(data);
					if(data.code==200){
						let _data = data.data;
						let options = [];
						for(let k in _data){
							let item = {};
							item['label'] = _data[k];
							item['value'] = k;
							options.push(item);
						}
						this.options2 = options;
						this.device_id = options[0].value;
						console.log(this.options2,this.device_id,'this.options2')
						this.queryMonitoringData();
					}
				}).catch(()=>{
					
				})
			},
			//查询监测数据
			queryMonitoringData(){
				let params = {
					device_id:this.device_id,
					start_time:this.q_start_time,
					end_time:this.q_end_time,
					_t: new Date().getTime()
				}
				this.$http.get('/api/monitoring-data',{params:params}).then(({data})=>{
					if(data.code==200){
						let info = data.data;
						let chartInfo = {};
						
						
						for(let fk in info){
							let _item = {
								categories: [],
								data:[]
							}
							for(let k in info[fk]){
								let timestamp = new Date(k).getTime();
								// let time1 = k.split(/\s+/);
								if(params.start_time!=params.end_time){
									let time1 = this.$u.timeFormat(timestamp, 'yyyy-mm-dd');
									_item.categories.push(time1);
								}else{
									let time2 = this.$u.timeFormat(timestamp, 'hh:ss');
									_item.categories.push(time2);
								}
								_item.data.push(info[fk][k]);
							}
							chartInfo[fk] = _item;
						}
						console.log(chartInfo,'chartDatas--')
						let labcount = 5;
						if(params.start_time!=params.end_time){//不是当天
							labcount = 3;
						}else{
							let len = chartInfo.air_temperature.categories.length-1;
							labcount = 5;
							let aw = len>10?len%6:len%5;
							if(aw==3||aw==0||aw==1){
								labcount = 4;
							}else if(aw==2){
								labcount = 3;
							}else{
								labcount=5;
							}
						}
						this.optsc.xAxis.labelCount = labcount;
						this.opts.xAxis.labelCount = labcount;
						this.opts2.xAxis.labelCount = labcount;
						this.opts3.xAxis.labelCount = labcount;
						this.opts4.xAxis.labelCount = labcount;
						
						//start 空气温度 air_temperature
						this.air_temperature = chartInfo.air_temperature;
						let res = {
						    categories: this.air_temperature.categories,
						    series: [
						      {
								name:'空气温度',
								legendShape:'circle',
						        data: this.air_temperature.data,
								
						      }
						    ]
						};
						let min_temperature = 0;
						for(let val of this.air_temperature.data){
							if(val<0){
								min_temperature = val;
							}
						}
						if(min_temperature<0){
							this.optsc.yAxis.data = [];
						}
						
						this.chart_air_temperature = JSON.parse(JSON.stringify(res));
						//end 空气温度 air_temperature
						//start 空气湿度
						this.air_humidity = chartInfo.air_humidity;
						let res2 = {
						    categories: this.air_humidity.categories,
						    series: [
						      {
								name:'空气湿度',
								legendShape:'circle',
						        data: this.air_humidity.data
						      }
						    ]
						};
						this.chart_air_humidity = JSON.parse(JSON.stringify(res2));
						//end 空气湿度
						//start 光照强度illumination
						this.illumination = chartInfo.illumination;
						let res3 = {
						    categories: this.illumination.categories,
						    series: [
						      {
							    index: 0,
							    type: "point",
								pointShape:'circle',
								legendShape:'circle',
								name:'光照强度',
						        data: this.illumination.data,
						      }
						    ]
						};
						this.chart_illumination = JSON.parse(JSON.stringify(res3));
						//end 光照强度
						//start 降雨量 rainfall
						// this.air_temperature = chartInfo.rainfall;
						let res4 = {
						    categories: chartInfo.rainfall.categories,
						    series: [
						      {
							    index: 0,
							    type: "point",
								pointShape:'square',//triangle
								legendShape:'square',
								name:'降雨量',
						        data: chartInfo.rainfall.data,
						      }
						    ]
						};
						this.chart_rainfall = JSON.parse(JSON.stringify(res4));
						//start 风速wind_speed
						let res5 = {
						    categories: chartInfo.wind_speed.categories,
						    series: [
						      {
								name:'风速',
								legendShape:'circle',
						        data: chartInfo.wind_speed.data,
						      }
						    ]
						};
						this.chart_wind_speed = JSON.parse(JSON.stringify(res5));
						//end 风速wind_speed
						//start 风向wind_direction
						let res6 = {
						    categories: chartInfo.wind_direction.categories,
						    series: [
						      {
								index: 0,
								type: "point",
								pointShape:'triangle',
								legendShape:'triangle',
								name:'风向',
						        data: chartInfo.wind_direction.data,
								format:"windDirection"
						      }
						    ]
						};
						this.chart_wind_direction = JSON.parse(JSON.stringify(res6));
						//end 风向wind_direction
						//start 噪音 noise
						let res7 = {
						    categories: chartInfo.noise.categories,
						    series: [
						      {
								name:'噪音',
								legendShape:'circle',
						        data: chartInfo.noise.data,
						      }
						    ]
						};
						this.chart_noise = JSON.parse(JSON.stringify(res7));
						//end 噪音 noise
						//start pm10 pm10
						let res8 = {
						    categories: chartInfo.pm10.categories,
						    series: [
						      {
								name:'pm10',
								legendShape:'circle',
						        data: chartInfo.pm10.data,
						      }
						    ]
						};
						this.chart_pm10 = JSON.parse(JSON.stringify(res8));
						//end pm10
						//start pm25
						let res9 = {
						    categories: chartInfo.pm25.categories,
						    series: [
						      {
								name:'pm25',
								legendShape:'circle',
						        data: chartInfo.pm25.data,
						      }
						    ]
						};
						this.chart_pm25 = JSON.parse(JSON.stringify(res9));
						//end pm25
						//start co2
						let res10 = {
						    categories: chartInfo.co2.categories,
						    series: [
						      {
								name:'co2',
								legendShape:'circle',
						        data: chartInfo.co2.data,
						      }
						    ]
						};
						this.chart_co2 = JSON.parse(JSON.stringify(res10));
						//end co2
					}
				}).catch(()=>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-box{
	padding-bottom: 60rpx;
}
.screen-box{
	// height: 96rpx;
	// display: flex;
	// align-items: center;
	// padding: 0 24rpx;
}


.chart_section{
	.top_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		.tit{
			font-size: 28rpx;
			font-weight: bold;
			.unit{
				font-weight: 500;
				margin-left: 16rpx;
				font-size: 24rpx;
			}
		}
	}
}
</style>
