<template>
	<!-- 佣金明细 两种切换 -->
	<!-- 佣金明细 数据可视化 -->
	<view class="mingxi">
		<!-- 图表代码 -->
		<view class="qiun-columns">
			
			<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="canvasLineA" id="canvasLineA" 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="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
				<!--#endif-->
			</view>
		</view>
		<!-- 图表end -->
		
		
		<view class="selecttimes flex jus-b ali-c" @tap="showpicker1">
			<view class="flex ali-c jus-b">
				
				<text>时间选择:{{resulttime?resulttime:"选择日期"}}</text>
				<image class="dopicons" src="/static/news/dopicon.png" mode=""></image>
			</view>
			<text>收入:{{income}}</text>
			
		</view>
		<!-- <view style="display: flex;justify-content: flex-end;margin-bottom: 10px;">
			<view class="head_btn" @click="jump_cash">去提现</view>
		</view> -->
		<view class="ticheng">
			<block v-for="(item,index) of list" :key="index">
				<view class="tcs li" >
					<view class="tc_l">
						<text>{{item.createtime}}</text>
						<view>{{item.intro}}</view>
					</view>
					<view class="tc_2">
						{{item.money}}<br/>
						<!-- + -->
						<!-- <text v-if="item.status==0">提现中</text>
						<text v-if="item.status==1">已完成</text> -->
					</view>
				</view>
			</block>
		</view>
		
		
		<w-picker
		    mode="yearMonth" 
		    startYear="2018"
		    endYear="2030"
		    :defaultVal="defaultVal1" 
			:selectList="selectList1"
		    :current="true" 
		    @confirm="onConfirm1" 
		    ref="picker1" 
		    themeColor="#ff6900"
		></w-picker>
		
		
		<!-- 时间选择 -->
		
		<pageScrollTo v-if="isshowtop" ></pageScrollTo>
		<!-- 返回顶部 -->
		
		
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	var _self;
	var canvaLineA=null;
	
	import uniIcon from "@/components/uni/uni-icon/uni-icon.vue";
	import wPicker from "@/components/w-picker/w-picker.vue";//下拉选择组件
	import pageScrollTo from "@/components/pageScrollTo/pageScrollTo.vue"
	import {storeStoreLogs} from "@/utils/api/api.js";
	export default {
		components: {
			uniIcon,
			wPicker,
			pageScrollTo
		},
		data() {
			return {
				list:[],
				
				
				//图表代码
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:'',
				page:0,
				expend:"",//月总支出
				income:"",//月总收入
				isshowall:true,
				//时间选择
				defaultVal1:[],
				selectList1:[],
				resulttime:"",//日期
				isshowtop:false,
			};
		},
		//监听滚动
		onPageScroll(e){
			//console.log(e.scrollTop);
			//处理返回顶部
			if(e.scrollTop>400){
				this.isshowtop = true;
			}else{
				this.isshowtop = false;
			}
		},
		
		onLoad() {  
			
			
			_self = this;
			//#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.storeStoreLogsfun();//获取数据
			
		},
		//下拉刷新
		onPullDownRefresh(){
			this.storeStoreLogsfun();//获取数据
			// uni.stopPullDownRefresh();//结束下拉刷新
		},
		//瀑布流
		onReachBottom() {
			if(this.isshowall){
				//瀑布流
				this.storeStoreLogsfun();
			}
		},
		
		methods:{
			//请求数据
			async storeStoreLogsfun(){
				this.page++;
				let res1 = await storeStoreLogs({
					source:0,//0佣金明细
					page:this.page,
					mothtime:this.resulttime,//日期月
				});
				uni.stopPullDownRefresh();//结束下拉刷新
				if(res1.code==0){
					
					this.resulttime = res1.data.currentMoth;//默认选择的日期
					this.income = res1.data.income;
					
					let cartogram = res1.data.cartogram;
					//let LineA = {"categories":["3-18","3-19","3-20","3-21","3-22","3-23","3-24"],"series":[{"name":"收入","data":[35,8,25,37,4,20,100]},{"name":"转出","data":[70,40,65,100,44,68,99]}]};
					
					let  categories = [],series1=[],series2=[];
					
					for(let i=0;i<cartogram.length;i++){
						let item = cartogram[i]
						categories.push(item.createtime);//可选日期列表
						series1.push(item.expend);//支出
						series2.push(item.income);//收入
					}
					
					let  LineA = {"categories":categories,"series":[{"name":"收入","data":series2},{"name":"转出","data":series1}]};
					console.info("LineA",LineA);
					_self.textarea = JSON.stringify(LineA);
					_self.showLineA("canvasLineA",LineA);
					
					if(res1.data.list.length!=0){
						this.list = [...this.list,...res1.data.list];//记录
					}else{
						this.isshowall = false;
						this.$api.msg("没有更多了哦~");
					}
				}else{
					this.$api.msg(res1.msg);
				}
			},
			//日期选择点击后
			onConfirm1(e){
				console.info(e.result);
				this.resulttime = e.result;
				this.list = [];
				this.page = 0;
				this.isshowall = true;
				this.storeStoreLogsfun();
			},
			showpicker1(){
				this.$refs.picker1.show();
			},
			colepicker1(){
				this.$refs.picker1.hide();
			},
			jump_cash(){
				uni.navigateTo({
					url:'/pages/yjWithdraw/yjWithdraw?type=0'
				})
			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:5,
					},
					dataLabel:true,
					dataPointShape:true,
					dataPointShapeType:'hollow',
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:4,
						scrollShow:true,
						scrollAlign:'left'
					},
					yAxis: {
						//disabled:true
						gridType:'dash',
						splitNumber:8,
						min:10,
						max:180,
						format:(val)=>{return val.toFixed(0)+'元'}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					},
				});
				
			},
			touchLineA(e){
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			changeData(){
				if(isJSON(_self.textarea)){
					let newdata=JSON.parse(_self.textarea);
					canvaLineA.updateData({
						series: newdata.series,
						categories: newdata.categories,
						scrollPosition:'right',
						animation:false
					});
				}else{
					
				}
			},
			// 图表代码end
		}
	}
</script>

<style lang="scss">
.mingxi{
	.selecttimes{
		color:#000000;
		font-size: 28upx;
		padding: 24upx;
	}
	.head{display: flex;margin: 20upx 0;}
	.head_l{display: flex;width: 85%;justify-content: space-around;}
	.head_r{width: 15%;text-align: center;}
	.head_l_1{border: 2upx solid #F2F2F2;padding: 0px 30upx;line-height: 50upx;}
	.head_btn{margin:20upx 40upx 0;border: 2upx solid #F2F2F2;padding: 0px 30upx;line-height: 50upx;}
	.ling{color: #E1461D;border: 2upx solid #E1461D;padding: 0px 30upx;line-height: 50upx;}
	.shouyi{border-top: 2upx solid #EBEBEB;border-bottom:2upx solid #EBEBEB; background-color: #FAFAFA;display: flex;height: 60upx;
	line-height: 60upx;padding: 6upx 20upx;margin-top: 30upx;}
	.sy_l{width: 50%;}
	.sy_l text{font-weight: bold;}
	.ticheng .li:nth-of-type(odd){ background-color: #EEEEEE;} 
	.ticheng .li:nth-of-type(even){background-color: #fff;} 
	.tcs{display: flex;justify-content: space-between;padding: 20upx;line-height: 50upx;font-size: 28upx;}
	.tc_l{color: #9A9A9A;}
	.tc_l text{font-size: 28upx;font-weight: bold;color: #000;}
	.tc_2{color: #E1461D;}
	.tc_2 text{color: #9A9A9A;}
	
}

/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.qiun-columns{
		background: #FFFFFF;
	}
	.dopicons{
		width: 48upx;
		height: 48upx;
		margin-top: 12upx;
		margin-left: 15upx;
	}
</style>
