<template>
    <view class="main">

        <!-- 顶部固定的内容 -->
        <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>

        <!-- 月份的轮播框 -->
        <view class="monthListBox" :style="{ paddingTop: menu.bottom + 8 + 'px' }">
            <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 class="itemType">累计</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 class="swiperItemContentYear">
                                年度累计
                                <span class="swiperItemContentUnit">/亿元</span>
                            </view>
                            <view class="swiperItemContentYearRevenueBox">
                                <view class="leftRevenueValue">126.32</view>

                                <view class="rightRevenueValue">
                                    <text class="addValue" :style="{
                                        color:
                                            showTableData.add > 0
                                                ? '#E83944'
                                                : showTableData.add < 0
                                                    ? '#0E9976'
                                                    : '',
                                    }">{{ showTableData.add ? showTableData.add : "-" }}%</text>
                                    <text class="rightNav">同比</text>

                                </view>
                            </view> -->

                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>



        <!--  即时营收 -->
        <view class="instantRevenue" style="margin-top: 24rpx;">
            <view class="revenue" @click="handlePage" style="padding-bottom: 0;">
                <view class="revenueTop">
                    <view class="revenyeTopLeft">
                        <image class="monthIcon"
                            src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/monthIcon.svg" />
                        <text class="dateText">{{
                            $util.handleGetMonthDay(nowDay)
                        }}</text>
                        <text class="day">/{{ howDay }}</text>
                    </view>
                    <view class="revenyeTopRight">
                        <image class="right" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg" />
                    </view>
                </view>

                <view class="revenueMoney">
                    <!-- <NumberScroll v-if="currentMoney" :number="currentMoney" /> -->
                    <text class="moneyText">{{ currentMoney }}</text>
                    <text class="moneyLabel">实时对客销售/元</text>
                </view>
            </view>

            <!-- <view class="revenue revenueOther">
                <view class="otherRealDataBox">
                    <view class="revenueMoneyItem" v-for="(subItem, subIndex) in otherRealData"
                        :style="{ marginTop: subIndex >= 2 ? '24rpx' : '' }">
                        <view class="revenueMoneyItemLeft">
                            <image class="leftIcon" :src="subItem.icon" />
                        </view>

                        <view class="revenueMoneyItemRight">
                            <view class="moneyLabel">{{ subItem.label || "" }}</view>
                            <view class="moneyText">{{ subItem.value || "" }}<span class="moneyUnit">{{ subItem.unit
                                || "" }}</span>
                            </view>
                        </view>
                    </view>
                </view>
            </view> -->
        </view>

        <!-- 实时水电、加油、尿素、充电 -->
        <view class="instantRevenue" style="margin-top: 24rpx;" v-if="otherRealData && otherRealData.length > 0">
            <view class="revenue revenueOther">
                <view class="otherRealDataBox">
                    <view class="revenueMoneyItem" v-for="(subItem, subIndex) in otherRealData"
                        :style="{ marginTop: subIndex >= 2 ? '24rpx' : '' }">
                        <view class="revenueMoneyItemLeft">
                            <image class="leftIcon" :src="subItem.icon" />
                        </view>

                        <view class="revenueMoneyItemRight">
                            <view class="moneyLabel">{{ subItem.label || "" }}</view>
                            <view class="moneyText">
                                <span class="money">{{ subItem.value || "" }}</span>
                                <span class="moneyUnit">/{{ subItem.unit
                                    || "" }}</span>
                            </view>
                        </view>
                    </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="goToRobot">
                <view class="funItemContent">
                    <view class="funIconBox">
                        <image class="funIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/statistics.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: "",// 实时营收
            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) {
                console.log('watchwatchwatchwatchwatch');
                let _this = this
                console.log('newValuenewValuenewValue', newValue);
                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=homeIndex`,
                    });
                } else {
                    _this.topShowData = null
                    _this.moneyRateList = []
                    _this.profitSharingList = []
                    _this.modalRateList = []
                }

                console.log('userInfouserInfouserInfo', _this.useInfo);
                console.log('userInfouserisReturnisReturnisReturnisReturnInfouserInfo', _this.isReturn);
                if (!_this.isReturn) {
                    _this.handleGetOnLoad()
                }
            }
        }
    },
    onLoad() {
        let _this = this
        this.menu = uni.getMenuButtonBoundingClientRect();
        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)
            },
            fail: (err) => {
            },
        });
        this.single = timestampToTimeMonth(new Date(this.lastDay).getTime());
        console.log('this.singlethis.singlethis.single', this.single);
        uni.setStorageSync("lastDay", this.lastDay);


        console.log('useruseruseruser', this.user);

        // 小程序进来存起来的用户信息
        // 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);

        console.log('userInfouserInfo', 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=homeIndex`,
            });
        }

        console.log('userInfouserInfouserInfo', _this.useInfo);
        console.log('userInfouserisReturnisReturnisReturnisReturnInfouserInfo', _this.isReturn);
        if (!_this.isReturn) {
            _this.handleGetOnLoad()
        }

    },
    onShow() {
        // 隐藏掉小程序本身自带的 tabbar 让自定义的tabbar出现
        uni.hideTabBar();
    },
    onPullDownRefresh: function () {
        let _this = this;
        let userInfo = JSON.parse(JSON.stringify(this.user));
        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=homeIndex`,
            });
        }
        if (!_this.isReturn) {
            // 下拉刷新时清空缓存，确保数据最新
            _this.monthDataCache = {};
            _this.loadingMap = {};
            _this.handleGetOnLoad();
        }
        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);
                } catch (error) {
                    console.log('预加载数据失败:', error);
                }
            }, 500);
        },
        handleShowYDModal() {
            this.ydModal = !this.ydModal;
        },
        goToRobot() {
            if (this.isReturn) {
                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/robot/index`);
            // this.$util.toNextRoute("navigateTo", `/pages/testPage/index`);
        },
        // 跳转去出勤情况
        handleGoAttendanceStatus() {
            if (this.isReturn) {
                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`
            );
        },
        // 跳转到经营报表
        handleGoOperate() {
            if (this.isReturn) {
                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() {
            this.$util.toNextRoute(
                "navigateTo",
                `/pages/everdayRenven/index?time=${this.lastDay}&GroupType=1000&ProvinceCode=530000&ServerpartIds=`
            );
        },
        handleGoMap() {
            if (this.isReturn) {
                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");
        },
        // 拿到云南 油水电等数据
        async handleGetYNRealData() {
            try {
                let req = {
                    serverPartId: ""
                };
                const res = await request.$webJava("partner/today/data/statistics", req);
                console.log('handleGetYNRealDatahandleGetYNRealDatahandleGetYNRealData', res);
                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: 'totalTicket',
                        unitKey: 'totalTicketUnit'
                    }
                };

                if (list && list.length > 0) {
                    list.forEach((item) => {
                        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
                            });
                        }
                    });
                }
                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);
        },
        // 实时营收
        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');
            } catch (error) {
                console.error('获取实时营收数据失败:', error);
                this.currentMoney = '暂无数据';
            }
        },
        // 拿到顶部轮播框的数据
        async handleGetTopData(index) {
            let nowMonth = index !== undefined ? this.monthList[index] : this.monthList[this.selectIndex];
            const monthKey = nowMonth.realFull;

            // 检查是否正在加载，避免重复请求
            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 = ((item.value - item.data) / item.data) * 100;
                        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 = ((item.value - item.key) / item.key) * 100;
                        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);
                    }
                });

                console.log('sum', sum);
                console.log('shareListshareListshareList', shareList);

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

                // 设置当前数据
                this.modalRateList = modalListRate;
                this.moneyRateList = moneyRateList;
                this.profitSharingList = shareList;
                console.log('profitSharingListprofitSharingListprofitSharingList', this.profitSharingList);
                console.log('moneyRateListmoneyRateListmoneyRateList', this.moneyRateList);
                console.log('resObjresObjresObjresObjresObj', resObj);
                this.topShowData = resObj;
            } catch (error) {
                console.error('获取数据失败:', error);
            } finally {
                // 清除加载状态
                delete this.loadingMap[monthKey];
            }
        },
        // 拿到首页的一些基本信息
        handleGetIndexInfo() {
            // 拿到现在有多少个轮播框
            let count = this.$util.getMonthDiff(this.startDate, this.lastDay)
            console.log('countcountcountcountcountcount', count);
            this.selectIndex = count

            let monthList = this.$util.generateMonthList(this.startDate, count + 1)
            console.log('monthListmonthListmonthList', monthList);

            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]);
        },

        // uniapp小程序兼容性方法，保留作为备用
        getCurrentMonthText(index) {
            if (this.selectIndex === index && this.monthList[index]) {
                return (this.monthList[index].month || "-") + "月对客营收";
            }
            return "-月对客营收";
        }
    }
}
</script>


<style scoped lang="scss">
.main {
    width: 100vw;
    height: 100vh;
    background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .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: 72rpx;
                background: #f6f8fa;
                border-radius: 36rpx;
                margin-left: 16rpx;
                box-sizing: border-box;
                padding: 16rpx 20rpx;
                display: flex;
                align-items: center;

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

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

    .monthListBox {
        width: 100%;
        // height: 600rpx;
        height: 460rpx;

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

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

                .swiperItemContent {
                    height: 100%;
                    padding: 0 10rpx; // 中间间距一半（两边相加=20rpx）
                    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: 400;
                            font-size: 28rpx;
                            color: #160002;
                            line-height: 40rpx;
                            text-align: left;
                            font-style: normal;

                            .swiperItemContentUnit {
                                font-family: 'PingFangSC';
                                font-weight: 400;
                                font-size: 24rpx;
                                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: 28rpx;
                                    line-height: 40rpx;
                                    text-align: left;
                                    font-style: normal;
                                }

                                .rightNav {
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 24rpx;
                                    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: 16rpx;
                                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 {
                                // height: 100%;
                                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: 12rpx;
                                            border-radius: 50%;
                                        }

                                        .itemName {
                                            font-family: PingFangSC, PingFang SC;
                                            font-weight: 400;
                                            font-size: 28rpx;
                                            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: 28rpx;
                                        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: 28rpx;
                                        color: #e83944;
                                        line-height: 40rpx;
                                        text-align: right;
                                        font-style: normal;
                                    }
                                }
                            }
                        }

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

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

                                .itemType {
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 24rpx;
                                    color: #ffffff;
                                    line-height: 24rpx;
                                    text-align: left;
                                    font-style: normal;
                                    padding: 4rpx 8rpx;
                                    background: #f2792e;
                                    border-radius: 4rpx;
                                    margin-right: 8rpx;
                                }

                                .itemName {
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 28rpx;
                                    color: #160002;
                                    line-height: 40rpx;
                                    text-align: left;
                                    font-style: normal;

                                    .unit {
                                        font-family: PingFangSC, PingFang SC;
                                        font-weight: 400;
                                        font-size: 24rpx;
                                        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: 28rpx;
                                    color: #160002;
                                    line-height: 44rpx;
                                    text-align: left;
                                    font-style: normal;
                                }

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

                                    .revenueAddNotice {
                                        font-size: 24rpx;
                                        font-weight: 400;
                                        color: #a69e9f;
                                        margin-right: 4px;
                                    }
                                }
                            }
                        }

                        .swiperItemContentYear {
                            margin-top: 24rpx;
                            font-family: 'PingFangSC';
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #160002;
                            line-height: 40rpx;
                            text-align: left;
                            font-style: normal;

                            .swiperItemContentUnit {
                                font-family: 'PingFangSC';
                                font-weight: 400;
                                font-size: 24rpx;
                                color: #A69E9F;
                                line-height: 40rpx;
                                text-align: left;
                                font-style: normal;
                                margin-left: 4rpx;
                            }
                        }

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

                            .leftRevenueValue {
                                font-family: 'DINAlternate';
                                font-weight: bold;
                                font-size: 40rpx;
                                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: 28rpx;
                                    line-height: 40rpx;
                                    text-align: left;
                                    font-style: normal;
                                }

                                .rightNav {
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 28rpx;
                                    color: #A69E9F;
                                    line-height: 40rpx;
                                    text-align: left;
                                    font-style: normal;
                                    margin-left: 4rpx;
                                }
                            }

                        }

                    }
                }

                .swiperItemContent.is-first {
                    padding-left: 20rpx; // 左边额外+10rpx，让边距=40rpx
                }

                .swiperItemContent.is-last {
                    // padding-right: 20rpx; // 右边额外+10rpx，让边距=40rpx
                }
            }
        }
    }

    .instantRevenue {
        width: calc(100% - 80rpx);
        // height: 104px;
        box-sizing: border-box;
        padding: 2rpx;
        background: #fff;
        border-radius: 16rpx;
        margin-left: 40rpx;
        margin-bottom: 24rpx;

        .revenue {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 24rpx 24rpx;
            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: 28rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 500;
                        color: #fc2e20;
                        line-height: 40rpx;
                        margin: 0 8rpx;
                    }

                    .day {
                        font-size: 24rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #a69e9f;
                        line-height: 40rpx;
                    }
                }

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

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

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

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

                .moneyLabel {
                    height: 100%;
                    font-size: 24rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: 400;
                    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%;
                        // border: 1px solid #9FA6A3;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 16rpx;
                        background: linear-gradient(180deg, #DCE6FF 0%, #EEF3FF 100%);

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

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

                        .moneyLabel {
                            font-size: 28rpx;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #000;
                            line-height: 30rpx;
                            // margin-bottom: 16rpx;
                        }

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

                            .money {
                                font-size: 28rpx;
                                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: 24rpx;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                color: #a69e9f;
                                line-height: 30rpx;
                                margin-left: 8rpx;
                                white-space: nowrap;
                            }
                        }
                    }


                }
            }
        }

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


    .funBox {
        width: calc(100% - 64rpx);
        margin-left: 32rpx;
        background: #ffffff;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 32rpx 24rpx;
        display: flex;
        flex-flow: wrap;

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

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

                .funIconBox {
                    width: 88rpx;
                    height: 88rpx;
                    //border-radius: 50%;
                    overflow: hidden;
                    margin-bottom: 16rpx;

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

                .funText {
                    font-size: 28rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #160002;
                    line-height: 30rpx;
                }
            }
        }
    }
}
</style>