<template>
	<div >
		<view class="page-body" v-if="showPage">
			<cover-view class="status-bar fixed-bar" :style="{'height':statusBarH+'px'}"></cover-view>
			<!-- 头部 -->
			
			<div class="new-content">
				
				<div class="status-bar" :style="{'height':statusBarH+'px'}"></div>
				<div class="page-title" :style="{'height':customBarH-statusBarH+'px'}"><text class="uni-icon uni-icon-arrowleft" @tap="backPage"></text><text class="text-title">每日营收汇总</text></div>
				
				<!-- <cover-view class="fixed-box" :style="'transform: translateY('+fixedY+'px);opacity:'+opacity+';'" v-if="headMsg.totalMoney">
					<cover-view class="status-bar" :style="{'height':statusBarH+'px'}"></cover-view>
					<cover-view class="page-title" :style="{'height':customBarH-statusBarH+'px'}"><cover-view class="uni-icon uni-icon-arrowleft" @tap="backPage"></cover-view><cover-view class="text-title">每日营收汇总</cover-view></cover-view>
					<cover-view class="uni-flex jc-between align-center">
						
						<cover-view>
							<cover-view class="center-title">{{headMsg.dayOfShow}}</cover-view>
							
							<cover-view class="title-clock" style="color: #fff;text-align: center;">{{theRequest.GroupType!='1000'? headMsg.name +' '+ headMsg.uploadState : headMsg.uploadState}}</cover-view>
						</cover-view>
						<cover-view>
							<cover-view class="center-title">总营收(元）</cover-view>
							<cover-view class="tab-unit-num" style="color: #fff;text-align: center;">{{headMsg.totalMoney}}</cover-view>
						</cover-view>
					</cover-view>
					
				</cover-view> -->
				<div  class="header-card" >
					<image :src="'/static/images/revenue/'+theRequest.ProvinceCode+'.png'" mode="aspectFit" class="head-log" v-if="theRequest.ProvinceCode"></image>
					<!-- <div class="uni-inline-item">
						<text>{{headMsg.dayOfShow}}</text>
						<div v-if="theRequest.GroupType!='1000'" style="margin-right: 8rpx;">{{headMsg.name}}</div>
						<div > {{headMsg.uploadState}}</div>
						 
					</div> -->
					<view>
						<text class="fs12">实时营收</text>
						<text class="heade-text ml10"> &nbsp;&nbsp;&nbsp;{{nowDay}}</text> 
					</view>
					
					<div class="top-number" >
						<text >{{today.timeMoney|| '0.00'}}</text>
						
						<!-- <div >
							<text class="heade-text">实时营收： </text> 
							<text class="head-cost-text">{{timeMoney}}</text>
						</div> -->
					</div>
					<div class="uni-flex header-today-info" >
					
						<text class="fs12">客单交易 </text>
						<text class="ml10">&nbsp;&nbsp;&nbsp;&nbsp; {{today.totalTicketCount || 0}}</text>
						<text class="fs12">(单)</text>
						<text class="ml-135 fs12">客单均价&nbsp;&nbsp;&nbsp;&nbsp;¥ </text>
						<text>{{today.avrticketCount || '0.00'}}</text>
					
					</div>
				</div>
			</div>
			<div class="uni-inline-item modle-title" >
				<image src="/static/images/revenue/yestoday-an.png" mode="aspectFit"></image>
				<text class="strong-text">营收汇总</text>
			</div>
			<div class="top-revenue-card uni-flex justify-between" >
				
				<div >
					<text class="top-number">{{headMsg.totalMoney}}</text>
					<span>元</span>
				</div>
				<div class="uni-inline-item">
					<text>{{headMsg.dayOfShow}}</text>
					<div v-if="theRequest.GroupType!='1000'" style="margin-right: 8rpx;">{{headMsg.name}}</div>
					<div > {{headMsg.uploadState}}</div>
					 
				</div>
				
				
				
			</div> 
			
			<!-- 营收数据总览 -->

			<div class="uni-flex justify-around mode-content">

				<div class="check-unit">
					<text>长款金额</text>
					<div  class="check-price-color">{{headMsg.DIFFERENT_PRICE_MORE}} <text>元</text></div>
				</div>
				<div class="check-unit">
					<text>短款金额</text>
					<div class="check-price-color">{{headMsg.DIFFERENT_PRICE_LESS}} <text>元</text></div>
				</div>
				<div class="check-unit">
					<text>客单交易</text>
					<div class="check-price-color">{{headMsg.TICKETCOUNT}} <text>笔</text></div>
				</div>
				<div class="check-unit">
					<text>客单均价</text>
					<div class="check-price-color">{{headMsg.TICKETAVE}} <text>元</text></div>
				</div>
			</div>
			<div class="uni-flex justify-around mode-content">
				<div class="check-unit">
					<text>优惠金额</text>
					<div class="check-price-color">{{headMsg.TOTALOFFAMOUNT}} <text>元</text></div>
				</div>
				<div class="check-unit">
					<text>移动支付</text>
					<div class="check-price-color">{{headMsg.MOBILEPAYMENT}} <text>元</text></div>
				</div>
				<div class="check-unit">
					<text>商品出售</text>
					<div class="check-price-color">{{headMsg.COMMODITY_COUNT}} <text>件</text></div>
				</div>
				<div class="check-unit">
					<text>商品均价</text>
					<div class="check-price-color">{{headMsg.COMMODITYAVE}} <text>元</text></div>
				</div>

			</div>

			<!-- 昨日日结上传 -->
			<div class="uni-inline-item modle-title" v-if="regionList.length>0">
				<image src="/static/images/revenue/yestoday-region.png" mode="aspectFit"></image>
				<text class="strong-text">日结上传</text>
			</div>
			<block v-if="theRequest.GroupType==1020">
				
				<div v-for="(item,i) in regionList" :key="i" class=" region-cell" @tap="toDetail(item,theRequest.ProvinceCode)">
					<div class="region-cell-unit">
						<text>{{item.SERVERPART_NAME}}</text>
						<div class="ct01">
							<text class="strong-text">{{$util.fmoney(item.CASHPAY,2)}}</text>
							<text>元</text>
						</div>
			
					</div>
					<div class="region-cell-unit">
						<text>上传率</text>
						<div class="ct01">
							<text class="strong-text">{{item.TOTAL_COUNT>0?$util.fmoney((item.UPLOAD_COUNT/item.TOTAL_COUNT)*100,2):100}}</text>
							<text>%</text>
						</div>
					</div>
					<div class="region-cell-unit" :class="{'ct-red':item.UPLOAD_COUNT!=item.TOTAL_COUNT}">{{item.UPLOADSTATE}}</div>
					<div class="region-cell-image">
						<text class="uni-icon-arrowright uni-icon" ></text>
						<!-- <image src="/static/images/revenue/you-jt.png" mode="aspectFit"></image> -->
					</div>
				</div>
					
				
			</block>
			<block v-else-if="theRequest.GroupType==1000">
				
				<div class="region-title" :class="{'active':regionShow1}" v-show="regionList.length>1" @tap="regionShow1=!regionShow1">省内区域</div>
				<div v-show="regionShow1">
					<block v-for="(item,i) in regionList[0]" :key="i">
						<div class=" region-cell" @tap="toggleRegion(item)">
							<div class="region-cell-unit">
								<text>{{item.TYPE_NAME}}</text>
								<div class="ct01">
									<text class="strong-text">{{$util.fmoney(item.CASHPAY,2)}}</text> 
									<text>元</text>
								</div>

							</div>
							<div class="region-cell-unit">
								<text>上传率</text>
								<div class="ct01">
									<text class="strong-text">{{item.TOTAL_COUNT >0? $util.fmoney((item.UPLOAD_COUNT/item.TOTAL_COUNT)*100,2) : 0}}</text>
									<text>%</text>
								</div>
							</div>
							<div class="region-cell-unit" :class="{'ct-red':item.UPLOAD_COUNT!=item.TOTAL_COUNT}">{{item.UPLOADSTATE}}</div>
							<div class="region-cell-image">
								<text class="uni-icon-arrowright uni-icon" :class="{'active':item.show}"></text>
								<!-- <image src="/static/images/revenue/you-jt.png" mode="aspectFit"></image> -->
							</div>
						</div>
						<ul class="region-cell-area" v-show="item.show">
							<li v-for="(child,index) in item.ServerpartList" :class="{'visited':child.visited}" :key="index" @tap="toDetail(child,theRequest.ProvinceCode)">
								<div>{{child.SERVERPART_NAME}}</div>
								<div>{{$util.fmoney(child.CASHPAY,2)}}<text>元</text></div>
								<div  :class="{'ct-red':child.UPLOAD_COUNT!=child.TOTAL_COUNT}">{{child.UPLOADSTATE}}</div>
							</li>
						</ul>
					</block>
				</div>
				<div class="region-title" :class="{'active':regionShow2}" v-show="regionList.length>1" @tap="regionShow2=!regionShow2">省外区域</div>
				<div v-show="regionShow2">
					<block v-for="(item,i) in regionList[1]" :key="i">
						<div class=" region-cell" @tap="toggleRegion(item)">
							<div class="region-cell-unit">
								<text>{{item.TYPE_NAME}}</text>
								<div class="ct01">
									<text class="strong-text">{{$util.fmoney(item.CASHPAY,2)}}</text>
									<text>元</text>
								</div>
					
							</div>
							<div class="region-cell-unit">
								<text>上传率</text>
								<div class="ct01">
									<text class="strong-text">{{$util.fmoney((item.UPLOAD_COUNT/item.TOTAL_COUNT)*100,2)}}</text>
									<text>%</text>
								</div>
							</div>
							<div class="region-cell-unit " :class="{'ct-red':item.UPLOAD_COUNT!=item.TOTAL_COUNT}">{{item.UPLOADSTATE}}</div>
							<div class="region-cell-image">
								<text class="uni-icon-arrowright uni-icon"></text>
								<!-- <image src="/static/images/revenue/you-jt.png" mode="aspectFit"></image> -->
							</div>
						</div>
						<ul class="region-cell-area" v-show="item.show">
							<li v-for="(child,index) in item.ServerpartList" :class="{'visited':child.visited}" :key="index" @tap="toDetail(child,'451200')">
								<div>{{child.SERVERPART_NAME}}</div>
								<div>{{child.CASHPAY}}<text>元</text></div>
								<div  :class="{'ct-red':child.UPLOAD_COUNT!=child.TOTAL_COUNT}">{{child.UPLOADSTATE}}</div>
							</li>
						</ul>
					</block>
				</div>
						
			</block>
			<block v-else>
				<shopCell v-for="(item,i) in regionList" :key="i" :item='item' @toggleShow="toggleShow" :i='i'></shopCell>
			</block>
			
			<!-- 昨日营收占比 -->
			<div class="operation-bgfc" v-if="theRequest.GroupType!=1010">

				<div class="uni-inline-item modle-title">
					<image src="/static/images/revenue/type-operation.png" mode="aspectFit"></image>
					<text class="strong-text">营收占比</text>
				</div>
				<div class="operation-tab-box">
					<div class="operation-tab-unit" v-if="regionProgress.length>0" @tap="selectTab('nowTab',1)" :class="{'active':nowTab==1}">经营业态分析</div>
					<div class="operation-tab-unit" v-if="tradeType.length>0" @tap="selectTab('nowTab',2)" :class="{'active':nowTab==2}">经营类型分析</div>
					<div class="operation-tab-unit" v-if="areaProgress.length>0" @tap="selectTab('nowTab',3)" :class="{'active':nowTab==3}">区域营收分析</div>
				</div>
				<div class="operation-content-box">
					<div v-show="nowTab==1" v-if="regionProgress.length>0">
						<canvas canvas-id="businessCont" id="businessCont" class="operation-content" @touchstart="touchPie($event,'businessCont')"></canvas>
						<div >
							<div class="operation-c-list" v-for="(item,o) in regionProgress" :key="o">
								<div class="operation-cl-unit">
									<text>{{item.name}} {{item.bili}}%</text>
									<text>{{item.data}}元</text>
								</div>
								<div class="progress">
									<div class="bgO" :style="{'width':item.bili+'%'}"></div>
								</div>
							</div>
							
						</div>
					</div>
					<div v-show="nowTab==2" v-if="tradeType.length>0">
						<canvas canvas-id="typeCont" id="typeCont" class="operation-content" @touchstart="touchPie($event,'typeCont')"></canvas>
						<div >
							<div class="operation-c-list" v-for="(item,o) in tradeType" :key="o">
								<div class="operation-cl-unit">
									<text>{{item.name}} {{item.bili}}%</text>
									<text>{{item.data}}元</text>
								</div>
								<div class="progress">
									<div class="bgO" :style="{'width':item.bili+'%'}"></div>
								</div>
							</div>
							
						</div>
					</div>
					<div v-show="nowTab==3" v-if="areaProgress.length>0">
						<canvas canvas-id="areaCont" id="areaCont" class="operation-content" @touchstart="touchPie($event,'areaCont')"></canvas>
						<div >
							<div class="operation-c-list" v-for="(item,o) in areaProgress" :key="o">
								<div class="operation-cl-unit">
									<text>{{item.name}} {{item.bili}}%</text>
									<text>{{item.data}}元</text>
								</div>
								<div class="progress">
									<div class="bgO" :style="{'width':item.bili+'%'}"></div>
								</div>
							</div>
							
						</div>
				</div>
				</div>
			</div>
			<!-- 商品销售排行 -->
			<div class="uni-inline-item modle-title">
				<image src="/static/images/revenue/product-ranking.png" mode="aspectFit"></image>
				<text class="strong-text">商品销售排行</text>
			</div>
			<div class="uni-inline-item ranking-tab-box">
				<div class="ranking-tab-unit" @tap="selectTab('nowRank',1000)" :class="{'active':nowRank==1000}">商超</div>
				<div class="ranking-tab-unit" @tap="selectTab('nowRank',2000)" :class="{'active':nowRank==2000}">餐饮</div>
				<div class="ranking-tab-unit" @tap="selectTab('nowRank',3000)" :class="{'active':nowRank==3000}">小吃</div>
			</div>
			<div class="ranking-content">
				<div class="ranking-list" v-for="(item,index) in wechatPushSalesList[nowRank]" :key="index">
					<div class="rank-index">{{item.RANK_ID}}</div>
					<!-- <image src="/static/images/revenue/top1.png" mode="aspectFit" class="ranking-ico"></image> -->
					<div class="ranking-list-unit">
						<div>{{item.COMMODITY_NAME}}</div>
						<div class="ranking-unit-info">
							<text>销售金额 </text>
							<text>¥{{$util.fmoney(item.TOTALPRICE)}}</text>
							<text>销售数量 </text>
							<text>{{item.SELLCOUNT}}</text>
						</div>
					</div>
				</div>

			</div>
		</view>
		<div v-if="!showPage && !isLoading" >
			<!-- <div class="new-content"> -->
			
				<div class="status-bar" :style="{'height':statusBarH+'px'}"></div>
				<div class="page-title" :style="{'height':customBarH-statusBarH+'px'}"><text class="uni-icon uni-icon-arrowleft" @tap="backPage"></text><text class="text-title">每日营收汇总</text></div>
				
			
			<!-- </div> -->
			<noFound :nodata="!showPage && !isLoading" :text="noDataText"/>
			
		</div>
	</div>
</template>

<script>	
	import { mapGetters } from 'vuex';
	import uCharts from '@/components/u-charts/u-charts.js';
	import shopCell from './components/listUnit.vue'
	var rincanvas = {};
	var _self;
	export default {
		data() {
			const lastDay = this.$util.cutDate(new Date(), 'YYYY/MM/DD', -1)
			const nowDay = this.$util.cutDate(new Date(), 'MM月DD日')

			return {
				customBarH: this.CustomBar,
				statusBarH: this.StatusBar,
				fixedY: - uni.upx2px(232),
				opacity: 1,
			
				isLoading: true,
				timeMoney: '',
				noDataText: '您暂无'+lastDay+'营收数据',
				theRequest: {},
				lastDay: lastDay,
				nowDay: nowDay,
				showPage: false,
				pageMsg: {},
				headMsg: {},
				today: {}, // 今日数据
				regionList: [],
				nowTab: 1,
				nowRank: 1000,
				regionShow1: true,
				regionShow2: false,
				wechatPushSalesList: {},
				regionProgress:[],
				tradeType: [],
				areaProgress: []
			}
		},
		computed: {
			...mapGetters({
				'user': 'getUser'
			})
		},
		components:{
			shopCell
		},
		methods: {
			showFixed(e){
				let options = e.detail
				let maxHeight = uni.upx2px(232)
				let minHeight = 0
				let selfHeight = uni.upx2px(232) 
				if(options.scrollTop > minHeight && options.scrollTop < maxHeight){
					
					this.fixedY = -selfHeight+ (options.scrollTop -minHeight)
					this.opacity = (options.scrollTop -minHeight)/selfHeight
				}else if(options.scrollTop>maxHeight){
					
					this.fixedY = 0
					this.opacity = 1
				}else{
					this.fixedY = 0-selfHeight
					this.opacity = 0
				}
			
			},
			toDetail(item, provinceId) {
				let date  = this.theRequest.time || this.lastDay
				let nowP = this.user.PushAuthority.find(n=> {return n.ProvinceCode==provinceId})
				
				if( nowP && nowP.ShopAnalysisType==1) {
					this.$util.toNextRoute('navigateTo', '/pages/everdayRenven/serviceIndex?ServerpartIds=' + item.SERVERPART_ID + '&time=' + date + '&ProvinceCode=' + provinceId)
					
				}else{
					this.$util.toNextRoute('navigateTo', '/pages/everdayRenven/detail?id=' + item.SERVERPART_ID + '&time=' + date+ '&provinceId=' + provinceId)
					
				}
				item.visited = true
				this.$forceUpdate()
				
			},
			selectTab(name, index) {
				this[name] = index
			},
			toggleRegion(item) {
				item.show = !item.show ? true : false
				this.$forceUpdate()
			},
			touchPie(e, id) {
				rincanvas[id].showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
			todayAmount() {
				let _this = this
					this.$request.$get('getCurRevenue', {
						pushProvinceCode: this.theRequest.ProvinceCode,
						serverPartId: this.theRequest.ServerpartIds
					}).then(res => {
						if (res.ResultCode != 100) return
							let avrticket = (res.Data.TOTALTICKET && res.Data.TOTALPRICE) ? res.Data.TOTALPRICE/res.Data.TOTALTICKET :0 
							_this.today = {
								timeMoney : this.$util.fmoney(res.Data.TOTALPRICE,2),
								totalTicketCount : res.Data.TOTALTICKET,
								avrticketCount : this.$util.fmoney(avrticket,2),
							}
						_this.$forceUpdate()
					})
						
			},
			getRankmMap(list){
				let _this = this
				let map = {}
				
				list.map((n,i)=>{
					if(i==0) _this.nowRank = n.DATA_TYPE
					map[n.DATA_TYPE] = n.GoodsList
					
				})
				return map
			},
			getData() {
				let _this = this
				let theRequest =  _this.theRequest
				let provinceCode = _this.theRequest.ProvinceCode
				let groupType = _this.theRequest.GroupType
				
				
				let arr = {
					groupType: theRequest.GroupType,
					Direction_IDS: theRequest.ServerpartIds,
					pushProvinceCode: theRequest.ProvinceCode,
					Statistics_Date: _this.theRequest.time || this.lastDay
				}
				
				this.$request.$get('getRevenuePush', arr).then(res => {
					_this.isLoading = false
					if (res.ResultCode != 100) {
						uni.hideLoading()
						
						return 
					}
					let data = res.Data
					_this.pageMsg = data
					if (provinceCode=='330000' && groupType=='1000') {
						this.getheadMsg(data[provinceCode], data['451200'])
						_this.regionList = [data[provinceCode].RegionList, data['451200'].RegionList]
						_this.wechatPushSalesList = this.getRankmMap(data[provinceCode].WechatPushSalesList)
						_this.operationFn(data[provinceCode])
					} else {
						this.getheadMsg(data)
						if(groupType!=1010 ){
							_this.regionList = groupType!=1000 ?  data.RegionList[0].ServerpartList : [data.RegionList]
							_this.operationFn(data)
						}
						_this.wechatPushSalesList = this.getRankmMap(data.WechatPushSalesList)
						
					}
					uni.hideLoading()
						_this.showPage=true
				})
			},
			
			getheadMsg(_data1, _data2) {
				// 头部
				let _this =this
				let headMsg = {}
				headMsg.totalMoney = this.$util.fmoney(_data1.CASHPAY + (_data2 ? _data2.CASHPAY : 0), 2)
				headMsg.name = _data1.USER_NAME
				headMsg.dayOfShow = this.$util.cutDate(_data1.STATISTICS_DATE, 'MM月DD日')

				let titles = ['CASHPAY', 'DIFFERENT_PRICE_MORE', 'DIFFERENT_PRICE_LESS', 'TICKETCOUNT', 'MOBILEPAYMENT',
					'COMMODITY_COUNT', 'TOTALOFFAMOUNT'
				]
				titles.forEach(n => {
					headMsg[n] = _data1[n] +( _data2 ? _data2[n] : 0)
					if(n!=='TICKETCOUNT'&& n!=='COMMODITY_COUNT'&& n!=='CASHPAY'){
						
						headMsg[n] = _this.$util.fmoney(headMsg[n])
					}
				})
				
				headMsg.TICKETAVE = headMsg.TICKETCOUNT > 0 ? this.$util.fmoney(headMsg.CASHPAY / headMsg.TICKETCOUNT, 2) : 0
				headMsg.COMMODITYAVE = headMsg.COMMODITY_COUNT > 0 ? this.$util.fmoney(headMsg.CASHPAY / headMsg.COMMODITY_COUNT, 2) : 0

				if (_data2) {
					var UPLOADSTATE1 = _data1.UPLOADSTATE.split('/')
					var UPLOADSTATE2 = _data2.UPLOADSTATE.split('/')
					var s1 = Number(UPLOADSTATE1[0]) + Number(UPLOADSTATE2[0])
					var s2 = Number(UPLOADSTATE1[1]) + Number(UPLOADSTATE2[1])
				}
				headMsg.uploadState = _data2 ?( s1 + '/' + s2) : _data1.UPLOADSTATE
				this.headMsg = headMsg
				
			},
			operationFn(data, ohterData) { //昨日营收占比
				var _this = this;

				if (data.SHOWBUSINESSTRADE == 1) { // 业态营收占比
					var colors1 = ['#5E67B4', '#4E5699', '#75B7AD', '#AFB7E6'];
					var SHOWBUSINESSTRADE = [
						['MARKET_REVENUE', '商超营收'],
						['RESTAURANT_REVENUE', '餐饮营收'],
						['SNACK_REVENUE', '小吃营收'],
						['OTHER_REVENUE', '其他营收']
					];
					var businessData = _this.operationBusniess(SHOWBUSINESSTRADE, data);
					this.regionProgress = businessData[1]
					_this.showPie({
						id: 'businessCont',
						data: businessData[0],
						colors: colors1,
					});

				}
				if (data.SHOWTRADETYPE == 1) { // 经营类型分析
					var colors2 = ['#7886E3', '#70D598', '#9BC8FB', '#ADE5EE', '#6B75B8', '#6FEBC3'];
					var type = [
						['COMPREHENSIVE_REVENUE', '综合服务区'],
						['THEME_REVENUE', '主题服务区'],
						['STANDARD_REVENUE', '标配服务区'],
						['PAKINGZONE_REVENUE', '其他停车区']
					];
					var typeData = _this.operationBusniess(type, data);
					this.tradeType = typeData[1]
					_this.showPie({
						id: 'typeCont',
						data: typeData[0],
						colors: colors2,
					});
				}
				if (data.SHOWREGIONREVENUE == 1) { // 业态营收占比
					// var colors3 = ['#F19B4B', '#DE724D', '#F4B27A', '#FFE886', '#E87EA3', '#F3B1C9', '#F08F87', '#F7CD7B', '#F19B4B'];
					var colors3 = ['#f7f5f6', '#FFAC37', '#d8ece9', '#e0e3f7', '#F4B27A','#F3B1C9', '#b2b7e3'];
					var operationArea = _this.operationArea(data.RegionList,data.CASHPAY);
					this.areaProgress = operationArea[1]
					_this.showPie({
						id: 'areaCont',
						data: operationArea[0],
						colors: colors3,
					});
				}
			},
			operationArea(data,total) { // 生成区域营收占比数据
				var _data1 = []
				var _data2 = [];
				let _this =this
				data.forEach((n, i) => {
					_data1.push({
						name: n.TYPE_NAME,
						data: n.CASHPAY,
						textColor: '#999',
						format:function(arg){
							return [  n.TYPE_NAME ,(arg*100).toFixed(2)+'%']
						}
					});
					_data2.push({
						name: n.TYPE_NAME,
						num: n.CASHPAY,
						data: _this.$util.fmoney(n.CASHPAY),
						bili:  _this.$util.fmoney((n.CASHPAY/total)*100,2)
					});
				});
				_data1.sort(function(a,b){
					return b.data-a.data
				})
				_data2.sort(function(a,b){
					return b.num-a.num
				})
				return [_data1,_data2];
			},
			operationBusniess(arr, data) { // 生成业态营收占比数据
				var _data1 = [];
				var _data2 = [];
				let _this =this
				arr.forEach((n, i) => {
					if (data[n[0]] > 0) {
						let num =  Number(data[n[0]]) 
						_data1.push({
							name: n[1],
							textColor: '#999',
							data: data[n[0]], //+Number(data2[n[0]])
							format:function(arg){
								
								return [ n[1] ,(arg*100).toFixed(2)+'%']
							}
						});
						
						_data2.push({
							name: n[1],
							num: num,
							data: _this.$util.fmoney(data[n[0]]), //+Number(data2[n[0]])
							bili: _this.$util.fmoney((num/data.CASHPAY)*100,2)
						});
					}
				});
				_data1.sort(function(a,b){
					return b.data -a.data
				})
				_data2.sort(function(a,b){
					return b.num - a.num
				})
				return  [_data1,_data2];
			},
			showPie(obj) {
				let data= {
					series: []
				}
				data.series = data.series.concat(obj.data)
				rincanvas[obj.id] = new uCharts({
					$this: _self,
					canvasId: obj.id,
					colors: obj.colors,
					type: 'ring',
					fontSize: 12,
					padding: [15, 15, 25, 15],
					legend: {
						show: false,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: data.series,
					animation: false,
					width: uni.upx2px(686),
					height: uni.upx2px(510),
					dataLabel: true,
					extra: {
						pie: {
							ringWidth: 40,
							labelWidth: 30,
							border: true,
							borderWidth: 1,
							borderColor: '#fff'
						}
					},
				});
			},
			getDetail(obj) {
				let _this = this
				this.$request.$get('getShopRevenueList', {
					serverpartID: obj.ServerpartIds,
					pushProvinceCode: obj.ProvinceCode,
					StartDate: obj.time || this.lastDay,
					EndDate: obj.time || this.lastDay,
				}).then(res => {
					if (res.ResultCode != 100) return
					res.Data.List.map(n=>{
						n.show = false
						n.detail =  this.getListDetail(n)
					})
					
					_this.regionList = res.Data.List
				})
			},
			getListDetail(data){
				let arr =[]
				let keyJson = {
						SHOWMORE_SIGN: { 1: '【长款】',2:'【异常长款】' }, // 长款
						SHOWLESS_SIGN:{ 1: '【短款】',2:'【异常短款】' }, // 短款
						SHOWABNORMAL_SIGN: { 1: '【异常校验】'},  // 异常日结
						SHOWSCAN_SIGN : { 1: '【扫】'},  // 扫码上传
						SHOWSSUPPLY_SIGN : { 1: '【补】' }, // 账期补录
						SHOWCHECK_SIGN : { 1: '【稽核检查】' }, // 稽核检查
						INTERFACE_SIGN : { 1: '【接口传输】' }, // 接口传输
					}
				var keyCode =  ['SHOWABNORMAL_SIGN','SHOWCHECK_SIGN','SHOWMORE_SIGN','SHOWLESS_SIGN','SHOWSCAN_SIGN','SHOWSSUPPLY_SIGN','INTERFACE_SIGN']
					 keyCode.map(n=>{
						
						if( keyJson[n][data[n]] ) arr.push( keyJson[n][data[n]])
						
					})
					return arr
			},
			toggleShow(i){
				
				let item = this.regionList[i]
				item.show = !item.show 
				this.$forceUpdate()
			},
			backPage(){
				this.$util.toNextRoute('switchTab', '/pages/index/index')
			},
			

		},
		onUnload() {
			this.$util.addUserBehavior()
		},
		onLoad(option) {
			_self = this
			uni.showLoading({
				title: '正在加载...'
			})
			if(option.ProvinceCode){
				this.theRequest = option
				
				this.getData()
			}else{
				
				if(this.user.PushAuthority.length>0){
					
					this.theRequest = this.user.PushAuthority[0] || {}
					this.getData()
				}else{
					uni.hideLoading()
					this.theRequest = {}
					this.isLoading = false
					this.showPage = false
					this.noDataText = '您暂无营收数据'
				}
			}
			// this.theRequest.ProvinceCode=='620000' && this.theRequest.GroupType==1000 
			this.todayAmount()
			
			if(this.theRequest.GroupType==1010) {
				this.getDetail(this.theRequest)
			}
			
			
		}
	}
</script>

<style scoped>
	
	.page-body {
		background: #fff;
		position: relative;
	}
	.uni-flex-column {
		flex-direction: column;
	}
	.justify-between {
		justify-content: space-between;
	}
	
	.justify-around {
		justify-content: space-around;
	}
	.uni-icon-arrowright {
		font-size: 32rpx;
		color: #5A5A5A;
	}
	.uni-icon-arrowright.active {
		transform: rotate(90deg);
	}
	.ct01 {
		color: #383838;
	}
	.strong-text {
		font-weight: 700;
	}
	.ct-red {
		color: #D7565A!important;
	}

/* 	.top-content {
		background: url('/static/images/revenue/banner.png') no-repeat top center;
		background-size: contain;
		height: 240rpx;
		margin-bottom: 110rpx;
	} */
	.new-content {
		
		background: url('/static/images/revenue/banner.png') no-repeat top left;
		height: 450rpx;
		background-size: contain;
		color: #fff;
		margin-bottom: 10rpx;
	}
	.status-bar {
		/* position: fixed; */
		background-color: #3b64a3;
		/* top: 0; */
		/* left: 0; */
		/* z-index: 999; */
		width: 750rpx;
	}
	.fixed-bar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.new-content .status-bar {
		position: relative;
		
	}
	.new-content .text-title {
		flex:1;
		text-align: center;
		font-weight: 600;
	}
	.uni-icon-arrowleft {
		font-size: 38rpx;
		padding: 8rpx 16rpx;
	}
	 .page-title {
		display: flex;
		align-items: center;
		padding-right: 70rpx;
		/* background-color: #55555547; */
	}
	/* .fixed-box {
		padding: 16upx 24rpx;
		background: url('/static/images/revenue/banner.png') no-repeat top center;
		background-size: cover;
		transition: all .2s;
		position: fixed;
		top: 0upx;
		left: 0;
		width: 100%;
		z-index: 99;
		
		box-sizing: border-box;
	} */
	.new-content .header-card {
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center right;
		padding: 0 30rpx;
		color: #BED4F4;
		padding-top: 8rpx;
		position: relative;
	}
	.head-log {
		position: absolute;
		right: 0;
		top: 0rpx;
		width: 376rpx;
		height: 198rpx;
	}
	
	.new-content .top-number {
		padding-top: 24rpx;
		font-size: 76rpx;
		color: #fff;
		padding-left: 8rpx;
		font-family: 'Bahnschrift Regular';
		letter-spacing: 2rpx;
		line-height: 1.1;
		transition: all 1s;
	}
	.new-content .header-today-info {
		align-items: baseline;
	}
	.new-content .header-today-info text{
		font-family: 'Bahnschrift Regular';
		font-size: 30rpx;
	}
	.ml10 {
		margin-left: 10rpx;
	}
	.new-content .header-today-info text.fs12  , text.fs12 {
		font-size: 24rpx;
	}
	.ml-135 {
		margin-left: 135rpx;
	}
	/* .top-content .top-c-title {
		align-items: flex-start;
		padding: 24rpx 32rpx 0 24rpx;
		
	}*/
	.top-number view {
		line-height: 1.2;
	} 
	.heade-text {
		/* font-size: 30rpx; */
		text-align: right;
		line-height: 1;
		letter-spacing: 0;
		color: #BED4F4;
		font-family: 'Bahnschrift Regular';
		/* margin-left: 8rpx; */
	}
	.head-cost-text {
		color: #BED4F4;
		font-size: 34rpx;
	}
	.top-revenue-card {
		padding: 0rpx 48rpx;
		font-family: 'Bahnschrift Regular';
		color: #D7B89A;
		align-items: flex-end;
		
	}
	.top-revenue-card .top-number {
		font-size: 56rpx;
		color: #D0AC8B;
		line-height: 1;
		
	}
	/* .top-content .header-card {
		background: url('/static/images/revenue/card-bg.png') no-repeat top center;
		background-size: contain;
		background-origin: border-box;
		padding: 40rpx 56rpx;
		width: 100%;
		height: 283rpx;
		box-sizing: border-box;
		color: #fff;
	}

	.top-content .top-number {
		line-height: 2.5;
		font-size: 68rpx;
		color: #fff;
		text-align: center;
	} */

	.check-unit {
		font-size: 22rpx ;
		margin-top: 26rpx;
		flex: 1;
		text-align: center;
		
	}

	.check-price-color {
		font-size: 26rpx;
		color: #868686;
		text-align: center;
	}
	.check-price-color text{
		font-size: 24rpx;
	}
	.modle-title {
		padding-left: 24rpx;
		font-size: 30rpx;
		padding-top: 42rpx;
		padding-bottom: 20rpx;
	}
	.region-title {
	   	padding: 20rpx 60rpx 20rpx 80rpx;
	    position: relative;
	    font-size: 30rpx;
	    font-weight: bolder;
	   
	}
	.region-title:before {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		background: url(/static/images/revenue/select.png) no-repeat center;
		background-size: contain;
	    left: 40rpx;
	    top: 36rpx;
		
	}
	.active.region-title:before {
		background: url(/static/images/revenue/select_active.png) no-repeat center;
		background-size: contain;
		
	}
/* 	.mode-content {
		padding: 0 32rpx;
	} */

	/*日结上传*/
	.region-cell {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 26rpx 24rpx 22rpx 42rpx;
	}

	.region-cell .region-cell-unit {
		flex: 2;
		display: flex;
		flex-direction: column;
		color: #929292;
		font-size: 26rpx;
		line-height: 1.5;
		text-align: right;
	}

	.region-cell .region-cell-unit:nth-child(1) {
		flex: 3;
		text-align: left;
	}
	.region-cell .region-cell-unit:nth-child(3) {
		line-height: 50rpx;
	}
	.region-cell-image {
		width: 48rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 50rpx;
		
	}

	.region-cell image {
		width: 14rpx;
		height: 23rpx;
	}

	/*日结上传服务区*/
	.region-cell-area {
		/* display: none; */
		max-height: 460rpx;
		overflow: auto;
	}
	.region-cell-area li.visited view:first-child{ 
		color:#007AFF;
		}
	.region-cell-area li:after {
		content: '';
		background: url(/static/images/revenue/you-jt.png) no-repeat center;
		width: 14rpx;
		height: 24rpx;
		background-size: contain;
		display: block;
		position: absolute;
		right: 24rpx;
		top: 26rpx;
	}

	.region-cell-area li:nth-child(2n+1) {
		background-color: #FCFCFC;
	}

	.region-cell-area li:nth-child(2n+1):before {
		content: '';
		background-color: #5596F9;
		width: 8rpx;
		height: 8rpx;
		border-radius: 8rpx;
		display: block;
		position: absolute;
		left: 42rpx;

	}

	.region-cell-area li:nth-child(2n):before {
		content: '';
		background-color: #FE6D67;
		width: 8rpx;
		height: 8rpx;
		border-radius: 8rpx;
		display: block;
		position: absolute;
		left: 42rpx;
	}

	.region-cell-area li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 72rpx 16rpx 68rpx;
		position: relative;
		text-align: right;
		color: #2E2E2E;

	}

	.region-cell-area li>div {
		flex: 2;
		font-size: 22rpx;
	}

	.region-cell-area li>div:nth-child(1) {
		flex: 3;
		text-align: left;
	}

	.modle-title image {
		max-width: 36rpx;
		max-height: 36rpx;
	}

	/*区域营收占比*/
	.operation-bgfc {
		background-color: #FCFCFC;
		padding-bottom: 32rpx;
	}

	.operation-tab-box {
		margin: 20rpx 32rpx 0 32rpx;
		background: #F1F1F1;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		text-align: center;
		overflow: hidden;
	}

	.operation-tab-box .operation-tab-unit {
		color: #BABABA;
		flex: 30%;
		height: 120rpx;
		line-height: 120rpx;
		position: relative;
		padding-left: 24rpx;
	}

	.operation-tab-box .operation-tab-unit.active {
		background-color: #fff;
		color: #000000
	}

	.operation-tab-box .operation-tab-unit.active:after {
		content: '';
		width: 30rpx;
		height: 126rpx;
		background-color: #fff;
		border-radius: 0 14rpx 0 0;
		position: absolute;
		right: -20rpx;
		transform: rotate(-9deg);
	}

	.operation-tab-box .operation-tab-unit:after {
		content: '';
		width: 30rpx;
		height: 126rpx;
		border-radius: 0 14rpx 0 0;
		background-color: #F1F1F1;
		box-shadow: 6rpx 8rpx 4rpx rgba(0, 0, 0, 0.15);
		position: absolute;
		right: -20rpx;
		transform: rotate(-9deg);
		z-index: 1;
	}

	.operation-content-box {
		width: 686rpxrpx;
		margin: 0 32rpx 0 32rpx;
		/*height: 2.5rem;*/
		/*margin: 0 auto;*/
		overflow: hidden;
		background-color: #fff;
		border-radius: 12rpx;
	}

	canvas.operation-content {
		height: 500rpx;
		width: 686rpx;
		margin: 0 auto;
		background-color: #fff;

	}

	.operation-c-list {
		padding: 16rpx 32rpx;
	}

	.operation-cl-unit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}

	.operation-c-list .progress {
		width: 288rpx;
		height: 12rpx;
		background-color: #f9f9f9;
		border-radius: 4rpx;
		margin-top: 12rpx;
	}

	.operation-c-list .progress .bgO {
		height: 12rpx;
		border-radius: 4rpx;
		background: -webkit-linear-gradient(right, #EC6332, #EF884F);
		background: -moz-linear-gradient(right, #EC6332, #EF884F);
		background: -o-linear-gradient(right, #EC6332, #EF884F);
		background: linear-gradient(to right, #EC6332, #EF884F);
	}

	/*排行*/
	.ranking-tab-box {
		margin: 20rpx 32rpx;
		border: 2rpx solid #565656;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		text-align: center;

	}

	.ranking-tab-box .ranking-tab-unit {
		color: #565656;
		flex: 1;
		height: 64rpx;
		line-height: 60rpx;
	}

	.ranking-tab-box .ranking-tab-unit.active {
		background-color: #565656;
		color: #fff
	}

	.ranking-tab-box .ranking-tab-unit+.ranking-tab-unit {
		border-left: 2rpx solid #565656;
	}

	.ranking-content {
		/* display: none; */
	}

	.ranking-content .ranking-list {
		display: flex;
		align-items: center;
		color: #000;
		padding: 24rpx 32rpx;
	}

	.ranking-content .rank-index {
		width: 72rpx;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 30rpx;
		font-weight: bolder;
		margin-right: 32rpx;
	}

	.ranking-content .ranking-list:nth-child(1) .rank-index {
		background: url('/static/images/revenue/top1.png') no-repeat center;
		background-size: contain;
		font-size: 0;
	}

	.ranking-content .ranking-list:nth-child(2) .rank-index {
		background: url(/static/images/revenue/top2.png) no-repeat center;
		background-size: contain;
		font-size: 0;
	}

	.ranking-content .ranking-list:nth-child(3) .rank-index {
		background: url(/static/images/revenue/top3.png) no-repeat center;
		background-size: contain;
		font-size: 0;
	}

	.ranking-content .ranking-list-unit {
		font-size: 28rpx;
		flex: 1;
	}

	.ranking-content .ranking-unit-info {
		/* margin-top: 16rpx; */
		display: flex;
		align-items: center;
		/* font-size: .13rem; */

	}

	.ranking-content .ranking-unit-info text {
		flex: 2;
		color: #929292;
	}

	.ranking-content .ranking-unit-info text:nth-child(2) {
		flex: 3;
	}

	.ranking-content .ranking-unit-info text:nth-child(2n) {
		color: #000
	}

	.ranking-ico {
		width: 72rpx;
		height: 72rpx;
	}
</style>
