<template>
    <page-meta :page-style="'overflow:visible'"></page-meta>
    <view class="main" :style="{ paddingTop: (menu.bottom + 14) + 'px' }">
        <!-- 顶部固定的内容 -->
        <view class="topBox" :style="{ height: menu.bottom + 8 + 'px' }">
            <view class="topContent" :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }">
                <view class="topLeft">
                    <image class="YDIcon" src="/static/images/home/yunnanLogo.svg" />
                </view>
                <view class="topRight" @click="handleGoMap">
                    <image class="searchIcon" src="/static/images/home/searchIcon.svg" />
                    <span class="searchText">请输入服务区</span>
                </view>
            </view>
        </view>

        <!-- 月份的轮播框 -->
        <!-- :style="{ paddingTop: menu.bottom + 8 + 'px' }" -->
        <view class="monthListBox">
            <swiper class="swiperBox" previous-margin="40rpx" next-margin="40rpx" :current="selectIndex"
                @animationfinish="handleChangeSwiper" :disable-programmatic-animation="false" :duration="300"
                :easing-function="ease - out">
                <swiper-item class="swiperItem" v-for="(item, index) in monthList" :key="index">
                    <view class="swiperItemContent"
                        :class="{ 'is-first': index === 0, 'is-last': index === monthList.length - 1 }">
                        <view class="swiperItemContentBox">

                            <!-- 轮播框里面的实际内容 写在这个里面 -->
                            <view class="swiperItemContentMonth">
                                {{ selectIndex === index ? currentMonthData.monthText : '-月对客营收' }}
                                <span class="swiperItemContentUnit">/万元</span>
                            </view>

                            <!-- 月度营收的值 -->
                            <view class="swiperItemContentMonthRevenueBox">
                                <view class="leftRevenueValue">{{ selectIndex === index ?
                                    currentRevenueData.cashPayChange : '-' }}
                                </view>

                                <view class="rightRevenueValue">
                                    <text v-if="selectIndex === index && hasCurrentMonthData" class="addValue"
                                        :style="revenueChangeStyle">
                                        {{ revenueChangeText }}
                                    </text>
                                    <text class="rightNav">同比</text>
                                </view>
                            </view>

                            <view class="monthRevenueBox" v-if="selectIndex === index && hasCurrentMonthData">
                                <view class="leftBox" @click="handleShowYDModal">
                                    <view class="rateChartsBox" v-if="moneyRateList && moneyRateList.length > 0">
                                        <rateCharts :success="moneyRateList"
                                            :colorList="['#1677FE', '#456497', '#97A9C6']"
                                            :name="`${selectIndex}rate`" />
                                    </view>
                                    <view class="haveNoticeBox"
                                        v-if="ydModal && modalRateList && modalRateList.length > 0"
                                        @click.stop="handleShowYDModal">
                                        <view class="field">
                                            <view class="label">自营:</view>
                                            <view class="value">{{ modalRateList[0] }}%</view>
                                        </view>
                                        <view class="field">
                                            <view class="label">外包:</view>
                                            <view class="value">{{ modalRateList[1] }}%</view>
                                        </view>
                                    </view>
                                </view>
                                <view class="newRightBox">
                                    <view class="newRightItem" v-for="(subItem, subIndex) in profitSharingList"
                                        :key="subIndex">
                                        <view class="itemLeft">
                                            <view class="itemIcon" :style="{
                                                background:
                                                    subIndex === 0
                                                        ? '#1677FE'
                                                        : subIndex === 1
                                                            ? '#456497'
                                                            : subIndex === 2
                                                                ? '#97A9C6'
                                                                : '',
                                            }"></view>
                                            <span class="itemName">{{ subItem.name }}</span>
                                        </view>
                                        <view class="itemCenter">
                                            {{ subItem.value ? $util.getMoney(subItem.value / 10000) : "" }}
                                        </view>
                                        <view class="itemRight" :style="{
                                            color:
                                                subItem.addQOQ > 0
                                                    ? '#E83944'
                                                    : subItem.addQOQ < 0
                                                        ? '#0E9976'
                                                        : '',
                                        }">{{ subItem.addQOQ ? `${subItem.addQOQ}` : "" }}</view>
                                    </view>
                                </view>
                            </view>

                            <!-- 年度标题 -->
                            <view class="yearAccountItem" style="margin-bottom: 24rpx">
                                <view class="itemTop">
                                    <view class="itemName">{{ (Math.floor(index / 12) + 2024).toString().slice(2, 4)
                                        }}年累计对客销售<span class="unit">/亿元</span></view>
                                </view>
                                <view class="itemBottom">
                                    <span class="revenueNum" v-if="selectIndex === index && hasCurrentMonthData">{{
                                        topShowData && topShowData.MonthRevenueModel &&
                                            topShowData.MonthRevenueModel.YearRevenueAmount ?
                                            $util.getMoney(topShowData.MonthRevenueModel.YearRevenueAmount / 100000000) : ""
                                    }}</span>
                                    <span class="revenueAdd" v-if="selectIndex === index && hasCurrentMonthData" :style="{
                                        color:
                                            topShowData && topShowData.MonthRevenueModel && topShowData.MonthRevenueModel.YearRevenueAddNumber > 0
                                                ? '#E83944'
                                                : topShowData && topShowData.MonthRevenueModel && topShowData.MonthRevenueModel.YearRevenueAddNumber < 0
                                                    ? '#0E9976'
                                                    : '',
                                    }">
                                        <span class="revenueAddNotice">{{ topShowData && topShowData.MonthRevenueModel
                                            && topShowData.MonthRevenueModel.YearRevenueAddNumber > 0 ? "增长" :
                                            topShowData && topShowData.MonthRevenueModel &&
                                                topShowData.MonthRevenueModel.YearRevenueAddNumber < 0 ? "下降" : "" }}</span>
                                                {{ topShowData && topShowData.MonthRevenueModel &&
                                                    topShowData.MonthRevenueModel.YearRevenueAddNumber ?
                                                    $util.getMoney(topShowData && topShowData.MonthRevenueModel &&
                                                        topShowData.MonthRevenueModel.YearRevenueAddNumber / 100000000) : "" }}
                                        </span>

                                        <span class="revenueAdd" v-if="selectIndex === index && hasCurrentMonthData"
                                            :style="{
                                                color:
                                                    topShowData && topShowData.MonthRevenueModel && topShowData.MonthRevenueModel.YearRevenueAdd > 0
                                                        ? '#E83944'
                                                        : topShowData && topShowData.MonthRevenueModel && topShowData.MonthRevenueModel.YearRevenueAdd < 0
                                                            ? '#0E9976'
                                                            : '',
                                            }"><span class="revenueAddNotice">{{ topShowData &&
                                                topShowData.MonthRevenueModel
                                                && topShowData.MonthRevenueModel.YearRevenueAdd > 0 ? "增幅" : topShowData
                                                    && topShowData.MonthRevenueModel &&
                                                    topShowData.MonthRevenueModel.YearRevenueAdd < 0 ? "降幅" : "" }}</span>
                                                    {{ topShowData && topShowData.MonthRevenueModel &&
                                                        topShowData.MonthRevenueModel.YearRevenueAdd ?
                                                        `${topShowData.MonthRevenueModel.YearRevenueAdd > 0 ? "+" :
                                                            ""}${topShowData.MonthRevenueModel.YearRevenueAdd}%` : "-" }}</span>
                                </view>
                            </view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <!-- 实时数据统计 -->
        <view class="thingBox">
            <!-- 左侧主卡片 -->
            <view class="revenue-banner" @click="handlePage">
                <view class="revenue-header">
                    <view class="revenue-title">
                        <text>💰 今日实时营收</text>
                    </view>
                    <image class="right" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg" />
                </view>
                <view class="revenue-content">
                    <view class="revenue-amount-wrapper">
                        <span class="revenue-amount">{{ currentMoney }}</span>
                        <span class="revenue-label">元</span>
                    </view>
                    <view class="revenue-date">
                        <span>{{ currentTotal }} {{ currentTotal ? '万笔' : '' }}</span>
                        <span>{{ $util.handleGetMonthDay(nowDay) }}/{{ howDay }}</span>
                    </view>
                </view>
            </view>
            <!-- 右侧数据格 -->
            <view class="data-grid" v-if="otherRealData && otherRealData.length > 0">
                <view class="data-item" v-for="(subItem, subIndex) in otherRealData" :key="subIndex">
                    <view class="data-item-top">
                        <view class="data-icon">
                            <image class="icon" :src="subItem.icon" />
                        </view>
                        <view class="data-label">{{ subItem.label || "" }}</view>
                    </view>
                    <view class="data-item-data">
                        <span class="value">{{ subItem.value || "" }}</span>
                        <span class="unit">{{ subItem.unit || "" }}</span>
                    </view>
                    <view class="data-item-total">
                        <span class="total">{{ subItem.totalCount || "" }}</span>
                        <span class="total-unit">{{ subItem.totalCountUnit ? `${subItem.totalCountUnit}` : "" }}</span>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部的跳转 -->
        <view class="funBox">

            <!-- 经营报表-->
            <view class="funItem" @click="handleGoOperate">
                <view class="funItemContent">
                    <view class="funIconBox">
                        <image class="funIcon"
                            src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/operatStatement.svg" />
                    </view>
                    <text class="funText">经营报表</text>
                </view>
            </view>

            <view class="funItem" @click="handleGoAttendanceStatus">
                <view class="funItemContent">
                    <view class="funIconBox">
                        <image class="funIcon"
                            src="https://eshangtech.com/ShopICO/ahyd-BID/warning/operateWarning.svg" />
                    </view>
                    <text class="funText">现场管理</text>
                </view>
            </view>

            <view class="funItem" @click="handleGoServiceMessage">
                <view class="funItemContent">
                    <view class="funIconBox">
                        <image class="funIcon"
                            src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serviceInfo.svg" />
                    </view>
                    <text class="funText">数智看板</text>
                </view>
            </view>
        </view>

        <Tabbar ref="tabbar" :page="page"></Tabbar>
    </view>
</template>

<script>
import request from "@/util/index.js";
import RateCharts from "./components/rateCharts.vue";
import NumberScroll from "./components/numberScroll.vue";
import Tabbar from "../../components/tabbar/tabbar.vue";
import { timestampToTimeMonth } from "../../util/dateTime";
import { mapState, mapGetters } from 'vuex'
export default {
    data() {
        const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1) // 有数据的最近日期 即昨天
        const nowDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD') // 有数据的最近日期
        return {
            menu: {},// 拿到微信胶囊按钮的一些定位数据
            startDate: "2024-01-01",// 数据开始的时间 用于判断出现几个 滚动框
            lastDay: lastDay,
            nowDay: nowDay,
            monthList: [], // 当前的月份列表数据
            selectIndex: 0,// 当前选中的月份
            topShowData: {},// 顶部显示的类型
            moneyRateList: [],// 顶部的圆环图的数据
            profitSharingList: [],// 顶部圆环图右边的数据
            howDay: "", // 星期几
            currentMoney: "",// 实时营收
            currentTotal: "",// 实时营收了多少笔订单
            page: "/pages/index/index",
            otherRealData: [],// 其他的实时数据
            single: "",
            ydModal: false, // 显示驿达百分比的具体值
            modalRateList: [],// 点击圆环图出现的白色悬浮框的数据
            useInfo: {},
            isReturn: true,
            // 新增缓存相关数据
            monthDataCache: {}, // 月份数据缓存
            loadingMap: {}, // 加载状态映射
            swiperTransition: false, // swiper过渡状态
        }
    },
    components: {
        RateCharts,
        NumberScroll,
        Tabbar,
    },
    computed: {
        ...mapGetters({ user: "getUser" }),

        // 为uniapp小程序兼容性，使用简单的computed属性
        currentMonthData() {
            if (this.selectIndex >= 0 && this.monthList[this.selectIndex]) {
                return {
                    month: this.monthList[this.selectIndex].month || "-",
                    monthText: (this.monthList[this.selectIndex].month || "-") + "月对客营收"
                };
            }
            return {
                month: "-",
                monthText: "-月对客营收"
            };
        },

        currentRevenueData() {
            if (this.topShowData && this.topShowData.MonthRevenueModel) {
                return {
                    cashPayChange: this.topShowData.MonthRevenueModel.CashPayChange || "-",
                    addNumber: this.topShowData.MonthRevenueModel.addNumber || 0,
                    hasData: true
                };
            }
            return {
                cashPayChange: "-",
                addNumber: 0,
                hasData: false
            };
        },

        // 收益变化颜色样式
        revenueChangeStyle() {
            const addNumber = this.currentRevenueData.addNumber;
            let color = '';
            if (addNumber > 0) {
                color = '#E83944';
            } else if (addNumber < 0) {
                color = '#0E9976';
            }
            return { color: color };
        },

        // 收益变化文字
        revenueChangeText() {
            const addNumber = this.currentRevenueData.addNumber;
            return addNumber ? `${addNumber}%` : "-";
        },

        // 判断是否有当前月份数据
        hasCurrentMonthData() {
            return this.topShowData && this.topShowData.MonthRevenueModel;
        }
    },
    watch: {
        user: {
            handler(newValue, value) {
                let _this = this
                let userInfo = JSON.parse(JSON.stringify(newValue));
                _this.useInfo = JSON.parse(JSON.stringify(newValue));

                if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] === 1) {
                    _this.isReturn = false;
                } else if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
                    // 说明登录了 没权限 
                    // uni.redirectTo({
                    //     url: `/pages/commercialBI/noData?type=noAuthor`,
                    // });
                } else {
                    _this.topShowData = null
                    _this.moneyRateList = []
                    _this.profitSharingList = []
                    _this.modalRateList = []
                }
                console.log('_this.isReturn_this.isReturn', _this.isReturn);

                if (!_this.isReturn) {
                    _this.handleGetOnLoad()
                }
            }
        }
    },
    onLoad() {
        let _this = this
        this.menu = uni.getMenuButtonBoundingClientRect();
        uni.getSetting({
            success(res) {
                console.log('resresresres', res);

            }
        })

        this.single = timestampToTimeMonth(new Date(this.lastDay).getTime());
        uni.setStorageSync("lastDay", this.lastDay);

        // 小程序进来存起来的用户信息
        // let userInfo = uni.getStorageSync("vuex");
        let userInfo = JSON.parse(JSON.stringify(this.user));
        _this.useInfo = JSON.parse(JSON.stringify(this.user));
        // console.log('userInfouserInfo', userInfo);
        if (userInfo) {
            if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] === 1) {
                _this.isReturn = false;
            } else if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
            }
        }

    },
    onShow() {
        // 隐藏掉小程序本身自带的 tabbar 让自定义的tabbar出现
        uni.hideTabBar();
    },
    onPullDownRefresh: function () {
        let _this = this;
        let userInfo = JSON.parse(JSON.stringify(this.user));
        if (userInfo) {
            if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] === 1) {
                _this.isReturn = false;
            } else if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
                // uni.redirectTo({
                //     url: `/pages/commercialBI/noData?type=noAuthor`,
                // });
            }
        }
        if (!_this.isReturn) {
            // 下拉刷新时清空缓存，确保数据最新
            _this.monthDataCache = {};
            _this.loadingMap = {};
            _this.handleGetOnLoad();


            // 更新一下定位
            uni.getLocation({
                type: "gcj02",
                altitude: true,
                success: (res) => {
                    let seatInfo = {
                        latitude: res.latitude,
                        longitude: res.longitude,
                    };
                    uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
                    _this.handleGetNearService(seatInfo.latitude, seatInfo.longitude)
                }
            });
        }
        uni.stopPullDownRefresh();
    },
    methods: {
        // 在onLoad里面调用的 请求整个页面的数据
        async handleGetOnLoad() {
            // 拿到首页的一些基本信息
            this.handleGetIndexInfo();

            // 并行请求数据，提升加载速度
            const promises = [
                this.handleGetTopData(),
                this.handleRealRevenue(),
                this.handleGetYNRealData()
            ];

            // 预加载相邻月份数据，提升切换体验
            const currentIndex = this.selectIndex;
            if (currentIndex > 0) {
                promises.push(this.preloadMonthData(currentIndex - 1));
            }
            if (currentIndex < this.monthList.length - 1) {
                promises.push(this.preloadMonthData(currentIndex + 1));
            }

            await Promise.allSettled(promises);
        },

        // 预加载月份数据
        async preloadMonthData(index) {
            if (index < 0 || index >= this.monthList.length) return;

            const monthKey = this.monthList[index]?.realFull;
            if (!monthKey || this.monthDataCache[monthKey] || this.loadingMap[monthKey]) {
                return;
            }

            // 后台预加载，不影响当前显示
            setTimeout(async () => {
                try {
                    await this.handleGetTopData(index, 'noChange');
                } catch (error) {
                    console.log('预加载数据失败:', error);
                }
            }, 500);
        },
        handleShowYDModal() {
            this.ydModal = !this.ydModal;
        },
        // 跳转去出勤情况
        handleGoAttendanceStatus() {
            if (this.isReturn) {
                let userInfo = JSON.parse(JSON.stringify(this.user));
                if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
                    uni.showModal({
                        title: '温馨提示',
                        content: '抱歉，您没有权限查看数智化看板，请联系管理员进行授权',
                        success(res) {
                        }
                    })
                    return
                } else {
                    let _this = this
                    uni.showModal({
                        title: '温馨提示',
                        content: '请您授权登录后再操作。',
                        success(res) {
                            if (res.confirm) {
                                _this.$util.toNextRoute('redirectTo', '/pages/register/register')
                            }
                        }
                    })
                    return
                }
            }
            this.$util.toNextRoute("navigateTo", `/pages/attendanceStatus/index`);
        },
        // 点击服务区信息跳转
        handleGoServiceMessage() {
            if (this.isReturn) {
                let userInfo = JSON.parse(JSON.stringify(this.user));
                if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
                    uni.showModal({
                        title: '温馨提示',
                        content: '抱歉，您没有权限查看数智化看板，请联系管理员进行授权',
                        success(res) {
                        }
                    })
                    return
                } else {
                    let _this = this
                    uni.showModal({
                        title: '温馨提示',
                        content: '请您授权登录后再操作。',
                        success(res) {
                            if (res.confirm) {
                                _this.$util.toNextRoute('redirectTo', '/pages/register/register')
                            }
                        }
                    })
                    return
                }
            }

            this.$util.toNextRoute("navigateTo", `/pages/DigitalIntelligenceDashboard/index`);
        },
        // 跳转到经营报表
        handleGoOperate() {
            if (this.isReturn) {
                let userInfo = JSON.parse(JSON.stringify(this.user));
                if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
                    uni.showModal({
                        title: '温馨提示',
                        content: '抱歉，您没有权限查看数智化看板，请联系管理员进行授权',
                        success(res) {
                        }
                    })
                    return
                } else {
                    let _this = this
                    uni.showModal({
                        title: '温馨提示',
                        content: '请您授权登录后再操作。',
                        success(res) {
                            if (res.confirm) {
                                _this.$util.toNextRoute('redirectTo', '/pages/register/register')
                            }
                        }
                    })
                    return
                }
            }

            this.$util.toNextRoute(
                "navigateTo",
                `/pages/operatingStatements/index?time=${this.single}`
            );
        },
        handlePage() {
            if (this.isReturn) {
                let userInfo = JSON.parse(JSON.stringify(this.user));
                if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
                    uni.showModal({
                        title: '温馨提示',
                        content: '抱歉，您没有权限查看数智化看板，请联系管理员进行授权',
                        success(res) {
                        }
                    })
                    return
                } else {
                    let _this = this
                    uni.showModal({
                        title: '温馨提示',
                        content: '请您授权登录后再操作。',
                        success(res) {
                            if (res.confirm) {
                                _this.$util.toNextRoute('redirectTo', '/pages/register/register')
                            }
                        }
                    })
                    return
                }
            }
            this.$util.toNextRoute(
                "navigateTo",
                `/pages/everdayRenven/index?time=${this.lastDay}&GroupType=1000&ProvinceCode=530000&ServerpartIds=`
            );
        },
        handleGoMap() {
            if (this.isReturn) {
                let userInfo = JSON.parse(JSON.stringify(this.user));
                if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
                    uni.showModal({
                        title: '温馨提示',
                        content: '抱歉，您没有权限查看数智化看板，请联系管理员进行授权',
                        success(res) {
                        }
                    })
                    return
                } else {
                    let _this = this
                    uni.showModal({
                        title: '温馨提示',
                        content: '请您授权登录后再操作。',
                        success(res) {
                            if (res.confirm) {
                                _this.$util.toNextRoute('redirectTo', '/pages/register/register')
                            }
                        }
                    })
                    return
                }
            }
            this.$util.toNextRoute("navigateTo", "/pages/map/index?type=index");
        },
        // 处理一下数据 保留两位小数
        handleProcessNumber(number) {
            if (number) {
                return number.toFixed(2)
            } else {
                return ''
            }
        },
        // 拿到云南 油水电等数据
        async handleGetYNRealData() {
            try {
                let req = {
                    serverPartId: ""
                };
                const res = await request.$webJava("partner/today/data/statistics", req);
                let list = res.Result_Data;
                let result = [];

                // 数据类型映射配置
                const dataTypeMap = {
                    2000: {
                        label: '油品',
                        icon: 'https://eshangtech.com/cyy_DIB/oilIcon.png',
                        valueKey: 'totalCount',
                        unitKey: 'totalCountUnit',
                    },
                    3000: {
                        label: '加水',
                        icon: 'https://eshangtech.com/cyy_DIB/addWaterIcon.png',
                        valueKey: 'totalCount',
                        unitKey: 'totalCountUnit'
                    },
                    4000: {
                        label: '尿素',
                        icon: 'https://eshangtech.com/cyy_DIB/ureaIcon.png',
                        valueKey: 'totalCount',
                        unitKey: 'totalCountUnit'
                    },
                    5000: {
                        label: '充电',
                        icon: 'https://eshangtech.com/cyy_DIB/chargeIcon.png',
                        valueKey: 'totalAmount',
                        unitKey: 'totalAmountUnit',
                        totalKey: "totalTicket",
                        totalKeyUnit: "totalTicketUnit",
                    }
                };
                console.log('listlistlistlist', list);

                // 并行请求油品、加水、尿素的数据,提升性能
                const [OilData, addWaterData, UreaData] = await Promise.all([
                    request.$SamemberApiPost("CommercialApi/BigData/GetEnergyRevenueInfo", {
                        DataType: 2000,
                        StatisticsDate: this.nowDay,
                        ShowWY: true,
                        ShowLargeUnit: true,
                        type: "encryption"
                    }),
                    request.$SamemberApiPost("CommercialApi/BigData/GetEnergyRevenueInfo", {
                        DataType: 3000,
                        StatisticsDate: this.nowDay,
                        ShowWY: true,
                        ShowLargeUnit: true,
                        type: "encryption"
                    }),
                    request.$SamemberApiPost("CommercialApi/BigData/GetEnergyRevenueInfo", {
                        DataType: 4000,
                        StatisticsDate: this.nowDay,
                        ShowWY: true,
                        ShowLargeUnit: true,
                        type: "encryption"
                    })
                ]);

                // 处理油品数据
                if (OilData.Result_Data) {
                    result.push({
                        label: '油品',
                        value: this.handleProcessNumber(Number(OilData.Result_Data.value)),
                        unit: '万元',
                        icon: 'https://eshangtech.com/cyy_DIB/oilIcon.png',
                        totalCount: this.handleProcessNumber(Number(OilData.Result_Data.data)),
                        totalCountUnit: '吨',
                    });
                }

                // 处理加水数据
                if (addWaterData.Result_Data) {
                    result.push({
                        label: '加水',
                        value: this.handleProcessNumber(Number(addWaterData.Result_Data.value)),
                        unit: '万元',
                        icon: 'https://eshangtech.com/cyy_DIB/addWaterIcon.png',
                        totalCount: this.handleProcessNumber(Number(addWaterData.Result_Data.data)),
                        totalCountUnit: '吨',
                    });
                }

                // 处理尿素数据
                if (UreaData.Result_Data) {
                    result.push({
                        label: '尿素',
                        value: this.handleProcessNumber(Number(UreaData.Result_Data.value)),
                        unit: '万元',
                        icon: 'https://eshangtech.com/cyy_DIB/ureaIcon.png',
                        totalCount: this.handleProcessNumber(Number(UreaData.Result_Data.data)),
                        totalCountUnit: '吨',
                    });
                }

                if (list && list.length > 0) {
                    list.forEach((item) => {
                        if (item.dataType === 5000) {
                            const config = dataTypeMap[item.dataType];
                            if (config) {
                                result.push({
                                    label: config.label,
                                    value: this.$util.fmoney(item[config.valueKey]),
                                    unit: item[config.unitKey],
                                    icon: config.icon,
                                    totalCount: this.$util.fmoney(item[config.totalKey]),
                                    totalCountUnit: item[config.totalKeyUnit],
                                });
                            }
                        } else if (item.dataType === 1000) {
                            this.currentTotal = this.handleProcessNumber(Number(item.totalTicket))
                        }
                    });
                }
                console.log('resultresultresult', result);
                this.otherRealData = result;
            } catch (error) {
                console.error('获取实时数据失败:', error);
                this.otherRealData = [];
            }
        },
        // 切换轮播框的方法
        async handleChangeSwiper(e) {
            console.log('e', e);
            const currentIndex = e.target.current;

            // 防抖处理，避免快速切换时重复加载
            if (this.swiperTransition) return;
            this.swiperTransition = true;

            this.selectIndex = currentIndex;

            // 检查是否有缓存数据
            const monthKey = this.monthList[currentIndex]?.realFull;
            if (this.monthDataCache[monthKey]) {
                // 使用缓存数据
                const cachedData = this.monthDataCache[monthKey];
                this.topShowData = cachedData.topShowData;
                this.moneyRateList = cachedData.moneyRateList;
                this.profitSharingList = cachedData.profitSharingList;
                this.modalRateList = cachedData.modalRateList;
            } else {
                // 清空数据并加载新数据
                this.topShowData = null;
                this.moneyRateList = [];
                this.profitSharingList = [];
                this.modalRateList = [];
                await this.handleGetTopData(currentIndex);
            }

            // 重置过渡状态
            setTimeout(() => {
                this.swiperTransition = false;
            }, 100);
        },
        formatThousand(num) {
            if (num === null || num === undefined) return '0';
            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        },
        // 实时营收
        async handleRealRevenue() {
            try {
                let req = {
                    pushProvinceCode: "530000",
                    StatisticsDate: this.nowDay,
                };
                const res = await request.$webGet("CommercialApi/Revenue/GetCurRevenue", req);
                // this.currentMoney = res.Result_Data.CurRevenueAmount.toFixed(2);
                // this.currentMoney = res.Result_Data.CurRevenueAmount.toLocaleString('zh-CN');
                this.currentMoney = this.formatThousand(res.Result_Data.CurRevenueAmount)
            } catch (error) {
                this.currentMoney = '暂无数据';
            }
        },
        // 拿到顶部轮播框的数据
        async handleGetTopData(index, ischange) {
            // 因为预加载附近月份的时候  会将当前的数据给替换掉  肯定不会的 加个内容 进入页面之后的预加载附近月份 不改变当前月的数据

            let nowMonth = index !== undefined ? this.monthList[index] : this.monthList[this.selectIndex];
            const monthKey = nowMonth.realFull;

            console.log('nowMonthnowMonth', nowMonth);

            // 检查是否正在加载，避免重复请求
            if (this.loadingMap[monthKey]) {
                return;
            }

            // 检查缓存
            if (this.monthDataCache[monthKey]) {
                const cachedData = this.monthDataCache[monthKey];
                this.topShowData = cachedData.topShowData;
                this.moneyRateList = cachedData.moneyRateList;
                this.profitSharingList = cachedData.profitSharingList;
                this.modalRateList = cachedData.modalRateList;
                return;
            }

            // 设置加载状态
            this.loadingMap[monthKey] = true;

            try {
                const req = {
                    pushProvinceCode: "530000",
                    StatisticsMonth: nowMonth.realFull,
                    StatisticsDate: this.lastDay
                };
                const data = await request.$webGet("CommercialApi/Revenue/GetSummaryRevenueMonth", req);

                // 保留接口返回 完全不处理的
                let dataObj = data.Result_Data;
                // 深拷贝一份 用于处理数据
                let resObj = JSON.parse(JSON.stringify(data.Result_Data));
                console.log('dataObjdataObjdataObj', dataObj);
                // 拿到月度对客营收 
                resObj.MonthRevenueModel.CashPayChange = this.$util.fmoney(this.$util.getMoney(resObj.MonthRevenueModel.CashPay / 10000), 2);
                // 拿到月度对客营收的同比增长
                let addNumber = resObj.MonthRevenueModel.RevenueYOY ? Number((((resObj.MonthRevenueModel.CashPay - resObj.MonthRevenueModel.RevenueYOY) / resObj.MonthRevenueModel.RevenueYOY) * 100).toFixed(2)) : 0;
                resObj.MonthRevenueModel.add = addNumber === 0 ? '' : addNumber > 0 ? "+" + addNumber : addNumber;
                resObj.MonthRevenueModel.addNumber = addNumber;
                // 拿到年度的对客营收
                resObj.MonthRevenueModel.YearRevenueAddNumber = resObj.MonthRevenueModel.YearRevenueAmount - resObj.MonthRevenueModel.YearRevenueYOY;
                resObj.MonthRevenueModel.YearRevenueAdd = resObj.MonthRevenueModel.YearRevenueYOY ? (((resObj.MonthRevenueModel.YearRevenueAmount - resObj.MonthRevenueModel.YearRevenueYOY) / resObj.MonthRevenueModel.YearRevenueYOY) * 100).toFixed(2) : 0;

                // 顶部的 自营、外包 的数据
                let shareList = [{}, {}];
                // 自营、外包 的数据合计
                let sum = 0;
                resObj.BusinessTypeList.forEach((item) => {
                    // 同比
                    if (item.data) {
                        let number = Number(item.data) ? ((item.value - item.data) / item.data) * 100 : 0;
                        if (number > 0) {
                            item.add = "+" + number.toFixed(2);
                        } else if (number < 0) {
                            item.add = number.toFixed(2);
                        } else {
                            item.add = null;
                        }
                    }
                    // 环比
                    if (item.key) {
                        let number = Number(item.key) ? ((item.value - item.key) / item.key) * 100 : 0;
                        if (number > 0) {
                            item.addQOQ = "+" + number.toFixed(2) + "%";
                        } else if (number < 0) {
                            item.addQOQ = number.toFixed(2) + "%";
                        } else {
                            item.addQOQ = null;
                        }
                    }
                    //  分润占比
                    if (item.name === "自营") {
                        shareList[0] = item;
                        sum += Number(item.value);
                    } else if (item.name === "外包") {
                        shareList[1] = item;
                        sum += Number(item.value);
                    }
                });

                let modalListRate = [];
                if (shareList && shareList.length > 0) {
                    shareList.forEach((item) => {
                        modalListRate.push((Number(item.value) / sum * 100).toFixed(2));
                    });
                }

                const moneyRateList = [
                    Number(shareList[0].value),
                    Number(shareList[1].value)
                ];

                // 缓存数据
                this.monthDataCache[monthKey] = {
                    topShowData: resObj,
                    moneyRateList: moneyRateList,
                    profitSharingList: shareList,
                    modalRateList: modalListRate
                };

                console.log('monthKeymonthKey', monthKey);
                if (ischange === 'noChange') {

                } else {
                    // 设置当前数据
                    this.modalRateList = modalListRate;
                    this.moneyRateList = moneyRateList;
                    this.profitSharingList = shareList;
                    this.topShowData = resObj;
                }
            } catch (error) {
                console.error('获取数据失败:', error);
            } finally {
                // 清除加载状态
                delete this.loadingMap[monthKey];
            }
        },
        // 拿到首页的一些基本信息
        handleGetIndexInfo() {
            // 拿到现在有多少个轮播框
            let count = this.$util.getMonthDiff(this.startDate, this.lastDay)
            this.selectIndex = count
            let monthList = this.$util.generateMonthList(this.startDate, count + 1)
            this.monthList = monthList
            const nowDate = new Date(this.nowDay);
            let holiday = nowDate.getDay();
            this.howDay = [
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
            ][holiday];
        },
        // 拿一个最近的服务区 当默认服务区
        async handleGetNearService(latitude, longitude) {
            // let req = {
            //     Province_Code: "530000",
            //     longitude: latitude,
            //     latitude: longitude,
            //     ShowService: true,
            //     PageIndex: 1,
            //     PageSize: 1
            // }
            // const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList', req)
            // console.log('sdjkajdas', data);
            // let list = data.Result_Data.List
            // // 存第一个做为默认服务区
            // // uni.setStorageSync('currentService', list[0]);
            // let nearObj = list[0]
            // console.log('nearObjnearObjnearObj', nearObj);



            let YNList = await this.handleGetYNServiceList()
            console.log('YNListYNList', YNList);
            if (YNList && YNList.length > 0) {
                let nearList = []
                YNList.forEach((item) => {
                    let obj = JSON.parse(JSON.stringify(item))
                    obj.SERVERPART_DISTANCE = this.haversineDistance({ lat: latitude, lng: longitude }, { lat: obj.latitude, lng: obj.longitude })
                    obj.fileId = obj.fileId ? JSON.parse(obj.fileId) : []
                    obj.businessModel = obj.businessModel ? JSON.parse(obj.businessModel) : []
                    nearList.push(obj)
                })

                nearList = nearList.sort((a, b) => {
                    const da = parseFloat(a.SERVERPART_DISTANCE) || 0;
                    const db = parseFloat(b.SERVERPART_DISTANCE) || 0;
                    return da - db;
                });
                uni.setStorageSync('currentService', nearList[0]);
                // 存一下 全部的服务区 主要是拿个距离字段
                uni.setStorageSync('ServerpartList', nearList)
            }

        },
        // 算经纬度的之间距离的方法
        haversineDistance({ lat: lat1, lng: lon1 }, { lat: lat2, lng: lon2 }) {
            const toRad = (d) => d * Math.PI / 180;
            const R = 6378137; // 地球半径(米) WGS84 椭球近似为球
            const φ1 = toRad(lat1);
            const φ2 = toRad(lat2);
            const Δφ = toRad(lat2 - lat1);
            const Δλ = toRad(lon2 - lon1);

            const a = Math.sin(Δφ / 2) ** 2 +
                Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) ** 2;
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            const distanceMeters = R * c;

            return (distanceMeters / 1000).toFixed(2); // 返回 km，字符串
        },
        // 请求一下云南那边的 服务区数据
        async handleGetYNServiceList() {
            let req = {
                bsessionKey: "46BC6D5E069411B39C215C8A3B474B31",
                pageNum: 1,
                pageSize: 500
            }
            const data = await new Promise((resolve, reject) => {
                uni.request({
                    url: "https://fwqznxj.yciccloud.com:9081/ynjt/pushManage/getSaMsgAll",
                    method: "POST",
                    data: req,
                    header: {
                        "content-type": "application/x-www-form-urlencoded",
                    },
                    success(res) {
                        resolve(res.data.data)
                    },
                });
            });

            // 这个是云南那边给来的数据 根据 云南的数据 把我们算的距离补给他们的数据里面
            // let YNList = data.data
            return data.data
        },
        // uniapp小程序兼容性方法，保留作为备用
        getCurrentMonthText(index) {
            if (this.selectIndex === index && this.monthList[index]) {
                return (this.monthList[index].month || "-") + "月对客营收";
            }
            return "-月对客营收";
        }
    }
}
</script>

<style scoped lang="less">
@bg: #f8f9fa;
@muted: #666;
@card: #fff;
@shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
@primary: #27B25F;
@primary2: #4CCC7F;
@success: #2ed573;
@warning: #ff9f43;
@danger: #ff4757;
@info: #3742fa;

.main {
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow-y: auto;

    .topBox {
        width: 100%;
        box-sizing: border-box;
        padding: 0 32rpx;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        background-image: url("https://eshangtech.com/minTestImg/pageBg.png");

        .topContent {
            display: flex;
            align-items: center;

            .topLeft {
                display: flex;
                align-items: center;

                .YDIcon {
                    width: 176rpx;
                    height: 48rpx;
                    margin-right: 8rpx;
                }
            }

            .topRight {
                width: 310rpx;
                height: 56rpx;
                background: #f6f8fa;
                border-radius: 36rpx;
                margin-left: 16rpx;
                box-sizing: border-box;
                padding: 8rpx 16rpx;
                display: flex;
                align-items: center;

                .searchIcon {
                    width: 28rpx;
                    height: 28rpx;
                }

                .searchText {
                    font-family: 'PingFangSC';
                    font-weight: 500;
                    /* Slightly bolder */
                    font-size: 28rpx;
                    /* Slightly larger */
                    color: #9fa1aa;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;
                    margin-left: 8rpx;
                }
            }
        }
    }

    .monthListBox {
        width: 100%;
        height: 460rpx;
        margin-top: 8rpx;

        .swiperBox {
            width: 100%;
            height: 100%;

            .swiperItem {
                width: 100%;
                height: 100%;

                .swiperItemContent {
                    height: 100%;
                    padding: 0 10rpx;
                    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, .06);

                    .swiperItemContentBox {
                        height: 100%;
                        background: linear-gradient(180deg, #F0E4ED 0%, #F0E8F1 18%, #FFFFFF 100%);
                        border-radius: 32rpx;
                        border: 4rpx solid #fff;
                        box-sizing: border-box;
                        padding: 20rpx 28rpx;

                        .swiperItemContentMonth {
                            font-family: 'PingFangSC';
                            font-weight: 500;
                            /* Slightly bolder */
                            font-size: 30rpx;
                            /* Slightly larger */
                            color: #160002;
                            line-height: 40rpx;
                            text-align: left;
                            font-style: normal;

                            .swiperItemContentUnit {
                                font-family: 'PingFangSC';
                                font-weight: 500;
                                /* Slightly bolder */
                                font-size: 30rpx;
                                /* Slightly larger */
                                color: #A69E9F;
                                line-height: 40rpx;
                                text-align: left;
                                font-style: normal;
                                margin-left: 4rpx;
                            }
                        }

                        .swiperItemContentMonthRevenueBox {
                            width: 100%;
                            margin-top: 12rpx;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .leftRevenueValue {
                                font-family: 'DINAlternate';
                                font-weight: bold;
                                font-size: 30rpx;
                                color: #160002;
                                line-height: 40rpx;
                                text-align: left;
                                font-style: normal;
                            }

                            .rightRevenueValue {
                                display: flex;
                                align-items: center;

                                .addValue {
                                    font-family: 'DINAlternate';
                                    font-weight: bold;
                                    font-size: 30rpx;
                                    /* Slightly larger */
                                    line-height: 40rpx;
                                    text-align: left;
                                    font-style: normal;
                                }

                                .rightNav {
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 500;
                                    /* Slightly bolder */
                                    font-size: 30rpx;
                                    /* Slightly larger */
                                    color: #A69E9F;
                                    line-height: 40rpx;
                                    text-align: left;
                                    font-style: normal;
                                    margin-left: 4rpx;
                                }
                            }
                        }

                        .monthRevenueBox {
                            width: 100%;
                            box-sizing: border-box;
                            margin-top: 16rpx;
                            height: 144rpx;
                            display: flex;
                            align-items: center;

                            .leftBox {
                                width: 144rpx;
                                height: 144rpx;
                                margin-right: 20rpx;
                                position: relative;

                                .rateChartsBox {
                                    width: 144rpx;
                                    height: 144rpx;
                                }

                                .haveNoticeBox {
                                    position: absolute;
                                    bottom: 0;
                                    left: 0;
                                    transform: translateY(80%);
                                    display: inline-block;
                                    padding: 5px 10px;
                                    background: #fff;
                                    border-radius: 10rpx;
                                    box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
                                    z-index: 9;

                                    .field {
                                        display: flex;
                                        align-items: center;

                                        .label {
                                            width: 140rpx;
                                            text-align: left;
                                        }

                                        .value {
                                            width: 100rpx;
                                            font-family: DINAlternate-Bold, DINAlternate;
                                            text-align: right;
                                        }
                                    }
                                }
                            }

                            .newRightBox {
                                flex: 1;

                                .newRightItem {
                                    width: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    margin: 8rpx 0;

                                    .itemLeft {
                                        display: flex;
                                        align-items: center;
                                        width: 33%;

                                        .itemIcon {
                                            width: 12rpx;
                                            height: 12rpx;
                                            margin-right: 20rpx;
                                            border-radius: 50%;
                                        }

                                        .itemName {
                                            font-family: PingFangSC, PingFang SC;
                                            font-weight: 500;
                                            /* Slightly bolder */
                                            font-size: 30rpx;
                                            /* Slightly larger */
                                            color: #160002;
                                            line-height: 40rpx;
                                            text-align: left;
                                            font-style: normal;
                                            display: inline-block;
                                            width: 120rpx;
                                        }
                                    }

                                    .itemCenter {
                                        display: inline-block;
                                        width: 33%;
                                        font-family: DINAlternate-Bold, DINAlternate;
                                        font-weight: bold;
                                        font-size: 30rpx;
                                        /* Slightly larger */
                                        color: #160002;
                                        line-height: 40rpx;
                                        text-align: right;
                                        font-style: normal;
                                    }

                                    .itemRight {
                                        display: inline-block;
                                        width: 33%;
                                        font-family: DINAlternate-Bold, DINAlternate;
                                        font-weight: bold;
                                        font-size: 30rpx;
                                        /* Slightly larger */
                                        color: #e83944;
                                        line-height: 40rpx;
                                        text-align: right;
                                        font-style: normal;
                                    }
                                }
                            }
                        }

                        .yearAccountItem {
                            width: 100%;
                            box-sizing: border-box;
                            margin-top: 48rpx;

                            .itemTop {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                margin-bottom: 8rpx;

                                .itemName {
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 500;
                                    /* Slightly bolder */
                                    font-size: 30rpx;
                                    /* Slightly larger */
                                    color: #160002;
                                    line-height: 40rpx;
                                    text-align: left;
                                    font-style: normal;

                                    .unit {
                                        font-family: PingFangSC, PingFang SC;
                                        font-weight: 500;
                                        /* Slightly bolder */
                                        font-size: 30rpx;
                                        /* Slightly larger */
                                        color: #9a9a9a;
                                        line-height: 36rpx;
                                        text-align: left;
                                        font-style: normal;
                                        margin-left: 4rpx;
                                    }
                                }
                            }

                            .itemBottom {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;

                                .revenueNum {
                                    font-family: DINAlternate-Bold, DINAlternate;
                                    font-weight: bold;
                                    font-size: 30rpx;
                                    /* Slightly larger */
                                    color: #160002;
                                    line-height: 44rpx;
                                    text-align: left;
                                    font-style: normal;
                                }

                                .revenueAdd {
                                    font-family: DINAlternate-Bold, DINAlternate;
                                    font-weight: bold;
                                    font-size: 30rpx;
                                    /* Slightly larger */
                                    color: #e83944;
                                    line-height: 44rpx;
                                    text-align: left;
                                    font-style: normal;

                                    .revenueAddNotice {
                                        font-size: 30rpx;
                                        /* Slightly larger */
                                        font-weight: 500;
                                        /* Slightly bolder */
                                        color: #a69e9f;
                                        margin-right: 4px;
                                    }
                                }
                            }
                        }
                    }
                }

                .swiperItemContent.is-first {
                    padding-left: 20rpx;
                }
            }
        }
    }

    .thingBox {
        width: 100%;
        box-sizing: border-box;
        padding: 0 32rpx;
        margin-top: 24rpx;
        margin-bottom: 24rpx;

        .revenue-banner {
            background: linear-gradient(180deg, #F0E4ED 0%, #F0E8F1 18%, #FFFFFF 100%);
            padding: 24rpx;
            border-radius: 16rpx;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
            margin-bottom: 24rpx;

            .revenue-header {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .revenue-title {
                    font-size: 28rpx;
                    font-weight: 500;
                }

                .right {
                    width: 32rpx;
                    height: 32rpx;
                    opacity: 0.7;
                }
            }

            .revenue-content {
                .revenue-amount-wrapper {
                    display: flex;
                    align-items: baseline;
                    margin-top: 12rpx;

                    .revenue-amount {
                        font-size: 30rpx;
                        line-height: 1.5;
                        font-weight: 600;
                        color: @primary;
                    }

                    .revenue-label {
                        margin-left: 4rpx;
                        line-height: 1.5;
                        font-size: 24rpx;
                        color: @muted;
                    }
                }

                .revenue-date {
                    display: flex;
                    justify-content: space-between;
                    font-size: 24rpx;
                    color: @muted;
                    margin-top: 8rpx;
                }
            }
        }

        .data-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24rpx;

            .data-item {
                background: #fff;
                padding: 24rpx;
                border-radius: 16rpx;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

                .data-item-top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 12rpx;

                    .data-icon {
                        width: 30rpx;
                        height: 30rpx;
                        margin-right: 8rpx;

                        .icon {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .data-label {
                        font-size: 28rpx;
                        font-weight: 500;
                        line-height: 1;
                    }
                }

                .data-item-data {
                    display: flex;
                    align-items: baseline;

                    .value {
                        font-size: 28rpx;
                        font-weight: 700;
                        color: @primary;
                    }

                    .unit {
                        margin-left: 4rpx;
                        font-size: 24rpx;
                        color: @muted;
                    }
                }

                .data-item-total {
                    font-size: 24rpx;
                    color: @muted;
                    margin-top: 4rpx;
                }
            }
        }
    }

    // 即时营收
    .instantRevenue {
        width: calc(100% - 80rpx);
        box-sizing: border-box;
        padding: 2rpx;
        border-radius: 20rpx;
        /* Slightly more rounded corners */
        margin-left: 40rpx;
        margin-bottom: 24rpx;

        .revenue {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 28rpx 28rpx 12rpx;
            /* Adjusted padding */
            background: linear-gradient(180deg, #F0E4ED 0%, #F0E8F1 18%, #FFFFFF 100%);
            border-radius: 16rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .revenueTop {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .revenyeTopLeft {
                    display: flex;
                    align-items: center;

                    .monthIcon {
                        width: 48rpx;
                        height: 48rpx;
                    }

                    .dateText {
                        font-size: 30rpx;
                        /* Slightly larger */
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 500;
                        color: #fc2e20;
                        line-height: 40rpx;
                        margin: 0 8rpx;
                    }

                    .day {
                        font-size: 30rpx;
                        /* Slightly larger */
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 500;
                        /* Slightly bolder */
                        color: #a69e9f;
                        line-height: 40rpx;
                    }
                }

                .revenyeTopRight {
                    width: 100px;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;

                    .right {
                        width: 36rpx;
                        /* Slightly larger icon */
                        height: 36rpx;
                    }
                }
            }

            .revenueMoney {
                height: 70rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 4rpx;

                .moneyText {
                    display: inline-flex;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    font-size: 48rpx;
                    /* Significantly larger */
                    color: #160002;
                    line-height: 40rpx;
                    text-align: right;
                    font-style: normal;
                }

                .moneyLabel {
                    height: 100%;
                    font-size: 28rpx;
                    /* Slightly larger */
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: 500;
                    /* Slightly bolder */
                    color: #a69e9f;
                    display: inline-flex;
                    align-items: center;
                }
            }

            .otherRealDataBox {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;

                .revenueMoneyItem {
                    width: 50%;
                    display: flex;
                    align-items: center;

                    .revenueMoneyItemLeft {
                        width: 88rpx;
                        height: 88rpx;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 20rpx;
                        background: linear-gradient(180deg, #DCE6FF 0%, #EEF3FF 100%);

                        .leftIcon {
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }

                    .revenueMoneyItemRight {
                        width: calc(100% - 86rpx);

                        .moneyLabel {
                            font-size: 30rpx;
                            /* Slightly larger */
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 500;
                            /* Slightly bolder */
                            color: #000;
                            line-height: 30rpx;
                        }

                        .moneyText {
                            width: 100%;
                            margin-top: 12rpx;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .money {
                                font-size: 30rpx;
                                /* Slightly larger */
                                font-family: DINAlternate-Bold, DINAlternate;
                                font-weight: bold;
                                color: #160002;
                                line-height: 32rpx;
                                text-align: left;
                                display: inline-block;
                                width: 110rpx;
                            }

                            .moneyUnit {
                                width: 70rpx;
                                font-size: 30rpx;
                                /* Slightly larger */
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 500;
                                /* Slightly bolder */
                                color: #a69e9f;
                                line-height: 30rpx;
                                margin-left: 8rpx;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }
        }

        .revenueOther {
            background: #fff !important;
        }
    }

    .funBox {
        width: calc(100% - 64rpx);
        margin-left: 32rpx;
        margin-bottom: calc(80px + env(safe-area-inset-bottom));
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 32rpx 0;
        display: flex;
        // grid-template-columns: repeat(4, 1fr);
        // gap: 24rpx;
        box-shadow: @shadow;
        background-color: #fff;

        .funItem {
            width: 25%;
            display: flex;
            align-items: center;
            justify-content: center;

            .funItemContent {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .funIconBox {
                    width: 88rpx;
                    height: 88rpx;
                    overflow: hidden;
                    margin-bottom: 16rpx;

                    .funIcon {
                        width: 100%;
                        height: 100%;
                    }
                }

                .funText {
                    font-size: 30rpx;
                    /* Slightly larger */
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    /* Slightly bolder */
                    color: #160002;
                    line-height: 30rpx;
                }
            }
        }
    }
}
</style>