<template>
	<view class="content">

		<view class="flex-y-center header-title">
			<image class="title-icon" src="../../static/images/total.png" mode=""></image>
			<view class="">
				{{$test.$test}}总次数
			</view>
		</view>

		<view class="table">

			<view class="table-tr">

				<navigator v-for="(item,index) of type_data" :key='index' class="table-td" url="agent-list">
					<view class="table-td-num">
						{{item.count}}
					</view>
					<view class="">{{item.type==1?'收款码'+$test.$test:item.type==2?'公众号'+$test.$test:item.type==3?'文章'+$test.$test:item.type==4?'普通二维码'+$test.$test:
					item.type==6?'视频'+$test.$test:''}}</view>
				</navigator>
			</view>
		</view>

		<view class="flex-y-center header-title">
			<image class="title-icon" src="../../static/images/total1.png" mode=""></image>
			<view class="">
				成功{{$test.$test}}次数统计
			</view>
		</view>

		<view class="header-pof">
			<liuyuno-tabs :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
		</view>

		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">基本区域图</view>
		</view>

		<view class="qiun-charts">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA" ></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!--#endif-->
		</view>

	</view>
</template>

<script>
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	import uCharts from '@/components/u-charts/u-charts.min.js';
	import {
		isJSON
	} from '@/static/js/checker.js';
	var _self;
	var canvaArea = null;
	export default {
		components: {
			liuyunoTabs
		},
		data() {
			return {
				tabs: [
					"近7日统计",
					"近30日统计",
				],
				defaultIndex: 0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				type_data: [],
				$test:this.$test.$test,
			}
		},
		onLoad() {
			_self = this;
			uni.setNavigationBarTitle({
				title:`${this.$test.$test}统计`
			})
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {

			tabClick(e) {

				// console.log(e)
				this.defaultIndex = e;
				
				let Area = {
					categories: [],
					series: []
				};
				
				let categories = [],
					series = [],
					data = [];
				if (this.defaultIndex == 1) {
					for (var i of this.figure_data2) {
						categories.push(i.date)
						data.push(i.count)
					}
				} else {
					for (var i of this.figure_data) {
						categories.push(i.date)
						data.push(i.count)
					}
				}

				series.push({
					color: "#facc14",
					data: data,
					name: "当日时段分布",
					breadcrumb: { show: false} 
				})
				
				// console.log(categories, series, "data")
				Area.categories = categories;
				Area.series = series;
				_self.showArea("canvasArea", Area);
			},


			getServerData() {
				this.request({
					url: "exchange/userStatistics",
					data: {
						token: uni.getStorageSync("token"),
					},
					showLoading: true,
				}).then(res => {
					if (res.code === '200') {
						
						this.type_data = res.data.type_data;
						this.figure_data = res.data.figure_data;
						this.figure_data2 = res.data.figure_data2;
						
						let Area = {
							categories: [],
							series: []
						};
						let categories = [],
							series = [],
							data = [];
						for (var i of this.figure_data) {
							categories.push(i.date)
							data.push(i.count)
						}
						series.push({
							color: "#facc14",
							data: data,
							name: "当日时段分布",
						})
						Area.categories = categories;
						Area.series = series;
						_self.showArea("canvasArea", Area);
					}


				}).catch((res) => {});
			},


			showArea(canvasId, chartData) {
				canvaArea = new uCharts({
					// #ifdef H5
					$this: _self,
					// #endif
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					padding: [10, 15, 10, 15],
					legend: {
						show: false,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						lineHeight: 18,
						margin: 0,
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						itemCount:5,
						scrollShow:true,
						// 新增是否显示滚动条，默认false
						scrollAlign:'left',
						scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
						scrollColor:'#DEE7F7',//默认为 #A6A6A6}
						//滚动条初始位置
					}, 
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format:(val)=>{return val.toFixed(0)}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false
						}
					}
				});
			},
			
          touchLineA(e){
				canvaArea.scrollStart(e);
			},
			moveLineA(e) {
				canvaArea.scroll(e);
			},
			touchEndLineA(e) {
				canvaArea.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaArea.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},



		}


	}
</script>

<style>
	page {
		background: #F5F7FA;
	}

	.header-title {
		height: 101rpx;
		padding: 0 40rpx;
		border-bottom: 1rpx solid #F1F1F1;
		background: #FFFFFF;
	}

	.title-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.table {
		display: table;
		width: 100%;
		border-collapse: collapse;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.table-tr {
		/* display: ; */
		/* height: 92rpx; */
	}

	.table-th {
		width: 33%;
		font-weight: bold;
		border: 1rpx solid #FAFAFA;
		text-align: center;
		vertical-align: middle;
	}

	.table-td {
		width: 33%;
		border: 1rpx solid #FAFAFA;
		text-align: center;
		vertical-align: middle;
		background: #fff;
		font-size: 27rpx;
		color: #666666;
		padding: 62rpx 0;
		width: 33%;
		display: inline-block;
	}

	.table-td .table-td-num {
		font-size: 40rpx;
		font-weight: 500;
		color: #ffa024;
	}

	.qiun-title-dot-light {
		padding: 20rpx 40rpx;
		background: #FFFFFF;
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
