<template>
	<view :style="showUnUpLoad ? 'overflow:hideen;height:100vh;':'height:100%;width:750rpx;'" class="page-body"
		scroll-with-animation v-if="showPage">
		<div class="box-card" :style="'opacity:'+(1-opacity)+';'">
			<div class="box-top-title">
				<span class="box-center-title">{{pageData.Serverpart_Name}}</span>
				<picker mode="date" @change="bindDateChange" :value="theRequest.time" :end="lastDay" start="2021/01/01"
					class="title-clock">
					<view>{{searchDate}} <text class="uni-icon uni-icon-arrowdown"></text></view>
				</picker>

			</div>
			<view class="top-card"
				:style="theRequest.ProvinceCode!='340000'? 'padding: 0 0 24rpx 0;border-radius: 12rpx;': ''">
				<div class="box-center-box">
					<template v-if="theRequest.ProvinceCode=='340000'">
						<div class="uni-flex ai-center jc-between">
							<div class="main-amount-title">对客营收(元)</div>
							<div class="tab-unit" @tap="showPop" v-if="upcouts">
								<span>上传门店：</span>
								<span class="tab-unit-num"
									:class="{'priceRed':upcouts.SHOP_UPCOUNT!==upcouts.SHOP_TCOUNT}">{{upcouts.SHOP_UPCOUNT}}</span>
								<span class="tab-unit-num "
									:class="{'more-btn':upcouts.SHOP_UPCOUNT!==upcouts.SHOP_TCOUNT}">{{upcouts.SHOP_TCOUNT}}</span>
							</div>
						</div>
						<div class="uni-flex ai-base jc-between">

							<span
								class="center-num">{{pageData.Revenue_Amount ? $util.fmoney(pageData.Revenue_Amount,2) : '0.00'}}</span>

							<span class="budgetamount" v-if="sMsg">
								<text class="budget-title">计划营收(元):</text>
								<text
									:class="sMsg.BUDGETAMOUNT< pageData.Revenue_Amount ? 'up-text-title':'down-text-title'">
									{{sMsg.BUDGETAMOUNT ? $util.fmoney(sMsg.BUDGETAMOUNT,2) : '0.00'}}
								</text>
							</span>
						</div>
					</template>
					<template v-else>
						<div class="uni-flex ai-base jc-between">
							<div>
								<span
									class="center-num">{{pageData.Revenue_Amount ? $util.fmoney(pageData.Revenue_Amount,2) : '0.00'}}</span>
								<span class="center-title">元</span>
							</div>
							<div v-if="upcouts" @tap="showPop">
								<span class="tab-unit-num"
									:class="{'priceRed':upcouts.SHOP_UPCOUNT!==upcouts.SHOP_TCOUNT}">{{upcouts.SHOP_UPCOUNT}}</span>
								<span class="tab-unit-num "
									:class="{'more-btn':upcouts.SHOP_UPCOUNT!==upcouts.SHOP_TCOUNT}">{{upcouts.SHOP_TCOUNT}}</span>
							</div>
						</div>
					</template>
				</div>

				<div class="uni-flex jc-between box-center-box">

					<div class="check-unit">
						<text>长款金额</text>
						<div class="check-price-color">{{sMsg.DIFFERENT_PRICE_MORE||0}} <text>元</text></div>
					</div>
					<div class="check-unit">
						<text>短款金额</text>
						<div class="check-price-color">{{sMsg.DIFFERENT_PRICE_LESS||0}} <text>元</text></div>
					</div>
					<div class="check-unit">
						<text>客单交易</text>
						<div class="check-price-color">{{sMsg.TICKETCOUNT||0}} <text>笔</text></div>
					</div>
					<div class="check-unit">
						<text>客单均价</text>
						<div class="check-price-color">{{sMsg.TICKETAVE||0}} <text>元</text></div>
					</div>
				</div>
				<div class="uni-flex jc-between box-center-box mt8">
					<div class="check-unit">
						<text>优惠金额</text>
						<div class="check-price-color">{{sMsg.TOTALOFFAMOUNT||0}} <text class="">元</text></div>
					</div>
					<div class="check-unit">
						<text>移动支付</text>
						<div class="check-price-color">{{sMsg.MOBILEPAYMENT||0}} <text>元</text></div>
					</div>
					<div class="check-unit">
						<text>商品出售</text>
						<div class="check-price-color">{{sMsg.COMMODITY_COUNT||0}} <text>件</text></div>
					</div>
					<div class="check-unit">
						<text>商品均价</text>
						<div class="check-price-color">{{sMsg.COMMODITYAVE||0}} <text>元</text></div>
					</div>
				</div>

			</view>

		</div>
		<cover-view class="fixed-box page-title" :style="'transform: translateY('+fixedY+'px);opacity:'+opacity+';'">
			<cover-view>{{pageData.Serverpart_Name || ''}}</cover-view>
			<cover-view class="price-text" style="width: 200rpx;text-align: right;">¥
				{{pageData.Revenue_Amount ? $util.fmoney(pageData.Revenue_Amount,2) : '0.00'}}</cover-view>
		</cover-view>

		<template v-if="cateBrandList.length">
			<template v-if="theRequest.ProvinceCode=='340000'">
				<view class="uni-flex ai-center analysis-tabs">
					<view @tap="changeTab(3)" class="tab" :class="{'active': nowTab==3}">经营模式</view>
					<view @tap="changeTab(1)" class="tab" :class="{'active': nowTab==1}">经营业态</view>
					<view @tap="changeTab(2)" class="tab" :class="{'active': nowTab==2}">消费客群</view>
				</view>

				<view class="pie-content" v-show="nowTab==3">
					<div class="pie-title">经营模式占比</div>
					<view class="operation-model-content">

						<canvas canvas-id="modelCount" v-if="operationModel.length>0" id="modelCount"
							class="operation-model-content" @click="touchPie($event,'modelCount')" />
					</view>
				</view>
			</template>


			<view class="" v-show="nowTab==1">
				<!-- 安徽省 -->
				<ServiceRevenuePie ref="serviceRevenuePie" v-if="ServiceRevenueData.length==2 && nowTab==1"
					:data="ServiceRevenueData" @selectCate="selectCate" />
				<!-- 其余省份 -->
				<canvas v-else-if="sellData.length>0" canvas-id="sellCate" id="sellCate" class="operation-cate-content"
					@click="touchPie($event,'sellCate')"></canvas>

				<!-- 品牌列表 -->
				<div class="shop-box">
					<scroll-view scroll-x class="tab-shop" scroll-with-animation :scroll-left="scrollLeft">

						<div v-for="(n,i) in cateBrandList" :key="i" :id="`tabNum${i}`" class="cate-name"
							:class="{'active': nowShop==i}" @click="selectCate(i)">{{n.Bussiness_Name}}</div>

					</scroll-view>
					<div class="tab-content" v-if="cateBrandList.length">
						<div class="shop-card" v-for="(m,i) in cateBrandList[nowShop].listBrandModel" :key="i"
							@click="toBrandPage(m,i)">
							<div>
								<image v-if="m.Brand_ICO" :src="m.Brand_ICO" mode="aspectFit"></image>
								<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
							</div>
							<div class="shop-name">{{m.Brand_Name}}</div>
							<div class="price-num">¥ {{m.Revenue_Amount ? $util.fmoney(m.Revenue_Amount,2) : '0.00'}}
							</div>
						</div>
					</div>
				</div>

			</view>

			<view class="" v-show="nowTab==2">
				<CustomerAnalysis ref="customerAna" :show="nowTab==2" />
			</view>

		</template>

		<view style="height: 350rpx;" v-else>
			<noFound :nodata="'true'" :text="noDataText" />
		</view>

		<cover-view class="uni-mask" :style="showUnUpLoad ? ' display:block;':'opacity:0; display: none;'"
			@click="closePop" :catchtouchmove="showUnUpLoad? 'return':''"></cover-view>
		<cover-view class="uni-popup uni-popup-middle" :style="showUnUpLoad ? 'display:flex;':'display: none;'"
			:catchtouchmove="showUnUpLoad? 'return':''">

			<cover-view class="header-top" v-if="unUploadList.length>0">{{pageData.Serverpart_Name}}未上传门店</cover-view>
			<cover-view class="pop-body">
				<cover-view class="uni-flex pop-row" v-for="(c,i)  in unUploadList" :key="i">
					<cover-view class="uni-flex ai-center">
						<cover-view class="pop-index">{{i>8 ? i+1 :'0'+(i+1)}}</cover-view>
						<cover-view class="inline-item">{{c.SHOPNAME}}</cover-view>
					</cover-view>
					<cover-view class="pop-row-bottom"></cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="header-top" v-if="todayUpList.length>0">8点后上传的门店</cover-view>
			<cover-view class="pop-body">
				<cover-view class="uni-flex pop-row" v-for="(c,i)  in todayUpList" :key="i">
					<cover-view class="uni-flex ai-center">
						<cover-view class="pop-index">{{i>8 ? i+1 :'0'+(i+1)}}</cover-view>
						<cover-view class="inline-item">{{c.SHOPNAME}}</cover-view>
					</cover-view>
					<cover-view class="">{{c.DOWNLOAD_DATE ? $util.cutDate(c.DOWNLOAD_DATE,'MM/DD hh:mm:ss'): ''}}
					</cover-view>
					<cover-view class="pop-row-bottom"></cover-view>
				</cover-view>
			</cover-view>
		</cover-view>

	</view>
</template>

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

			return {
				lastDay: lastDay + '23:59:59', // 该页面的最近有效日期
				noDataText: '抱歉,该服务区暂无品牌分析数据',
				scrollLeft: 0,
				theRequest: {},
				showAll: false,
				showHeight: uni.upx2px(484) + 'px',
				searchDate: '',
				sellData: [],
				scrollTop: 0,
				pageData: {},
				cateBrandList: [],
				// ringColor: ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'],
				nowShop: 0,
				showPage: false,
				fixedY: -68,
				opacity: 0,
				sMsg: null, // 头部数据
				showUnUpLoad: false, //未上传门店弹出框
				upcouts: null, // 上传门店数量
				unUploadList: [], // 未上传门店列表
				todayUpList: [], // 未上传门店列表
				ServiceRevenueData: [],
				nowTab: 1,
				operationModel: [], // 安徽经营模式
			}
		},
		components: {
			ServiceRevenuePie,
			CustomerAnalysis
		},
		onLoad(option) {
			_self = this
			uni.showLoading({
				title: '正在加载...'
			})
			if (option.ProvinceCode) {
				// this.nowTab = option.ProvinceCode == 340000 ? 3 : 1
				option.time = this.$util.cutDate(option.time, 'YYYY-MM-DD')
				this.searchDate = this.$util.cutDate(option.time, 'MM月DD日')
				this.theRequest = option
				this.getHeader(option)
				this.getData(option)
			}
		},
		methods: {
			changeTab(value) {
				this.nowTab = value
				if (value == 2) {

					let opt = this.theRequest
					const params = {
						serverpartId: opt.ServerpartIds,
						pushprovinceCode: opt.ProvinceCode,
						statisticsMonth: this.$util.cutDate(opt.time, 'YYYYMM', -30)
					}
					this.$refs['customerAna'].tabChange(1, params)
				}

			},
			closePop() {
				this.showUnUpLoad = false
			},

			bindDateChange(e) {
				let values = e.detail.value
				let selectT = new Date(e.detail.value)

				if (selectT <= new Date(this.lastDay)) {
					let opt = this.theRequest
					opt.time = values.replace(/-/ig, '/')
					this.searchDate = this.$util.cutDate(values, 'MM月DD日')
					uni.showLoading({
						title: '正在加载'
					})
					this.getHeader(opt)
					this.getData(opt)
				} else {
					uni.showToast({
						title: '请选择有效日期',
						icon: 'none',
					})
				}
			},

			showFixed(options) {

				this.scrollTop = options.scrollTop

				let selfHeight = uni.upx2px(396)

				if (options.scrollTop > selfHeight) {
					if (this.fixedY !== 0) {
						// console.log( 0)
						this.fixedY = 0
						this.opacity = 1
						this.$forceUpdate()
					}
				} else {
					if (this.fixedY !== -selfHeight) {
						this.fixedY = 0 - selfHeight
						this.opacity = 0
						this.$forceUpdate()
					}
				}

			},
			toBrandPage(item, index) {
				let theRequest = this.theRequest
				let nowShop = this.nowShop

				let btid = this.cateBrandList[nowShop].Business_Trade

				let pages =
					`/pages/everdayRenven/serviceDetail?bid=${item.Brand_Id}&id=${theRequest.ServerpartIds}&time=${theRequest.time}&provinceId=${theRequest.ProvinceCode}&btid=${item.Business_Trade}`
				this.$util.toNextRoute('navigateTo', pages)
			},
			async selectCate(index) {

				if (index == this.nowShop) return
				this.nowShop = index
				this.showAll = false
				let leftWidthSum = 0;
				for (var i = 0; i <= index; i++) {
					let nowElement = await this.getWidth('tabNum' + i)
					leftWidthSum = leftWidthSum + nowElement.width
				}
				let winWidth = uni.getSystemInfoSync().windowWidth
				winWidth = (winWidth - 60) / 1.5
				this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0

				this.$forceUpdate()
			},
			getWidth(id) { //得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data)
						// console.log(data)
					}).exec()
				})
			},
			operationFn() { //昨日营收占比
				let _this = this;

				// 业态营收占比
				let colors1 = ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'];
				let list = []
				let list2 = []
				_this.pageData.listBusinessModel.map((m, i) => {
					if (m.Revenue_Amount != 0) {
						let n = {
							name: m.Bussiness_Name,
							data: m.Revenue_Amount
						}
						let n2 = {
							name: m.Bussiness_Name,
							value: m.Revenue_Amount
						}
						list2.push(n2)
						n.textColor = '#D1D1D1'

						n.textSize = uni.upx2px(26)
						n.formatter = function(arg) {
							if(typeof arg==='number'){
								return [n.name,(arg * 100).toFixed(2) + '%']
							}else{
								return [arg.name,(arg._proportion_ * 100).toFixed(2) + '%']
							}
							
						}
						list.push(n)
					}

				})
				if (list2.length > 0) {
					_this.ServiceRevenueData.push(list2)
					_this.sellData = list

				}
				if (_this.pageData.listCurBusinessModel && _this.pageData.listCurBusinessModel.length > 0) {
					let list = []
					_this.pageData.listCurBusinessModel.map(m => {
						if (m.Revenue_Amount != 0) {
							let n = {
								name: m.Bussiness_Name,
								value: m.Revenue_Amount
							}
							list.push(n)
						}
					})
					_this.ServiceRevenueData.push(list)
				}
				if (list.length > 0) {
					_this.showPie({
						id: 'sellCate',
						data: list,
						colors: colors1,
					});

				}
			},
			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]])
							formatter: function(arg) {
								if (typeof arg === 'number') {
									return [n[1], (arg * 100).toFixed(2) + '%']
								} else {
									return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
								}

							}
						});
					}
				});
				_data1.sort(function(a, b) {
					return b.data - a.data
				})

				return _data1;
			},
			showPie(obj) {
				const ctx = uni.createCanvasContext(obj.id, this);
				let data = {
					series: []
				}
				data.series = data.series.concat(obj.data)
				rincanvas[obj.id] = new uCharts({
					// $this: _self,
					// canvasId: obj.id,
					context: ctx,
					color: obj.colors,
					type: 'ring',
					padding: obj.id != 'modelCount' ? [15, 15, 25, 0] : '',
					legend: {
						show: false,
					},
					title: {
						name: data.series[0].name,
						fontSize: uni.upx2px(26),
						color: '#666666',
						// offsetY: uni.upx2px(-16),
					},
					animation: false,
					subtitle: {
						name: '¥' + this.$util.fmoney(data.series[0].data, 2),
						color: '#666666',
						fontSize: uni.upx2px(30),
						offsetX: uni.upx2px(16),
					},
					fontSize: 12,
					background: '#FFFFFF',
					pixelRatio: 1,
					series: data.series,
					animation: true,
					width: obj.id != 'modelCount' ? uni.upx2px(720) : uni.upx2px(666),
					height: obj.id != 'modelCount' ? uni.upx2px(586) : uni.upx2px(480),
					dataLabel: true,
					disablePieStroke: true,
					dataPointShape: false,
					extra: {
						ring: {
							ringWidth: obj.id != 'modelCount' ? uni.upx2px(90) : 40,
							labelWidth: uni.upx2px(40),
							activeOpacity: 1,
							activeRadius: 10
						},
						tooltip: {
							showBox: false,
							bgColor: '#000',
							bgOpacity: 0.4,
						}
					},
				});

			},
			touchPie(e, id, opt) {

				let touches = null
				if (id == "modelCount" && e.currentTarget.offsetTop < 100) {
					e.currentTarget.offsetTop = e.currentTarget.offsetTop + uni.upx2px(620)
				}
				let index = rincanvas[id].getCurrentDataIndex(e)
				if (index == -1) return
				let item = id != "modelCount" ? this.sellData[index] : this.operationModel[index]
				if (id != "modelCount") {
					this.sellData.map(n => {
						n.textColor = "#d1d1d1"
					})
					item.textColor = "#999"
					this.nowShop = index + 1

				}
				let showData = {
					title: {
						name: item.name,
						fontSize: uni.upx2px(26),
						color: '#666666',
						offsetY: uni.upx2px(-16),
					},
					series: id != "modelCount" ? this.sellData : this.operationModel,
					animation: false,
					subtitle: {
						name: '￥' + this.$util.fmoney(item.data, 2),
						color: '#666666',
						fontSize: uni.upx2px(30),
						offsetY: uni.upx2px(-16),
					},
				}
				rincanvas[id].updateData(showData);

				rincanvas[id].showToolTip(e);

			},
			showPop() {

				let list = this.unUploadList
				if (list.length || this.todayUpList.length) {
					this.showUnUpLoad = true
					this.$forceUpdate()
				}

			},
			getData(theRequest) {
				let _this = this
				this.$request.$webGet('WeChat/GetServerpartBrand', {
					Serverpart_Id: theRequest.ServerpartIds,
					statictics_Time: theRequest.time,
					pushProvinceCode: theRequest.ProvinceCode
				}).then(res => {

					if (res.Result_Code != 100) return
					if (theRequest.ProvinceCode == 330000) _this.showPage = true

					_this.pageData = res.Result_Data
					let list = JSON.parse(JSON.stringify(res.Result_Data.listBusinessModel))
					if (list.length > 0) {

						let all = {
							Bussiness_Name: '全部',
							listBrandModel: []
						}
						list.map(n => {
							all.listBrandModel.push(...n.listBrandModel)
						})
						all.listBrandModel.sort((a, b) => {
							if (a.Revenue_Amount < b.Revenue_Amount) {
								return 1
							} else {
								return -1
							}
						})
						_this.cateBrandList = [all, ...list]
						_this.operationFn()

					} else {

					}
				})

			},
			// 获取头部卡片 展示信息
			getHeader(theRequest) {
				let _this = this

				this.$request.$get('getRevenuePush', {
					groupType: 1010,
					statistical_Date: theRequest.time,
					Direction_IDS: theRequest.ServerpartIds,
					pushProvinceCode: theRequest.ProvinceCode,
					Statistics_Date: theRequest.time

				}).then(res => {
					uni.hideLoading()
					if (res.ResultCode == 100) {
						let _data = res.Data
						let {
							DIFFERENT_PRICE_LESS,
							DIFFERENT_PRICE_MORE,
							TICKETCOUNT,
							COMMODITY_COUNT,
							MOBILEPAYMENT,
							TOTALOFFAMOUNT,
							CASHPAY,
							BUDGETAMOUNT,
							UPLOADSTATE
						} = _data

						let headmsg = {
							DIFFERENT_PRICE_LESS,
							DIFFERENT_PRICE_MORE,
							TICKETCOUNT,
							COMMODITY_COUNT,
							MOBILEPAYMENT,
							TOTALOFFAMOUNT,
							CASHPAY,
							BUDGETAMOUNT,
						}

						headmsg.DIFFERENT_PRICE_LESS = _this.$util.fmoney(DIFFERENT_PRICE_LESS)
						headmsg.DIFFERENT_PRICE_MORE = _this.$util.fmoney(DIFFERENT_PRICE_MORE)
						headmsg.TICKETAVE = TICKETCOUNT > 0 ? this.$util.fmoney(CASHPAY / TICKETCOUNT, 2) : 0
						headmsg.COMMODITYAVE = COMMODITY_COUNT > 0 ? this.$util.fmoney(CASHPAY / COMMODITY_COUNT,
							2) : 0
						const uploadArray = UPLOADSTATE.split('/')
						this.upcouts = {
							SHOP_UPCOUNT: uploadArray[0],
							SHOP_TCOUNT: uploadArray[1]
						}
						if (uploadArray[0] > 0) {
							_this.getUnUpLoadShops(theRequest)
						}
						_this.sMsg = headmsg

						if (_data.SHOWBUSINESSTYPE == 1) { // 经营模式占比
							var colors3 = ['#667ED5', '#F6B760'];
							var type = [
								['OUTSOURCE_REVENUE', '外包'],
								['SELFSUPPORT_REVENUE', '自营']
							];
							_this.operationModel = _this.operationBusniess(type, _data);
							// this.modelProgress = operationModel[1]

							_this.showPie({
								id: 'modelCount',
								colors: colors3,
								data: _this.operationModel
							})
							_this.$forceUpdate()
							if (theRequest.ProvinceCode == 340000) _this.showPage = true
							// 	let data = {
							// 		series: []
							// 	}

							// 	data.series = data.series.concat(operationModel[0])
							// 	rincanvas['modelCount'] = new uCharts({
							// 		$this: this,
							// 		canvasId: 'modelCount',
							// 		colors: colors3,
							// 		type: 'ring',
							// 		fontSize: 12,
							// 		legend: {
							// 			show: false,
							// 			padding: 5,
							// 			lineHeight: 11,
							// 			margin: 0,
							// 		},
							// 		background: '#FFFFFF',
							// 		pixelRatio: 1,
							// 		series: data.series ,
							// 		animation: false,
							// 		width: uni.upx2px(666),
							// 		height: uni.upx2px(480),
							// 		dataLabel: true,
							// 		extra: {
							// 			pie: {
							// 				ringWidth: 40,
							// 				labelWidth: 20,
							// 				border: true,
							// 				borderWidth: 1,
							// 				color: '#777',
							// 				borderColor: '#fff'
							// 			}
							// 		},
							// 	});
						}
					}
				})
				// this.$request.$get('GetEndaccountListByDate',{
				// 	statistical_Date: theRequest.time,
				// 	Serverpart_Id: theRequest.ServerpartIds,
				// 	pushProvinceCode: theRequest.ProvinceCode,
				// }).then(res=>{

				// 	if(res.Result_Code==100){
				// 		let {SHOP_UPCOUNT,SHOP_TCOUNT} = res.Result_Data.List[0]
				// 		let data = {SHOP_UPCOUNT,SHOP_TCOUNT} 
				// 		_this.upcouts = data

				// 	}
				// })
			},
			getUnUpLoadShops(theRequest) {
				let _this = this
				_this.$request.$get('GetUnUpLoadShops', {
					action_record: theRequest.time,
					Serverpart_Id: theRequest.ServerpartIds
				}).then(res => {
					// 
					if (res.Result_Code != 100) {
						return false
					}
					let _data = res.Result_Data
					_this.unUploadList = _data.List
					_this.todayUpList = _data.UploadShop.List

				})
			},

		},
		onPageScroll(e) {
			this.showFixed(e)
		}

	}
</script>

<style scoped>
	.page-body {
		background-color: #fff;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
	}

	.mt8 {
		margin-top: 16rpx;
	}

	cover-view.page-title {
		color: #fff;
	}

	.page-title {
		background-color: #fcfcfc;
		display: flex;
		align-items: center;
		height: 110rpx;
		padding: 0 24rpx;
		justify-content: space-between;

		color: #000;
		font-size: 30rpx;
	}

	.page-title text:last-child {
		color: #383838;
	}

	.fixed-box {
		background-color: #686D8F;
		/* background: linear-gradient(to right, #686D8F, #A1ACC6); */
		transition: all .2s;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		box-sizing: border-box;
		color: #fff;
	}

	/* 业态 */
	.operation-cate-content {
		height: 585rpx;
		width: 690rpx;
		margin: 0 auto;
	}

	.operation-model-content {
		height: 480rpx;
		width: 690rpx;
		margin: 0 auto;
	}

	/* 门店 */
	.shop-box {
		margin: 32rpx 20rpx;
		border-radius: 8rpx;
		background-color: #F6F8FA;
		padding: 36rpx 20rpx;

	}

	.tab-shop {

		color: #999999;
		white-space: nowrap;
		/* display: flex;
		align-items: center; */

	}

	.tab-shop .cate-name {
		padding-right: 16rpx;
		font-size: 26rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.tab-shop .cate-name+.cate-name::before {
		content: '|';
		color: #eeeeee;
		padding-right: 16rpx;
	}

	.tab-shop .cate-name.active {
		color: #000;
		font-size: 28rpx;
		font-weight: 600;

	}

	.tab-content {
		display: flex;
		flex-wrap: wrap;
		margin-top: 24rpx;
		transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
		margin: 24rpx auto 0 auto;
		overflow: hidden;
		height: inherit;
		width: inherit;
	}

	.pie-content {
		margin: 0 30rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 10rpx 0 rgba(230, 230, 230, 0.49);
		background-color: #fff;
		position: relative;
		margin-bottom: 48rpx;
	}

	.pie-title {
		padding: 0 20rpx;
		line-height: 80rpx;
		font-size: 26rpx;
	}

	/* 门店卡片 */
	.shop-card {
		width: 210rpx;
		height: 227rpx;
		border-radius: 8rpx;
		color: #fff;
		text-align: center;
		padding-top: 20rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
	}

	.shop-card:nth-child(6n-5) {
		background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #ed7c77, #d6524c);
		background-size: contain;
	}

	.shop-card:nth-child(6n-4) {
		background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #d1bea8, #ba9d7b);
		margin-left: 18rpx;
		background-size: contain;
	}

	.shop-card:nth-child(6n-3) {
		background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #929cc0, #aab3d0);
		margin-left: 18rpx;
		background-size: contain;
	}

	.shop-card:nth-child(6n-2) {
		background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #779cb1, #a3bbc9);
		background-size: contain;
		margin-left: 0rpx;
	}

	.shop-card:nth-child(6n-1) {
		background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #c08d80, #e8cbc7);
		margin-left: 18rpx;
		background-size: contain;
	}

	.shop-card:nth-child(6n) {
		background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #5cbe9c, #95d5bf);
		margin-left: 18rpx;
		background-size: contain;
		margin-left: 18rpx;
	}

	.shop-card .shop-name {
		font-size: 24rpx;
		text-shadow: 0 2rpx 2rpx #A9a5a0;
		line-height: 1.4;
		max-height: 62rpx;
		overflow: hidden;
	}

	.shop-card image {
		border-radius: 50%;
		border: 2rpx solid #fff;
		background-color: #FFFFFF;
		width: 62rpx;
		height: 62rpx;
	}

	.shop-card .price-num {

		font-size: 38rpx;
		font-family: Bahnschrift Regular;
	}

	.box-card {
		padding: 24upx 24upx 0;
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
		transition: all .2s;
		background: url(../../static/images/effective/bg-top.png) no-repeat center;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top center;

	}

	.top-card {
		background: linear-gradient(to top, #989fb9, #686d8f);
		margin-top: 24upx;
		padding: 32upx 0 32rpx 0;
		border-radius: 8rpx;
	}

	.budgetamount {
		margin-left: 14rpx;
		color: #fff;
		font-family: 'Bahnschrift Regular';
	}

	.budget-title {

		color: #DEE1F1;
		padding: 4rpx 6rpx 2rpx 6rpx;
		border-radius: 2rpx;
		margin-right: 4rpx;

	}

	.up-text-title,
	.down-text-title {
		font-size: 32rpx;
		font-family: 'Bahnschrift Regular';
		/* line-height: 1.2; */
	}

	.up-text-title:after {
		content: "";
		margin-left: 6rpx;
		width: 16rpx;
		height: 18rpx;
		display: inline-block;
		background: url('/static/images/revenue/up-arrow.png') no-repeat center;
		background-size: contain;

	}

	.down-text-title:after {
		content: "";
		margin-left: 6rpx;
		width: 16rpx;
		height: 18rpx;
		display: inline-block;
		background: url('/static/images/revenue/down-arrow.png') no-repeat center;
		background-size: contain;

	}

	.box-top-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title-clock {
		color: #999;
		font-size: 24upx;
		text-align: right;
	}

	/* 
	.more-btn,.weisc-ico {
		display: flex;
		align-items: center;
		margin-left: 8upx;
		color: #dd7575;
		font-size: 30upx;
	} */
	.more-btn:after {
		content: '';
		display: inline-block;
		margin-left: 8upx;
		width: 10upx;
		height: 20upx;
		background: url(../../static/images/effective/sj.png) no-repeat center;
		background-size: contain;
	}

	.box-center-title {
		font-size: 24upx;
		color: #010101;
		border-radius: 24upx;
		padding: 0 16upx;
		background-color: #DEDEDE;
		text-align: center;

	}

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

	.box-center-box {

		/* margin-bottom: 16rpx; */
		padding: 0 24rpx;
	}

	.center-title {
		color: #DEDEDE;
		font-size: 24rpx;
	}

	.center-num {
		font-size: 64rpx;
		color: #fff;
		font-family: Bahnschrift Regular;
	}

	.check-unit,
	.budgetamount {
		font-size: 24rpx;
		color: #DEE1F1;
		text-align: center;
	}

	.main-amount-title {

		color: #DEE1F1;
		font-size: 24rpx;
		/* flex: 1; */
	}

	.tab-unit {
		background-color: #3A3E5B;
		border-radius: 24rpx 0 0 24rpx;
		color: #fff;
		font-size: 24rpx;
		position: relative;
		right: -12px;
		padding: 0 20rpx;
	}

	.check-price-color {
		color: #fff;
		font-size: 34rpx;
		font-family: Bahnschrift Regular;
		line-height: 1.2;
	}

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

	.tab-icon2 {
		font-size: 26rpx;
		color: #DEDEDE;
		flex: 1;
	}

	.tab-unit-num {
		font-size: 24rpx;
		color: #fff;
	}

	.tab-unit-num+.tab-unit-num:before {
		content: '/';
		margin: 0 4rpx;
		color: #fff;
	}

	.priceGreen,
	.priceGreen.tab-unit-num {
		color: #7CB9A5;
		/* font-size: 28rpx; */
	}

	.priceRed,
	.tab-unit-num.priceRed {
		color: #DD7575;
		/* font-size: 28rpx; */
	}

	/* 弹出内容 */
	.uni-mask {
		position: absolute;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #000;
		height: calc(100vh);
		width: 750rpx;
		opacity: 0.6;
	}

	.uni-popup {
		position: fixed;
		z-index: 999;
		background: #ffffff;
		box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
	}

	.uni-popup-middle {
		/* overflow: hidden; */
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 400upx;
		min-height: 400upx;
		border-radius: 16upx;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -20%);
		justify-content: flex-start;
		padding: 0 30upx 30upx 30upx;
	}

	.header-top {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		text-align: left;
		width: 100%;
		padding: 32rpx 0;
		background-color: #fff;
	}

	.pop-body {
		width: 600rpx;
		max-height: 600rpx;
		overflow-y: auto;
		background-color: #fff;
		padding-bottom: 8rpx;
	}

	.pop-row {
		padding: 24rpx 10rpx 24rpx 0;
		font-size: 24rpx;
		align-items: center;
		justify-content: space-between;

		box-sizing: border-box;
		position: relative;
	}

	.pop-row .pop-row-bottom {

		position: absolute;
		height: 2rpx;
		width: 100%;
		background-color: #efefef;
		bottom: 0;
		left: 0;
	}

	.pop-index {
		color: #DF7F42;
		border: 1rpx solid #DF7F42;
		border-radius: 8rpx;
		padding: 2rpx 12rpx 0 12rpx;
		margin-right: 12rpx;
		font-size: 24rpx;
		line-height: 30rpx;
		height: 30rpx;
		display: inline-block;
		vertical-align: middle;
	}

	/* 	.customer-title {
		color: #525280;
		font-size: 32rpx;
		font-weight: 600;
		background: url(../../static/images/revenue/customer-bg.png) no-repeat center;
		background-size: contain;
		border-radius: 12rpx;
		margin-top: 24rpx;
		height: 104rpx;
		line-height: 104rpx;
		padding: 0 32rpx;
		font-family: 'FZZhengHeiS-DB-GB Regular', 'FZZhengHeiS-DB-GB Regular-Regular';
		display: flex;
		align-items: center;
		justify-content: space-between;
	} */
	.uni-icon-arrowright {
		border: 1rpx solid #606060;
		border-radius: 50%;
		color: #606060;
		font-size: 32rpx;
	}

	.analysis-tabs {
		margin: 24rpx auto;
		width: 708rpx;
		overflow: hidden;
		/* color: #777777; */
		border: 1rpx solid #647bd1;
		border-radius: 39rpx;
		display: flex;
	}

	.tab {
		text-align: center;
		flex: 1;
		height: 76rpx;
		line-height: 76rpx;
	}

	.tab.active {
		background: #f2f4f9;
		color: #647BD1;
	}
</style>
