<template>
	<view>
		<u-navbar :is-back="false" :border-bottom="false" :background="background"><view class="navbar-tit">收益统计</view></u-navbar>
		<view class="statisticsData">
			<view class="statisticsData-item">
				<view class="statisticsData-head">
					<p>今日充电收益(元)</p><u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="36"></u-icon>
				</view>
				<view class="statisticsData-main">
					<h2>1141.00</h2>
				</view>
				<view class="statisticsData-foot">
					<p>昨日收益</p><h4>1024.00</h4>
				</view>
			</view>
			<view class="statisticsData-item">
				<view class="statisticsData-head">
					<p>今日充电单量(笔)</p>
				</view>
				<view class="statisticsData-main">
					<h2>230</h2>
				</view>
				<view class="statisticsData-foot">
					<p>累计收益</p><h4>10691.00</h4>
				</view>
			</view>
		</view>
		<view class="statisticsChart">
			<view class="statisticsChart-head">
				<h4>充电桩收益占比</h4>
				<view class="statisticsChart-time">
					<u-calendar v-model="showdate" mode="range" @change="changedate"></u-calendar>
					<p @click="showdate = true" >{{startTime}} 至 {{endTime}}</p>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="36"></u-icon>
					
				</view>
			</view>
			<view class="statisticsChart-main">
				<u-subsection :list="subsection"  @change="changedate" :current="1" button-color="#2E7Dff" active-color="#fff"></u-subsection>
				<view  id="pieEcharts" style="min-height:250px;" >
					
				</view>
			</view>
		</view>
		<u-tabbar v-model="current" :list="tabbarList" active-color="#185ac6"></u-tabbar>
	</view>
</template>

<script>
	import * as echarts from "echarts";
	import {
			beforeTimeStamp	,
			currentTimeStamp,
			parseUnixTime
		} from '@/utils'
	export default {
		data() {
			return {
				showdate:false,
				startTime:"",
				myChart:null,
				endTime:"",
				subsection: [
					{
						name: '金额'
					}, 
					{
						name: '单量'
					}
				],
				tabbarList: [{
						iconPath: "bar-chart-box-fill",
						selectedIconPath: "bar-chart-box-fill",
						text: '统计',
						count: 0,
						isDot: true,
						customIcon: true,
					},
					{
						iconPath: "article-fill",
						selectedIconPath: "article-fill",
						text: '明细',
						midButton: true,
						customIcon: true,
					},
					
					{
						iconPath: "account-pin-box-fill",
						selectedIconPath: "account-pin-box-fill",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: true,
					},
				],
				current: 0,
				background:{
					background: 'none'
				},
			}
		},
		onLoad() {
			
		},onReady() {
			this.startTime=parseUnixTime(beforeTimeStamp(7), '{y}-{m}-{d}')
			this.endTime=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
			this.getPie( [
        { value: 1048, name: '数据1' },
        { value: 735, name: '数据2' },
        { value: 580, name: '数据3' },
        { value: 484, name: '数据4' },
        { value: 300, name: '数据5' }
      ])
		},
		methods: {
			changedate(e){
				this.startTime=e.startDate
				this.endTime=e.endDate
				
				this.getPie( [
				  { value: 48, name: '数据1' },
				  { value: 35, name: '数据2' },
				  { value: 80, name: '数据3' },
				  { value: 84, name: '数据4' },
				  { value: 100, name: '数据5' }
				])
			},
			getPie(getData){
				if(!this.myChart){
					this.myChart = echarts.init(document.getElementById('pieEcharts'));
					
				}
				// 指定图表的配置项和数据
				var option =   {

  tooltip: {
    trigger: 'item'
  },
  legend: {
  
	 bottom: '0%',
	    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data:getData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
				
				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option);
			}
		}
	}
</script>
<style>
	page{
		background:url(../../assets/img/index_header_bg.png) no-repeat top center #f7f7f7;
		background-size: 100%;
	}
</style>
<style lang="scss" scoped>
	.navbar-tit{
		color:#fff;
		font-size: 20px;
		padding-left: 15px;
	}
	.statisticsData{
		background-color: #fff;
		margin: 16px;
		padding: 16px;
		border-radius: 8px;
		display: flex;
		margin-top:80px;
	}
	.statisticsData-item{
		flex: 1;
		.statisticsData-head{
			display: flex;
			align-items: center;
			p{
				color:#637AA2;
				font-size: 12px;
			}
		}
		.statisticsData-main{
			margin-top: 4px;
			font-size: 20px;
		}
		.statisticsData-foot{
			display: flex;
			align-items: center;
			margin-top: 16px;
			p{
				color:#637AA2;
			}
			h4{
				margin-left: 8px;
			}
		}
	}
	.statisticsChart{
		margin: 16px;
		.statisticsChart-head{
			margin-bottom: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			h4{
				font-weight: normal;
				font-size: 16px;
				position: relative;
				padding-left:10px;
				&::after{
					content: '';
					position: absolute;
					height: 12px;
					width: 4px;
					background-color: #4E8DF6;
					left: 0;
					top:5px;
				}
			}
			.statisticsChart-time{
				display: flex;
				align-items: center;
				p{
					color:#666;
				}
			}
		}
		.statisticsChart-main{
			background-color: #fff;
			padding: 16px;
			border-radius: 8px;
		}
	}
</style>
