<template>
	<!-- 资金受益统计 -->
	<view>
		<view class="head">
			<view class="head_l">经营统计</view>
		</view>
		<view class="tongji">

			<view class="t_time">统计时间截止{{dqdate}}</view>
			<view class="card">
				<view class="card_01">经营收入</view>
				<view class="card_02">¥ {{counts.money?counts.money:0}}</view>
				<view class="card_03">
					<view class="card_03_1">
						订单数<br /><span>{{counts.total_order?counts.total_order:0}}</span>
					</view>
					<view class="card_03_1">
						总提现资金<br /><span>￥{{counts.amount_cash?counts.amount_cash:0}}</span>
					</view>
					<view class="card_03_1">
						可提现金额<br /><span>￥{{counts.gold?counts.gold:0}}</span>
					</view>
				</view>
			</view>
			<!-- <view class="name">用户数据</view>
		<view class="uhsj">
			<view class="uhsj_l">
				<span>0</span> <br/>用户总数
			</view>
			<view class="uhsj_l">
				<span>0</span> <br/>本月新用户
			</view>
		</view> -->
			<view class="name">其他数据</view>
			<view class="shuju">
				<view class="sj_01">
					<view class="sj_01_1">{{counts.order_day?counts.order_day:0}}<br />今日订单</view>
					<view class="sj_01_1">¥ {{counts.money_day?counts.money_day:0}}<br />今日收益</view>
					<view class="sj_01_1">¥ {{counts.total_order?counts.total_order:0}}<br />总订单</view>
				</view>
				<view class="sj_02"></view>
				<view class="sj_01">
					<view class="sj_01_1">{{counts.order_yesterday?counts.order_yesterday:0}}<br />昨日订单</view>
					<view class="sj_01_1">¥ {{counts.money_yesterday?counts.money_yesterday:0}}<br />昨日收益</view>
					<view class="sj_01_1">¥ {{counts.amount_cash?counts.amount_cash:0}}<br />总提现资金</view>
				</view>
			</view>


			<!-- 统计的图表格 -->
			<view class="qiun-columns">

				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">统计图(如某一天没有经营数据将不会统计当天的数据)</view>
					<view class="flex" @tap="showpicker1">
						<view class="timebox" >选择日期： {{resulttime}}</view>
						<image class="dopicons" src="/static/news/dopicon.png" mode=""></image>
					</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>
				<!--#ifdef H5 -->
				<!-- <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
				<view class="qiun-title-dot-light">标准数据格式</view>
			</view>
			<view class="qiun-bg-white qiun-padding">
			    <textarea class="qiun-textarea" auto-height="true" maxlength="-1" v-model="textarea"/>
			</view>
			<view class="qiun-text-tips">Tips：修改后点击更新图表</view>
			<button class="qiun-button" @tap="changeData()">更新图表</button> -->
				<!--#endif-->
			</view>
			<!-- 统计end -->

		</view>
		
		<w-picker
		    mode="yearMonth" 
		    startYear="2018"
		    endYear="2030"
		    :defaultVal="defaultVal1" 
			:selectList="selectList1"
		    :current="true" 
		    @confirm="onConfirm1" 
		    ref="picker1" 
		    themeColor="#ff6900"
		></w-picker>
		<!-- 时间选择 -->
		
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import wPicker from "@/components/w-picker/w-picker.vue";//下拉选择组件
	import {
		isJSON
	} from '@/common/checker.js';
	var _self;
	var canvaLineA = null;

	import {
		storeMoney,
		storeIndex
	} from "@/utils/api/api.js";

	export default {
		components:{
			wPicker,
		},
		data() {
			return {
				data: [],

				//图表相关
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				counts: {}, //统计的数据
				dqdate: "", //当前日期
				
				//时间选择
				defaultVal1:[],
				selectList1:[],
				resulttime:"",//日期
				
			};
		},
		//下拉刷新
		onPullDownRefresh(){
			var date = new Date();
			this.dqdate = date.toLocaleString();
			
			this.storeMoneyget();
			this.getstoreIndex(); //获取统计数据
			
		},
		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.getServerData();
			
			
			var date = new Date();
			let near = date.getFullYear(); //获取完整的年份(4位)
			let mone =  date.getMonth(); //获取当前月份(0-11,0代表1月)
			mone = mone+1;
			if(mone<10){
				mone = "0"+mone
			}else{
				mone = mone;
			}
			let strdate = near + "-"+mone;//年月
			this.dqdate = date.toLocaleString();
			
			console.info(strdate,"strdate");
			
			this.resulttime = strdate;
			this.storeMoneyget();
			this.getstoreIndex(); //获取统计数据
		},
		//当前日期
		onShow() {
			
		},
		methods: {
			showpicker1(){
				this.$refs.picker1.show();
			},
			colepicker1(){
				this.$refs.picker1.hide();
			},
			//日期选择点击后 重置表格
			onConfirm1(e){
				console.info(e.result);
				this.resulttime = e.result;
				this.storeMoneyget();//重新获取统计图
				
			},
			async getstoreIndex() {
				let res = await storeIndex({

				});
				if (res.code == 0) {
					this.counts = res.data.counts;
				} else {
					this.$api.msg(res.msg);
				}
			},
			//获取统计图
			async storeMoneyget() {
				let res = await storeMoney({
					month: this.resulttime,//日期 默认是当前年月
				});
				uni.stopPullDownRefresh();//结束下拉刷新
				if (res.code == 0) {
					console.info(res.data);

					let cartogram = res.data;
					//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 in cartogram) {
						let item = cartogram;
						// console.info(i,cartogram[i],"111");
						categories.push(i); //可选日期列表


						series1.push(cartogram[i][0].orderCount); //订单条数
						// series2.push(cartogram[i].income);//收入

						// console.info("cartogram[i].length",cartogram[i].length);

						if (cartogram[i].length == 2) {
							//有锁客数据时候
							series2.push(cartogram[i][1].lockCount); //收入
						} else {
							//没有锁客数据时候
							series2.push(0);
						}

					}

					// {"name":"收入","data":series2},
					let LineA = {
						"categories": categories,
						"series": [{
							"name": "订单条数",
							"data": series1
						}, {
							"name": "锁客人数",
							"data": series2
						}]
					};

					console.info(LineA, "LineA");

					_self.textarea = JSON.stringify(LineA);
					_self.showLineA("canvasLineA", LineA);


				} else {

				}
			},
			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 {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	.head {
		display: flex;
		background-color: $base_color;
		justify-content: space-between;
		padding: 50upx 24upx
	}

	.head_l {
		color: #fff;
		font-size: 40upx;
	}

	.tongji {
		padding: 10px;

		.t_tit {
			font-size: 22px;
			padding: 20px 0px 0;
			font-weight: 900;
		}

		.t_time {
			padding: 10px 0px 15px;
			color: #B8B8B8;
			font-size: 10px;
		}

		.card {
			margin: 10px 0;
			background: linear-gradient(to bottom, #f37b1d, #ff3600);
			border-radius: 5px;
			padding: 10px;
			color: #FCE8E3;
			box-shadow: 2px 2px 5px 3px #FCEAE8
		}

		.card_01 {
			padding: 5px 0 10px;
			color: #FCE8E3
		}

		.card_02 {
			font-size: 20px;
			border-bottom: 1px solid #FFE4DC;
			padding-bottom: 15px;
		}

		.card_03 {
			display: flex;
			line-height: 20px;
			padding: 10px 0 5px;
		}

		.card_03_1 {
			width: 35%;
		}

		.name {
			margin: 25px 0 15px;
			font-size: 15px;
			font-weight: bold;
		}

		.uhsj {
			display: flex;
			justify-content: space-around;
		}

		.uhsj_l {
			width: 40%;
			text-align: center;
			box-shadow: 0px 0px 5px #E5E5E5;
			border-radius: 5px;
			line-height: 25px;
			padding: 15px 10px;
		}

		.uhsj_l span {
			font-size: 18px;
			font-weight: bold;
		}

		.shuju {
			background-color: #F8F8F8;
			border-radius: 5px;
		}

		.sj_01 {
			display: flex;
		}

		.sj_01_1 {
			width: 35%;
			text-align: center;
			line-height: 25px;
			padding: 10px;
		}

		.sj_02 {
			height: 1px;
			background-color: #fff;
		}
	}


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

	.charts {
		width: 100%;
		// width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.qiun-columns {
		background-color: #FFFFFF;
	}
	.timebox{
		margin-top: 15upx;
	}
	.dopicons{
		width: 48upx;
		height: 48upx;
		margin-top: 12upx;
		margin-left: 15upx;
	}
</style>
