<template>
	<view class="page">
		<view class="bj"></view>
	<view class="toptit" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnqh"><!-- @click="topage(4)" -->
			    <image hover-class="app-tap-hover" class="toptit-avatar" @click.stop="topage(4)" src="https://api.ccttiot.com/smartmeter/img/static/uEQLkI1vDF4PTy44DTXH" mode=""></image>	{{areaname}}  <u-icon style="margin-left: 10rpx;" name="arrow-down" color="#fff" size="28"></u-icon> 
			</view>
		<view class="op-card" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnchakan">
			<view class="op-head">
				<view class="op-head-left">
					<view class="op-head-title">运营状况</view>
					<view class="op-head-sub-row">
						<text class="op-head-sub">今日数据 · 核心指标</text>
					</view>
				</view>
				<view class="op-more">
					查看更多 <u-icon style="margin-left: 6rpx;" name="arrow-right" color="#4297F3" size="28"></u-icon>
				</view>
			</view>
			<view class="leiji">
				<view class="li li--revenue">
					<view class="top">
					  {{ statOrderCount }} <text class="top-unit">笔</text>
					</view>
					<view class="bot">今日订单</view>
				</view>
				<view class="li li--revenue">
					<view class="top">
						{{ statRevenue }} <text class="top-unit">元</text>
					</view>
					<view class="bot">今日营收</view>
				</view>
				<view class="li li--revenue">
					<view class="top">
						{{ statFinished }} <text class="top-unit">笔</text>
					</view>
					<view class="bot">已完成</view>
				</view>
				<view class="li li--revenue" :class="{ 'li--live': statProcessing > 0 }">
					<view class="top">
						{{ statProcessing }} <text class="top-unit">笔</text>
					</view>
					<view class="bot">进行中</view>
				</view>
				<view class="li li--revenue li--wait-pay">
					<view class="top">
						{{ statRideWaitPay }} <text class="top-unit">笔</text>
					</view>
					<view class="bot">待付车费</view>
				</view>
			</view>
		</view>
		
		<view class="newtop">
			<view class="menu-item" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="topage(11)">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uReMugbnooJ4SSlLyF13" mode=""></image>
				<text>运营配置</text>
			</view>
			<view class="menu-item" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="toMap">
				<image src="https://api.ccttiot.com/smartmeter/img/static/utuqX8JbqxLHn3nymdWo" mode=""></image>
				<text>电子围栏</text>
			</view>
			<view class="menu-item" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="topage(12)">
				<image src="https://api.ccttiot.com/smartmeter/img/static/ux863IEYVBkbjwqa9jf2" mode=""></image>
				<text>运营区域</text>
			</view>
			<view class="menu-item" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnts">
				<image src="https://api.ccttiot.com/smartmeter/img/static/urvqyh17Uuoql0lXDdq0" mode=""></image>
				<text>用户投诉</text>
				<view v-if="complaintBadge > 0" class="badge">{{ complaintBadge > 99 ? '99+' : complaintBadge }}</view>
			</view>
			<view class="menu-item" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnreturnbike">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uJ4x8uTOMd7pmTeBiX8p" mode=""></image>
				<text>订单审核</text>
				<view v-if="statWaitVerify > 0" class="badge">{{ statWaitVerify > 99 ? '99+' : statWaitVerify }}</view>
			</view>
		</view>
		
		<view class="gonggao" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btntopgg">
			<image style="width: 28rpx;height: 28rpx;" src="https://api.ccttiot.com/smartmeter/img/static/urVdfzier4Q54s6u8Upl" mode=""></image>
			<view class="container">
			    <view class="scroll-text">
			      <view class="scroll-item">
			        {{announcements.title == null ? '暂无最新公告' : announcements.title}} 
			      </view>
			    </view>
			</view>
			<u-icon name="arrow-right" color="#373737" style="position: absolute;right: 10rpx;" size="32"></u-icon>
		</view>

		<!-- 拓展功能 -->
		<view class="ability-section" v-if="areaId">
			<view class="ability-section-header">
				<view class="newtit ability-section-title">拓展功能</view>
				<view hover-class="app-tap-hover" class="ability-more" @click="goAbilityList">
					查看更多
					<u-icon name="arrow-right" color="#4297F3" size="26" style="margin-left: 4rpx;"></u-icon>
				</view>
			</view>
			<view class="ability-loading" v-if="abilityLoading">加载中...</view>
			<view class="ability-empty" v-else-if="!abilityList.length">暂无拓展能力</view>
			<scroll-view class="ability-scroll" scroll-x :show-scrollbar="false" v-else>
				<view class="ability-scroll-inner">
					<view
						class="ability-card"
						v-for="item in abilityList"
						:key="item.id || item.abilityCode"
					>
						<view class="ability-card-head">
							<image class="ability-icon" :src="item.abilityIcon" mode="aspectFill" v-if="item.abilityIcon"></image>
							<view class="ability-icon ability-icon--placeholder" v-else>
								<text>{{ (item.abilityName || '能').slice(0, 1) }}</text>
							</view>
							<view class="ability-name-wrap">
								<text class="ability-name">{{ item.abilityName || '--' }}</text>
								<text class="ability-free-tag" v-if="item.free">免费</text>
							</view>
						</view>
						<view class="ability-stats">
							<text class="ability-stat-left">剩余次数：{{ formatAbilityCount(item.remainingCount) }} 次</text>
							<text class="ability-stat-right">已用：{{ formatAbilityCount(item.usedCount) }} / 总：{{ formatAbilityCount(item.totalCount) }} 次</text>
						</view>
						<view class="ability-progress-track">
							<view class="ability-progress-fill" :style="{ width: abilityProgressPercent(item) + '%' }"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 常用工具 -->
		<view class="newtit">常用工具</view>
		<view class="common-tools">
			<image class="tool-banner" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnjs" src="https://api.ccttiot.com/smartmeter/img/static/uehKZhQD3xZFCecZSJf2" mode=""></image> <!-- //门店管理 -->
			<image class="tool-banner" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="topage(10)" src="https://api.ccttiot.com/smartmeter/img/static/uRkGGK4bIWnMsosA5Zu1" mode=""></image> <!-- 收费模版 -->
			<image class="tool-banner" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="topage(9)" src="https://api.ccttiot.com/smartmeter/img/static/uBsnPWXwpmwhuaDB6BMF" mode=""></image> <!-- 车辆型号 -->
			<image class="tool-banner" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="topage(2)" src="https://api.ccttiot.com/smartmeter/img/static/uPXA0S6p7NZ3FEoklU95" mode=""></image> <!-- 车辆管理 -->
		</view>
		<!-- 其他工具 -->
		<view class="newtit newtit-spaced">其他工具</view>
		<view class="other-tools">
			<view class="other-row">
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnjm" src="https://api.ccttiot.com/smartmeter/img/static/uffolC81XnKNgE9Uc7uB" mode=""></image> <!-- 加盟伙伴 -->
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnywry" src="https://api.ccttiot.com/smartmeter/img/static/u1ZIXf7JVPNtZVtArR4E" mode=""></image> <!-- 运维人员 -->
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnkefu" src="https://api.ccttiot.com/smartmeter/img/static/uxy4PyvtlQ1qA3VgOVIm" mode=""></image> <!-- 客服设置 -->
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnhy" src="https://api.ccttiot.com/smartmeter/img/static/umIo5c86JDdswIhamRAD" mode=""></image> <!-- 会员中心 -->
			</view>
			<view class="other-row">
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnyunwei" src="https://api.ccttiot.com/smartmeter/img/static/uc8BWB6V2AG1u6Rv7RJr" mode=""></image>
				<!-- 换电工单 -->
				<!-- 换电记录 -->
				<!-- 批量调度 -->
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btndiaodujl" src="https://api.ccttiot.com/smartmeter/img/static/u8pqPmRzOO7xfH0zFKJE" mode=""></image>
				<!-- 调度记录 -->
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="topage(7)" src="https://api.ccttiot.com/smartmeter/img/static/uvLQbL993lGQMU5T1WGc" mode=""></image> <!-- 故障审核 -->
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnggsz" src="https://api.ccttiot.com/smartmeter/img/static/u5ASdG202aRlfiKJqxbG" mode=""></image> <!-- 公告协议 -->
			</view>
			<view class="other-row row-with-gap">
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnsp" src="https://api.ccttiot.com/smartmeter/img/static/u9Ia1oZv3dvWOuIvxNZd" mode=""></image> <!-- 视频教程 -->
				<image class="tool-icon-sm" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnewm" src="https://api.ccttiot.com/smartmeter/img/static/uAlHiuCxL9vVQsc1m0pz" mode=""></image> <!-- 二维码 -->
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnInvoice" src="https://api.ccttiot.com/smartmeter/img/static/u7FWEOjQE6vSYjLYryQt" mode=""></image> <!-- 电子发票 -->
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btntuiguang" src="https://api.ccttiot.com/smartmeter/img/static/uB6MeUkD1cSFiBujgYt6" mode=""></image> <!-- 推广 -->
			</view>
			<view class="other-row row-start">
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnDeviceInsurance" src="https://api.ccttiot.com/smartmeter/img/static/u3jUn8Sy2K9sAwfIeG6l" mode=""></image> <!-- 车辆保险 -->
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnkjpw" src="https://api.ccttiot.com/smartmeter/img/static/ukU5dVsJRl0LjuGvV0m8" mode=""></image> <!-- 卡劵配额 -->
				<image class="tool-icon" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnyy" src="https://api.ccttiot.com/smartmeter/img/static/uJ7TUS8111sj8b2M6jcv" mode=""></image> <!-- 语音同步 -->
			</view>
		</view>
		
		<!-- 公告弹窗 -->
		<view class="noticetc" style="width: 100%;" v-if="gonggaoflag">
			<view class="name"> 
				公告
			</view>
			<view class="biaoti">
				{{announcements.title}}
			</view>
			<!-- <view class="cont" v-html="gonggaoxq.noticeContent"></view>  -->
			<u-parse :html="announcements.content" style="width: 100%;height: 60vh;padding: 10rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
			<view class="btn" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="btnggtc">
				我知道了
			</view>
		</view>
		<view class="mask" v-if="gonggaoflag"></view>
		<u-select v-model="show" :list="list" title='选择运营区' @confirm="confirm" v-if="list.length <= 5"></u-select>
		<!-- 自定义选择器 -->
		<view class="custom-select" v-if="show && list.length > 5">
			<view hover-class="app-tap-hover" class="mask" @click="show = false"></view>
			<view class="select-content">
				<view class="select-header">
					<text>选择运营区</text>
					<text class="close" @click="show = false" hover-class="is-hover app-tap-hover" hover-stay-time="100">×</text>
				</view>
				<view class="search-box">
					<input type="text" v-model="searchKey" placeholder="搜索运营区" @input="handleSearch" />
				</view>
				<scroll-view scroll-y class="select-list">
					<view class="select-item" hover-class="is-hover app-tap-hover" hover-stay-time="100" v-for="item in displayList" :key="item.value" @click="selectItem(item)"
						:class="{ 'highlight': searchKey && item.label.includes(searchKey) }">
						{{ item.label }}
						<view style="font-size: 24rpx;color: #999;margin-left: auto;"> {{ item.deptName }}</view>
					</view>
					</scroll-view>
				</view>
		</view>
		<view class="fuwuewm" v-if="fuwuewm">
			<image src="https://api.ccttiot.com/qrcode_for_gh_25c71c637dbc_344%20(2)-1753329225290.jpg" show-menu-by-longpress @longpress="handleLongPress" mode=""></image>
			<text class="" style="width: 100%;text-align: center;margin-top: 20rpx;display: block;color: #fff;">
				长按关注公众号，租车信息不错过！
			</text>
			<view class="" hover-class="is-hover app-tap-hover" hover-stay-time="100" @click="fuwuewm = false">
				关闭
			</view>
		</view>
		<view class="mask" style="background-color: rgba(0, 0, 0, 0.5);" v-if="fuwuewm"></view>
		
		<TabBar :indexs='0' style=""></TabBar>
	</view>
</template>

<script>
import TabBar from '@/page_shanghu/components/tab-bar/tab-bar.vue';
var xBlufi = require("@/components/blufi/xBlufi.js")
export default {
	components: { TabBar },
	data() {
		return {
			bgc: {
				backgroundColor: "#FFFFFF",
			},
			sn: '',
			areaId: '',
			areaInfo: {},
			list: [],
			show: false,
			info: {},
			userinfo: {},
			deptId: null,
			menuList: [],
			searchKey: '',
			displayList: [], // 用于显示的列表
			gonggaoxq:{},
			gonggaoflag:false,
			announcements: {},
			yyqid:'',
			userId:'',
			fuwuewm:false,
			weinum:0,
			areaname:'',
			dateStat: {},
			pendingStat: {},
			kstime:'',
			jstime:'',
			statsLoading: false,
			statsLoadError: false,
			statsSlowHint: false,
			_statsLoadingCount: 0,
			_statsSlowTimer: null,
			abilityList: [],
			abilityLoading: false,
		}
	},
	onPullDownRefresh() {
		this.refreshWorkbenchFromPull()
	},
	onLoad(option) {
		this.yyqid = option.id
		wx.openBluetoothAdapter({
		  success: function (res) {
		    console.log('蓝牙适配器初始化成功')
			xBlufi.initXBlufi(1)
		  },
		  fail: function (err) {
		    console.error('蓝牙适配器初始化失败，可能是因为没有权限', err)
		  }
		})
	},
	onShow() {
		this.$store.dispatch('jiance');
		this.getCurrentDate(0)
		this.getgonggao()
		this.getareaList()
		this.deptId = uni.getStorageSync('deptId')
		if (uni.getStorageSync('adminAreaid')) {
			this.areaId = uni.getStorageSync('adminAreaid')
			console.log(this.areaId);
			// this.getArea()
			this.getinfo()
			this.getweicl()
			this.fetchAreaAbilityList()
		}
		if (uni.getStorageSync('adminname')) {
			this.areaname = uni.getStorageSync('adminname')
		}
	},
	computed: {
		filteredList() {
			if (!this.searchKey) return this.list
			return this.list.filter(item =>
				item.label.toLowerCase().includes(this.searchKey.toLowerCase())
			)
		},
		statOrderCount() {
			const v = this.dateStat.orderCount
			return v == null ? 0 : v
		},
		statRevenue() {
			const v = this.dateStat.orderActualAmount
			return v == null ? 0 : v
		},
		statFinished() {
			const v = this.dateStat.finishedOrderCount
			return v == null ? 0 : v
		},
		statProcessing() {
			const v = this.pendingStat.orderProcessingCount
			return v == null ? 0 : v
		},
		statRideWaitPay() {
			const v = this.pendingStat.orderRideWaitPayCount
			return v == null ? 0 : v
		},
		statWaitVerify() {
			const v = this.pendingStat.orderWaitVerifyCount
			return v == null ? 0 : v
		},
		complaintBadge() {
			const n = Number(this.weinum)
			return n > 0 ? n : 0
		}
	},
	methods: {
		_beginStatsLoading() {
			this._statsLoadingCount++
			this.statsLoading = true
			this.statsLoadError = false
			if (this._statsSlowTimer) {
				clearTimeout(this._statsSlowTimer)
				this._statsSlowTimer = null
			}
			this.statsSlowHint = false
			this._statsSlowTimer = setTimeout(() => {
				if (this.statsLoading) this.statsSlowHint = true
			}, 3500)
		},
		_endStatsLoading() {
			this._statsLoadingCount = Math.max(0, this._statsLoadingCount - 1)
			if (this._statsLoadingCount <= 0) {
				this._statsLoadingCount = 0
				this.statsLoading = false
				if (this._statsSlowTimer) {
					clearTimeout(this._statsSlowTimer)
					this._statsSlowTimer = null
				}
				this.statsSlowHint = false
			}
		},
		retryStats() {
			if (!this.areaId) {
				uni.showToast({ title: '请先选择运营区', icon: 'none' })
				return
			}
			if (!this.userinfo || !this.userinfo.userId) {
				this.getinfo({ silent: false }).catch(() => {})
				return
			}
			this.gettongji({ silent: false })
		},
		/** 下拉刷新：弱网静默重拉，结束时停止动画 */
		refreshWorkbenchFromPull() {
			this.getCurrentDate(0)
			const tasks = [this.fetchGonggao(), this.getareaList()]
			if (uni.getStorageSync('adminAreaid')) {
				this.areaId = uni.getStorageSync('adminAreaid')
				if (uni.getStorageSync('adminname')) this.areaname = uni.getStorageSync('adminname')
				tasks.push(
					this.getinfo({ silent: true }),
					this.fetchComplaintBadge(),
					this.fetchAreaAbilityList()
				)
			}
			Promise.all(tasks.map((p) => Promise.resolve(p).catch(() => null))).finally(() => {
				uni.stopPullDownRefresh()
			})
		},
		fetchGonggao() {
			return this.$u
				.get(`/app/article/first?code=MCH_NOTICE&appId=${this.$store.state.appid}`)
				.then((res) => {
					if (res.code == 200) {
						this.announcements = res.data
						if (res.data.id != uni.getStorageSync('noticeIds')) this.gonggaoflag = true
					}
				})
				.catch(() => {})
		},
		fetchComplaintBadge() {
			if (!this.areaId) return Promise.resolve()
			return this.$u.get(`/dashboard/complaint/statusMap?areaId=${this.areaId}`).then((res) => {
					if (res.code == 200){
						let min = res.data['1'] || 0
						let max = res.data['3'] || 0
						this.weinum = Number(min) + Number(max)
					} 
				})
				.catch(() => {})
		},
		// 点击配置语音
		btnyy(){
			uni.navigateTo({
				url:'/page_shanghu/gongzuotai/yuyin/index?areaId=' + this.areaId
			})
		},
		// 点击查看运营状况
		btnchakan(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/yunying'
			})
		},
		// 请求运营统计数据
		gettongji(options = {}) {
			const silent = options.silent === true
			if (!this.areaId || !this.userinfo.userId) {
				return Promise.resolve()
			}
			const dateStatKeys = 'order_actual_amount,order_count,order_finished_count'
			const pendingStatKeys = 'order_processing_count,order_wait_verify_count,order_ride_wait_pay_count'
			const dateRangeStr = `${this.kstime},${this.jstime}`
			const commonParams = `userId=${this.userinfo.userId}&areaId=${this.areaId}`
			this._beginStatsLoading()
			return Promise.all([
				this.$u.get(`/dashboard/revenueStat?keys=${dateStatKeys}&dateRange=${dateRangeStr}&${commonParams}`),
				this.$u.get(`/dashboard/revenueStat?keys=${pendingStatKeys}&${commonParams}`)
			]).then(([dateRes, pendingRes]) => {
				if (dateRes && dateRes.code === 200) {
					this.dateStat = dateRes.data || {}
				}
				if (pendingRes && pendingRes.code === 200) {
					this.pendingStat = pendingRes.data || {}
				}
				if ((dateRes && dateRes.code === 200) || (pendingRes && pendingRes.code === 200)) {
					this.statsLoadError = false
				} else {
					this.statsLoadError = true
					const msg = (dateRes && dateRes.msg) || (pendingRes && pendingRes.msg) || '统计数据加载失败'
					if (!silent) {
						const tip = msg.indexOf('超时') !== -1 || msg.indexOf('时间') !== -1
							? '网络较慢，请稍后重试'
							: msg
						uni.showToast({ title: tip, icon: 'none', duration: 2600 })
					}
				}
			}).catch(() => {
				this.statsLoadError = true
				if (!silent) {
					uni.showToast({
						title: '网络异常，请检查网络后重试',
						icon: 'none',
						duration: 2600
					})
				}
			}).finally(() => {
				this._endStatsLoading()
			})
		},
		// 一开始就获取当前年月日
		getCurrentDate(num) {
		    const currentDate = new Date()
		    const year = currentDate.getFullYear()
		    const month = currentDate.getMonth() + 1
		    const day = currentDate.getDate()
		    const formatDate = (year, month, day) => {
		        const formattedMonth = month < 10 ? `0${month}` : month
		        const formattedDay = day < 10 ? `0${day}` : day
		        return `${year}-${formattedMonth}-${formattedDay}`
		    }
		    const getFirstDayOfMonth = (year, month) => {
		        return new Date(year, month - 1, 1)
		    }
		    const getLastDayOfMonth = (year, month) => {
		        return new Date(year, month, 0)
		    }
		    switch (num) {
		        case 0:
		            this.kstime = formatDate(year, month, day)
		            this.jstime = formatDate(year, month, day)
		            break
		    }
		},
		// 点击切换运营区
		btnqh(){
			this.show = true
		},
		// 点击菜单图标
		handleMenuClick(){
			// 可以在这里添加菜单功能，比如显示更多选项
			uni.showToast({
				title: '功能开发中',
				icon: 'none',
				duration: 2000
			})
		},
		getareaList() {
			return this.$u
				.get('/bst/area/list?pageNunm=1&pageSize=9999')
				.then((res) => {
					if (res.code == 200) {
						this.list = res.rows.map((item) => ({
							value: item.id,
							label: item.name,
							deptName: item.userName
						}))
						this.displayList = this.list
					}
				})
				.catch(() => {})
		},
		// 点击跳转到调度记录
		btndiaodujl(){
			uni.navigateTo({
				url:'/page_shanghu/gongzuotai/diaodujl?areaId=' + this.areaId
			})
		},
		// 点击跳转到换电工单
		btnyunwei(){
			uni.navigateTo({
				url:'/page_shanghu/yunwei/index?areaId=' + this.areaId
			})
		},
		// 点击生成二维码
		btnewm(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/Qrcode?areaId=' + this.areaId + '&type=1'
			})
		},
		// 查询商户未处理投诉
		getweicl() {
			if (!this.areaId) return
			this.fetchComplaintBadge()
		},
		// 点击绑定服务号
		btnfuwuewm(){
			let that = this
			wx.login({
				success(res) {
					if (res.code) {
						that.$u.put(`/app/user/bindUnionId?jsCode=${res.code}`).then((res) => {
							if (res.code == 200) {
							    that.fuwuewm = true
							}else{
								uni.showModal({
									title: '提示',
									content: res.msg,
									showCancel:false,
								})
							}
						})
					}
				},
			})
		},
		// 点击跳转到投诉列表
		btnts(){
			uni.navigateTo({
				url:'/page_fenbao/tousu/shlist?areaId='+this.areaId
			})
		},
		// 点击跳转到会员列表
		btnhy(){
			uni.navigateTo({
				url:'/page_fenbao/huiyuan/huiyuanlist?areaId='+this.areaId
			})
		},
		// 点击进入视频教程
		btnsp(){
			uni.navigateTo({
				url:'/page_user/shiping/index'
			})
		},
		// 点击跳转到运维人员
		btnywry(){
			uni.navigateTo({
				url:'/page_fenbao/yunwei/index?areaId=' + this.areaId
			})
		},
		// 点击跳转到电子围栏
		toMap(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/msp_set?areaId='+this.areaId
			})
		},
		// 设备保险说明页（带当前运营区）
		btnDeviceInsurance(){
			if (!this.areaId) {
				uni.showToast({ title: '请先选择运营区', icon: 'none' })
				return
			}
			uni.navigateTo({
				url: '/page_fenbao/storedlist/trueorder/device_insurance?areaId=' + this.areaId
			})
		},
		// 点击跳转客服
		btnkefu(){
			uni.navigateTo({
				url:'/page_user/shanghugl/ggsz?id=' + this.areaId
			})
		},
		// 点击跳转公告协议
		btnggsz(){
			uni.navigateTo({
				url:'/page_shanghu/gonggaolist?areaId=' + this.areaId
			})
		},
		// 点击跳转到电子发票列表
		btnInvoice(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/invoice_list?userId=' + this.userinfo.userId
			})
		},
		// 点击跳转到推广列表
		btntuiguang(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/tuiguang_list?areaId=' + this.areaId
			})
		},
		// // 点击跳转免责协议
		// btnmz(){
		// 	uni.navigateTo({
		// 		url:'/page_user/shanghugl/mianze'
		// 	})
		// },
		// // 点击跳转公告管理
		// btngggl(){
		// 	uni.navigateTo({
		// 		url:'/page_user/shanghugl/index'
		// 	})
		// },
		// 点击跳转到收款账户
		btnskzh(){
			if(this.userinfo.isReal == true){
				uni.navigateTo({
					url:'/page_user/shoukuan/index'
				})
			}else{
				uni.showModal({
					title: '提示',
					content: '您还未通过实名认证，是否前往？',
					showCancel: true,
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url:'/page_user/shiming'
							})
						} else if (res.cancel) {
						    console.log('取消'); // 用户点击取消
						}
					}
				})
			}
		},
		// 点击跳转到还车审核
		btnreturnbike(){
			uni.navigateTo({
				url:'/page_user/returnbike?areaId=' + this.areaId
			})
		},
		// 点击头部滚动通知
		btntopgg(){
			uni.navigateTo({
				url:'/page_user/guzhang/gonggaolist'
			})
			// if(this.announcements.content){
			// 	this.gonggaoflag = true
			// }
		},
		// 点击公告我知道了
		btnggtc(){
			this.gonggaoflag = false
			uni.setStorageSync('noticeIds', this.announcements.id)
		},
		// 获取最新公告
		getgonggao(){
			this.$u.get(`/app/article/first?code=MCH_NOTICE&appId=${this.$store.state.appid}`).then(res =>{
				if(res.code == 200){
					this.announcements = res.data
					if(res.data.id != uni.getStorageSync('noticeIds')){
						this.gonggaoflag = true
					}
				}
			})
		},
		// 点击提示功能完善中
		btnjs(){
			uni.showToast({
				title: '功能完善中',
				icon: 'none',
				duration: 2000
			})
		},
		// 点击跳转到加盟伙伴
		btnjm(){
			uni.navigateTo({
				url:'/page_fenbao/jiameng/index?areaId=' + this.areaId
			})
		},
		handleSearch(e) {
			const value = e.detail.value
			if (!value) {
				// 搜索框为空时显示全部数据
				this.displayList = this.list
			} else {
				// 有搜索内容时过滤数据
				this.displayList = this.list.filter(item => {
				  const label = String(item.label || '').toLowerCase();
				  const deptName = String(item.deptName || '').toLowerCase();
				  const searchValue = String(value || '').toLowerCase();
				  return label.includes(searchValue) || deptName.includes(searchValue);
				});
			}
		},
		selectItem(item) {
			this.confirm([item])
			this.show = false
			this.searchKey = ''
			this.displayList = this.list
		},
		getinfo(options = {}) {
			return this.$u.get("/getInfo").then((res) => {
				if (res.code == 200) {
					this.userinfo = res.user
					return this.gettongji(options)
				}
			})
		},
		shows() {
			if (this.list.length < 2) {

			} else {
				this.show = true
			}
		},
		confirm(e) {
			console.log(e);
			uni.setStorageSync('adminAreaid', e[0].value)
			uni.setStorageSync('adminname', e[0].label)
			this.areaname = e[0].label
			this.areaId = e[0].value
			this.getArea()
			this.getweicl()
			this.fetchAreaAbilityList()
			if (this.userinfo && this.userinfo.userId) {
				this.gettongji()
			}
		},
		formatAbilityCount(val) {
			const n = Number(val)
			return Number.isFinite(n) ? n : 0
		},
		abilityProgressPercent(item) {
			const total = this.formatAbilityCount(item.totalCount)
			const used = this.formatAbilityCount(item.usedCount)
			if (total <= 0) return 0
			return Math.min(100, Math.round((used / total) * 100))
		},
		goAbilityList() {
			if (!this.areaId) {
				uni.showToast({ title: '请先选择运营区', icon: 'none' })
				return
			}
			const name = encodeURIComponent(this.areaname || '')
			uni.navigateTo({
				url: `/page_shanghu/guanli/area_ability_list?areaId=${this.areaId}&areaName=${name}`
			})
		},
		fetchAreaAbilityList() {
			if (!this.areaId) {
				this.abilityList = []
				return Promise.resolve()
			}
			this.abilityLoading = true
			return this.$u
				.get(`/bst/areaAbility/list?areaId=${this.areaId}`)
				.then((res) => {
					if (res.code == 200) {
						const rows = res.rows != null ? res.rows : res.data
						const list = Array.isArray(rows) ? rows : []
						this.abilityList = list.map((item) => ({
							...item,
							free: item.free === true || item.free === 1 || item.free === '1'
						}))
					} else {
						this.abilityList = []
					}
				})
				.catch(() => {
					this.abilityList = []
				})
				.finally(() => {
					this.abilityLoading = false
				})
		},
		getArea() {
			let id = this.areaId
			this.$u.get(`/bst/area/${id}`).then((res) => {
				if (res.code == 200) {
					this.areaInfo = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					})
				}
			})
		},
		topage(num) {
			if (num == 0) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/worke_Operation'
				})
			} else if (num == 1) {
				uni.navigateTo({
					url: '/pages_admin/worke/worke_income'
				})
			} else if (num == 2) { //设备管理
			    uni.reLaunch({
			    	url:'/page_shanghu/qbcheliang'
			    })
				// uni.navigateTo({
				// 	url: '/page_shanghu/gongzuotai/woke_deviceMgmt'
				// })
			} else if (num == 3) {
				uni.navigateTo({
					url: '/pages_admin/worke/worke_user'
				})
			} else if (num == 4) { //用户页面
				uni.switchTab({
					url: '/pages/my'
				})
			} else if (num == 5) {
				uni.navigateTo({
					url: '/pages_admin/worke/bind_sn'
				})
			} else if (num == 6) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/AccountDetails'
				})
			} else if (num == 7) { //故障审核
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/shgl?areaId=' + this.areaId
				})
			} else if (num == 8) {
				uni.navigateTo({
					url: '/pages_adminSet/financialStatement'
				})
			} else if (num == 9) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/CarModel?userId=' + this.userinfo.userId
				})
			} else if (num == 10) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/ChargingTemplate'
				})
			} else if (num == 11) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/sysSet'
				})
			} else if (num == 12) { //区域设置
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/ParkIngList'
				})
			}
		},
		// 点击跳转到卡券配额
		btnkjpw(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/kajuan_peie_list?areaId=' + this.areaId
			})
		}
	}
}
</script>

<style lang="scss">
	.is-hover{
		opacity: 0.85;
		transform: scale(0.98);
	}
	.newtit{
		font-weight: 600;
		font-size: 34rpx;
		color: #2d3b4f;
		margin-top: 28rpx;
		padding-left: 44rpx;
		display: flex;
		align-items: center;
		&::before {
			content: '';
			flex-shrink: 0;
			width: 8rpx;
			height: 30rpx;
			margin-right: 16rpx;
			margin-left: -28rpx;
			background: linear-gradient(180deg, #54a9ff 0%, #4297F3 50%, #2563eb 100%);
			border-radius: 4rpx;
		}
	}
	.newtit-spaced {
		margin-top: 36rpx;
	}
	.op-card{
		width: 718rpx;
		min-height: 258rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 30rpx;
		overflow: hidden;
		box-shadow: 0rpx 8rpx 24rpx rgba(44, 138, 240, 0.08);
	}
	.op-head{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		padding: 24rpx 32rpx 16rpx;
		box-sizing: border-box;
	}
	.op-head-left {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}
	.op-head-title{
		font-weight: 600;
		font-size: 32rpx;
		color: #2d3b4f;
		line-height: 1.2;
	}
	.op-head-sub {
		font-size: 22rpx;
		color: #8e9db3;
		font-weight: 400;
	}
	.op-more{
		font-size: 24rpx;
		color: #4297F3;
		display: flex;
		align-items: center;
		transition: all 0.2s ease;
	}
	.newtop{
		width: 718rpx;
		height: 214rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 38rpx;
		box-shadow: 0rpx 8rpx 24rpx rgba(44, 138, 240, 0.08);
		.menu-item {
			position: relative;
			width: 120rpx;
			text-align: center;
			transition: all 0.2s ease;
			image{
				width: 94rpx;
				height: 92rpx;
			}
			text{
				display: block;
				font-size: 26rpx;
				color: #3D3D3D;
				margin-top: 14rpx;
			}
			.badge {
				position: absolute;
				top: -10rpx;
				right: -4rpx;
				background: #FF4D4F;
				color: #FFFFFF;
				font-size: 20rpx;
				min-width: 34rpx;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				padding: 0 8rpx;
				border-radius: 20rpx;
				border: 2rpx solid #FFFFFF;
				box-sizing: border-box;
			}
		}
	}
	.leiji{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		padding: 8rpx 24rpx 28rpx;
		box-sizing: border-box;
		.li{
			flex: 1;
			text-align: center;
			min-width: 0;
			.top{
				font-weight: 600;
				font-size: 36rpx;
				color: #2C8AF0;
				margin-top: 8rpx;
				line-height: 1.15;
			}
			.top-unit {
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 2rpx;
			}
			.bot{
				margin-top: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #8e9db3;
			}
		}
		.li--revenue .top {
			font-size: 44rpx;
			color: #1677ff;
			letter-spacing: -0.5rpx;
		}
		.li--live .top {
			color: #fa8c16;
		}
		.li--live .bot {
			color: #d48806;
			font-weight: 500;
		}
		.li--wait-pay .top {
			color: #fa8c16;
		}
		.li--wait-pay .bot {
			color: #d48806;
			font-weight: 500;
		}
	}
	.fuwuewm{
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		image{
			width: 600rpx;
			height: 600rpx;
		}
		view{
			width: 200rpx;
			height: 70rpx;
			background-color: #4297F3;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 70rpx;
			margin: auto;
			margin-top: 50rpx;
			border-radius: 10rpx;
		}
	}
	.fuwuhao{
		width: 100%;
		text-align: center;
		text-underline-offset: 4rpx;
		margin-top: 30rpx;
		color: #4297F3;
		padding-left: 50rpx;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		text-decoration: underline;
		text-decoration-color: #4297F3;
		text-decoration-thickness: 1rpx;
	}
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 9;
	}
	.gonggao{
		width: 718rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		margin: auto;
		margin-top: 24rpx;
		padding: 0 32rpx;
		box-shadow: 0rpx 6rpx 20rpx rgba(44, 138, 240, 0.07);
	}
	.common-tools{
		display: flex;
		justify-content: space-between;
		padding: 0 22rpx;
		margin-top: 12rpx;
	}
	.tool-banner{
		width: 164rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.other-tools{
		width: 718rpx;
		min-height: 680rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		margin-top: 12rpx;
		padding: 40rpx 42rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 8rpx 24rpx rgba(44, 138, 240, 0.08);
	}
	.other-row{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
		&:first-child{
			margin-top: 0;
		}
	}
	.row-with-gap{
		column-gap: 36rpx;
	}
	.row-start{
		justify-content: flex-start;
		column-gap: 56rpx;
	}
	.tool-icon{
		width: 112rpx;
		height: 122rpx;
	}
	.tool-icon-sm{
		width: 84rpx;
		height: 122rpx;
	}
	/* 设备保险：与项目主色 #4297F3 一致的圆角卡片图标（同尺寸 112×122rpx） */
	.tool-icon-insurance{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		box-sizing: border-box;
	}
	.tool-icon-insurance-card{
		width: 112rpx;
		height: 122rpx;
		border-radius: 20rpx;
		background: linear-gradient(165deg, #93C5FD 0%, #4297F3 42%, #2563EB 100%);
		box-shadow: 0 8rpx 22rpx rgba(66, 151, 243, 0.32);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ability-section {
		width: 718rpx;
		margin: 24rpx auto 0;
	}
	.ability-section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 16rpx;
		box-sizing: border-box;
	}
	.ability-section-title {
		margin-top: 0;
		flex: 1;
	}
	.ability-more {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #4297F3;
		font-weight: 500;
	}
	.ability-loading,
	.ability-empty {
		width: 718rpx;
		margin: 0 auto;
		padding: 48rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: #8e9db3;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0rpx 8rpx 24rpx rgba(44, 138, 240, 0.06);
		margin-top: 20rpx;
	}
	.ability-scroll {
		width: 718rpx;
		margin-top: 20rpx;
	}
	.ability-scroll-inner {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		padding-bottom: 8rpx;
	}
	.ability-card {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		width: 520rpx;
		margin-right: 20rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 24rpx 24rpx 20rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 8rpx 24rpx rgba(44, 138, 240, 0.08);
		&:last-child {
			margin-right: 0;
			// padding-right: 4rpx;
		}
	}
	.ability-card-head {
		display: flex;
		align-items: center;
	}
	.ability-icon {
		width: 64rpx;
		height: 64rpx;
		border-radius: 14rpx;
		flex-shrink: 0;
		background: #fff7e6;
	} 
	.ability-icon--placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #ffd666 0%, #faad14 100%);
		text {
			font-size: 28rpx;
			font-weight: 700;
			color: #fff;
		}
	}
	.ability-name-wrap {
		flex: 1;
		min-width: 0;
		margin-left: 16rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}
	.ability-name {
		flex: 1;
		min-width: 0;
		font-size: 30rpx;
		font-weight: 600;
		color: #1f2937;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ability-free-tag {
		flex-shrink: 0;
		padding: 2rpx 10rpx;
		font-size: 20rpx;
		line-height: 1.3;
		color: #16a34a;
		background: #f0fdf4;
		border-radius: 6rpx;
		border: 1rpx solid #bbf7d0;
	}
	.ability-stats {
		margin-top: 18rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12rpx;
		font-size: 24rpx;
		color: #374151;
	}
	.ability-stat-left {
		font-weight: 500;
		flex-shrink: 0;
	}
	.ability-stat-right {
		color: #6b7280;
		font-size: 22rpx;
		text-align: right;
	}
	.ability-progress-track {
		margin-top: 14rpx;
		height: 10rpx;
		background: #eef2f7;
		border-radius: 8rpx;
		overflow: hidden;
	}
	.ability-progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #93c5fd 0%, #4297F3 100%);
		border-radius: 8rpx;
		transition: width 0.25s ease;
	}
	.container {
	  width: 560rpx;
	  height: 60rpx; /* 根据需要调整高度 */
	  display: flex;
	  align-items: center;
	  margin: auto;
	  overflow: hidden;
	  position: relative;
	  color: #373737;
	  box-sizing: border-box;
	}
	.scroll-text {
	  width: 100%;
	  overflow: hidden;
	  box-sizing: border-box;
	  display: inline-block;
	  white-space: nowrap;
	  animation: scroll 8s linear infinite;
	}
	.scroll-item {
	  display: inline-block;
	  padding: 0 10rpx;
	  font-size: 24rpx;
	}
	@keyframes scroll {
	  0% {
	    transform: translateX(100%);
	  }
	  100% {
	    transform: translateX(-100%);
	  }
	}
	.noticetc{
		width: 680rpx;
		height: 80vh;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: 10;
		.btn{
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;
			background-color: #4297F3;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			margin: auto;
			margin-top: 30rpx;
			transition: all 0.2s ease;
		}
		.name{
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			margin-top: 30rpx;
		}
		.biaoti{
			font-size: 32rpx;
			margin-top: 20rpx;
		}
		.cont{
			width: 100%;
			height: 620rpx;
			overflow: scroll;
			background-color: #ececec;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
.custom-select {
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}
	.select-content {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 1000;
		height: 50vh; // 最大高度
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;
		.select-header {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			.close {
				font-size: 40rpx;
				color: #999;
			}
		}
		.search-box {
			padding: 15rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			input {
				width: 100%;
				height: 60rpx;
				background: #f5f5f5;
				border-radius: 30rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
			}
		}
		.select-list {
			flex: 1;
			max-height: calc(50vh - 140rpx);
			min-height: 260rpx; // 为列表添加最小高度
			.select-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				border-bottom: 1rpx solid #eee;
				font-size: 28rpx;
				&.highlight {
					background-color: #f0f9ff;
					color: #2d8cf0;
				}
				&:active {
					background: #f5f5f5;
				}
			}
		}
	}
}
.page {
	width: 750rpx;
	min-height: 100vh;
	background: linear-gradient(180deg, #3f8df3 0%, #f2f7ff 38%);
	overflow: scroll;
	padding-bottom: 160rpx;
	box-sizing: border-box;
	.toptit {
		display: flex;
		align-items: center;
		margin-top: 114rpx;
		margin-left: 22rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		transition: all 0.2s ease;
	}
	.toptit-avatar{
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}
	.cont_box {
		padding: 46rpx 50rpx;
		margin: 30rpx auto;
		width: 680rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		height: 72vh;
		overflow: scroll;
		padding-bottom: 200rpx;
		.top {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			margin-top: 40rpx;
			font-weight: 600;
			image {
				margin-right: 16rpx;
				width: 32rpx;
				height: 32rpx;
			}
			font-size: 32rpx;
			color: #3D3D3D;

		}
		.app_box {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			.cont:nth-child(4n) {
				margin-right: 0;
			}
			.cont {
				margin-right: 60rpx;
				margin-top: 20rpx;
				width: 96rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				image {
					width: 80rpx;
					height: 80rpx;
				}
				.text {
					margin-top: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
				}
			}
		}
	}
}
</style>