<template>
	<view class="" :style="lineRotate? 'overflow:hidden;height:100%;':''">
		<div class="uni-flex ai-center jc-between">
			<view class="uni-inline-item modle-title">
				<image src="/static/images/revenue/ysqs.png" mode="aspectFit"></image>
				<text class="strong-text">{{theRequest.name||'省内'}}营收趋势</text>
				
			</view>
			<view class="uni-flex ai-center line-tab-box">
				<view class="line-tab-unit" v-for="(d,index) in dateTypeList " :key="index" :class="{'active': revenueLineDate==d.type}" @click="changeDate('revenueLineDate',d.type)">
					{{d.name}}
				</view>
				
			</view>
		</div>
		<view class="pop-revenue-canvas" :class="{'active':lineRotate}">
			<view class="uni-flex align-center pop-revenue-date" >
				<view v-for="(d,index) in dateTypeList " :key="index" :class="{'active': revenueLineDate==d.type}" @click="changeDate('revenueLineDate',d.type)">
					{{d.bigName}}
				</view>
			</view>
			<view v-show="lineRotate">
				<canvas canvas-id="ratateRevenueLine" id="ratateRevenueLine" class="operation-content"
				   @touchstart="touchLine($event,'ratateRevenueLine')"></canvas>
			</view>
			<view class="pop-revenue-title">
			
				<view class="canvas-title">
					<view >
						{{showMsg.timeText || theRequest.time}}
					</view>
					<view v-show="showMsg.Revenue_Amount">
						营收金额：¥{{$util.fmoney(showMsg.Revenue_Amount,2)}}
					</view>
				</view>
				<view class="pop-title">
					<view>{{theRequest.name||'省内'}}营收趋势</view>
					<text class="uni-icon uni-icon-close-filled" @tap="lineRotate =false"></text>
				</view>
			</view>
			
		</view>
		<view class="revenue-line-box" v-show="revenueLineMsg[revenueLineDate].Revenue_Amount">
			<view class="uni-flex ai-center ">
				<view class="revenue-line-data" :class="{'active': revenueLineType==0}" @click="changeDate('revenueLineType',0)">
					<p>营收金额<p>
					<p>{{revenueLineDate == 2? yearAmout :$util.fmoney(revenueLineMsg[revenueLineDate].Revenue_Amount,2)}} <text v-if="revenueLineDate == 2" style="font-size: 24rpx;">亿</text></p>
					
				</view>
				<view class="revenue-line-data" :class="{'active': revenueLineType==1}" @click="changeDate('revenueLineType',1)">
					<p>客单笔数</p>
					<p>{{$util.fmoney(revenueLineMsg[revenueLineDate].Ticke_Count,2)}}</p>
				</view>
				<view class="revenue-line-data" :class="{'active': revenueLineType==2}" @click="changeDate('revenueLineType',2)">
					<p>客单均价</p>
					<p>{{$util.fmoney(revenueLineMsg[revenueLineDate].Average_Amount,2)}}</p>
				</view>
				
			</view>	
			
			<view class="text-title"> {{typeName[revenueLineType]}}比上{{dateTypeList[revenueLineDate].type==0? '周':dateTypeList[revenueLineDate].name}}  <text class="text-week">({{sevenDate[revenueLineDate]}})</text></view>
			<view :class="revenuelineList[revenueLineDate][revenueLineType].isTopUp ? 'up-text-title':'down-text-title'">{{revenuelineList[revenueLineDate][revenueLineType].Top_Difference}}%</view>
			<view class="text-title">
				{{typeName[revenueLineType]}}趋势
				<cover-view class="rotate-btn" @tap="rotaCanvas('revenueLine')">
					<cover-image src="/static/images/revenue/rotate.png" mode="aspectFit"></cover-image>
				</cover-view>
				</view>
			<view :style="lineRotate? 'display:none;': ''">
				
				<canvas canvas-id="revenueLine" id="revenueLine" class="operation-content" @touchstart="touchLine($event,'revenueLine')"></canvas>
				
			</view>
		</view>
		<view class="revenue-line-box" v-if="revenueLineMsg[revenueLineDate].down_deff">
			<view  class="title">客单交易</view>
			<view class="text-title"> 客单数量比上{{dateTypeList[revenueLineDate].type==0? '周':dateTypeList[revenueLineDate].name}} </view>
			<view :class="revenuelineList[revenueLineDate][3].isTopUp ? 'up-text-title':'down-text-title'">{{revenueLineMsg[revenueLineDate].down_deff}}%</view>
			<view :style="lineRotate? 'display:none;': ''">
				<canvas canvas-id="revenueClounm" id="revenueClounm" class="operation-content" 
				 @touchstart="touchLine($event,'revenueClounm')"></canvas>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import uCharts from '@/components/u-charts/u-charts.js';
	
	var rincanvas = {};
	var _self;
	export default {
		data (){
			const lastDay = this.$util.cutDate(new Date(), 'YYYY/MM/DD', -1)
			return {
				lastDay: lastDay,
				sevenDate: [],
				theRequest:{},
				revenueLineDate: 0,
				lineRotate: false,
				urlName: 'WeChat/GetRevenueTrends',
				yearAmout: 0,
				showMsg: {
					
					height: this.pageWindowHeight
				}, //横屏显示的信息
				dateTypeList: [
					{
						type: 0,
						staticticsType: 'Week',
						name: '近七日',
						bigName:'近七日',
						value:[]
					},
					{
						type: 1,
						staticticsType: 'Month',
						name: '月',
						bigName:'近1月',
						value: []
					},
					{
						type: 2,
						staticticsType: 'Year',
						name: '年',
						bigName:'近1年',
						value: []
					}
				] , // 0 周统计， 1 月统计 2 年统计
				revenueLineType: 0, // 0 Revenue, 1 Ticke, 2 Average
				revenueLineMsg: {0:{},1:{},2:{}}, // 营收趋势
				revenuelineList: {0:[],1:[],2:[]},
				typeName: ['营收金额','客单笔数','客单均价'] // 
			}
		},
		computed:{
			...mapGetters({'user':'getUser'}),
			
		},
		methods:{
			rotaCanvas(id){
				let listMsg = this.revenuelineList[this.revenueLineDate][this.revenueLineType]
				if(listMsg){
					this.showLine({
						id: 'ratateRevenueLine',
						data: listMsg.data,
						categories: listMsg.categories,
						rotate: true,
						width: uni.upx2px(434),
						height: this.showMsg.height- uni.upx2px(90)
					});
					
				}
				this.lineRotate = true
				// let opt = {
				// 	categories: listMsg.categories,
				// 	series: listMsg.data,
				// 	rotate: opts.rotate = !opts.rotate
				// }
				
				// rincanvas[id].updateData(opt)
			},
			changeDate(name,index){
				let _this =this
				let oldDateType = _this.revenueLineDate.toString()
				
				if(name=='revenueLineDate' && oldDateType !=index)
				{
					let column = _this.revenuelineList[index][3]
					if(column){
						_this.showClounm({
							id: 'revenueClounm',
							data: column.data,
							categories: column.categories,
							revenueLineDate:index
						});
					}
				}
				this[name] = index
					
				let listMsg = _this.revenuelineList[_this.revenueLineDate][_this.revenueLineType]
				if(listMsg){
					_this.showLine({
						id: 'revenueLine',
						data: listMsg.data,
						categories: listMsg.categories
					});
					if(_this.lineRotate ){
						_this.showLine({
							id: 'ratateRevenueLine',
							rotate: true,
							width: uni.upx2px(434),
							height: _this.showMsg.height-uni.upx2px(90),
							data: listMsg.data,
							categories: listMsg.categories,
							
						});
					}
				}else{
					uni.showLoading({
						title: '正在加载...',
						mask:true
					})
					this.getTender()
				}
				
			},
			
			touchLine(e,id) {
				let _this = this
				
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				rincanvas[id].showToolTip(e, {
					format: function (item, category) {
						if(id=="ratateRevenueLine"){
							_this.showMsg.Revenue_Amount = item.data 
							_this.showMsg.timeText = category
							_this.$forceUpdate()
							return category 
						}else {
							return category + ' ' + item.name + ':' + item.data 
						}
						
					}
				});
			},
			getTender() {	// 营收趋势
				let _this = this 
				let obj = this.theRequest
				let Statictics_Type= this.dateTypeList.map(n=>{return n.staticticsType} )
				let Report_Type= ['Revenue','Ticke','Average']
				let bili = ['Revenue_Amount','Ticke_Count','Average_Amount']
				let typeName= ['营收金额','客单笔数','客单均价']
				let DateIndex = parseInt(_this.revenueLineDate) 
				let typeIndex = parseInt(_this.revenueLineType)
				let revenueLineMsg = _this.revenueLineMsg[DateIndex]
				_this.$request.$webGet(this.urlName,{
					Statictics_Type: Statictics_Type[DateIndex],
					Report_Type: Report_Type[typeIndex],
					groupType: obj.GroupType,
					pushProvinceCode: obj.ProvinceCode,
					Serverpart_Id: obj.Serverpart_Id,
					Statistics_Date: _this.theRequest.time || this.lastDay
				}).then(res=>{
					
					if(res.Result_Code==100) {
						revenueLineMsg.Revenue_Amount = res.Result_Data.Revenue_Amount
						revenueLineMsg.Ticke_Count = res.Result_Data.Ticke_Count
						revenueLineMsg.Average_Amount = res.Result_Data.Average_Amount
						
					
						let _list = []
						let listRevenueDetils = _this.pushCanvasData(res.Result_Data.listRevenueDetils)
						let list = _this.pushCanvasData(res.Result_Data.listTickeDetils)
						let listAverageDetils = _this.pushCanvasData(res.Result_Data.listAverageDetils)
						_list.push(listRevenueDetils,list,listAverageDetils)
						_this.showLine({
							id: 'revenueLine',
							categories: listRevenueDetils[0],
							data: [{name:typeName[typeIndex],data:listRevenueDetils[1]}],
							
						});
						_this.showClounm({
							id: 'revenueClounm',
							categories: list[0],
							data: [{name:'客单交易',data:list[1],textColor: '#B3B3B3'}],
							revenueLineDate: DateIndex
						});
						_this.yearAmout = ( res.Result_Data.Revenue_Amount / 100000000).toFixed(2)
						if(_this.lineRotate){
							_this.showLine({
								id: 'ratateRevenueLine',
								rotate: true,
								width: uni.upx2px(434),
								height:  _this.showMsg.height-uni.upx2px(90),
								categories: listRevenueDetils[0],
								data: [{name:typeName[typeIndex],data:listRevenueDetils[1]}],
								
							});
						}
						bili.forEach((biliName,i)=>{
							let topDeff = res.Result_Data[Report_Type[i]+'_Proportion'].replace('%','')
							_this.revenuelineList[_this.revenueLineDate][i] = {
								categories: _list[i][0],
								data: [{name:typeName[i], data:_list[i][1]}],
								Top_Difference: topDeff.replace('-',''),
								isTopUp: topDeff.indexOf('-')>-1? false:true
							}
							if(i==1){ //  客单笔数柱状图
								revenueLineMsg.down_deff =  topDeff.replace('-','')
								
								_this.revenuelineList[_this.revenueLineDate][3] = {
									data: [{name:'客单交易',data:list[1],textColor: '#B3B3B3'}],
									categories: list[0],
									Top_Difference:  topDeff.replace('-',''),
									isTopUp: topDeff.indexOf('-')>-1? false:true
								}
								
							}
						})
						// _this.rotaCanvas('ratateRevenueLine')
						_this.$forceUpdate()
						uni.hideLoading()
					}
				})
			},
			pushCanvasData(list) { // 拼接营收趋势数据
				let _this = this
				let _list = [[],[]]
				if(list.length){
					
					list.map(n=>{
						let date = _this.revenueLineDate ==2 ? n.Statictics_Date:_this.$util.cutDate(n.Statictics_Date,'MM/DD')
						_list[0].push(date)
						_list[1].push(n.Statictics_Amount) 
						
					})
				}
				return _list
			},
			showLine (obj) {
				rincanvas[obj.id] = new uCharts({ 
					$this:_self,
					canvasId: obj.id,
					colors: ['#667ED5'],
					type: 'area',
					fontSize: 12,
					legend: {show:false},
					dataLabel: false,
					dataPointShape: false,
					padding: [30,20,12,12],
					background:'#FFFFFF',
					dataPointShapeType:'hollow',
					categories: obj.categories,
					series: obj.data,
					animation: false,
					rotate: obj.rotate || false,
					// enableScroll:true, //开启图表拖拽功能
					xAxis: {
						disabled: false,
						disableGrid: true,
						axisLine: false,
						fontColor: '#B3B3B3',
						labelCount: 5,
						// itemCount: 7,//x轴单屏显示数据的数量，默认为5个
						// scrollShow: true,//新增是否显示滚动条，默认false
						// scrollAlign: 'left',//滚动条初始位置
					},
					yAxis: {
						
						data: [{
							disabled: false,
							axisLine: false,
							fontColor: '#B3B3B3',
							format:(val)=>{return val<10000 ? parseInt(val) :  parseInt(val/10000)+'w'}
						}],
						gridType: 'dash',
						gridColor: '#eee',
						dashLength: 2,
						splitNumber: 3,
						
					},
					width: obj.width || uni.upx2px(686),
					height: obj.height || uni.upx2px(350),
					extra: {
						area:{
							addLine: true,
							gradient:true,
							type: 'curve'
						},
						tooltip:{
							// dashLength: uni.upx2px(4),
							gridType: 'dash',
							gridColor: '#acacac',
							
						}
					}
				});
			},
			showClounm(obj) {
				let xAxis =  {
						disabled: false,
						disableGrid: true,
						axisLine: false,
						fontColor: '#B3B3B3',
						labelCount: 12,
						// itemCount: 7,//x轴单屏显示数据的数量，默认为5个
						// scrollShow:true,//新增是否显示滚动条，默认false
						// scrollAlign:'left',//滚动条初始位置
					}
				if(obj.revenueLineDate!==0) {
					xAxis =  {
						disabled: false,
						disableGrid: true,
						axisLine: false,
						fontColor: '#B3B3B3',
						labelCount: 6,
						// itemCount: 7,//x轴单屏显示数据的数量，默认为5个
						// scrollShow:true,//新增是否显示滚动条，默认false
						// scrollAlign:'left',//滚动条初始位置
					}
				}
				rincanvas[obj.id] = new uCharts({
					$this:_self,
					canvasId: obj.id,
					type: 'column',
					legend: { show: false },
					dataLabel: false,
					colors: ['#D1DBEF'],
					fontSize: 11,
					background:'#FFFFFF',
					// padding: [30,12,12,12],
					animation: true,
					categories: obj.categories,
					series: obj.data,
					enableScroll:  false, //开启图表拖拽功能obj.revenueLineDate!==0 ? true:
					xAxis: xAxis,
					yAxis: {
						data: [{
							disabled: false,
							axisLine: false,
							fontColor: '#B3B3B3',
							format:(val)=>{return val<10000 ? parseInt(val) :  parseInt(val/10000)+'w'}
						}],
						
						gridType: 'dash',
						gridColor: '#eee',
						dashLength: 2,
						splitNumber: 3,
					},
					
					width: uni.upx2px(686),
					height: uni.upx2px(350),
					extra: {
						column: {
							type:'group',
							width: obj.revenueLineDate!==0 ? uni.upx2px(8*obj.revenueLineDate) :uni.upx2px(26),
							border: 0
						},
						
					  }
				});
				
			},
			
		},
		onLoad(option) {
			_self = this
			uni.showLoading({
				title: '正在加载...'
			})
			
			if(option.time){
				let start = option.time
				this.sevenDate =
				 [
					`${this.$util.cutDate(new Date(start),'MM.DD',-13)}-${this.$util.cutDate(new Date(start),'MM.DD',-7)}`,
					`${this.$util.cutDate(new Date(start),'MM.DD',-58)}-${this.$util.cutDate(new Date(start),'MM.DD',-29)}`,
					`${this.$util.cutDate(new Date(start),'YYYY.MM',-720)}-${this.$util.cutDate(new Date(start),'YYYY.MM',-364)}`
				]
				this.theRequest.time = option.time
				 this.theRequest.name = option.name ||''
				this.theRequest.ProvinceCode = option.ProvinceCode || this.user.ProvinceCode
				if(option.id){
					
					this.theRequest.Serverpart_Id = option.id
					this.theRequest.GroupType = 1010
				}else{
					
					this.urlName = 'WeChat/GetRevenueTrendsById'
					
				}
				this.getTender()
				
			
			}else{
					uni.hideLoading()
					this.theRequest = {}
					this.isLoading = false
					this.showPage = false
					this.noDataText = '抱歉,暂无营收趋势数据'
				}
		}
	}
</script>

<style>
	.modle-title {
		padding-left: 24rpx;
		font-size: 30rpx;
		padding-top: 42rpx;
		padding-bottom: 20rpx;
		font-weight: bolder;
	}
	.modle-title image {
		max-width: 36rpx;
		max-height: 36rpx;
	}
	/* 营收分析 */
	.line-tab-box {
		padding-top: 20rpx;
		/* padding-bottom: 30rpx; */
	}
	.line-tab-unit {
		/* width: 60rpx; */
		height: 44rpx;
		font-size: 26rpx;
		color: #A9A9A9;
		background: #ececec;
		border-radius: 8rpx;
		text-align: center;
		line-height: 44rpx;
		margin-right: 32rpx;
		padding: 0 10rpx;
		
	}
	.line-tab-unit.active {
		background-color: #667ED5;
		color: #fff;
	}
	.revenue-line-box {
		background-color: #fff;
		margin: 0 16rpx;
		border-radius: 20rpx;
		padding: 34rpx 16rpx 34rpx 16rpx;
		box-shadow: 1rpx 0rpx 6rpx 0px rgba(224,224,224,0.54); 
	}
	.revenue-line-box + .revenue-line-box {
		margin-top: 38rpx;
	}
	.revenue-line-data {
		width: 216rpx;
		height: 144rpx;
		background-color: #F8F8F8;
		border-radius: 12rpx;
		color: #A5A5A5;
		font-size: 24rpx;
		text-align: center;
		padding-top: 20rpx;
		border: 2rpx solid #F8F8F8;
		box-sizing: border-box;
	}
	.revenue-line-data + .revenue-line-data {
		margin-left: 24rpx;
	}
	.revenue-line-data p:last-child {
		font-size: 40rpx;
		font-family: 'Bahnschrift Regular';
		line-height: 1.2;
	}
	.revenue-line-data.active {
		border: 2rpx solid #889DED;
		background-color: #f1f3fb;
		color: #667ED5;
	}
	.revenue-line-box .text-title {
		color: #9498A4;
		font-size: 24rpx;
		margin-top: 38rpx;
		position: relative;
	}
	.revenue-line-box .up-text-title {
		color: #E76E40;
		font-family: 'Bahnschrift Regular';
		font-size: 36rpx;
		line-height: 1.5;
	}
	.up-text-title:after {
		content: "";
		margin-left: 12rpx;
		width: 20rpx;
		height: 22rpx;
		display: inline-block;
		background: url('/static/images/revenue/up-arrow.png') no-repeat center;
		background-size: contain;
		
	}
	.text-week {
		color: #C2C2C2;
		margin-left: 32rpx;
	}
	.down-text-title:after {
		content: "";
		margin-left: 12rpx;
		width: 20rpx;
		height: 22rpx;
		display: inline-block;
		background: url('/static/images/revenue/down-arrow.png') no-repeat center;
		background-size: contain;
		
	}
	.revenue-line-box .down-text-title {
		color: #39A15E;
		font-family: 'Bahnschrift Regular';
		font-size: 36rpx;
		line-height: 1.5;
	}
	.revenue-line-box .title {
		color: #000;
		font-size: 28rpx;
		font-weight: bolder;
	}
	.revenue-line-box canvas.operation-content {
		height: 350rpx;
		width: 686rpx;
		/* margin: 0 auto 0 auto; */
		background-color: #fff;
	}
	.rotate-btn {
		position: absolute;
		top: 10rpx;
		right: 14rpx;
		height: 56rpx;
		width: 56rpx;
		text-align: center;
	}
	.rotate-btn cover-image {
		width: 27rpx;
		height: 27rpx;
	}
	/* 弹出横屏 */
	.pop-revenue-canvas { 
		width: 750rpx;
		height: calc(100vh);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #fff;
		opacity: 0;
		transition: all 0.5s;
		display: flex;
		justify-content: flex-end;
		padding-top: 60rpx;
		box-sizing: border-box;
	}
	.pop-revenue-canvas.active {
		z-index: 9999;
		opacity: 1;
	}
	.pop-revenue-canvas .pop-revenue-date {
		justify-content: center;
		flex-direction: column;
		width: 106rpx;
	}
	.pop-revenue-canvas .pop-revenue-date view {
		transform: rotate(90deg);
		width: 197rpx;
		text-align:	 center;
		flex-direction: column;
		
		margin: 142rpx 0;
		height: 60rpx;
		border-radius: 30rpx;
		
	}
	.pop-revenue-canvas .pop-revenue-date view.active {
		background: #E7F1FD;
		color: #7C91DC;
	}
	.pop-revenue-canvas .pop-revenue-title { 
		/* width: 120rpx; */
		display: flex;
	}
	.pop-revenue-canvas .pop-revenue-title view {
		line-height: 1;
	}
	.pop-revenue-canvas .pop-revenue-title text{
		transform: rotate(90deg);
		display: inline-block;
		vertical-align: middle;
		line-height: 1;
		white-space: nowrap;
	}
	.pop-revenue-canvas .pop-title {
		font-size: 30rpx;
		padding: 0 37rpx 0 32rpx;
		border-left: 1rpx solid #eee;
		width: 96rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		height: calc(100vh - 100rpx);
	}
	
	.pop-revenue-canvas .canvas-title {
		width: 69rpx;
		background-color: #ECEFFC;
		margin: 0 10rpx 30rpx 0;
		padding: 40rpx 22rpx 0 24rpx;
		box-sizing: border-box;
		
	}
	.pop-revenue-canvas .canvas-title view,.pop-revenue-canvas .pop-title view {
		white-space: nowrap;
		transform: rotate(90deg);
	}
	
	.pop-revenue-canvas .canvas-title view + view {
		margin-top: 220rpx;
	}
	.pop-revenue-canvas canvas.operation-content {
		width: 434rpx;
		height: calc(100vh - 100rpx);
		
		background-color: #fff;
	}
</style>
