<template>
	<view class="energyAnalysis">
		<view class="energyAnalysis-header">
			<view class="energyAnalysis-header-name">{{projectData.projectName}}</view>
			<picker mode="selector" :range="devArr" range-key="deviceLabel" @change="changeDeviceFn">
				<view class="energyAnalysis-header-equipmentId" >
					设备：{{deviceName}}
					<view class="changeIcon">
						<u-icon name="arrow-down" color="#fff" :size="32"></u-icon>
					</view>
				</view>
			</picker>
			<view class="energyAnalysis-header-electricity-consumption">
				<view class="electricity-consumption-info">
					<view class="electricity-consumption-info-number">{{currentMonth}}</view>
					<view class="">本月累计用电量</view>
				</view>
				<view class="electricity-consumption-info">
					<view class="electricity-consumption-info-number">{{lastMonth}}</view>
					<view class="">上月总用电量</view>
				</view>
			</view>
			<view class="energyAnalysis-header-signal">
				<template v-if="projectData.signal > 0">
					<template v-if="projectData.signal == 1">
						<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlieyg.png" class="ico-img"></image>
					</template>
					<template v-else-if="projectData.signal == 2">
						<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlielg.png" class="ico-img"></image>
					</template>
					<template v-else-if="projectData.signal == 3">
						<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesg.png" class="ico-img"></image>
					</template>
					<template v-else-if="projectData.signal == 4">
						<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesig.png" class="ico-img"></image>
					</template>
					<template v-else-if="projectData.signal == 5">
						<tuiIcon name="xinhaowuge" color="#289A00"></tuiIcon>
					</template>
				</template>
				<template v-else>
					<tuiIcon name="xinhaolx" color="#ff0000"></tuiIcon>
				</template>
				<text class="pl10" :style="{color:projectData.signal > 0?'#FFF':'#ff0000'}">{{projectData.signal > 0 ? getDictionary('signalType',projectData.stype) : '异常'}}</text>
			</view>
		</view>
		<view class="energyAnalysis-content">
			<view class="energyAnalysis-picker">
				<view class="energyAnalysis-picker-date-type">
					<view class="energyAnalysis-picker-date-type-box" :style="{color: currentDateType=='day'?'#1C9AFF':''}" @click="switchDateTypeFn('day')">日</view>
					<view class="picker-line"></view>
					<view class="energyAnalysis-picker-date-type-box" :style="{color: currentDateType=='month'?'#1C9AFF':''}" @click="switchDateTypeFn('month')">月</view>
					<view class="picker-line"></view>
					<view class="energyAnalysis-picker-date-type-box" :style="{color: currentDateType=='year'?'#1C9AFF':''}" @click="switchDateTypeFn('year')">年</view>
				</view>
				
				<view class="energyAnalysis-picker-date-value" @click="dayPickerFlag = true">
					<picker mode="date" :fields="currentDateType" @change="onDayPickerConfirmFn">
						<text class="pr10">{{currentDateType=='day'?currentDayValue:currentDateType=='month'?currentMonthValue:currentYearValue}}</text>
						<u-icon name="arrow-down"></u-icon>
					</picker>
				</view>
			</view>
			<view class="data-loading" v-if="dataLoading">
				<u-loading mode="circle" size="40"></u-loading>
				<view class="data-loading-txt">
					查询中...
				</view>
			</view>
			<view class="energyAnalysis-date" v-else-if="currentDateType=='day'">
				<view class="energyAnalysis-date-title">电量分析</view>
					<lineScroll width="630" height="400" extraLineType="curve"  
						v-show="polyLineChart"
						:reshowStatus="polyLineChart"
						:chartData="chartData"
						@onRenderComplete="onRenderComplete" >
					</lineScroll>
				<view class="energyAnalysis-date-title" v-if="dayElectricityType==1">电量电费</view>
				<view class="energyAnalysis-date-table" v-if="dayElectricityType==1">
					<view class="energyAnalysis-date-table-row" v-for="(item,index) in dayElectricityList" :key="index">
						<view class="energyAnalysis-date-table-row-title">{{item.ruleName}}</view>
						<view class="energyAnalysis-date-table-row-degree">{{item.pw}}度</view>
						<view class="energyAnalysis-date-table-row-money">{{item.rate}}元</view>
					</view>
				</view>
			</view>
			<view class="energyAnalysis-date" v-else-if="currentDateType=='month'">
				<view class="energyAnalysis-date-money-title">
					<view>电量分析</view>
					<view class="energyAnalysis-date-money-title-detail" v-if="dayElectricityType==1" @click="goMonthDetailFn">
						<text class="pr10">详情</text>
						<text>></text>
					</view>
				</view>
				<columnScroll width="630" height="400" 
					:chartData="chartData"
				  :reshowStatus="barChart"
					v-show="barChart"
					@onRenderFinsh="onRenderFinshBar"
				></columnScroll>
				<view class="energyAnalysis-date-calendar">
					<view class="energyAnalysis-date-calendar-box" v-for="(item,index) in analysisData.xName" :key="index">
						<view class="energyAnalysis-date-calendar-box-day">{{item}}</view>
						<view class="energyAnalysis-date-calendar-box-money">{{analysisData.nowData[index]===null?0:analysisData.nowData[index]}}</view>
					</view>
					<!-- <view class="energyAnalysis-date-table-row" v-for="(item,index) in dayElectricityList" :key="index">
						<view class="energyAnalysis-date-table-row-title">{{item.typeName}}</view>
						<view class="energyAnalysis-date-table-row-degree">{{item.degree}}度</view>
						<view class="energyAnalysis-date-table-row-money">{{item.money}}元</view>
					</view> -->
				</view>
				<view class="energyAnalysis-date-title" v-if="dayElectricityType==2">电量电费</view>
				<view class="energyAnalysis-date-table" v-if="dayElectricityType==2">
					<view class="energyAnalysis-date-table-row" v-for="(item,index) in dayElectricityList" :key="index">
						<view class="energyAnalysis-date-table-row-title">{{item.ruleName}}</view>
						<view class="energyAnalysis-date-table-row-degree">{{item.pw}}度</view>
						<view class="energyAnalysis-date-table-row-money">{{item.rate}}元</view>
					</view>
				</view>
			</view>
			<view class="energyAnalysis-date" v-else-if="currentDateType=='year'">
				<view class="energyAnalysis-date-title">电量分析</view>
				<ring width="630" height="400"
					:chartData="ringChartData"
				></ring>
				<view class="energyAnalysis-date-year-table">
					<view class="energyAnalysis-date-year-box" v-for="(item,index) in analysisData.xName" :key="index">
						<view class="">{{item}}月</view>
						<view class="energyAnalysis-date-year-box-money">{{analysisData.nowData[index]===null?0:analysisData.nowData[index]}}度</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <u-picker v-model="dayPickerFlag" :params="timeParams" mode="time" @confirm="onDayPickerConfirmFn"></u-picker> -->
	</view>
</template>
<script>
	let _self;
	
	// import uCharts from '@/components/u-charts/u-charts.js';
	import lineScroll from "@/components/uchartComponents/line-scroll.vue";
	import columnScroll from "@/components/uchartComponents/column-scroll.vue"
	import ring from "@/components/uchartComponents/ring.vue"
	import math from "@/utils/math.js"
	import getDictionary from "@/utils/dataDictionary.js"
	
	export default {
		data() {
			return {
				deviceId: null,
				deviceKey: null,
				deviceName: null,
				gatewayObj:{
					deviceId: null,
					deviceKey: null,
					deviceName: null,
				},
				dayPickerFlag:false,
				// dayPickerValue:"",
				projectData: {},
				devicesData: {},
				currentMonth: 0,
				lastMonth: 0,
				chartData: {},
				ringChartData: {},
				analysisData: null,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				// 电价合同：1 峰谷计价，2 阶梯计价
				dayElectricityType:1,
				dayElectricityList:[],
				currentDateType:"day",
				currentDayValue:"",
				currentMonthValue:"",
				currentYearValue:"",
				devArr: [],
				polyLineChart: false,
				barChart: false,
				dataLoading:false,
			}
		},
		components:{lineScroll,columnScroll,ring},
		onLoad(e) {
			console.log("当前页面获取参数为",e)
			this.deviceId = e.deviceId;
			this.deviceKey = e.deviceKey;
			this.deviceName = e.deviceName;
			this.gatewayObj = {
				deviceId: e.deviceId,
				deviceKey: e.deviceKey,
				deviceName: e.deviceName,
				deviceLabel: e.deviceName+'('+e.deviceKey+')'
			}
			this.currentDayValue = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
			this.currentMonthValue = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm');
			this.currentYearValue = this.$u.timeFormat(new Date().getTime(), 'yyyy');
			_self = this;
			// this.cWidth=uni.upx2px(750);
			// this.cHeight=uni.upx2px(550);
			this.getServerData()
		},
		methods: {
			getDictionary,
			goMonthDetailFn(){
				// console.log("点击月份详情","./monthDetail?deviceId="+this.deviceId+"&date="+this.currentMonthValue)
				uni.navigateTo({
					url:"./monthDetail?deviceId="+this.deviceId+"&month="+this.currentMonthValue
				})
			},
			switchDateTypeFn(dateType){
				console.log(dateType,"dateType");
				this.currentDateType = dateType;
				this.getServerData();
			},
			onDayPickerConfirmFn(e){
				switch (this.currentDateType){
					case "day":
						this.currentDayValue = e.detail.value;
						break;
					case "month":
						this.currentMonthValue = e.detail.value;
						break;
					case "year":
						this.currentYearValue = e.detail.value;
						break;
					default:
						break;
				}
				this.getServerData();
			},
			initData(){
				if(this.currentDateType == 'day'){
					let name = [
        "1:00",
        "2:00",
        "3:00",
        "4:00",
        "5:00",
        "6:00",
        "7:00",
        "8:00",
        "9:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00",
        "22:00",
        "23:00",
        "24:00"
      ];
			let data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
					LineA.series.push({
						// name: '今日',
						name: name,
						data: data,
						color: '#07AEFC'
					});
					LineA.series.push({
						// name: '昨日',
						name: name,
						data: data,
						color: '#FFB660'
					});
					this.chartData = LineA;
					this.analysisData = {
						nowData:data,
						pastData:data,
						xName:name,
					}
				} else if (this.currentDateType == 'month') {
					let name = [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31"
      ]
			let data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
					LineA.series.push({
						name: name,
						data: data,
						color: '#07AEFC'
					});
					this.chartData = LineA;
					this.analysisData = {
						nowData:data,
						xName:name,
					}
				} else if (this.currentDateType == 'year') {
					let name = [
					  "1",
					  "2",
					  "3",
					  "4",
					  "5",
					  "6",
					  "7",
					  "8",
					  "9",
					  "10",
					  "11",
					  "12"
					]
					let nowData = [0,0,0,0,0,0,0,0,0,0,0,0]
					let pieData = [];
					name.forEach((item, index) => {
						pieData.push({
							name: `${item}月`,
							data: nowData[index],
							format: () => {
								return `${item}月：${nowData[index]}度`
							}
						})
					})
					this.ringChartData = {
						series: pieData
					};
					this.analysisData = {
						nowData:nowData,
						xName:name,
					}
				}
			},
			getServerData(){
				let {currentDateType, currentDayValue, currentMonthValue, currentYearValue} = this;
				let date = currentDateType=='day'?currentDayValue:currentDateType=='month'?currentMonthValue:currentYearValue;
				// console.log("当前日期",date)
				
				let pastTime = this.$u.date(new Date(date).getTime(date)-60*60*24*1000);
				this.dataLoading = true;
				// console.log("昨天",pastTime);
				this.$get('/app/smart/power/analysis', {deviceId: this.deviceId, date: date})
				.then(res => {
					if(res.code == 200) {
						let data = res.data;
						this.projectData = data.parent;
						this.devicesData = data.children;
						this.currentMonth = math.divide(data.currentMonth,1000);
						this.lastMonth = math.divide(data.lastMonth,1000);
						if(data.parent.deviceId == this.deviceId){
							this.deviceKey = data.main.deviceKey;
							this.deviceId = data.main.deviceId;
							this.deviceName = data.main.deviceName;
						}
						this.devArr = this.devicesData.map(item => {
							return {
								deviceId: item.deviceId,
								deviceKey: item.deviceKey,
								deviceName: item.deviceName,
								deviceLabel: item.deviceName+'('+item.deviceKey+')'
							}
						});
						// this.devArr.unshift(this.gatewayObj)
						this.dayElectricityType = data.powerRateVo?data.powerRateVo[0].contractType:1;
						this.dayElectricityList = data.powerRateVo?data.powerRateVo[0].ruleRateVoList:[];
						
						if(data.powerAnalysisChartDataVo.nowData){
							data.powerAnalysisChartDataVo.nowData.forEach((item,index)=>{
								data.powerAnalysisChartDataVo.nowData[index] = math.divide(item,1000)
							})
						}
						if(data.powerAnalysisChartDataVo.pastData){
							data.powerAnalysisChartDataVo.pastData.forEach((item,index)=>{
								data.powerAnalysisChartDataVo.pastData[index] = math.divide(item,1000)
							})
						}
						
						// 图表数据处理
						this.analysisData = data.powerAnalysisChartDataVo;
						const {xName = [], nowData = [], pastData = []} = data.powerAnalysisChartDataVo;
						let LineA={categories:[],series:[]};
						LineA.categories = xName;
						if(currentDateType == 'day'){
							LineA.series.push({
								// name: '今日',
								name: date,
								data: nowData,
								color: '#07AEFC'
							});
							LineA.series.push({
								// name: '昨日',
								name: pastTime,
								data: pastData,
								color: '#FFB660'
							});
							this.chartData = LineA;
						} else if (currentDateType == 'month') {
							LineA.series.push({
								name: this.currentMonthValue,
								data: nowData,
								color: '#07AEFC'
							});
							this.chartData = LineA;
						} else if (currentDateType == 'year') {
							let pieData = [];
							xName.forEach((item, index) => {
								pieData.push({
									name: `${item}月`,
									data: nowData[index],
									format: () => {
										return `${item}月：${nowData[index]}度`
									}
								})
							})
							this.ringChartData = {
								series: pieData
							};
							console.log(pieData,"pieData");
						}
					}else{
						this.$u.toast(res.msg);
						this.initData();
					}
					this.dataLoading = false;
				}).catch(err=>{
					this.dataLoading = false;
					this.initData();
				})
			},
			changeDeviceFn(e) {
				console.log(e)
				let index = +e.detail.value;
				let data = this.devArr[index];
				this.deviceKey = data.deviceKey;
				this.deviceId = data.deviceId;
				this.deviceName = data.deviceName;
				this.getServerData();
			},
			onRenderComplete() {
				this.polyLineChart = true;
			},
			onRenderFinshBar() {
				this.barChart = true;
			}
		}
	}
</script>
 <style lang='scss' scoped>
 	
 .energyAnalysis{
 	width: 100%;
 	&-header{
 		width: 100%;
 		padding: $paddingTB $paddingLR;
 		background-color: #1C9AFF;
 		color: #fff;
 		position: relative;
 		&-equipmentId{
 			padding-top: 10rpx;
 			font-size: 24rpx;
 			display: flex;
 			align-items: center;
 			.changeIcon{
 				padding: 0 20rpx;
 				position: relative;
 				top: 3rpx;
 			}
 		}
 		&-name{
 			font-size: 30rpx;
 			font-weight: bold;
 		}
 		&-electricity-consumption{
 			display: flex;
 		}
 		&-signal{
 			position: absolute;
 			right: 0;
 			top: 20rpx;
 			background-color: #FF8A00;
 			padding: 10rpx 26rpx;
 			color: #fff;
 			border-top-left-radius: 50rpx;
 			border-bottom-left-radius: 50rpx;
 			display: flex;
 			align-items: center;
 			.ico-img{
 				width: 32rpx;
 				height: 32rpx;
 			}
 			.pl10{
 				position: relative;
 				top: 5rpx;
 			}
 		}
 		.electricity-consumption-info{
 			width: 100%;
 			text-align: center;
 			
 			padding-top: 20rpx;
 			&-number{
 				font-size: 40rpx;
 				font-weight: bold;
 			}
 		}
 	}
 	&-content{
 		padding: $paddingTB $paddingLR;
 		background-color: #f9f9f9;
 	}
 	&-picker{
 		display: flex;
 		justify-content: space-between;
 		&-date-type{
 			display: flex;
 			align-items: center;
 			background-color: #fff;
 			box-shadow: $box-shadow;
 			border-radius: 12rpx;
 			&-box{
 				text-align: center;
 				width: 120rpx;
 				padding: 20rpx 0;
 			}
 			.picker-line{
 				width: 2rpx;
 				height: 30rpx;
 				background-color: #eee;
 			}
 		}
 		&-date-value{
 			width: 260rpx;
 			padding: 20rpx 0;
 			background-color: #fff;
 			box-shadow: $box-shadow;
 			border-radius: 12rpx;
 			text-align: center;
 		}
 	}
 }
 .energyAnalysis-date{
 	margin-top: 30rpx;
 	width: 100%;
 	background-color: #fff;
 	box-shadow: $box-shadow;
 	padding: 20rpx;
 	&-title{
 		padding: 20rpx;
 		border-bottom: 1px solid #EEEEEE;
 	}
 	&-money-title{
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		border-bottom: 1px solid #EEEEEE;
 		padding: 20rpx;
 		&-detail{
 			color: #999DB2;
 			font-size: 24rpx;
 		}
 	}
 	.canvas-chart{
 		width: 100%;
 		height: 550rpx;
 	}
 	&-table{
 		width: 100%;
 		margin-top: 20rpx;
 		&-row{
 			display: flex;
 			padding: 30rpx 0;
 			background-color: #F5F5F9;
 			margin-bottom: 20rpx;
 			&:last-child{
 				margin-bottom: 0;
 			}
 			&-title{
 				color: #1C9AFF;
 			}
 			&-title,&-degree,&-money{
 				width: 33.3%;
 				text-align: center;
 			}
 		}
 	}
 	&-calendar{
 		background-color: #F5F5F9;
 		display: flex;
 		flex-wrap: wrap;
 		&-box{
 			width: 104rpx;
 			text-align: center;
 			padding: 6rpx 0;
 			/* background-color: #F5F5F9; */
 			&-money{
 				font-size: 24rpx;
 				color: #FA6400;
 			}
 		}
 	}
 	&-year-table{
 		display: grid;
 		grid-template-columns: repeat(3, 32%);
 		grid-auto-columns: repeat(2, 32%);
 		grid-gap: 10rpx 2% ;
 	}
 	&-year-box{
 		background-color: #F5F5F9;
 		padding: 10rpx 30rpx;
 		&-money{
 			font-size: 24rpx;
 			color: #FA6400;
 		}
 	}
 }
 .data-loading{
	 text-align: center;
	 padding: 100rpx;
	 .data-loading-txt{
		 margin-top: 20rpx;
		 font-size: 30rpx;
	 }
 }
 
 
 </style>