<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">
                <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 ? item.month || "-" : "-" }}月对客营收
                                <span class="swiperItemContentUnit">/万元</span>
                            </view>

                            <!-- 月度营收的值 -->
                            <view class="swiperItemContentMonthRevenueBox">
                                <view class="leftRevenueValue">{{ selectIndex === index
                                    ? topShowData.MonthRevenueModel.CashPayChange || "-" : "-" }}
                                </view>

                                <view class="rightRevenueValue">
                                    <text v-if="selectIndex === index" class="addValue" :style="{
                                        color:
                                            topShowData.MonthRevenueModel.addNumber > 0
                                                ? '#E83944'
                                                : topShowData.MonthRevenueModel.addNumber < 0
                                                    ? '#0E9976'
                                                    : '',
                                    }">{{ topShowData.MonthRevenueModel.addNumber ?
                                        topShowData.MonthRevenueModel.addNumber : "-" }}%</text>
                                    <text class="rightNav">同比</text>
                                </view>
                            </view>

                            <view class="monthRevenueBox" v-if="selectIndex === index">
                                <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">{{
                                        topShowData && topShowData.MonthRevenueModel &&
                                            topShowData.MonthRevenueModel.YearRevenueAmount
                                            ? $util.getMoney(
                                                topShowData.MonthRevenueModel.YearRevenueAmount /
                                                100000000
                                            )
                                            : ""
                                    }}</span>
                                    <span class="revenueAdd" v-if="selectIndex === index" :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" :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,
        }
    },
    components: {
        RateCharts,
        NumberScroll,
        Tabbar,
    },
    computed: {
        ...mapGetters({ user: "getUser" }),
    },
    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.handleGetOnLoad()
        }
        uni.stopPullDownRefresh();
    },
    methods: {
        // 在onLoad里面调用的 请求整个页面的数据
        async handleGetOnLoad() {
            // 拿到首页的一些基本信息
            this.handleGetIndexInfo()

            // 拿到顶部轮播框的数据
            await this.handleGetTopData()

            // 实时营收
            this.handleRealRevenue()
            // 云南的实时内容 油品、加水、尿素、充电
            this.handleGetYNRealData()
        },
        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() {
            let req = {
                serverPartId: ""
            }
            const res = await request.$webJava("partner/today/data/statistics", req)
            console.log('handleGetYNRealDatahandleGetYNRealDatahandleGetYNRealData', res);
            let list = res.Result_Data
            let result = []
            if (list && list.length > 0) {
                list.forEach((item) => {
                    if (item.dataType === 2000) {
                        result.push({
                            label: `油品`,
                            value: this.$util.fmoney(item.totalCount),
                            unit: item.totalCountUnit,
                            icon: "https://eshangtech.com/cyy_DIB/oilIcon.png"
                        })
                    } else if (item.dataType === 3000) {
                        result.push({
                            label: `加水`,
                            value: this.$util.fmoney(item.totalCount),
                            unit: item.totalCountUnit,
                            icon: "https://eshangtech.com/cyy_DIB/addWaterIcon.png"
                        })
                    } else if (item.dataType === 4000) {
                        result.push({
                            label: `尿素`,
                            value: this.$util.fmoney(item.totalCount),
                            unit: item.totalCountUnit,
                            icon: "https://eshangtech.com/cyy_DIB/ureaIcon.png"
                        })
                    } else if (item.dataType === 5000) {
                        result.push({
                            label: `充电`,
                            value: this.$util.fmoney(item.totalTicket),
                            unit: item.totalTicketUnit,
                            icon: "https://eshangtech.com/cyy_DIB/chargeIcon.png"
                        })
                    }
                })
            }
            this.otherRealData = result
        },
        // 切换轮播框的方法
        async handleChangeSwiper(e) {
            console.log('e', e);
            this.selectIndex = e.target.current
            this.topShowData = null
            this.moneyRateList = []
            this.profitSharingList = []
            this.modalRateList = []
            await this.handleGetTopData(e.target.current)
        },
        // 实时营收
        async handleRealRevenue() {
            let req = {
                pushProvinceCode: "530000",
                StatisticsDate: this.nowDay,
            };
            const res = await request.$webGet("CommercialApi/Revenue/GetCurRevenue", req)
            this.currentMoney = res.Result_Data.CurRevenueAmount.toFixed(2);

        },
        // 拿到顶部轮播框的数据
        async handleGetTopData(index) {
            let nowMonth = index ? this.monthList[index] : this.monthList[this.selectIndex]

            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))
                })
            }
            this.modalRateList = modalListRate


            this.moneyRateList = [
                Number(shareList[0].value),
                Number(shareList[1].value)
            ];
            this.profitSharingList = shareList
            console.log('profitSharingListprofitSharingListprofitSharingList', this.profitSharingList);
            console.log('moneyRateListmoneyRateListmoneyRateList', this.moneyRateList);
            console.log('resObjresObjresObjresObjresObj', resObj);
            this.topShowData = resObj
        },
        // 拿到首页的一些基本信息
        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])
        }
    }
}
</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;

                .moneyText {
                    font-size: 44rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    margin-right: 8rpx;
                }

                .moneyLabel {
                    height: 100%;
                    font-size: 24rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: 400;
                    color: #a69e9f;
                    display: inline-flex;
                    align-items: center;
                    margin-bottom: 12rpx;
                }
            }

            .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>