<style>
	.salesvolume .disc{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.salesvolume .zongxiaos{
		width: 100%;
		margin-top: 40rpx;
	}
	.salesvolume .distext{
		font-size: 12px;
		color: #7FBFFF;
	}
	.salesvolume .dised{
		display: flex;
		align-items: flex-end;
		font-size: 70rpx;
		margin-top: 7px;
		color: #FFF;
	}
	.salesvolume .top-b{
		margin-top: 25rpx;
		width: 100%;
		display: flex;
		align-items: center;
	}
	.salesvolume .top-b-item{
		width:calc((100vw - 2px)/2) ;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.salesvolume .zongjie{
		width: calc(100vw - 50px);
		height: 148rpx;
		margin-left: 25px;
		margin-top: 30px;
		border-radius: 10px;
		box-shadow: 0px 0px 8px 0px rgba(116, 116, 116, 0.35);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	.salesvolume .zongjie-item{
		width: calc((100vw - 50px - 2px)/2);
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
		color: #6A6A6A;
		
	}
</style>
<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
		<view class="salesvolume">

			<view class="headStatus" v-if="scrollTop > 50" :style="[
				headStyle,
				{
				  zIndex: scrollTop < 10 ? 'unset' : 2,
				  opacity: scrollTop < 10 ? '100' : scrollTop,
				},]">
				<view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#000"></u-icon>
				</view>
				<view class="title" v-if="scrollTop > 50">{{pageTitle}}</view>
			</view>
			<view style="width: 100%;height: 100%;">
				<view class="sharebox_top">
					<view class="sharebox_top_nav" :style="{paddingTop:nav+'px'}">
						<view class="arrow" @click="redirectPrev">
							<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
						</view>
						<view class="title" style="color: #FFFFFF;font-size: 16px;">{{pageTitle}}</view>
						<view style="width: 24px;height: 24px;"></view>
					</view>
					<view class="disc zongxiaos" >
						<text class="distext">总销售额</text>
						<view class="dised" style="margin-top: 10rpx;">{{data.Total?data.Total.toFixed(2):0}} <text style="font-size: 15px;margin-bottom: 16rpx;">(元)</text>  </view>
					</view>
					<view class="top-b">
						<view class="top-b-item">
							<text class="distext">{{showText==0?'我的总销售额':'TA的总销售额'}} </text>
							<view class="dised" style="font-size: 17px;">{{data.MySellMoney?data.MySellMoney.toFixed(2):0}} <text style="font-size: 10px;margin-bottom: 6rpx;">(元)</text>  </view>
						</view>
						<view style="width: 1px;height: 30px;background: #FFF;"></view>
						<view class="top-b-item">
							<text class="distext">下线总销售额</text>
							<view class="dised" style="font-size: 17px;">{{data.ReSellMoney?data.ReSellMoney.toFixed(2):0}} <text style="font-size: 10px;margin-bottom: 6rpx;">(元)</text>  </view>
						</view>
					</view>
				</view>
				<view style="width: 100%;padding:0 15px;display: flex;align-items: center;justify-content: space-between;height: 50px;">
					<text style="font-size: 17px;color: #000000;font-weight: bold;">{{showText==0?'我的销售额':'销售额'}}</text>
					
				</view>
				<view style="width: 100%;display: flex;align-items: center;justify-content: center;">
					<view style="display: flex;align-items: center;"  @click="gourltiem">
						<text style="font-size: 14px;color: #000000;">{{msg.StartTime}} ~ {{msg.EndTime}}</text>
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/salesxiala.png" style="width: 17px;height: 17px;margin-left: 7px;"></image>
					</view>
				</view>
				<canvas  canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true
					@touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn">
					
				</canvas>
				<view class="zongjie">
					<view class="zongjie-item">
						<text>{{showText==0?'我的销售额':'销售额'}}</text>
						<text :style="{'font-size':timeMySale>10000 ||timeReSale>10000 ?'12px': '22px','color': '#000000'}">{{timeMySale.toFixed(2)}}</text>
					</view>
					<view style="width: 1px;height: 30px;background: #D2D2D2;"></view>
					<view class="zongjie-item">
						<text>下线销售额</text>
						<text :style="{'font-size':timeMySale>10000 ||timeReSale>10000?'12px': '22px','color': '#000000'}">{{timeReSale.toFixed(2)}}</text>
					</view>
				</view>

			</view>
			
           
          <!-- 	<calendar ref="calendar" v-if="show"
           	@cancel="show=false" 
           	:startDate="msg.StartTime"
           	 :height="height"
           	  :endDate="msg.EndTime"
           	   @selectDate="selectDate"
           		:limit="limit" /> -->
          

		</view>
	</scroll-view>
</template>

<script>
	import uCharts from '../school/components/u-charts/u-charts.min.js';
	// import calendar from './cp/fl-calendar.vue'

	var canvaColumn = null;
	var _self;
	export default {
		components: {
			
		},
		
		data() {
			return {
				show:false,
				pageTitle: "销售额",
				contentHeight: 0,
				mainColor: '',
				secondary: '',
				headStyle: {},
				scrollTop: 0,
				showText:0,//显示我还是他 0 是我  1 是他
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				msg: {
					UserId: 0,
					StartTime: '',
					EndTime: '',
				},
				 height:500,                 //日历容器高度
				 limit:36,
				data:{},
				nav: 0,
				
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:''	,
				timeMySale:0,//时间段的最近销售额
				timeReSale:0,//时间段的下线的销售额
			}
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.nav = uni.getMenuButtonBoundingClientRect().top;
			this.headStyle.paddingTop = this.nav + 'px';


		},
		
		mounted() {

			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad(options) {
			_self = this;
			if (options && options.UserId) {
				this.msg.UserId = options.UserId;
				let UserId = uni.getStorageSync('mall_UserInfo')?uni.getStorageSync('mall_UserInfo').UserId : 0;
				if( UserId != this.msg.UserId ){
					this.showText = 1
				}
				this.getTime()
			}
		},
		methods: {
			 // 获取传参
			children(startDate,endDate) {
				this.msg.StartTime = startDate
				this.msg.EndTime = endDate
				this.init()
				
			},
			getTime() {
				var myDate = new Date();
				this.msg.EndTime = myDate.getFullYear() + '-' + ((myDate.getMonth() + 1)<10?'0'+(myDate.getMonth() + 1):(myDate.getMonth() + 1)) + '-' + (myDate.getDate()<10?'0'+myDate.getDate():myDate.getDate())
				var startDate = new Date(myDate.setDate(myDate.getDate() - 7)) //计算当前时间的前7天的时间
				this.msg.StartTime = startDate.getFullYear() + '-' + ((startDate.getMonth() + 1)<10?'0'+(startDate.getMonth() + 1):(startDate.getMonth() + 1))+ '-' + (startDate.getDate()<10?'0'+startDate.getDate():startDate.getDate())
				this.cWidth=uni.upx2px(750);
				this.cHeight=uni.upx2px(500);
				this.init();
			},
			init() {
			
				this.request2({
						url: '/api/AppletUser/GetSellMoneyStatistics',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.data = res.data
							// this.data.DayList = [{Day: "2020-04-10",MySale: 80,ReSale: 70},
							// 	{Day: "2020-04-11",MySale: 100,ReSale: 40},
							// 	{Day: "2020-04-12",MySale: 20,ReSale: 30},
							// 	{Day: "2020-04-13",MySale: 30,ReSale: 120},
							// 	{Day: "2020-04-14",MySale: 58,ReSale: 67},
							// 	{Day: "2020-04-15",MySale: 90,ReSale: 100},
							// 	{Day: "2020-04-16",MySale: 23,ReSale: 400},
							// ]
							
							let Column = {
								categories: [],
								series: []
							};
							let myName = this.showText==0?'自己销售额':'销售额'
							let MySale={
								name:myName,
								data:[],
								color: "#3FE5ED",
								index: 0,
								legendShape: "rect",
								pointShape: "circle",
								show: true,
								type: "group",
						
							};
							let ReSale={
								name:'下线销售额',
								data:[],
								color: "#D86CFB",
								index: 0,
								legendShape: "rect",
								pointShape: "circle",
								show: true,
								type: "meter"
							};
							this.timeMySale=0;
							this.timeReSale=0;
							this.data.DayList.map((x)=>{
								this.timeMySale = this.timeMySale+x.MySale;//计算时间段的自己销售额
								this.timeReSale = this.timeReSale+x.ReSale;//时间段的下线的销售额
								let day = x.Day.split(' ')[0].split('-')[1]+'-'+x.Day.split(' ')[0].split('-')[2]
								Column.categories.push(day)
								MySale.data.push(x.MySale)
								ReSale.data.push(x.ReSale)
							})
							Column.series = [MySale,ReSale]
							_self.showColumn("canvasColumn",Column);
						}
					}
				);
			},
		
			showColumn(canvasId,chartData){
				canvaColumn=new uCharts({	
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					fontSize:11,
					padding:[5,15,15,15],
					legend:{
						show:true,
						position:'top',
						float:'center',
						itemGap:30,
						padding:5,
						margin:5,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth :1
					},
					dataLabel:true,
					dataPointShape:true,
					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:'right',
					},
					yAxis: {
						//disabled:true
						gridType:'dash',
						splitNumber:4,
						min:10,
						max:180,
						format:(val)=>{return val.toFixed(0)+'元'}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
						}
					},
				});
				
			},
			touchColumn(e){
				canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				canvaColumn.scrollEnd(e);
				canvaColumn.touchLegend(e, {
					animation:true,
				});
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data+'元' 
					}
				});
			},
			
			redirectPrev() {

				uni.navigateBack({
					delta: 1,
				});

			},
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			btnStart(val){
				console.log(val)
			},
			gourltiem(){//时间选择
				uni.navigateTo({
					url: '/pages/share/time/choiceDate?StartTime='+this.msg.StartTime +'&EndTime='+this.msg.EndTime
				});
			},
			
		}
	}
</script>

<style>
	.salesvolume {
		background: #FFF;
		font-family: aa;
	}

	image {
		will-change: transform
	}
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.salesvolume .shareadd {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 50px;
	}

	.salesvolume .shareadd .shareadd_b {
		width: 60%;
		height: 45px;
		border-radius: 22.5px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-top: 20px;
	}

	.salesvolume .sharebox_top {
		width: 100%;
		height: 474rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/salesvolume-top.png);
	}

	.salesvolume .sharebox_top .sharebox_top_nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		line-height: 34px;
		padding: 0 10px;
	}

	.salesvolume .headStatus {
		overflow: hidden;
		position: relative;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		background: #FFFFFF;
	}

	.salesvolume .headStatus .arrow {
		height: 24px;
		margin: 5px 10px;
		width: 24px;
	}

	.salesvolume .headStatus .title {
		font-size: 16px;
		color: #000;
		flex: 1;
		width: 1px;
		margin-left: 10px;
		line-height: 34px;
	}
	 cover-view,
	    cover-image {
	        display: inline-block;
	    }

</style>
