<template>
	<view 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">{{ sMsg.serverpartname }}</span>
				<picker mode="date" @change="bindDateChange" :value="theRequest && theRequest.time" :start="startTime"
					:end="endTime" class="title-clock">
					<view>{{ searchDate }} <text class="uni-icon uni-icon-arrowdown"></text></view>
				</picker>

			</div>
			<view class="top-card">
				<div class="box-center-box">
					<div class="uni-flex ai-center jc-between" style="margin-bottom: 8rpx;">
						<div class="main-amount-title">对客营收(元)</div>
						<div class="tab-unit" @tap="showPop">
							<span>上传门店：</span>
							<span class="tab-unit-num"
								:class="{ 'priceRed': sMsg.uploadCount !== sMsg.totalUploadCount }">{{ sMsg.uploadCount
								}}</span>
							<span class="tab-unit-num "
								:class="{ 'more-btn': sMsg.uploadCount !== sMsg.totalUploadCount }">{{
									sMsg.totalUploadCount }}</span>
						</div>
					</div>
					<div class="uni-flex ai-base jc-between">
						<span class="center-num">{{ sMsg.totalMoneyShow }}</span>
						<span class="budgetamount">
							<text class="budget-title">计划营收(元):</text>
							<text :class="sMsg.budgetAmount < sMsg.cashPay ? 'up-text-title' : 'down-text-title'">
								{{ sMsg.budgetamoutShow }}
								<span style="font-size: 24rpx;margin-left: 12rpx;">{{ sMsg.diffBili }}%</span>
							</text>
						</span>
					</div>
				</div>
				<div class="uni-flex jc-between box-center-box">

					<div class="check-unit">
						<text>长款金额</text>
						<div class="check-price-color">{{ $util.fmoney(sMsg.diffMorePrice, 2) }} <text>元</text></div>
					</div>
					<div class="check-unit">
						<text>短款金额</text>
						<div class="check-price-color">{{ $util.fmoney(sMsg.diffLessPrice, 2) }} <text>元</text></div>
					</div>
					<div class="check-unit">
						<text>客单交易</text>
						<div class="check-price-color">{{ $util.fmoney(sMsg.ticketCount, 0) }} <text>笔</text></div>
					</div>
					<div class="check-unit">
						<text>客单均价</text>
						<div class="check-price-color">{{ $util.fmoney(sMsg.tickave, 2) }} <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">{{ $util.fmoney(sMsg.totalOffAmount, 2) }} <text>元</text></div>
					</div>
					<div class="check-unit">
						<text>移动支付</text>
						<div class="check-price-color">{{ $util.fmoney(sMsg.mobilePayment, 2) }} <text>元</text></div>
					</div>
					<div class="check-unit">
						<text>商品出售</text>
						<div class="check-price-color">{{ $util.fmoney(sMsg.totalCount, 0) }} <text>件</text></div>
					</div>
					<div class="check-unit">
						<text>商品均价</text>
						<div class="check-price-color">{{ $util.fmoney(sMsg.countave, 2) }} <text>元</text></div>
					</div>
				</div>
			</view>
		</div>
		<cover-view class="fixed-box page-title"
			:style="'transform: translateY(' + fixedY + 'px);opacity:' + opacity + ';'">
			<cover-view>{{ sMsg.serverpartname || '' }}</cover-view>
			<cover-view class="price-text" style="width: 200rpx;text-align: right;">¥ {{ sMsg.totalMoneyShow }}
			</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(4)" class="tab" :class="{ 'active': nowTab == 4 }">车流分析</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 v-show="nowTab == 1">
				<!-- 安徽省 -->
				<div class="pie-content">
					<div class="model-busniess">经营业态占比</div>
					<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="model-busniess">
						<div>经营模式占比</div>
						<div class="progress-content">
							<div class="progress-left" :style="'width: ' + operationModel[0].bili + '%;'"></div>
							<div class="progress-right" :style="'width: ' + operationModel[1].bili + '%;'"></div>
						</div>
						<div class="uni-flex jc-between">
							<div style="color: #667ED5;">{{ operationModel[0].name }}: <span
									style="font-size: 32rpx;">{{
										operationModel[0].bili }}</span>%</div>
							<div style="color: #F3AF50;" v-if="operationModel[1].name">{{ operationModel[1].name }}:
								<span style="font-size: 32rpx;">{{ operationModel[1].bili }}</span>%
							</div>
						</div>
						<div class="uni-flex jc-between">
							<div style="margin-bottom: 0;"><span style="font-size: 32rpx;">{{ operationModel[0].data
							}}</span>元
							</div>
							<div style="margin-bottom: 0;" v-if="operationModel[1].data"><span
									style="font-size: 32rpx;">{{
										operationModel[1].data
									}}</span>元
							</div>
						</div>
					</div>
				</div>
				<!-- 品牌列表 -->
				<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>
			<view class="" v-show="nowTab == 4">
				<CarAnalysis ref="carAna" :show="nowTab == 4" />
			</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">{{ sMsg.serverpartname }}未上传门店</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.ServerpartShop_Name }}</cover-view>
					</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'
import CarAnalysis from './components/CarAnalysis.vue'
import anhuiYestodayRevenueData from './components/anhuiYestodayRevenueData.js'
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: [], // 安徽经营模式
			startTime: '',//开始时间
			endTime: '',//结束时间
		}
	},
	components: {
		ServiceRevenuePie,
		CustomerAnalysis,
		CarAnalysis
	},
	onLoad(option) {
		console.log(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')
			option.month = this.$util.cutDate(option.time, 'YYYYMM')
			this.searchDate = this.$util.cutDate(option.time, 'MM月DD日')
			this.theRequest = option
			this.initData(option)
			this.getData(option)
		}
		let startTime // 开始时间
		const date = new Date()
		let y = date.getFullYear()
		let m = date.getMonth() + 1
		let d = date.getDate() - 1
		if (d - 8 < 0) {
			let num = 8 - d
			m = m - 1
			let changeMonth = m
			if (changeMonth < 10) {
				changeMonth = '0' + changeMonth
			}
			let thisMonthDay = this.$util.getThisMonthDay(`${y}-${changeMonth}`)
			if (m < 10) {
				m = '0' + m
			}
			startTime = `${y}-${m}-${thisMonthDay - num}`//真实的日期
		} else {
			if (m < 10) {
				m = '0' + m
			}
			let day
			day = d - 8
			startTime = `${y}-${m}-${day}`
		}
		this.startTime = startTime
		this.endTime = `${y}-${m}-${d}`


	},
	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)
			}
			if (value == 4) {
				let opt = this.theRequest
				const params = {
					serverpart_Id: opt.ServerpartIds,
					pushprovinceCode: opt.ProvinceCode,
					StatisticsDate: opt.time
				}
				this.$refs['carAna'].getTopData(params)
			}

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

		bindDateChange(e) {
			let values = e.detail.value
			let selectT = new Date(e.detail.value)
			this.unUploadList = []
			if (selectT <= new Date(this.lastDay)) {
				let opt = this.theRequest
				opt.time = values
				opt.month = this.$util.cutDate(opt.time, 'YYYYMM')
				this.searchDate = this.$util.cutDate(values, 'MM月DD日')
				this.changeTab(this.nowTab)
				uni.showLoading({
					title: '正在加载'
				})
				this.initData(opt)
				this.getData(opt)
				this.$forceUpdate()
			} 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}&shopid=${item.ServerpartShop_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) + '%']
							}
							// return [n[1], (arg * 100).toFixed(2) + '%']
						}
					});
				}
			});
			_data1.sort(function (a, b) {
				return b.data - a.data
			})

			return _data1;
		},
		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: _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('CommercialApi/Revenue/GetServerpartBrand', {
				Serverpart_Id: theRequest.ServerpartIds,
				statictics_Time: theRequest.time,
				pushProvinceCode: theRequest.ProvinceCode
			}).then(res => {
				if (res.Result_Code != 100) return

				_this.pageData = res.Result_Data
				if (res.Result_Data.listBusinessModel) {
					let list = JSON.parse(JSON.stringify(res.Result_Data.listBusinessModel))
					console.log('list', list)
					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()
						return
					}
					return
				}
				_this.cateBrandList = []
			})
		},
		// 获取头部卡片 展示信息

		async initData(theRequest) {
			let _this = this
			const [totalData, busniessTypePie, busniessTradePie, busniessTradeFathPie] =
				await anhuiYestodayRevenueData.getData(theRequest, true)

			totalData.tickave = totalData.ticketCount > 0 ? this.$util.fmoney(totalData.cashPay / totalData
				.ticketCount, 2) : 0
			totalData.countave = totalData.totalCount > 0 ? this.$util.fmoney(totalData.cashPay / totalData
				.totalCount, 2) : 0

			totalData.totalMoneyShow = this.$util.fmoney(totalData.cashPay)
			// totalData.dayOfShow = this.$util.cutDate(theRequest.time, 'MM月DD日')
			totalData.budgetamoutShow = totalData.budgetAmount ? _this.$util.fmoney(totalData.budgetAmount) : 0.00
			totalData.diffBudgetTotal = Math.abs(totalData.budgetAmount - totalData.cashPay)
			totalData.diffBili = totalData.budgetAmount > 0 ? this.$util.fmoney((totalData.diffBudgetTotal /
				totalData.budgetAmount) * 100, 2) : '100'

			this.sMsg = totalData
			// 饼图分析及数据条形分析
			const [progressList, pieList] = this.getProgressData(busniessTypePie, totalData.cashPay)

			this.operationModel = progressList
			// 经营类型分析
			var colors1 = ['#FFAC37', '#6B75B8'];
			this.showPie({
				id: 'modelCount',
				data: pieList,
				colors: colors1,
			});
			// 经营业态
			// this.ServiceRevenueData = []
			this.ServiceRevenueData = [busniessTradeFathPie, busniessTradePie]
			if (totalData.uploadCount !== totalData.totalUploadCount) {
				this.getUnUpLoadShops(theRequest)

			}
			this.showPage = true
			uni.hideLoading()
		},
		getProgressData(data, total) {
			var _data1 = [];
			var _data2 = [];
			let _this = this
			data.forEach((n, i) => {
				_data1.push({
					...n,
					textColor: '#999',
					formatter: function (arg) {
						if (typeof arg === 'number') {
							return [n.name, (arg * 100).toFixed(2) + '%']
						} else {
							return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
						}

					}
				});

				_data2.push({
					name: n.name,
					num: n.data,
					data: _this.$util.fmoney(n.data, 2), //+Number(data2[n[0]])
					bili: _this.$util.fmoney((n.data / total) * 100, 2)
				});

			});
			_data1.sort(function (a, b) {
				return b.data - a.data
			})
			_data2.sort(function (a, b) {
				return b.num - a.num
			})
			return [_data2, _data1];
		},
		getUnUpLoadShops(theRequest) {
			let _this = this
			_this.$request.$webGet('CommercialApi/Revenue/GetUnUpLoadShops', {
				Statistics_Date: theRequest.time,
				pushProvinceCode: theRequest.ProvinceCode,
				Serverpart_ID: theRequest.ServerpartIds
			}).then(res => {
				//
				if (res.Result_Code != 100) {
					return false
				}
				let _data = res.Result_Data
				_this.unUploadList = _data.List
			})
		},
	},
	onPageScroll(e) {
		this.showFixed(e)
	}
}
</script>

<style lang="scss" scoped>
.page-body {
	background-color: #f8f9fa;
	padding: 0 32rpx 32rpx;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
	min-height: 100vh;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.mt8 {
	margin-top: 20rpx;
}

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: linear-gradient(135deg, #27B25F, #4CCC7F);
	transition: all .3s ease;
	position: fixed;
	top: 0;
	left: 32rpx;
	width: calc(100% - 64rpx);
	z-index: 999;
	box-sizing: border-box;
	color: #fff;
	box-shadow: 0 4rpx 20rpx rgba(39, 178, 95, 0.3);
	backdrop-filter: blur(10rpx);
	border-radius: 0 0 16rpx 16rpx;
}

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

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

/* 门店 */
.shop-box {
	margin: 24rpx 0;
	border-radius: 16rpx;
	background-color: #fff;
	padding: 32rpx 24rpx;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	border: 1rpx solid #f0f0f0;
}

.tab-shop {

	color: #999999;
	white-space: nowrap;
}

.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: 0 auto 0 auto;
	overflow: hidden;
	height: inherit;
	width: inherit;
}

.pie-content {
	margin: 24rpx 0 32rpx;
	border-radius: 16rpx;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	background-color: #fff;
	position: relative;
	padding: 32rpx 24rpx;
	border: 1rpx solid #f0f0f0;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4rpx;
		background: linear-gradient(90deg, #27B25F, #4CCC7F);
	}
}

.pie-title {
	padding: 0;
	line-height: 1.5;
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 24rpx;
}

/* 门店卡片 */
.shop-card {
	width: 210rpx;
	height: 240rpx;
	border-radius: 16rpx;
	color: #fff;
	text-align: center;
	padding: 24rpx 16rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

	&:active {
		transform: scale(0.98);
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
		pointer-events: none;
	}
}

.shop-card:nth-child(6n-5) {
	background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.shop-card:nth-child(6n-4) {
	background: linear-gradient(135deg, #feca57, #ff9ff3);
	margin-left: 18rpx;
}

.shop-card:nth-child(6n-3) {
	background: linear-gradient(135deg, #a8e6cf, #7fcdcd);
	margin-left: 18rpx;
}

.shop-card:nth-child(6n-2) {
	background: linear-gradient(135deg, #74b9ff, #0984e3);
	margin-left: 0rpx;
}

.shop-card:nth-child(6n-1) {
	background: linear-gradient(135deg, #fd79a8, #e84393);
	margin-left: 18rpx;
}

.shop-card:nth-child(6n) {
	background: linear-gradient(135deg, #27B25F, #4CCC7F);
	margin-left: 18rpx;
}

.shop-card .shop-name {
	font-size: 26rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	line-height: 1.4;
	max-height: 64rpx;
	overflow: hidden;
	font-weight: 500;
	margin: 12rpx 0;
}

.shop-card image {
	border-radius: 50%;
	border: 3rpx solid rgba(255, 255, 255, 0.9);
	background-color: #FFFFFF;
	width: 64rpx;
	height: 64rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.shop-card .price-num {
	font-size: 28rpx;
	font-family: 'DIN Alternate', 'Bahnschrift', sans-serif;
	font-weight: 700;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	margin-top: auto;
}

.box-card {
	padding: 32rpx 24rpx 16rpx;
	background-color: #fff;
	width: 100%;
	box-sizing: border-box;
	transition: all .3s ease;
	margin: 0 0 24rpx;
	border-radius: 16rpx;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 8rpx;
		background: linear-gradient(90deg, #27B25F, #4CCC7F);
	}
}

.top-card {
	background: linear-gradient(135deg, #27B25F 0%, #4CCC7F 100%);
	margin-top: 32rpx;
	padding: 24rpx 0;
	border-radius: 16rpx;
	position: relative;
	box-shadow: 0 8rpx 24rpx rgba(39, 178, 95, 0.2);

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="90" cy="10" r="2" fill="white" opacity="0.3"/><circle cx="80" cy="20" r="1" fill="white" opacity="0.2"/><circle cx="70" cy="5" r="1.5" fill="white" opacity="0.4"/></svg>') repeat;
		pointer-events: none;
	}
}

.budgetamount {
	margin-left: 16rpx;
	color: rgba(255, 255, 255, 0.9);
	font-family: 'DIN Alternate', 'Bahnschrift', sans-serif;
	font-weight: 500;
	display: flex;
	align-items: center;
}

.budget-title {
	color: rgba(255, 255, 255, 0.8);
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	margin-right: 8rpx;
	background: rgba(255, 255, 255, 0.1);
	font-size: 22rpx;
}

.up-text-title,
.down-text-title {
	font-size: 32rpx;
	font-family: 'DIN Alternate', 'Bahnschrift', sans-serif;
	font-weight: 600;
	line-height: 1.3;
}

.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;
	margin-bottom: 8rpx;
}

.title-clock {
	color: #666;
	font-size: 26rpx;
	text-align: right;
	padding: 8rpx 16rpx;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	border: 1rpx solid #e5e5e5;
}

/*
	.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: 28rpx;
	color: #fff;
	border-radius: 24rpx;
	padding: 8rpx 20rpx;
	background: linear-gradient(90deg, #27B25F, #4CCC7F);
	text-align: center;
	font-weight: 400;
	box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3);
}

.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: 32rpx;
	color: #fff;
	font-family: 'DIN Alternate', 'Bahnschrift', sans-serif;
	font-weight: 700;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	letter-spacing: 2rpx;
}

.check-unit,
.budgetamount {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
	line-height: 1.4;
}

.main-amount-title {
	color: rgba(255, 255, 255, 0.9);
	font-size: 26rpx;
	font-weight: 500;
}

.tab-unit {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
	color: #fff;
	font-size: 26rpx;
	padding: 2rpx 16rpx;
	font-weight: 500;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.check-price-color {
	color: #fff;
	font-size: 28rpx;
	font-family: 'DIN Alternate', 'Bahnschrift', sans-serif;
	line-height: 1.3;
	font-weight: 600;
	margin-top: 8rpx;
}

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

.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 {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 500rpx;
	min-height: 400rpx;
	border-radius: 20rpx;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -20%);
	justify-content: flex-start;
	padding: 0 32rpx 32rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.header-top {
	font-size: 32rpx;
	font-weight: 700;
	color: #333;
	text-align: left;
	width: 100%;
	padding: 32rpx 0 24rpx;
	background-color: #fff;
	position: relative;

	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 2rpx;
		background: linear-gradient(90deg, #27B25F, #4CCC7F);
	}
}

.pop-body {
	width: 100%;
	max-height: 500rpx;
	overflow-y: auto;
	background-color: #fff;
	padding-bottom: 16rpx;
	border-radius: 8rpx;
}

.pop-row {
	padding: 20rpx 0;
	font-size: 26rpx;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	position: relative;
	color: #333;
}

.pop-row .pop-row-bottom {
	position: absolute;
	height: 1rpx;
	width: 100%;
	background: linear-gradient(90deg, transparent 0%, #e5e5e5 50%, transparent 100%);
	bottom: 0;
	left: 0;
}

.pop-index {
	color: #fff;
	background: linear-gradient(135deg, #27B25F, #4CCC7F);
	border-radius: 12rpx;
	padding: 4rpx 12rpx;
	margin-right: 16rpx;
	font-size: 22rpx;
	font-weight: 600;
	min-width: 48rpx;
	text-align: center;
	box-shadow: 0 2rpx 8rpx rgba(39, 178, 95, 0.3);
}

/* 	.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 0;
	overflow: hidden;
	background-color: #fff;
	border-radius: 12rpx;
	display: flex;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	border: 1rpx solid #f0f0f0;
}

.tab {
	text-align: center;
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	color: #666;
	transition: all 0.3s ease;
	font-weight: 500;
	position: relative;
}

.tab.active {
	background: linear-gradient(135deg, #27B25F, #4CCC7F);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3);
	border-radius: 8rpx;
	margin: 4rpx;
	height: 72rpx;
	line-height: 72rpx;
}

// 经营模式占比
.model-busniess {
	font-family: 'DIN Alternate', 'Bahnschrift', sans-serif;
	padding: 8rpx 24rpx;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	border-radius: 12rpx;
	border: 1rpx solid #f0f0f0;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.model-busniess view {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
	// margin-bottom: 16rpx;
}

.model-busniess .progress-content {
	width: 100%;
	height: 12rpx;
	border-radius: 6rpx;
	display: flex;
	justify-content: space-between;
	margin: 8rpx 0 8rpx;
	overflow: hidden;
	box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.model-busniess .progress-left {
	background: linear-gradient(90deg, #27B25F, #4CCC7F);
	border-radius: 6rpx 0 0 6rpx;
}

.model-busniess .progress-right {
	background: linear-gradient(90deg, #ff9f43, #ffb84d);
	border-radius: 0 6rpx 6rpx 0;
}
</style>
