 <template>
	<view class="page-body">
		<!-- 日期筛选 -->
		<div class="uni-flex ai-center screen-box">
			<picker mode="date" @change="bindDateChange($event,0)" :value="pageData.searchTime[0]" :end="pageData.endDate" start="2018-12-01" class="screen-unit">
				<text>{{pageData.searchTime[0]}}</text>
				<text class="uni-icon uni-icon-arrowdown"></text>
			</picker>
			<text class="mr20">至</text>
			<picker mode="date" @change="bindDateChange($event,1)" :value="pageData.searchTime[1]" :end="pageData.endDate" start="2018-12-01" class="screen-unit">
				<text>{{pageData.searchTime[1]}}</text>
				<text class="uni-icon uni-icon-arrowdown"></text>
			</picker>
		</div>
		<template v-if="!pageData.isLoading && pageData.msg && pageData.msg.Total_Revenue">
			<view class="uni-flex ai-center head-card">
				<view class="" @tap="toTrend()">
					<view>实收总额</view>
					<view class="price-num">¥{{$util.fmoney(pageData.msg.Total_Revenue,2)}}</view>
				</view>
				<view class="" v-if="pageData.msg && pageData.msg.Province_ExternalAmount">
					<div class="all-diff" @tap="regionType=!regionType">
						<image src="../../static/images/revenue/next.png"></image>
						切换
					  </div>
					<view>{{!regionType ?"省内" :"省外"}}实收</view>
					<view class="price-num">¥{{!regionType ? $util.fmoney(pageData.msg.Province_InsideAmount,2) : $util.fmoney(pageData.msg.Province_ExternalAmount,2)}}</view>
				</view>
				<view class="" v-else>
					<div class="all-diff" @tap="regionType=!regionType">
						<image src="../../static/images/revenue/next.png"></image>
						切换方向
					  </div>
					<view>{{!regionType ?"东 (南)" :"西 (北)"}}区实收</view>
					<view class="price-num">¥{{!regionType ? $util.fmoney(pageData.msg.Revenue_AmountS,2) : $util.fmoney(pageData.msg.Revenue_AmountN,2)}}</view>
				</view>
			</view>
			<view class="modle-title">
				<image src="/static/images/revenue/yestoday-region.png" mode="aspectFit"></image>
				<text>经营报表</text>
			</view>
			<view class="bg-white" v-if="ServerpartList.length>0">
				<view class="region-area-title uni-flex ai-center jc-between" v-show="pageData.msg.Province_ExternalAmount" :class="{'active':pageData.insideShow}" @tap="pageData.insideShow=!pageData.insideShow"> 
					<text>省内区域</text>
					
				</view>
				<view v-show="pageData.insideShow">
					<view v-for="(item,i) in ServerpartList" :key="i">
						<div class=" region-cell" @tap="toggleRegion(item)">
							<div class="region-cell-unit region-title cuIcon-triangledownfill" >
								<text class="">{{item.Region_Name}}</text>
								<div class="ct01">
									<text class="strong-text">¥{{$util.fmoney(item.Total_Revenue,2)}}</text> 
								</div>
							</div>
							<div class="region-cell-unit">
								<text>营收占比</text>
								<div class="ct01">
									<text class="strong-text">{{item.Revenue_Proportion}}</text>
								</div>
							</div>
							<div class="region-cell-unit">
								<text class="uni-icon uni-icon-arrowright" :class="{'active':item.show}"></text>
							</div>
						</div>
						<ul class="region-cell-area" v-show="item.show">
							<li v-for="(child,index) in item.revenueServerModels" :class="{'visited':child.visited}" :key="index" @tap="toDetail(child)">
								<view>{{child.Serverpart_Name}}</view>
								<view class="uni-flex ai-center data-number">
									<text class="">{{child.Revenue_Proportion}}</text>
									<text style="flex: 2;">¥{{$util.fmoney(child.Total_Revenue,2)}}</text>
									 
								</view>
							</li>
						</ul>
					</view>
					
				</view>
				
				<template v-if="insideRegionList.length>0">
					<view class="region-area-title uni-flex ai-center jc-between" :class="{'active':pageData.exsideShow }" @tap="pageData.exsideShow = !pageData.exsideShow">
						<text>省外区域</text>
					</view>
					<view v-show="pageData.exsideShow"> 
						<view v-for="(item,i) in insideRegionList" :key="i">
							<div class=" region-cell" @tap="toggleRegion(item)">
								<div class="region-cell-unit region-title cuIcon-triangledownfill" :class="{'active':item.show}">
									<text class="">{{item.Region_Name}}</text>
									<div class="ct01">
										<text class="strong-text">¥{{$util.fmoney(item.Total_Revenue,2)}}</text>
										
									</div>
									
								</div>
								<div class="region-cell-unit">
									<text>营收占比</text>
									<div class="ct01">
										<text class="strong-text">{{item.Revenue_Proportion}}</text>
									</div>
									
								</div>
								<div class="region-cell-unit"><text class="uni-icon uni-icon-arrowright" :class="{'active':item.show}"></text></div>
							</div>
							<ul class="region-cell-area" v-show="item.show">
								<li v-for="(child,index) in item.revenueServerModels" :class="{'visited':child.visited}" :key="index" @tap="toDetail(child)">
									<view>{{child.Serverpart_Name}}</view>
									<view class="uni-flex ai-center data-number">
										<text class="">{{child.Revenue_Proportion}}</text>
										<text style="flex: 2;">¥{{$util.fmoney(child.Total_Revenue,2)}}</text>
										
									</view>
								</li>
							</ul>
						</view>
					</view>
				</template>
				
			</view>
		</template>
		<view class="" v-else-if="!pageData.isLoading && !pageData.msg">
			<noFound nodata=" true" :text="noDataText"/>
		</view>
		
	</view>
	
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		
		data() {
			let now = new Date()
			
			let nowTime = this.$util.cutDate(now, 'YYYY-MM-DD',-1)
			let sTime = this.$util.cutDate(now, 'YYYY-MM-DD', -1)
			return {
				pageData: {
					endDate: nowTime,
					searchTime: [sTime,nowTime],
					msg: {},
					isLoading: true,
					exsideShow: true,
					insideShow: true,
				},
				noDataText: '抱歉，没有数据，请稍后重试',
				regionType: 0, // 0 东南 1 西北
				ServerpartList: [],
				insideRegionList: [] // 省外
			}
		},
		computed:{
			...mapState({'ProvinceCode':(state)=>{return state.userData.ProvinceCode}}),
		},
		methods: {
			toTrend(){
				this.$util.toNextRoute('navigateTo','/pages/operatingStatements/operatingTrend?time='+this.pageData.searchTime[1])
				
			},
			bindDateChange(e,index){
				let nowDate = this.pageData.searchTime[index]
				if(e.detail.value != nowDate){
					this.pageData.searchTime[index] = e.detail.value
					this.$forceUpdate()
					this.searchList()
				}
			},
			searchList(){
				uni.showLoading({
					title:'正在加载',
					mask:true
				})
				
				this.getList()
			},
			toggleRegion(item) {
				item.show = !item.show ? true : false
				this.$forceUpdate()
			},
			toDetail(item){
				this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/detail?pcode='+item.Province_Code+'&id=' + item.Serverpart_Id + '&st=' + this.pageData.searchTime[0]+ '&et=' + this.pageData.searchTime[1])
				item.visited = true
				this.$forceUpdate()
			},
			getList(){
				let _this = this
				let searchTime = this.pageData.searchTime
				_this.$request.$webGet('WeChat/GetRevenueReport',{
					startTime: searchTime[0],
					endTime: searchTime[1],
					additionalCode: this.ProvinceCode=='330000' ? '451200,630000' :''
				}).then(res=>{
					
					if(res.Result_Code==100) {
						_this.pageData.msg = res.Result_Data
						 res.Result_Data.revenueRegionModels.map(n=>{
							n.show = false
						 })
						 if(res.Result_Data.revenueInsideRegionModels){
							res.Result_Data.revenueInsideRegionModels.map(n=>{
								n.show = false
							 })
							_this.insideRegionList = res.Result_Data.revenueInsideRegionModels
						}
						
						_this.ServerpartList = res.Result_Data.revenueRegionModels
					}else{
						_this.pageData.msg = null
						_this.noDataText = res.Result_Desc
					}
					uni.hideLoading()
					_this.pageData.isLoading =false
					_this.$forceUpdate()
				})
			}
		},
		onLoad() {
			uni.showLoading({
				title:'正在加载...',
				mask:true
			})
			
			this.getList()
		}
	}
</script>

<style>
	.page-body {
		padding-bottom: 80rpx;
	}
	.screen-box {
		background-color: #fff;
		padding: 0 20rpx;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9;
	}
	.screen-box .screen-unit {
		display: flex;
		align-items: center;
		width: 200rpx;
		padding: 0 14rpx;
		line-height: 3;
	}
	.screen-box .mr20 {
		margin-right: 20rpx;
		color: #95999C;
	}
	.uni-icon-arrowdown { 
		font-size: 22rpx;
		color: #C7C7C7;
		margin-left: 8rpx;
	}
	.screen-box text {
		line-height: 3;
	}
	.screen-box image{
		width: 12rpx;
		height: 8rpx;
		margin: 0 16rpx;
		vertical-align: middle;
	}
	.head-card {
		padding: 40rpx 26rpx;
		background-color: #fff;
	}
	.head-card>view {
		width: 330rpx;
		height: 190rpx;
		color: #fff;
		text-align: center;
		padding-top: 30rpx;
		font-size: 28rpx;
		border-radius: 24rpx;
		box-sizing: border-box;
		
	}
	.head-card>view:first-child {
		
		background: linear-gradient(to left,#93a4ec 0%, #4b76e9 100%);
	}
	
	.head-card>view:last-child  {
		margin-left: 30rpx;
		background: linear-gradient(to left,#8cdade 0%, #82c2ce 100%);
		position: relative;
		overflow: hidden;
	}
	.head-card .price-num {
		font-family: 'Bahnschrift Regular';
		font-size: 50rpx;
		line-height: 1.5;
	}
	.all-diff {
		background: linear-gradient(#f28785,#ee5b4c);
		height: 36rpx;
		line-height: 36rpx;
		width: 126rpx;
		color: #fff;
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20rpx;
		border-radius: 0 0 0 54rpx;
	
	}
	.all-diff image {
		width: 20rpx;
		height: 17rpx;
		margin-right: 8rpx;
	}
	.modle-title {
		padding-left: 24rpx;
		font-size: 30rpx;
		padding-top: 32rpx;
		padding-bottom: 20rpx;
		font-weight: bolder;
		display: flex;
		align-items: center;
	}
	.modle-title image {
		max-width: 36rpx;
		max-height: 36rpx;
		margin-right: 14rpx;
	}
	.bg-white {
		background-color: #fff;
		margin: 0 24rpx;
		border-radius: 12rpx;
		padding-bottom: 26rpx;
	}
	.region-area-title {
		color: #000;
		font-weight: bolder;
		padding: 26rpx 46rpx 0 56rpx;
		position: relative;
		display: flex;
	}
	/*日结上传*/
	.region-title {
	    position: relative;
		color: #929292;
	    /* font-weight: bolder; */
	   
	}
	.region-title,.ct01 {
		color: #000000;
	}
	.ct01 {
		padding-top: 8rpx;
	}
	
	.region-area-title:before {
		content: '';
		position: absolute;
		width: 0rpx;
		height: 0rpx;
		border: 0rpx;
		border-left: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
		border-top: 8rpx solid #BBB7B7;
	    left: 22rpx;
	    top: 48rpx; 
		transform: rotate(-90deg);
		transition: all 0.4s;
		display: block;
	}
	.active.region-area-title:before{
		
		border-left: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
		border-top: 8rpx solid #E0BB97;
		transform: rotate(0deg);
	}
	
	.region-cell {
		display: flex;
		padding: 26rpx 46rpx 16rpx 56rpx;
		align-items: flex-end;
	}
	.region-cell .active.uni-icon-arrowright::before {
		transform: rotate(90deg);
		
		
	}
	.region-cell .uni-icon-arrowdown,.region-cell .uni-icon-arrowright {
		font-size: 36rpx;
		color: #5A5A5A;
		/* padding-bottom: 12rpx; */
		position: relative;
	}
	.region-cell .uni-icon-arrowright::before {
		position: absolute;
		right: -26rpx;
		top: -46rpx;
		transition: all 0.4s;
	}
	.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) {
		
		flex: 2.5;
		
	}
	.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 {
		box-sizing: border-box;
	}
	.region-cell-area li:nth-child(2n+1) {
		background-color: #FCFCFC;
	}
	.region-cell-area li view:first-child{  
		display: flex;
		align-items: center;
	}
	.region-cell-area li.visited view:first-child{ 
		color:#007AFF;
		
	}

	.region-cell-area li:nth-child(2n+1) {
		background-color: #F9F9FB;
	}
	
	.region-cell-area li:nth-child(2n) view:first-child:before {
		content: '';
		background-color: #5596F9;
		width: 8rpx;
		height: 8rpx;
		border-radius: 8rpx;
		display: block;
		margin-right: 16rpx;
		/* position: absolute;
		left: 0rpx; */
	
	}
	
	.region-cell-area li:nth-child(2n+1) view:first-child:before {
		content: '';
		background-color: #FE6D67;
		width: 8rpx;
		height: 8rpx;
		border-radius: 8rpx;
		display: block;
		margin-right: 16rpx;
	/* 	position: absolute;
		left: 0rpx; */
	}
	
	.region-cell-area li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 46rpx 16rpx 56rpx;
		position: relative;
		text-align: left;
		color: #2E2E2E;
	}
	
	.region-cell-area li>view {
		flex: 2;
		font-size: 22rpx;
		position: relative;
	}
	.region-cell-area li>view text {
		font-size: 22rpx;
		flex: 1;
		text-align: right;
	}
	.region-cell-area li>view text:last-child {
		/* text-align: right; */
		font-weight: bolder;
		padding-right: 8rpx;
		flex: 2;
	}
	.region-cell-area li> view:last-child: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: -28rpx;
		top: 8rpx;
	}
</style>
