<template>
	<div>
		<view class="page-body" v-if="showPage">
			<template>
				<div class="new-content">
					<div class="header-card">
						<image :src="'/static/images/revenue/' + theRequest.ProvinceCode + '.png'" mode="aspectFit"
							class="head-log" v-if="theRequest.ProvinceCode"></image>
						<view class="head-cost-text">
							实时营收
						</view>
						<div class="top-number">
							<text>{{ today.timeMoney || '0.00' }}</text>
						</div>
						<div class="uni-flex header-today-info">
							<text class="fs12">客单交易&nbsp;&nbsp;&nbsp;&nbsp;</text>
							<text class="ml10"> {{ 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="modle-title jc-between uni-flex ai-center">
					<div class="uni-flex ai-center">
						<image src="/static/images/revenue/yestoday-an.png" mode="aspectFit"></image>
						<text class="strong-text ml10">营收汇总</text>
					</div>
					<picker mode="date" @change="bindDateChange" :end="lastDay" start="2019-12-01"
						:value="theRequest.time">
						<text class="revenue-date">{{ headMsg.dayOfShow }}</text>
					</picker>
				</div>
				<view class="revenue-card-cont">
					<div class="top-revenue-card uni-flex justify-between">
						<div>
							<text class="top-number">{{ headMsg.totalMoneyShow }}</text>
							<span>元</span>
						</div>
						<div class="uni-flex ai-center">
							<div v-if="theRequest.GroupType != '1000'" style="margin-right: 8rpx;">{{ headMsg.name }}
							</div>
							<div class="upLoad-text"> {{ headMsg.uploadState }}</div>
						</div>
					</div>
					<!-- 营收数据总览 -->
					<div class="uni-flex justify-around mode-content" v-if="headMsg.MARKET_REVENUE">
						<div class="check-unit">
							<text>商超营收</text>
							<div class="check-price-color">{{ headMsg.MARKET_REVENUE }} <text>元</text></div>
						</div>
						<div class="check-unit">
							<text>商超门店</text>
							<div class="check-price-color">{{ headMsg.MarketShopCount }} <text>家</text></div>
						</div>
						<div class="check-unit">
							<text>餐饮营收</text>
							<div class="check-price-color">{{ headMsg.RESTAURANT_REVENUE }} <text>元</text></div>
						</div>
						<div class="check-unit">
							<text>餐饮门店</text>
							<div class="check-price-color">{{ headMsg.RestaurantShopCount }} <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.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-flex justify-around mode-content" v-if="headMsg.ShowTM">
						<div class="check-unit">
							<text>通美公司</text>
							<div class="check-price-color">{{ headMsg.TMRevenue }} <text>元</text></div>
						</div>
						<div class="check-unit"></div>
						<div class="check-unit"></div>
						<div class="check-unit"></div>
					</div>
				</view>
			</template>
			<view style="background-color: #fff;">

				<!-- 昨日日结上传 -->
				<div class="uni-inline-item modle-title jc-between" v-if="regionList.length > 0">
					<view class="uni-inline-item">
						<image src="/static/images/revenue/yestoday-region.png" mode="aspectFit"></image>
						<text class="strong-text">日结上传</text>

					</view>
					<view style="font-size: 26rpx;" v-if="theRequest.ProvinceCode == '340000'">门店上传&nbsp;&nbsp; <span
							class="upload-count">{{ headMsg.uploadState }}</span></view>
				</div>

				<template v-if="theRequest && theRequest.GroupType == 1020">
					<div v-for="(item, i) in regionList" :key="i" class=" region-cell" @tap="toDetail(item)">
						<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 > item.UPLOAD_COUNT ?
									$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, 'weisc-ico': item.UPLOAD_COUNT != item.TOTAL_COUNT }">
							{{ item.UPLOADSTATE }}
						</div>
						<div class="region-cell-image">
							<text class="uni-icon-arrowright uni-icon"></text>
						</div>
					</div>
				</template>
				<template v-else-if="theRequest && 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 > item.UPLOAD_COUNT) ?
											$util.fmoney((item.UPLOAD_COUNT / item.TOTAL_COUNT) * 100, 2) :
											'100.00' }}</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>
								</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)">
									<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>
					<template v-if="regionList.length > 1">

						<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">{{ item.TOTAL_COUNT > item.UPLOAD_COUNT ?
												$util.fmoney((item.UPLOAD_COUNT / item.TOTAL_COUNT) * 100, 2)
												: '100.00' }}</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>

									</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>
					</template>

				</template>
				<template v-else>
					<shopCell v-for="(item, i) in regionList" :key="i" :item='item' @toggleShow="toggleShow" :i='i'>
					</shopCell>
				</template>

				<!-- 除安徽省外的 昨日营收占比 -->
				<div v-if="theRequest && theRequest.GroupType != 1010 && theRequest.ProvinceCode != '340000'">
					<div class="uni-inline-item modle-title">
						<image src="/static/images/revenue/type-operation.png" mode="aspectFit"></image>
						<text class="strong-text">营收占比</text>
					</div>
					<view class="box-operation">

						<div class="operation-tab-box">
							<div class="operation-tab-unit" v-if="modelProgress.length > 0"
								@tap="selectTab('nowTab', 4)" :class="{ 'active': nowTab == 4 }">经营模式</div>
							<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 v-show="nowTab == 4" v-if="modelProgress.length > 0">
								<canvas canvas-id="modelCont" id="modelCont" class="operation-content"
									@touchstart="touchPie($event, 'modelCont')"></canvas>
								<div>
									<div class="operation-c-list" v-for="(item, o) in modelProgress" :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>
					</view>
				</div>
				<!-- 营收趋势 -->
				<view v-if="revenuelineList[0]">
					<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">营收趋势</text>
						</view>
						<view class="line-tab-unit active">
							近七日
						</view>
					</div>
					<view class="revenue-line-box">
						<view class="uni-flex ai-center ">
							<view class="revenue-line-data" :class="{ 'active': revenueLineType == 0 }"
								@click="changeDate('revenueLineType', 0)">
								<p>营收金额</p>
								<p>{{ $util.fmoney(revenueLineMsg.Revenue_Amount, 2) }}</p>
							</view>
							<view class="revenue-line-data" :class="{ 'active': revenueLineType == 1 }"
								@click="changeDate('revenueLineType', 1)">
								<p>客单笔数</p>
								<p>{{ $util.fmoney(revenueLineMsg.Ticke_Count, 2) }}</p>
							</view>
							<view class="revenue-line-data" :class="{ 'active': revenueLineType == 2 }"
								@click="changeDate('revenueLineType', 2)">
								<p>客单均价</p>
								<p>{{ $util.fmoney(revenueLineMsg.Average_Amount, 2) }}</p>
							</view>
						</view>
						<view class="text-title"> {{ typeName[revenueLineType] }}比上周 <text class="text-week">({{
							`${sevenDate[0]}-${sevenDate[1]}` }})</text></view>
						<view
							:class="{ 'up-text-title': revenuelineList[revenueLineType].Top_Difference > 0, 'down-text-title': revenuelineList[revenueLineType].Top_Difference < 0 }">
							{{ ($util.fmoney(revenuelineList[revenueLineType].Top_Difference, 2)).replace('-', '') }}%
						</view>
						<view class="text-title">{{ typeName[revenueLineType] }}趋势</view>
						<view>
							<canvas canvas-id="revenueLine" id="revenueLine" class="operation-content"
								@touchstart="touchPie($event, 'revenueLine')"></canvas>

						</view>
					</view>
					<view class="revenue-line-box">
						<view class="title">客单交易</view>
						<view class="text-title"> 客单数量比上周 </view>
						<view
							:class="{ 'up-text-title': revenueLineMsg.down_deff > 0, 'down-text-title': revenueLineMsg.down_deff < 0 }">
							{{ ($util.fmoney(revenueLineMsg.down_deff, 2)).replace('-', '') }}%
						</view>
						<view>
							<canvas canvas-id="revenueClounm" id="revenueClounm" class="operation-content"></canvas>
						</view>
					</view>
				</view>
				<!-- 商品销售排行 -->
				<div class="uni-inline-item modle-title">
					<image src="/static/images/revenue/product-ranking.png" mode="aspectFit"></image>
					<text class="strong-text">商品销售排行</text>
				</div>
				<RankContent :wechatPushSalesList="wechatPushSalesList" v-if="!isLoading"></RankContent>
				<!-- <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" v-if="wechatPushSalesList">
					<div class="ranking-list" v-for="(item,index) in wechatPushSalesList[nowRank]" :key="index">
						<div class="rank-index">{{item.RANK_ID}}</div>
						<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>
		</view>
		<div v-if="!showPage && !isLoading">
			<noFound :nodata="!showPage && !isLoading" :text="'您暂无' + lastDay + '营收数据'" />
		</div>
	</div>
</template>

<script>
import {
	mapState
} from 'vuex';
import uCharts from '@/components/u-charts.js';
import shopCell from './components/listUnit.vue'
import RankContent from './components/RankContent.vue'

var rincanvas = {};

export default {
	data() {
		const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)

		const nowDay = this.$util.cutDate(new Date(), 'MM月DD日')

		return {
			showPage: false,
			opacity: 0, // 背景颜色透明度
			customBarH: this.CustomBar,
			statusBarH: this.StatusBar,
			isLoading: true,
			theRequest: null,
			sevenDate: null,
			lastDay: lastDay, // 该页面的最近有效日期
			nowDay: nowDay,
			headMsg: null,
			today: null, // 今日数据
			regionList: null,
			nowTab: 1,
			nowRank: 2000,
			regionShow1: true,
			regionShow2: false,
			wechatPushSalesList: null,
			regionProgress: null,
			tradeType: null,
			areaProgress: null,
			revenueLineType: 0, // 0 Revenue, 1 Ticke, 2 Average
			revenueLineMsg: null, // 营收趋势
			revenuelineList: {
				0: null,
				1: null,
				2: null,
				3: null
			}, // 营收趋势数据map
			typeName: ['营收金额', '客单笔数', '客单均价'], //
			modelProgress: null,
			isup: true,

		}
	},
	computed: {
		...mapState({
			'PushAuthority': (state) => state.userData.PushAuthority,
			'ProvinceCode': (state) => state.userData.ProvinceCode,
		}),
		hasSeverpartIndexAuthority() {
			let theRequest = this.theRequest
			if (this.theRequest && theRequest.ProvinceCode && this.PushAuthority) {
				return this.PushAuthority.some(n =>
					n.ProvinceCode == theRequest.ProvinceCode && n.ShopAnalysisType == 1
				)
			}
			return false
		}

	},
	components: {
		shopCell,

		RankContent
	},
	methods: {
		toggleCard(isup) {
			this.isup = !isup
			this.$forceUpdate()
		},
		bindDateChange(e) { // 切换日期 加载选中日期的营收数据

			// let nowDate = this.theRequest.time
			let selectT = new Date(e.detail.value)
			if (selectT <= new Date(this.lastDay)) {
				this.theRequest.time = e.detail.value
				this.sevenDate = [this.$util.cutDate(selectT, 'MM.DD', -13), this.$util.cutDate(
					selectT, 'MM.DD', -7)]
				uni.showLoading({
					title: '正在加载...',
					mask: true
				})
				this.getData()
				this.getTender()
				this.todayAmount()
				this.$forceUpdate()
			}

		},
		toDetail(item, provinceId) { // 如果当前页面至存在一个初始化的省份编码 则不需要传入参数provinceId
			let date = this.theRequest.time
			let pcode = provinceId || this.theRequest.ProvinceCode

			let severpartIndexPath = '/pages/everdayRenven/serviceIndex?ServerpartIds=' + item.SERVERPART_ID +
				'&time=' + date + '&ProvinceCode=' + pcode
			let serverpartUploadPath = '/pages/everdayRenven/detail?id=' + item.SERVERPART_ID + '&time=' + date +
				'&provinceId=' + pcode

			// 是否有权限进入服务区营收分析页面
			let canToSeverpartIndex = !provinceId ? this.hasSeverpartIndexAuthority : this.PushAuthority.some(n => {
				return n.ProvinceCode == provinceId && n.ShopAnalysisType == 1
			})
			console.log('severpartIndexPath', severpartIndexPath)
			console.log('canToSeverpartIndex', canToSeverpartIndex)
			this.$util.toNextRoute('navigateTo', severpartIndexPath)
			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, {
				formatter: function (item) {
					return item.name + ':' + item.data
				}
			});
		},
		todayAmount() {
			let _this = this
			let theRequest = this.theRequest
			this.$request.$get('getCurRevenue', {
				pushProvinceCode: theRequest.ProvinceCode,
				serverPartId: theRequest.GroupType == 1000 ? '' : 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 == 1) _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: theRequest.time
			}

			this.$request.$get('getRevenuePush', arr).then(res => {
				console.log('res', res)
				_this.isLoading = false
				if (res.ResultCode != 100) {
					uni.hideLoading()
					return
				}
				let data = res.Data

				if (provinceCode == '330000' && groupType == '1000') {
					this.getheadMsg(data[provinceCode], data['451200'])
					let list1 = sortMount(data[provinceCode].RegionList)
					let list2 = sortMount(data['451200'].RegionList)

					_this.regionList = [list1, list2]
					if (data[provinceCode].WechatPushSalesList) {

						_this.wechatPushSalesList = this.getRankmMap(data[provinceCode].WechatPushSalesList)
					}
					_this.operationFn(data[provinceCode])
				} else {
					this.getheadMsg(data)
					if (groupType != 1010) {
						let list = groupType != 1000 ? sortMount(data.RegionList[0].ServerpartList) : [
							sortMount(data.RegionList)
						]
						_this.regionList = list
						_this.operationFn(data)
					}
					if (data.WechatPushSalesList) {

						_this.wechatPushSalesList = this.getRankmMap(data.WechatPushSalesList)
					}
				}
				uni.hideLoading()
				_this.showPage = true
				_this.$forceUpdate()
			})

			function sortMount(list) {

				list.sort(function (a, b) {
					if (a.ServerpartList) {

						a.ServerpartList.sort(function (m, n) {
							return n.CASHPAY - m.CASHPAY
						})

					}
					if (b.ServerpartList) {

						b.ServerpartList.sort(function (m, n) {
							return n.CASHPAY - m.CASHPAY
						})
					}
					return b.CASHPAY - a.CASHPAY
				})
				let index = list.findIndex(n => n.TYPE_NAME && n.TYPE_NAME.indexOf('加油站') > -1)
				if (index > -1) {
					let item = list[index];
					list.splice(index, 1);
					list.push(item);
				}
				return [...list]
			}
		},
		getheadMsg(_data1, _data2) {
			// 头部
			let _this = this
			let headMsg = {}
			if (_data1.ShowShopCount === 1) {

				headMsg.MARKET_REVENUE = this.$util.fmoney(_data1.MARKET_REVENUE)
				headMsg.RESTAURANT_REVENUE = this.$util.fmoney(_data1.RESTAURANT_REVENUE)
				headMsg.MarketShopCount = _data1.MarketShopCount
				headMsg.RestaurantShopCount = _data1.RestaurantShopCount
			}
			headMsg.totalMoney = _data1.CASHPAY + (_data2 ? _data2.CASHPAY : 0)
			headMsg.totalMoneyShow = 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.TMRevenue = _data1.TMRevenue
			headMsg.ShowTM = _data1.ShowTM
			headMsg.budgetamoutShow = _data1.BUDGETAMOUNT ? _this.$util.fmoney(_data1.BUDGETAMOUNT) : 0.00
			headMsg.BUDGETAMOUNT = _data1.BUDGETAMOUNT
			headMsg.diffBudgetTotal = Math.abs(_data1.BUDGETAMOUNT - _data1.CASHPAY)
			headMsg.diffBili = _data1.BUDGETAMOUNT > 0 ? this.$util.fmoney((headMsg.diffBudgetTotal / _data1
				.BUDGETAMOUNT) * 100, 2) : '100'
			headMsg.uploadState = _data2 ? (s1 + '/' + s2) : _data1.UPLOADSTATE
			this.headMsg = headMsg

		},
		operationFn(data, ohterData) { //昨日营收占比
			var _this = this;
			console.log(1)
			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 = ['#FFAC37', '#d8ece9', '#f7f5f6', '#b2b7e3', '#F4B27A', '#F3B1C9', '#e0e3f7', '#FFE886',
					'#f7f5f6'
				];
				var operationArea = _this.operationArea(data.RegionList, data.CASHPAY);
				this.areaProgress = operationArea[1]
				_this.showPie({
					id: 'areaCont',
					data: operationArea[0],
					colors: colors3,
				});
			}

			if (data.SHOWBUSINESSTYPE == 1) { // 经营模式占比
				var colors3 = ['#FFAC37', '#6B75B8'];
				var type = [
					['OUTSOURCE_REVENUE', '外包'],
					['SELFSUPPORT_REVENUE', '自营']
				];
				var operationModel = _this.operationBusniess(type, data);
				this.modelProgress = operationModel[1]
				_this.showPie({
					id: 'modelCont',
					data: operationModel[0],
					colors: colors3,
				});
			}
		},
		operationArea(data, total) { // 生成区域营收占比数据
			var _data1 = []
			var _data2 = [];
			let _this = this

			data.forEach((n, i) => {
				let showName = n.TYPE_NAME.replace(/分公司|服务区/, '区域')
				_data1.push({
					name: showName,
					data: n.CASHPAY,
					textColor: '#999',
					formatter: function (arg) {
						if (typeof arg === 'number') {
							return [showName, (arg * 100).toFixed(2) + '%']
						} else {
							return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
						}

					}
				});
				_data2.push({
					name: showName,
					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]])
						// labelText: '',
						formatter: function (arg) {

							if (typeof arg === 'number') {
								return [n[1], (arg * 100).toFixed(2) + '%']
							} else {
								return [arg.name, (arg._proportion_ * 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: []
			}
			const ctx = uni.createCanvasContext(obj.id, this);
			data.series = data.series.concat(obj.data)
			rincanvas[obj.id] = new uCharts({
				// $this: this,
				// canvasId: obj.id,
				context: ctx,
				color: 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: {
					ring: {
						ringWidth: 40,
						labelWidth: 16,
						border: true,
						borderWidth: 1,

						borderColor: '#fff'
					}
				},
			});
		},
		showLine(obj) {
			const ctx = uni.createCanvasContext(obj.id, this);
			rincanvas[obj.id] = new uCharts({
				// $this: this,
				// canvasId: obj.id,
				context: ctx,
				color: ['#667ED5'],
				type: 'area',
				fontSize: 12,
				legend: {
					show: false
				},
				dataLabel: false,
				dataPointShape: true,
				padding: [30, 20, 12, 12],
				background: '#FFFFFF',
				dataPointShapeType: 'hollow',
				categories: obj.categories,
				series: obj.data,
				animation: false,
				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',
						formatter: (val) => {
							return parseInt(val)
						}
					}],
					gridType: 'dash',
					gridColor: '#eee',
					dashLength: 2,
					splitNumber: 3,

				},
				width: uni.upx2px(686),
				height: uni.upx2px(350),
				extra: {
					area: {
						addLine: true,
						gradient: true,
						// type: 'curve'
					}
				}
			});
		},
		showClounm(obj) {
			// rincanvas[obj.id] =
			const ctx = uni.createCanvasContext(obj.id, this);
			new uCharts({
				// $this: this,
				// canvasId: obj.id,
				context: ctx,
				type: 'column',
				legend: {
					show: false
				},
				color: ['#D1DBEF'],
				fontSize: 12,
				background: '#FFFFFF',
				padding: [30, 12, 12, 12],
				animation: true,
				categories: obj.categories,
				series: obj.data,
				enableScroll: false, //开启图表拖拽功能
				xAxis: {
					disabled: false,
					disableGrid: true,
					axisLine: false,
					fontColor: '#B3B3B3',
					labelCount: 5,

				},
				yAxis: {
					data: [{
						disabled: false,
						axisLine: false,
						fontColor: '#B3B3B3',
						formatter: (val) => {
							return parseInt(val)
						}
					}],

					gridType: 'dash',
					gridColor: '#eee',
					dashLength: 2,
					splitNumber: 3,
				},
				dataLabel: true,
				width: uni.upx2px(686),
				height: uni.upx2px(350),
				extra: {
					column: {
						type: 'group',
						width: uni.upx2px(26)
					}
				}
			});
		},
		getDetail(obj) {
			let _this = this
			this.$request.$get('getShopRevenueList', {
				serverpartID: obj.ServerpartIds,
				pushProvinceCode: obj.ProvinceCode,
				StartDate: obj.time,
				EndDate: obj.time,
			}).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()
		},

		changeDate(name, index) {
			let _this = this
			this[name] = index
			let listMsg = null

			listMsg = _this.revenuelineList[index]

			_this.showLine({
				id: 'revenueLine',
				data: listMsg.data,
				categories: listMsg.categories
			});
		},

		getTender() { // 营收趋势
			let _this = this
			let obj = this.theRequest

			let Report_Type = ['Revenue', 'Ticke', 'Average']
			let bili = ['Revenue_Amount', 'Ticke_Count', 'Average_Amount']
			let typeName = ['营收金额', '客单笔数', '客单均价']

			let typeIndex = _this.revenueLineType
			let revenuelineList = {
				0: [],
				1: [],
				2: [],
				3: []
			}
			_this.$request.$webGet('WeChat/GetRevenueTrends', {
				Statictics_Type: 'Week',
				Report_Type: Report_Type[typeIndex],
				groupType: obj.GroupType,
				pushProvinceCode: obj.ProvinceCode,
				Serverpart_Id: obj.ServerpartIds,
				Statistics_Date: _this.theRequest.time
			}).then(res => {
				if (res.Result_Code == 100) {

					res.Result_Data.down_deff = Number(res.Result_Data[Report_Type[1] + '_Proportion'].replace(
						'%', ''))

					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.revenuelineList = revenuelineList
					_this.revenueLineMsg = res.Result_Data

					_this.$nextTick(function () {
						_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'
							}],
						});
						_this.$forceUpdate()
					})
					bili.forEach((biliName, i) => {
						if (i == 1) {
							revenuelineList[3] = {
								data: [{
									name: '客单交易',
									data: _list[i][1],
									textColor: '#B3B3B3'
								}],
								categories: _list[i][0],
								Top_Difference: Number(res.Result_Data[Report_Type[1] +
									'_Proportion'].replace('%', '')),

							}
						}
						revenuelineList[i] = {
							categories: _list[i][0],
							data: [{
								name: typeName[i],
								data: _list[i][1]
							}],
							Top_Difference: Number(res.Result_Data[Report_Type[i] + '_Proportion']
								.replace('%', '')),
						}
					})


					// uni.hideLoading()

				}
			})
		},
		pushCanvasData(list) { // 拼接营收趋势数据
			let _this = this
			let _list = [
				[],
				[]
			]
			if (list.length) {

				list.map(n => {
					let date = _this.$util.cutDate(n.Statictics_Date, 'MM-DD')
					_list[0].push(date)
					_list[1].push(n.Statictics_Amount)

				})
			}
			return _list
		},
		defaultMsg() {
			let option = null
			let _this = this
			if (this.PushAuthority && this.PushAuthority.length > 1) {

				option = this.PushAuthority.find(n => n.ProvinceCode === _this.ProvinceCode)
			} else {
				option = this.PushAuthority[0]
			}
			return {
				...option
			}
		}
	},
	onUnload() {
		this.$util.addUserBehavior()
	},
	onPageScroll(options) {
		this.opacity = (options.scrollTop - 30) / 68
	},
	onLoad(option) {
		console.log('option', option)
		uni.showLoading({
			title: '正在加载...'
		})
		const toSnhuiPageProvinceCode = [340000, 520000, 451200, 510000, 530000, 620000, 630000, 330200] // 需要跳转到安徽类型的每日营收推送页面

		if (option.ProvinceCode) { // 从推送进入
			console.log('1');

			uni.redirectTo({
				url: '/pages/everdayRenven/AnhuiIndex?ProvinceCode=' + option.ProvinceCode + '&time=' +
					option.time + '&GroupType=' + option.GroupType + '&ServerpartIds=' + option
						.ServerpartIds,
			})
			return
		} else { // 默认
			if (this.PushAuthority.length > 0) {
				this.theRequest = this.defaultMsg() || {}
				if (toSnhuiPageProvinceCode.indexOf(this.theRequest.ProvinceCode) > -1) {
					uni.redirectTo({
						url: '/pages/everdayRenven/AnhuiIndex'
					})
					return
				}
				this.theRequest.time = this.lastDay
				this.getData()
				this.getTender()
				this.nowTab = this.theRequest.ProvinceCode == 340000 ? 4 : 1
			} else {
				uni.hideLoading()
				this.theRequest = null
				this.isLoading = false
				this.showPage = false
				this.opacity = 1
				return
			}
		}
		this.sevenDate = [
			this.$util.cutDate(new Date(this.theRequest.time), 'MM.DD', -13),
			this.$util.cutDate(new Date(this.theRequest.time), 'MM.DD', -7)
		]
		this.todayAmount()
		if (this.theRequest.GroupType == 1010) {
			this.getDetail(this.theRequest)
		}
	},
	onShow() {
		if (this.theRequest && this.theRequest.ProvinceCode != 340000 && this.theRequest.ProvinceCode != 520000 && this.theRequest
			.ProvinceCode != 451200 && this.theRequest.ProvinceCode != 510000 && this.theRequest.ProvinceCode !=
			620000 && this.theRequest.ProvinceCode != 630000 && this.theRequest.ProvinceCode != 330200) {
			uni.setNavigationBarColor({
				// backgroundColor: '#3b64a3',
				backgroundColor: '#8E3953',
				frontColor: '#ffffff'
			})
		}
	}
}
</script>

<style scoped>
.page-body {
	background: #fff;
	position: relative;
	padding-bottom: 30rpx;
}

.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;
}

.new-content {
	/* background: url('https://eshangtech.com/ShopICO/ahyd-BID/revenue/banner.png') no-repeat bottom left; */
	/* height: 383rpx; */
	background: url("data:image/png;base64,[encoded data, 127248 characters]");
	height: 350rpx;
	background-size: 100%;
	color: #fff;
	box-sizing: border-box;
	padding-top: 20rpx;
}

.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;
	width: 100%;

	color: #fff;
	background-color: #3b64a3;
}

.page-title .uni-icon-arrowleft,
.page-title .uni-icon-arrowleft:before {
	color: #fff;
}

.new-content .header-card {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center right;
	padding: 0 30rpx;
	/* color: #BED4F4; */
	color: #FAD5D2;
	padding-top: 8rpx;
	position: relative;
}

.head-log {
	position: absolute;
	right: 12rpx;
	top: 0rpx;
	width: 376rpx;
	height: 198rpx;
}

.new-content .top-number {
	padding-top: 28rpx;
	font-size: 76rpx;
	padding-bottom: 16rpx;
	/* color: #fff; */
	background-image: -webkit-linear-gradient(top, #ffffff 40%, #f8b8b1 100%);
	/*#b3c1e7 100%); */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-left: 4rpx;
	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: 20rpx;
}

.new-content .header-today-info text.fs12,
text.fs12 {
	font-size: 24rpx;
}

.ml-135 {
	margin-left: 135rpx;
}

.top-number view {
	line-height: 1.2;
}

.heade-text {
	text-align: right;
	line-height: 1;
	letter-spacing: 0;
	color: #BED4F4;
	font-family: 'Bahnschrift Regular';
	display: flex;
	align-items: center;
}

/* 营收汇总 数据概览卡片 */
.revenue-card-cont {
	padding: 6rpx 0 32rpx 0;
	border-radius: 12rpx;
	margin: 0 20rpx;
	box-shadow: 0rpx 0rpx 6rpx 0px rgba(224, 224, 224, 0.54);
}

.head-cost-text {
	/* color: #BED4F4; */
	color: #FAD5D2;
	font-size: 28rpx;
}

.top-revenue-card {
	padding: 16rpx 30rpx 6rpx 30rpx;
	font-family: 'Bahnschrift Regular';
	color: #D7B89A;
	align-items: flex-end;

}

.top-revenue-card .top-number {
	font-size: 56rpx;
	color: #D0AC8B;
	line-height: 1;
}

.top-revenue-card .upLoad-text {
	font-size: 32rpx;
}

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

.check-price-color {
	font-size: 32rpx;
	color: #868686;
	line-height: 1.2;
	font-family: 'Bahnschrift Regular';
}

.check-price-color text {
	font-size: 22rpx;
}

/* end */

.modle-title {
	padding-left: 24rpx;
	font-size: 30rpx;
	padding-top: 42rpx;
	padding-bottom: 20rpx;
}

.modle-title .uni-icon-arrowdown {
	font-size: 24rpx;
}

.modle-title picker {
	color: #000000;
	padding-right: 24rpx;
	position: relative;
	width: 164rpx;
}

.modle-title picker .revenue-date:before {
	content: '';
	position: absolute;
	width: 0rpx;
	height: 0rpx;
	border: 0rpx;
	border-left: 12rpx solid transparent;
	border-right: 12rpx solid transparent;
	border-top: 12rpx solid #000;
	right: 22rpx;
	top: 22rpx;

	display: block;
	border-radius: 6rpx;
}

.upload-count {
	font-family: 'Bahnschrift Regular';
	font-size: 32rpx;
	margin-left: 16rpx;
	margin-right: 36rpx;
}

.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;

}

/*日结上传*/
.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;
	-webkit-overflow-scrolling: touch;
}

.region-cell-area li.visited view:first-child {
	color: #007AFF;

}

.region-cell-area li:after {
	content: '';
	background: url('https://eshangtech.com/ShopICO/ahyd-BID/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;
	background-color: #f7f7f7;
}

.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;

}

.line-tab-unit {
	margin-top: 20rpx;
	/* width: 60rpx; */
	height: 44rpx;
	font-size: 28rpx;
	color: #A9A9A9;
	background: #ececec;
	border-radius: 8rpx;
	text-align: center;
	line-height: 44rpx;
	margin-right: 32rpx;
	padding: 0 10rpx;
	font-size: 22rpx;
}

.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;
}

.revenue-line-box .up-text-title {
	color: #6eb92b;
	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: #F07878;
	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;
}

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

.box-operation {
	box-shadow: 1px 2px 6px 0px rgba(224, 224, 224, 0.54);
	margin: 20rpx 32rpx 0 32rpx;
	border-radius: 12rpx;
}

.operation-tab-box {

	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;
	overflow: hidden;
	padding-bottom: 16rpx;

}

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

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

.operation-c-list .operation-cl-unit {
	width: 100%;
	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);
}
</style>
