<template>
	<view class="container">
		<view class="top-container">
			<image class="bg-img" :src="apiHost+'/miniapp/static/mybg.png'"></image>
			<view class="mybox">
				<view class="box">
					<view class="item">
						<view style="color:#4652C0;font-weight:bold;">闸门调控次数</view>
						<view style="color:#4652C0;font-weight:bold;font-size:50rpx">{{total_gate_count}}</view>
						<hr color="#E5E5E5" size="1px"/>
						<view style="color:#000;font-size:20rpx">
							<text>本月 {{current_gate_count}}</text>
							<text style="display:inline-block;margin-left:30rpx">总计 {{total_gate_count}}</text>
						</view>
					</view>
					<view class="item">
						<view style="color:#4652C0;font-weight:bold;">水泵调控次数</view>
						<view style="color:#4652C0;font-weight:bold;font-size:50rpx">{{total_pump_count}}</view>
						<hr color="#E5E5E5" size="1px"/>
						<view style="color:#000;font-size:20rpx">
							<text>本月 {{current_pump_count}}</text>
							<text style="display:inline-block;margin-left:30rpx">总计 {{total_pump_count}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>		
		<view class="content">
			<tui-card class="mycard">
				<qiun-title-bar title="闸门调控统计"/>
				<view class="tui-flex-box">
					<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorM1" @click="timeRange('m1')">月</tui-tag>
					<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorD1" @click="timeRange('d1')">年</tui-tag>
				</view>
				<view class="charts-box">
				  <qiun-data-charts type="column" :chartData="chartsDataColumn" :echartsH5="true" :opts="opts" :echartsApp="true"/>
				</view>
			</tui-card>
			<tui-card class="mycard">
				<qiun-title-bar title="水泵调控次数统计"/>
				<view class="tui-flex-box">
					<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorM2" @click="timeRange('m2')">月</tui-tag>
					<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorD2" @click="timeRange('d2')">年</tui-tag>
				</view>
				<view class="charts-box">
				  <qiun-data-charts type="demotype" :eopts="{seriesTemplate:{areaStyle:{opacity:0.2}}}" :chartData="chartsDataLine" :echartsH5="true" :echartsApp="true"/>
				</view>	
			</tui-card>
		</view>
	</view>
</template>

<script>
	import myapp from '@/common/js/myapp.js'
	export default {
		data() {
			return {
				apiHost: myapp.apiHost,
				total_gate_count: '',
				current_gate_count: '',
				total_pump_count: '',
				current_pump_count: '',
				chartsDataColumn:{},
				chartsDataLine:{},
				colorM1: 'blue',
				colorD1: 'btn-gray',
				colorM2: 'blue',
				colorD2: 'btn-gray',
				opts: {
					legend:{
						show: false
					},
					extra: {
						column:{
							width: 10
						}
					}
				}
			}
		},
		onShow: function() {
			// 验证登录信息是否过期
			let user = myapp.checkLogin()
			
			// 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
			uni.setStorageSync('lastPagePath', '/packagePage/pages/overview/overview')
			
			let that = this;
			// 获取总览内容中闸门总次数以及本月闸门次数
			myapp.request('/?c=overview&a=getOverviewGateActionInfo',function(res) {
				that.total_gate_count = res.data.data.total_gate_count
				that.current_gate_count = res.data.data.current_gate_count
			},{token:user.token})
			// 获取总览内容中水泵总次数以及本月水泵次数
			myapp.request('/?c=overview&a=getOverviewPumpActionInfo',function(res) {
				that.total_pump_count = res.data.data.total_pump_count
				that.current_pump_count = res.data.data.current_pump_count
			},{token:user.token})
			
			setTimeout(() => {
				let that = this;
				// 闸门调控统计
				myapp.request('/?c=overview&a=getOverviewGateLine',function(res) {
					that.chartsDataColumn = {
						"legend": {
							"show":false
						},
						"categories": res.data.data.time,
						"series": [{
							"name": "调控次数",
							"data": res.data.data.count,
							"color": "#70A3FC"
						}]
					}
				},{token:user.token,type:'month'})
				
				// 水泵调控统计
				myapp.request('/?c=overview&a=getOverviewPumpLine',function(res) {
					that.chartsDataLine = {
						"categories": res.data.data.time,
						"series": [{
							"name": "次数",
							"data": res.data.data.count,
							"color": "#5087EC"
						}]
					}
				},{token:user.token,type:'month'})
				
			}, 1000)
		},
		methods: {
			timeRange: function(tagType) {
				// 验证登录信息是否过期
				let user = myapp.checkLogin()
				let that = this;
				switch (tagType) {
					case 'm1':
						this.colorM1 = 'blue'
						this.colorD1 = 'btn-gray'
						// 闸门调控统计
						myapp.request('/?c=overview&a=getOverviewGateLine',function(res) {
							that.chartsDataColumn = {
								"legend": {
									"show":false
								},
								"categories": res.data.data.time,
								"series": [{
									"name": "调控次数",
									"data": res.data.data.count,
									"color": "#70A3FC"
								}]
							}
						},{token:user.token,type:'month'})
						break;
					case 'd1':
						this.colorM1 = 'btn-gray'
						this.colorD1 = 'blue'
						// 闸门调控统计
						myapp.request('/?c=overview&a=getOverviewGateLine',function(res) {
							that.chartsDataColumn = {
								"legend": {
									"show":false
								},
								"categories": res.data.data.time,
								"series": [{
									"name": "调控次数",
									"data": res.data.data.count,
									"color": "#70A3FC"
								}]
							}
						},{token:user.token,type:'year'})
						break;
					case 'm2':
						this.colorM2 = 'blue'
						this.colorD2 = 'btn-gray'
						myapp.request('/?c=overview&a=getOverviewPumpLine',function(res) {
							that.chartsDataLine = {
								"categories": res.data.data.time,
								"series": [{
									"name": "次数",
									"data": res.data.data.count,
									"color": "#5087EC"
								}]
							}
						},{token:user.token,type:'month'})
						break;
					case 'd2':
						this.colorM2 = 'btn-gray'
						this.colorD2 = 'blue'
						myapp.request('/?c=overview&a=getOverviewPumpLine',function(res) {
							that.chartsDataLine = {
								"categories": res.data.data.time,
								"series": [{
									"name": "次数",
									"data": res.data.data.count,
									"color": "#5087EC"
								}]
							}
						},{token:user.token,type:'year'})
						break;
				}
			}
		}
	}
</script>

<style>	
	@import '../../../static/style/thorui.css';

	page {
		background-color: #F5F6FA;
	}
	
	.mybox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 2;
		margin-top: 30rpx;
        margin-bottom:20rpx;
		margin-left:28rpx;
		margin-right:28rpx;
		background-color:transparent;
	}	
	
	.mycard {
		margin-bottom: 40rpx;
	}
	
	.container {
		position: relative;
		padding-bottom: 100rpx;		
	}

	.top-container {
		height: 320rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 460rpx;
	}
	
	.content {
	  padding-top: 150rpx;
	  display: flex;
	  flex-direction: column;
	  flex: 1;
	  position:absolute;
	  top:90rpx;
	  width:100%
	}

	.charts-box {
	  width: 100%;
	  height: 200px;
	  background-color: #FFF;
	}
	
	.box {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		border:none;
	}

	.item {
		width: 48%;
		padding: 20rpx 0rpx 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		color: #fff;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 30rpx;
		margin:0;
		background-color:#FFF;
	}
	
	.mybtn {
		padding:0;
		width:10px;
	}
	
	.tui-flex-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row-reverse;
		justify-content: flex-start;
		align-items: flex-start;
		margin-bottom: 26rpx;
		position: relative;
		top:-80rpx;
	}
</style>
