<template>
	<view class="warning-page">
		<view class="content-box">
			<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">
					<view class="tab-section">
						<view class="tab-item" :class="currentIndex==index?'active':''" 
						v-for="(item,index) in sublist"
						@click="subChange1(index)" :key="index" >
							<view class="name">{{item.name}}</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="warning-section">
				<view class="top_box">
					<view class="tit">预警数据统计</view>
					<view class="set_warning">
						<u-button v-auth="['endpoint.water.setting','endpoint.water.setting_edit']" class="set_btn" @click="setWarnInfo()" size="mini">设置</u-button>
					</view>
				</view>
				<view class="mb-20rpx">
					<u-line></u-line>
				</view>
				<view class="cont-box">
					<view class="warning-item" @click="warningClickFn(1)">
						<view class="name">Ⅰ级预警</view>
						<view class="val">{{deviceWarning[1]?deviceWarning[1]:0}}<text class="unit">个</text></view>
					</view>
					<view class="warning-item" @click="warningClickFn(2)">
						<view class="name">Ⅱ级预警</view>
						<view class="val">{{deviceWarning[2]?deviceWarning[2]:0}}<text class="unit">个</text></view>
					</view>
					<view class="warning-item" @click="warningClickFn(3)">
						<view class="name">Ⅲ级预警</view>
						<view class="val">{{deviceWarning[3]?deviceWarning[3]:0}}<text class="unit">个</text></view>
					</view>
					<view class="warning-item" @click="warningClickFn(4)">
						<view class="name">Ⅳ级预警</view>
						<view class="val">{{deviceWarning[4]?deviceWarning[4]:0}}<text class="unit">个</text></view>
					</view>
				</view>
			</view>
			<!-- 氯 -->
			<view class="chart_section">
			  <view class="top_box">
				  <view class="tit">氯<text class="unit">mg/L</text></view>
				  <view class="name">{{addressName}}</view>
			  </view>
				<view class="mb-20rpx">
					<u-line></u-line>
				</view>
			  <view class="cart_box">
				  <qiun-data-charts 
					type="area"
					:opts="opts"
					:chartData="chart_chlorine"
				  />
			  </view>
			</view>
			<!-- 电导率 -->
			<view class="chart_section">
			  <view class="top_box">
				  <view class="tit">电导率<text class="unit">us/cm</text></view>
				  <view class="name">{{addressName}}</view>
			  </view>
				<view class="mb-20rpx">
					<u-line></u-line>
				</view>
			  <view class="cart_box">
				  <qiun-data-charts 
					type="area"
					:opts="opts"
					:chartData="chart_conductivity"
				  />
			  </view>
			</view>
			
			<!-- 氧气 -->
			<view class="chart_section">
			  <view class="top_box">
				  <view class="tit">氧气<text class="unit">mg/L</text></view>
				  <view class="name">{{addressName}}</view>
			  </view>
				<view class="mb-20rpx">
					<u-line></u-line>
				</view>
			  <view class="cart_box">
				  <qiun-data-charts 
					type="area"
					:opts="opts"
					:chartData="chart_oxygen"
				  />
			  </view>
			</view>
			<!-- PH -->
			<view class="chart_section">
			  <view class="top_box">
				  <view class="tit">PH<text class="unit"></text></view>
				  <view class="name">{{addressName}}</view>
			  </view>
				<view class="mb-20rpx">
					<u-line></u-line>
				</view>
			  <view class="cart_box">
				  <qiun-data-charts 
					type="area"
					:opts="opts"
					:chartData="chart_ph"
				  />
			  </view>
			</view>
			<!-- 温度 -->
			<view class="chart_section">
			  <view class="top_box">
				  <view class="tit">温度<text class="unit">℃</text></view>
				  <view class="name">{{addressName}}</view>
			  </view>
				<view class="mb-20rpx">
					<u-line></u-line>
				</view>
			  <view class="cart_box">
				  <qiun-data-charts 
					type="area"
					:opts="optsc"
					:chartData="chart_temperature"
				  />
			  </view>
			</view>
			<!-- 浊度 -->
			<view class="chart_section">
			  <view class="top_box">
				  <view class="tit">浊度<text class="unit">NTU</text></view>
				  <view class="name">{{addressName}}</view>
			  </view>
				<view class="mb-20rpx">
					<u-line></u-line>
				</view>
			  <view class="cart_box">
				  <qiun-data-charts 
					type="area"
					:opts="opts"
					:chartData="chart_turbidity"
				  />
			  </view>
			</view>
		</view>
		<!-- 设置预警值 -->
		<u-popup v-model="warningShow" border-radius="28" width="94%" height="70%"
		 mode="center" :closeable="true" :mask-close-able="false" z-index="910">
			<view class="u-popup-section">
				<view class="top_box">
					<view class="title">设置预警值</view>
				</view>
				<scroll-view class="scroll-y" scroll-y="true">
					<view class="form_cont">
						<u-form v-for="(info,k) in formInfo" :key="k">
							<view class="title2 u-border-bottom">{{keyToName[k]}}</view>
							<u-form-item v-for="(cd2,k2) in info"
							:label="numberToString[k2]+'级预警'" label-width="140" :key="k2">
								<view class="row" >
									<view class="input_box flex-row u-margin-bottom-20"
									v-for="(item,index) in cd2" :key="index">
										<view class="input_unit_ibox flex-row u-border">
											<u-input type="number" v-model="item.min" placeholder="请输入" :clearable="false"/>
											<view class="unit">{{keyToUnit[k]}}</view>
										</view>
									    <view class="pdlr12">~</view>
										<view class="input_unit_ibox flex-row u-border">
											<u-input type="number" v-model="item.max" placeholder="请输入" :clearable="false"/>
											<view class="unit">{{keyToUnit[k]}}</view>
										</view>
									</view>
									
								</view>
							</u-form-item>
						</u-form>
					</view>
				</scroll-view>
				<view class="buttom_section">
					<u-button class="btn" type="default" @click="warningShow = false">取消</u-button>
					<u-button class="btn" @click="warningInfoBtn()" type="primary">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-calendar v-model="calendarShow" :mode="'range'" @change="calendarChange"></u-calendar>
	</view>
</template>

<script>
	import {showLoading,getLastWeekRange,getLastMonthRange} from '@/com/utils.js'
	import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: { QiunDataCharts },
		data() {
			return {
				optsc:{},
				opts: {
					dataLabel:false,//显示数据
					padding:[10,40,25,25],
					xAxis: {
					  disableGrid: true,
					  labelCount:5,
					  
					},
					yAxis: {
					  gridType: "dash",
					  data:[
						  {
							  min:0
						  }
					  ]
					},
					extra: {
					  area: {
						type: "curve",
						opacity: 0.9,
						addLine: true,
						gradient: true,
					  },
					}
				},
				chart_conductivity:{},//电导率
				chart_chlorine:{},//氯
				chart_oxygen:{},//氧气
				chart_ph:{},//PH
				chart_temperature:{},//温度
				chart_turbidity:{},//浊度
				//筛选
				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,
				deviceWarning:{},//设备预警
				warningShow:false,
				formInfo:{},//设置表单
				keyToName:{
					temperature:'温度',
					conductivity:'电导率',
					chlorine:'氯',
					oxygen:'氧气',
					ph:'PH',
					turbidity:'浊度',
				},
				keyToUnit:{
					temperature:'℃',
					conductivity:'us/cm',
					chlorine:'mg/L',
					oxygen:'mg/L',
					ph:'',
					turbidity:'NTU',
				},
				numberToString:{
					1:'Ⅰ',
					2:'Ⅱ',
					3:'Ⅲ',
					4:'Ⅳ'
				},
				device_type:3,
			};
		},
		onLoad(){
			this.queryDeviceBasics();
			this.optsc = JSON.parse(JSON.stringify(this.opts));
		},
		onShow(){
			
		},
		methods:{
			warningClickFn(lv){
				
				let urlparams = `?lv=${lv}&base=${this.addressValue}&device=${this.device_id}&title=水质监控`;
				uni.navigateTo({
					url:`/pages/index/warning-list${urlparams}`
				})
			},
			//设置预警值
			setWarnInfo(){
				this.getDeviceWarningRules();
				this.warningShow = true;
			},
			//地区
			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(0);
				this.queryAddressDevicePoints(val);
				
			},
			
			//地区下设备id
			change2(val){
				this.$refs.uDropdown.highlight(1);
				this.queryMonitoringData();
				this.getDeviceWarningNums();//报警查询
			},
			//日期范围
			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();
				if(this.q_start_time!=this.q_end_time){
					this.currentIndex = -1;
				}else{
					this.currentIndex = 0;
				}
				
			},
			//删除选择的时间
			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();
				
			},
			//设置警戒值
			warningInfoBtn(){
				let params = {
					slug: "device_warning_rule_waterquality",
					value:this.formInfo
				}
				this.$http.put('/api/device-warning-rules',params).then(({data})=>{
					this.warningShow = false;
					if(data.code==200){
						uni.showToast({ title: '设置成功', icon: 'none' });
					}else{
						uni.showToast({ title: '设置失败', icon: 'none' });
					}
				}).catch(()=>{
					uni.showToast({ title: '设置失败', icon: 'none' });
				})
			},
			//查询地址筛选
			queryDeviceBasics(){
				let params = {
					device_type:this.device_type,
					_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;
						if(_data.length==0){
							return this.$u.toast('没有关联基地');
						}
						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:this.device_type,
					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;
						if(_data.length==0){
							// return this.$u.toast('监测点为空');
						}
						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();
						this.getDeviceWarningNums();//报警查询
					}
				}).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]){
								
								_item.data.push(info[fk][k]);
								
								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);
								}
							}
							chartInfo[fk] = _item;
						}
						console.log(chartInfo,'chartDatas--')
						if(params.start_time!=params.end_time){//不是当天
							this.opts.xAxis.labelCount = 3;
							this.optsc.xAxis.labelCount = 3;
						}else{
							
							let len = chartInfo.conductivity.categories.length-1;
							let v = 5;
							let aw = len>10?len%6:len%5;
							if(aw==3||aw==0||aw==1){
								v = 4;
							}else if(aw==2){
								v = 3;
							}else{v=5}
							this.opts.xAxis.labelCount = v;
							this.optsc.xAxis.labelCount = v;
							console.log(this.opts,v,len,'配置',aw) 
						}
						//start 氯
						let res2 = {
						    categories: chartInfo.chlorine.categories,
						    series: [
						      {
								name:'氯',
								legendShape:'circle',
						        data: chartInfo.chlorine.data
						      }
						    ]
						};
						this.chart_chlorine = JSON.parse(JSON.stringify(res2));
						//end 氯
						
						//start 电导率 conductivity
						let res = {
						    categories: chartInfo.conductivity.categories,
						    series: [
						      {
								name:'电导率',
								legendShape:'circle',
						        data: chartInfo.conductivity.data,
								
						      }
						    ]
						};
						
						this.chart_conductivity = JSON.parse(JSON.stringify(res));
						console.log(this.chart_conductivity,'电导率')
						//end 电导率 conductivity
						
						//start 氧气 oxygen
						let res3 = {
						    categories: chartInfo.oxygen.categories,
						    series: [
						      {
							    name:'氧气',
							    legendShape:'circle',
							    data: chartInfo.oxygen.data
						      }
						    ]
						};
						
						this.chart_oxygen = JSON.parse(JSON.stringify(res3));
						//end 氧气
						//start PH
						let res4 = {
						    categories: chartInfo.ph.categories,
						    series: [
						      {
							    name:'PH',
							    legendShape:'circle',
						        data: chartInfo.ph.data,
						      }
						    ]
						};
						this.chart_ph = JSON.parse(JSON.stringify(res4));
						//start 温度 temperature
						let res5 = {
						    categories: chartInfo.temperature.categories,
						    series: [
						      {
								name:'温度',
								legendShape:'circle',
						        data: chartInfo.temperature.data,
						      }
						    ]
						};
						let min_temperature = 0;
						for(let val of chartInfo.temperature.data){
							if(val<0){
								min_temperature = val;
							}
						}
						if(min_temperature<0){
							this.optsc.yAxis.data = [];
						}
						this.chart_temperature = JSON.parse(JSON.stringify(res5));
						//end 温度 temperature
						//start 浊度 turbidity
						let res6 = {
						    categories: chartInfo.turbidity.categories,
						    series: [
						      {
								name:'浊度',
								legendShape:'circle',
						        data: chartInfo.turbidity.data,
						      }
						    ]
						};
						this.chart_turbidity = JSON.parse(JSON.stringify(res6));
						//end 浊度 turbidity
						
					}
				}).catch(()=>{
					
				})
				
			},
			//预警查询
			getDeviceWarningNums(){
				let params = {
					base:this.addressValue,
					device:this.device_id,
					status:0,
					_t: new Date().getTime()
				}
				this.$http.get('/api/device-warning-nums',{params:params}).then(({data})=>{
					if(data.code==200){
						this.deviceWarning = data.data;
					}
				}).catch(()=>{
					
				})
			},
			//预警规则
			getDeviceWarningRules(){
				this.$http.get('/api/device-warning-rules',{params:{}}).then(({data})=>{
					if(data.code==200){
						let _data = data.data;
						let info = {};
						for(let item of _data){
							if(item.slug=='device_warning_rule_waterquality'){//警报
								info = item;
								break;
							}
						}
						this.formInfo = info.value;
					}
				}).catch(()=>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-box{
	padding-bottom: 60rpx;
}

.warning-section{
	padding: 20rpx 24rpx;
	background-color: #fff;
	border-top: 14rpx solid #f5f5f5;
	border-bottom: 14rpx solid #f5f5f5;
	.top_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-bottom: 24rpx;
		padding-bottom: 20rpx;
		.tit{
			font-weight: bold;
		}
		.set_warning{
			display: flex;
			align-items: center;
		}
	}
	.cont-box{
		display: flex;
		padding-bottom: 12rpx;
		
	}
	.warning-item{
		flex: 1;
		text-align: center;
		.name{
			margin-bottom: 15rpx;
		}
		.val{
			font-size: 34rpx;
			font-weight: bold;
		}
		.unit{
			font-size: 24rpx;
			font-weight: 500;
			margin-left: 6rpx;
		}
	}
}
</style>
