<style lang='scss' scoped>
.realTime{
	width: 100%;
	height: 100%;
	background-color: #f9f9f9;
	&-header{
		width: 100%;
		background-color: #1C9BFF;
	}
	&-header-picker{
		display: flex;
		align-items: center;
		color: #fff;
		background-color: rgba(256,256,256,0.1);
		padding: $paddingTB $paddingLR;
	}
	&-header-info{
		display: flex;
		height: 200rpx;
		padding: 20rpx 0;
		&-total{
			color: #fff;
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-right: 1px solid rgba($color: #fff, $alpha: 0.2);
			&-number{
				font-size: 46rpx;
				font-weight: bolder;
			}
		}
		&-month{
			width: 50%;
			text-align: center;
			color: #fff;
			&-box{
				padding-left: 50rpx;
				display: flex;
				padding-bottom: 10rpx;
			}
		}
	}
	&-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;
		}
	}
}

.realTime-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-header{
		width: 100%;
		display: flex;
		padding: 20rpx 0;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		&-box{
			width: 33.3%;
			text-align: center;
		}
		&-box-month{
			width: 25%;
			text-align: center;
		}
	}
	&-table{
		width: 100%;
		&-row{
			display: flex;
			padding-top: 20rpx;
			&:last-child{
				margin-bottom: 0;
			}
			&-value{
				width: 33.3%;
				text-align: center;
			}
			&-value-month{
				width: 25%;
				text-align: center;
			}
		}
	}
	/* &-calendar{
		background-color: #F5F5F9;
		display: flex;
		flex-wrap: wrap;
		&-box{
			width: 104rpx;
			text-align: center;
			padding: 6rpx 0;
 			&-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;
		}
	}
}

.monthDetail-popup{
	width: 600rpx;
	padding: 30rpx;
	.monthDetail-header{
		display: flex;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		&-box{
			flex: 1;
			text-align: center;
		}
	}
	.monthDetail-list{
		
	}
	.monthDetail-box{
		display: flex;
		&-value{
			flex: 1;
			text-align: center;
			padding-top: 20rpx;
		}
	}
}

</style>
<template>
	<view class="realTime">
		<view class="realTime-header">
			<view class="realTime-header-picker flex-between" @click="projectPickShow = true">
				<view class="">
					<tuiIcon name="xiangmu" class="pr10" color="#fff"></tuiIcon>
					<text>德润物联智慧园区项目</text>
				</view>
				<u-icon size="22" name="arrow-down-fill" color="#fff" ></u-icon>
			</view>
			<view class="realTime-header-info">
				<view class="realTime-header-info-total">
					<view class="realTime-header-info-total-number">20256</view>
					<view class="">总用水量(t)</view>
				</view>
				<view class="realTime-header-info-month">
					<view class="realTime-header-info-month-box pt10">
						<view class="">
							<tuiIcon name="shuiliang" color="#fff"></tuiIcon>
							<text class="pr20">本月水量</text>
						</view>
						<view>137t</view>
					</view>
					<view class="realTime-header-info-month-box">
						<view class="">
							<tuiIcon name="shuiliang" color="#fff"></tuiIcon>
							<text class="pr20">上月水量</text>
						</view>
						<view>265t</view>
					</view>
					<view class="realTime-header-info-month-box">
						<view class="">
							<tuiIcon name="shuiliang" color="#fff"></tuiIcon>
							<text class="pr20">今年水量</text>
						</view>
						<view>7265t</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="realTime-content">
			<view class="realTime-picker">
				<view class="realTime-picker-date-type">
					<view class="realTime-picker-date-type-box" :style="{color: currentDateType=='day'?'#1C9AFF':''}" @click="switchDateTypeFn('day')">日</view>
					<view class="picker-line"></view>
					<view class="realTime-picker-date-type-box" :style="{color: currentDateType=='month'?'#1C9AFF':''}" @click="switchDateTypeFn('month')">月</view>
					<view class="picker-line"></view>
					<view class="realTime-picker-date-type-box" :style="{color: currentDateType=='year'?'#1C9AFF':''}" @click="switchDateTypeFn('year')">年</view>
				</view>
				
				<view class="realTime-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="realTime-date" v-if="currentDateType=='day'">
				<view class="realTime-date-title">用水量分析</view>
				<lineScroll :chartData="chartData" width="630" height="400" extraLineType="curve"></lineScroll>
				<view class="realTime-date-table-header">
					<view class="realTime-date-table-header-box">类别</view>
					<view class="realTime-date-table-header-box">水量(t)</view>
					<view class="realTime-date-table-header-box">水费(元)</view>
				</view>
				<view class="realTime-date-table">
					<view class="realTime-date-table-row" v-for="(item,index) in dayWaterMoneyList" :key="index">
						<view class="realTime-date-table-row-value">{{item.typeName}}</view>
						<view class="realTime-date-table-row-value">{{item.waterValue}}</view>
						<view class="realTime-date-table-row-value">{{item.waterMoney}}</view>
					</view>
				</view>
			</view>
			<view class="realTime-date" v-if="currentDateType=='month'">
				<view class="realTime-date-money-title">
					<view>用水量分析</view>
					<!-- <view class="realTime-date-money-title-detail" @click="goMonthDetailFn">
						<text class="pr10">详情</text>
						<text>></text>
					</view> -->
				</view>
				<columnScroll :chartData="chartData" width="630" height="400" ></columnScroll>
				<view class="realTime-date-table-header">
					<view class="realTime-date-table-header-box-month">日期</view>
					<view class="realTime-date-table-header-box-month">水量(t)</view>
					<view class="realTime-date-table-header-box-month">水费(元)</view>
					<view class="realTime-date-table-header-box-month"></view>
				</view>
				<view class="realTime-date-table">
					<view class="realTime-date-table-row" v-for="(item,index) in monthWaterMoneyList" :key="index">
						<view class="realTime-date-table-row-value-month">{{item.day}}</view>
						<view class="realTime-date-table-row-value-month">{{item.waterMonthValueTotal}}</view>
						<view class="realTime-date-table-row-value-month">{{item.waterMonthMoneyTotal}}</view>
						<view class="realTime-date-table-row-value-month" @click="openMonthDetailFn(item)">
							<text>详情</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="realTime-date" v-if="currentDateType=='year'">
				<view class="realTime-date-title">用水量分析</view>
				<ring :chartData="ringChartData" width="630" height="400" ></ring>
				<view class="realTime-date-year-table">
					<view class="realTime-date-year-box" v-for="(item,index) in 12" :key="index">
						<view class="">{{item+1}}月</view>
						<view class="realTime-date-year-box-money">9.87吨</view>
					</view>
				</view>
			</view>
		</view>
		<u-select v-model="projectPickShow" :list="projectPickList"></u-select>
		<u-popup v-model="monthDetailShow" mode="center">
			<view class="monthDetail-popup">
				<view class="monthDetail-title pb10">2021-01-28</view>
				<view class="monthDetail-header">
					<view class="monthDetail-header-box">类别</view>
					<view class="monthDetail-header-box">水量(t)</view>
					<view class="monthDetail-header-box">水费(元)</view>
				</view>
				<view class="monthDetail-list" v-if="monthDetailData">
					<view class="monthDetail-box" v-for="(item,index) in monthDetailData.waterMonthValueList" :key="index">
						<view class="monthDetail-box-value">A区</view>
						<view class="monthDetail-box-value">26</view>
						<view class="monthDetail-box-value">1300</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	let _self = this;
	import lineScroll from "@/components/uchartComponents/line-scroll.vue";
	import columnScroll from "@/components/uchartComponents/column-scroll.vue"
	import ring from "@/components/uchartComponents/ring.vue"
	export default {
		data() {
			return {
				monthDetailShow:false,
				monthDetailData:null,
				
				currentDateType:"day",
				currentDayValue:"",
				currentMonthValue:"",
				currentYearValue:"",
				
				projectPickShow:false,
				projectPickList:[{
					label:"德润物联智慧园区项目",
					value:"hcwl"
				}],
				dayWaterMoneyList:[{
					typeName:"A区",
					waterValue:128,
					waterMoney:200
				},{
					typeName:"B区",
					waterValue:168,
					waterMoney:300
				}],
				monthWaterMoneyList:[{
					day:1,
					waterMonthValueTotal:50,
					waterMonthMoneyTotal:200,
					waterMonthValueList:[{
						label:"A区",
						value:31,
						money:22
					},{
						label:"B区",
						value:2,
						money:26
					}]
				},{
					day:1,
					waterMonthValueTotal:50,
					waterMonthMoneyTotal:200,
					waterMonthValueList:[{
						label:"A区",
						value:31,
						money:22
					},{
						label:"B区",
						value:2,
						money:26
					}]
				}],
				
				chartData:null,
				ringChartData:null
			}
		},
		components:{lineScroll,columnScroll,ring},
		onLoad() {
			_self = this;
			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');
			this.getServerData();
			
		},
		methods: {
			openMonthDetailFn(item){
				this.monthDetailData = item;
				this.monthDetailShow = true;
			},
			onDayPickerConfirmFn(e){
				// this.dayPickerValue = e.detail.value;
				// currentDayValue:"",
				// currentMonthValue:"",
				// currentYearValue:""
				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;
				}
			},
			switchDateTypeFn(dateType){
				console.log(dateType,"dateType");
				this.currentDateType = dateType;
			},
			getServerData(){
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data:{
					},
					success: function(res) {
						console.log(res.data.data)
						let LineA={categories:[],series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						LineA.categories=res.data.data.LineA.categories;
						LineA.series=res.data.data.LineA.series;
						_self.chartData = LineA;
						// _self.textarea = JSON.stringify(res.data.data.LineA);
						// _self.showLineA("canvasLineA",LineA);
						console.log(_self.ringChartData,"ringChartData");
						_self.ringChartData = {};
						_self.ringChartData ={
							series:[],
						};
						_self.ringChartData.series=res.data.data.Ring.series;
						// 自定义文案示例，需设置format字段
						for(let i = 0 ;i < _self.ringChartData.series.length;i++){
							_self.ringChartData.series[i].format=()=>{return _self.ringChartData.series[i].name+_self.ringChartData.series[i].data};
						}
						
					},
					fail: () => {
						// _self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			},
		}
	}
</script>
