<template>
    <view>
        <view class="chargeBox">
            <view class="serviceList" v-if="dataList && dataList.length > 0">
                <view class="serviceItem" v-for="(item, index) in dataList" :key="index"
                    @click="handleGoDetail(item.SERVERPART_ID, item)"
                    :style="{ marginBottom: dataList && dataList.length === 1 ? '0' : '' }">
                    <view class="leftItem" @click.stop="handleGoServiceDetail(item.SERVERPART_ID, item)">
                        <view class="leftImgBox">
                            <view class="leftImg" :style="{
                                backgroundImage: `url(${item.ImageLits && item.ImageLits.length > 0
                                    ? item.ImageLits[0]
                                    : 'https://eshangtech.com/wanmeiyizhanImg/app/defaultIcon.png'
                                    })`,
                            }"></view>
                        </view>
                        <view class="detailBox">
                            <view class="detailTop">
                                <view class="topLeft">
                                    <span class="detailName">{{ item.SERVERPART_NAME }}</span>
                                    <!-- <span class="detailState">营业中</span> -->
                                    <span class="detailState" :style="{
                                        color: `${item.businessObj.AVR_TICKET >= 30
                                            ? '#FF5959'
                                            : item.businessObj.AVR_TICKET < 30 &&
                                                item.businessObj.AVR_TICKET >= 15
                                                ? '#FF8830'
                                                : item.businessObj.AVR_TICKET < 15
                                                    ? '#01BD8B'
                                                    : ''
                                            }`,
                                        backgroundColor: `rgba(${item.businessObj.AVR_TICKET >= 30
                                            ? '255, 89, 89, 0.1'
                                            : item.businessObj.AVR_TICKET < 30 &&
                                                item.businessObj.AVR_TICKET >= 15
                                                ? '255, 136, 48,0.1'
                                                : item.businessObj.AVR_TICKET < 15
                                                    ? '1, 189, 139, 0.1'
                                                    : ''
                                            })`,
                                    }" v-if="item.businessObj">{{
                                        item.businessObj.AVR_TICKET >= 30
                                            ? "人流量较大"
                                            : item.businessObj.AVR_TICKET >= 15 &&
                                                item.businessObj.AVR_TICKET < 30 ? "人流量适中" : item.businessObj.AVR_TICKET < 15
                                                ? "人流量较小" : "" }}</span>
                                </view>
                                <view class="topRight">
                                    <span class="detailState">营业中</span>

                                </view>
                            </view>
                            <view class="detailBottom">
                                <div class="distanceBox">
                                    <div class="distanceLeft">
                                        <image class="distanceIcon"
                                            src="https://eshangtech.com/wanmeiyizhanImg/home/address.png" />
                                        <span class="distanceNumber">{{
                                            item.SERVERPART_DISTANCE ||
                                            item.SERVERPART_DISTANCEGD ||
                                            "-"
                                        }}km</span>
                                    </div>
                                    <span class="line"></span>
                                    <span class="address">{{
                                        item.SERVERPART_ADDRESS || "-"
                                    }}</span>
                                </div>
                                <scroll-view :scroll-x="true" class="typeList"
                                    v-if="item.ServerpartInfo.SERVERPART_TARGET">
                                    <div class="typeListInner">
                                        <div class="typeItem"
                                            v-for="(subItem, subIndex) in item.ServerpartInfo.SERVERPART_TARGET.split(',')"
                                            :key="subIndex">
                                            {{
                                                SERVERPART_TARGETOBJ && subItem
                                                    ? SERVERPART_TARGETOBJ[subItem]
                                                    : ""
                                            }}
                                        </div>
                                    </div>
                                </scroll-view>
                            </view>
                        </view>
                    </view>

                    <view class="centerItem" v-if="!hideConfig">

                        <view class="centerConfigItemNew" v-for="(subItem, index) in item.imgList.slice(
                            0,
                            item.noMore ? 12 : 12
                        )" :key="index">
                            <image class="configImg" :src="subItem.url" />
                        </view>

                    </view>

                    <view class="lineBox"></view>

                    <view class="bottomItemNew" @click.stop="handleOpenDetail(item)">
                        <view class="leftCharge">
                            <image class="chargeIcon" v-if="item.GWDetail && item.GWDetail.GWSum > 0"
                                src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
                            <image class="chargeIcon" v-if="item.LXDetail && item.LXDetail.LXSum > 0"
                                src="https://eshangtech.com/minTestImg/LXIcon.png" />
                            <image class="chargeIcon" v-if="item.WLDetail && item.WLDetail.WLSum > 0"
                                src="https://eshangtech.com/minTestImg/WLIcon.png" />
                            <image class="chargeIcon" v-if="item.JKDetail && item.JKDetail.JKSum > 0"
                                src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg" />
                        </view>
                        <view class="rightcharge">
                            <span class="empty">空</span>
                            <span class="emptyValue">{{
                                item.allChargeDetail && item.allChargeDetail.empty
                                    ? item.allChargeDetail.empty
                                    : "0"
                            }}</span>
                            <span class="sum">/{{
                                item.allChargeDetail && item.allChargeDetail.allSum
                                    ? item.allChargeDetail.allSum
                                    : "0"
                            }}</span>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <uni-popup ref="popup" :show="isShow" :safe-area="false" :mask-click="false" :is-mask-click="false">
            <view class="popupBigBox" @touchmove.stop.prevent>
                <div class="popupDetailBox" :style="{
                    height: comeForm === 'home' ? '80vh' : '95vh',
                }">
                    <div class="popupTitle">
                        <div class="closeIcon" @click="handleClosePopup">
                            <image class="img" src="https://eshangtech.com/wanmeiyizhanImg/home/closeIcon.svg" />
                        </div>
                        <div clsas="title">电桩详情</div>
                        <div class="closeIcon"></div>
                    </div>

                    <div class="popupTab">
                        <div :class="item.value === selectPopup ? 'tabItem selectTabItem' : 'tabItem'
                            " v-for="(item, index) in popupTab" :key="index"
                            @click="handleChangeSelectPopup(item.value)">
                            {{ item.label }}
                            {{ item.sum ? `(${item.empty}/${item.sum})` : "" }}
                        </div>
                    </div>

                    <div class="smallTabBox">
                        <div :class="selectSmallTab === index ? 'smallTabItem selectSmallTabItem' : 'smallTabItem'
                            " v-for="(item, index) in smallTab" :key="index" @click="handleChangeSmallTab(index)">
                            {{ item.label }}
                            {{ item.sum ? `(${item.sum})` : "" }}
                        </div>
                    </div>

                    <scroll-view class="stationList" scroll-y :style="{
                        height: `calc(${comeForm === 'home' ? 80 : 95
                            }vh - 30px - 108rpx - 56rpx - 24rpx - ${comeForm === 'home' ? 100 : 0
                            }px)`,
                        paddingBottom: comeForm === 'home' ? 0 : '',
                    }">

                        <scroll-view class="selectElectricityFeeListBox" :scroll-x="true"
                            v-if="selectElectricityFee && selectElectricityFee.length > 0">

                            <view class="selectElectricityFeeListInner">
                                <view class="selectElectricityFeeItem" v-for="(item, index) in selectElectricityFee"
                                    :key="index">
                                    <view class="timeBox">{{ item.electricityTime }}</view>
                                    <view class="valueBox">{{ item.electricityBill }}</view>
                                </view>
                            </view>
                        </scroll-view>


                        <template
                            v-if="smallTab && smallTab[selectSmallTab] && smallTab[selectSmallTab].list && smallTab[selectSmallTab].list.length > 0">
                            <div class="stationItem" v-for="(item, index) in smallTab[selectSmallTab].list"
                                :key="index">
                                <div class="leftItem" :style="{
                                    backgroundImage: `url(${item.Status === 0 || item.Status === 255
                                        ? 'https://eshangtech.com/minTestImg/offGrid.svg'
                                        : item.Status === 2 || item.Status === 3 || item.Status === 4
                                            ? 'https://eshangtech.com/minTestImg/overfilling.svg'
                                            : item.Status === 1
                                                ? 'https://eshangtech.com/minTestImg/idle.svg'
                                                : ''
                                        })`,
                                }">

                                    <!-- backgroundImage: `url(${item.Status === 0 || item.Status === 255
                                        ? 'https://eshangtech.com/minTestImg/offGrid.svg'
                                        : item.Power >= 200
                                            ? 'https://eshangtech.com/minTestImg/overfilling.svg'
                                            : item.Power < 200 && item.Power >= 30
                                                ? 'https://eshangtech.com/minTestImg/occupy.svg'
                                                : item.Power < 30
                                                    ? 'https://eshangtech.com/minTestImg/idle.svg'
                                                    : ''
                                        })`, -->


                                    <div class="chargeType" :style="{
                                        color:
                                            item.Status === 0 || item.Status === 255
                                                ? '#B8B7B4'
                                                : item.Status === 2 || item.Status === 3 || item.Status === 4
                                                    ? '#FF5959'
                                                    : item.Status === 1
                                                        ? '#01BD8B'
                                                        : '',
                                    }">

                                        <!-- color:
                                            item.Status === 0 || item.Status === 255
                                                ? '#B8B7B4'
                                                : item.Power >= 200
                                                    ? '#FF5959'
                                                    : item.Power < 200 && item.Power >= 30
                                                        ? '#FF8830'
                                                        : item.Power < 30
                                                            ? '#01BD8B'
                                                            : '', -->

                                        {{
                                            item.Status === 0
                                                ? "离网"
                                                : item.Status === 255
                                                    ? "故障"
                                                    : item.Power >= 200
                                                        ? "超充"
                                                        : item.Power < 200 && item.Power >= 30
                                                            ? "‌快充"
                                                            : "慢充"
                                        }}
                                    </div>
                                    <div v-if="item.Status !== 0 && item.Status !== 255" class="stausType" :style="{
                                        color:
                                            item.Status === 2 || item.Status === 3 || item.Status === 4
                                                ? '#FF5959'
                                                : item.Status === 1
                                                    ? '#01BD8B'
                                                    : '',
                                    }">
                                        {{
                                            item.Status === 2 || item.Status === 3 || item.Status === 4
                                                ? "占用"
                                                : item.Status === 1
                                                    ? "空闲"
                                                    : ""
                                        }}
                                    </div>
                                </div>
                                <!-- @click="handleGoMin" -->
                                <div class="rightItem">
                                    <div class="messageBox">
                                        <span class="label">电桩编号</span>
                                        <span class="value">桩{{ item.ConnectorID || "" }}</span>
                                    </div>
                                    <div class="messageBox">
                                        <span class="label">额定电压</span>
                                        <span class="value">{{
                                            item.VoltageLowerLimits
                                                ? item.VoltageLowerLimits + "v"
                                                : ""
                                        }}{{
                                                item.VoltageUpperLimits && item.VoltageLowerLimits
                                                    ? "-"
                                                    : ""
                                            }}{{
                                                item.VoltageUpperLimits
                                                    ? `${item.VoltageUpperLimits}v`
                                                    : ""
                                            }}</span>
                                    </div>
                                    <div class="messageBox">
                                        <span class="label">最大功率</span>
                                        <span class="value">{{
                                            item.Power ? item.Power + "kw" : ""
                                        }}</span>
                                    </div>

                                    <div class="noticeList">
                                        <div class="noticeItem" style="margin-right: 12rpx" v-if="item.ConnectorType">
                                            {{
                                                item.ConnectorType === 1
                                                    ? "家用插座"
                                                    : item.ConnectorType === 2
                                                        ? "交流接口插座"
                                                        : item.ConnectorType === 3
                                                            ? "交流接口插头"
                                                            : item.ConnectorType === 4
                                                                ? "直流接口插头"
                                                                : item.ConnectorType === 5
                                                                    ? "无线充电座"
                                                                    : ""
                                            }}
                                        </div>
                                        <div class="noticeItem" v-if="item.NationalStandard">
                                            {{
                                                `国标${item.NationalStandard === 1
                                                    ? "2001"
                                                    : item.NationalStandard === 2
                                                        ? "2015"
                                                        : ""
                                                }`
                                            }}
                                        </div>
                                    </div>
                                </div>

                                <div class="statusBox" v-if="
                                    item.Status === 2 || item.Status === 3 || item.Status === 4
                                " :style="{
                                    color: '#FF5959',
                                    backgroundColor: '#FFF1F1',
                                }">
                                    <image v-if="item.Status === 3" class="chargeIcon"
                                        :src="'https://eshangtech.com/wanmeiyizhanImg/home/fast.svg'" />
                                    {{
                                        item.Status === 2
                                            ? "占用"
                                            : item.Status === 3
                                                ? "充电中"
                                                : item.Status === 4
                                                    ? "预约锁定"
                                                    : ""
                                    }}
                                </div>
                            </div>
                        </template>
                    </scroll-view>
                </div>

                <view class="popup-mask" @catchtouchmove="preventTouchMove" @click="handleClosePopup"></view>
            </view>
        </uni-popup>
        <CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
    </view>
</template>

<script>
import CustomLoading from "./customLoading.vue";
import NoData from "./noData.vue";

export default {
    components: { NoData, CustomLoading },
    data() {
        return {
            detailObj: {},
            seatInfo: {},
            nowCurrentObj: {}, // 当前点击选中的悬浮框的对象
            chargeDetailList: [], // 悬浮框里面的详情数据
            isShow: false,
            popupTab: [
                { label: "国网", value: 4, sum: 0 },
                { label: "理想", value: 1, sum: 0 },
                { label: "蔚来", value: 2, sum: 0 },
                { label: "交控", value: 3, sum: 0 },
            ], // 点开的服务区有哪几种充电的
            selectPopup: 1,
            SERVERPART_TARGETOBJ: {},
            styleType: 2, // 1 为老款样式  2 为蓝湖新的样式
            currentBan: 0, // 当前的轮播框 显示内容
            swiperHeight: [], // 高度数组
            isLoading: false,
            smallTab: [],// 方向的分类数据
            selectSmallTab: 0,
            pageDirection: {},
            electricityFeeRes: {},// 全部的电价合集
            selectElectricityFee: [],// 当前选择 展示的电价
            electricityShow: false
        };
    },
    props: {
        dataList: {
            type: Array,
            default: () => [],
        },
        pageType: {
            type: String,
            default: "",
        },
        comeForm: {
            type: String,
            default: "",
        },
        hideConfig: {
            type: Boolean,
            default: false,
        },
        noChargeDetail: {
            type: Boolean,
            default: false,
        },

    },
    // #ifdef MP-WEIXIN
    onReady() {
        let SERVERPART_TARGET = uni.getStorageSync("SERVERPART_TARGET");
        if (SERVERPART_TARGET) {
            this.SERVERPART_TARGETOBJ = JSON.parse(SERVERPART_TARGET);
        } else {
            // 拿到枚举
            this.handleSERVERPART_TARGETOBJ();
        }

    },
    // #endif
    // #ifdef APP-PLUS
    mounted() {
        let SERVERPART_TARGET = uni.getStorageSync("SERVERPART_TARGET");
        if (SERVERPART_TARGET) {
            this.SERVERPART_TARGETOBJ = JSON.parse(SERVERPART_TARGET);
        } else {
            // 拿到枚举
            this.handleSERVERPART_TARGETOBJ();
        }
    },
    // #endif
    methods: {
        // 关闭悬浮框
        handleClosePopup() {
            this.$refs.popup.close();
            this.$emit("handleChangeShow", false);
            this.isShow = false;
            this.nowCurrentObj = {};
            this.chargeDetailList = [];
            this.popupTab = [];
            this.selectPopup = 1;
            this.selectSmallTab = 0
        },
        handleChangeSelectPopup(value) {
            this.selectPopup = value;
            this.selectSmallTab = 0
            if (value === 1) {
                // 理想
                // this.chargeDetailList = this.nowCurrentObj.LXInfoList;
                this.smallTab = this.pageDirection['理想']
                this.selectElectricityFee = this.electricityFeeRes['理想'] || []
            } else if (value === 3) {
                // 交控
                // this.chargeDetailList = this.nowCurrentObj.JKInfoList;
                this.smallTab = this.pageDirection['交控']
                this.selectElectricityFee = this.electricityFeeRes['交控'] || []
            } else if (value === 4) {
                // 国网
                // this.chargeDetailList = this.nowCurrentObj.GWInfoList;
                this.smallTab = this.pageDirection['国网']
                this.selectElectricityFee = this.electricityFeeRes['国网'] || []
            } else {
                // 蔚来
                // this.chargeDetailList = this.nowCurrentObj.WLInfoList;
                this.smallTab = this.pageDirection['蔚来']
                this.selectElectricityFee = this.electricityFeeRes['蔚来'] || []
            }
        },
        handleChangeSmallTab(value) {
            this.selectSmallTab = value
        },
        // 打开对应的悬浮框
        handleOpenDetail(item) {
            console.log('this.noChargeDetail', this.noChargeDetail);

            if (this.noChargeDetail) {
                return
            }

            let obj = {}
            if (item) {
                obj = item
                this.nowCurrentObj = item;
                this.chargeDetailList = item.LXInfoList;
            } else {
                obj = this.detailObj.servicePart[0]
                this.nowCurrentObj = obj;
                this.chargeDetailList = obj.LXInfoList;
            }

            let pageDirection = {}
            let list = [];

            // 电价列表
            let electricityFeeObj = {}
            if (obj.LXInfoList && obj.LXInfoList.length > 0) {

                let directionList = {}
                let directionTypeList = []
                let electricityFeeStr = ''

                obj.LXInfoList.forEach((item) => {
                    if (item.address) {
                        if (directionTypeList.indexOf(item.address) === -1) {
                            directionTypeList.push(item.address)
                            directionList[item.address] = []
                            directionList[item.address].push(item)
                        } else {
                            if (directionList[item.address] && directionList[item.address].length > 0) {
                                let oldList = directionList[item.address]
                                oldList.push(item)
                                directionList[item.address] = oldList
                            }
                        }
                    }

                    if (item.electricityFee) {
                        electricityFeeStr = item.electricityFee
                    }
                });

                let directionRes = [];
                if (directionList) {
                    for (let key in directionList) {
                        directionRes.push({
                            label: key,
                            list: directionList[key],
                            sum: directionList[key].length,
                        })
                    }
                }

                directionRes.unshift({
                    label: "全部",
                    list: obj.LXInfoList,
                });

                list.push({
                    label: "理想",
                    value: 1,
                    sum:
                        obj.LXInfoList && obj.LXInfoList.length > 0
                            ? obj.LXInfoList.length
                            : 0,
                    empty:
                        obj.LXDetail && obj.LXDetail.LXEmpty ? obj.LXDetail.LXEmpty : 0,
                    directionRes: directionRes
                });

                pageDirection['理想'] = directionRes
                if (electricityFeeStr) {
                    let electricityFee = electricityFeeStr.split(",")
                    electricityFeeObj['理想'] = electricityFee
                }
            }

            if (obj.WLInfoList && obj.WLInfoList.length > 0) {

                let directionList = {}
                let directionTypeList = []
                let electricityFeeStr = ''
                obj.WLInfoList.forEach((item) => {
                    if (item.address) {
                        if (directionTypeList.indexOf(item.address) === -1) {
                            directionTypeList.push(item.address)
                            directionList[item.address] = []
                            directionList[item.address].push(item)
                        } else {
                            if (directionList[item.address] && directionList[item.address].length > 0) {
                                let oldList = directionList[item.address]
                                oldList.push(item)
                                directionList[item.address] = oldList
                            }
                        }
                    }

                    if (item.electricityFee) {
                        electricityFeeStr = item.electricityFee
                    }
                });

                let directionRes = [];
                if (directionList) {
                    for (let key in directionList) {
                        directionRes.push({
                            label: key,
                            list: directionList[key],
                            sum: directionList[key].length,
                        })
                    }
                }


                directionRes.unshift({
                    label: "全部",
                    list: obj.WLInfoList,
                });

                list.push({
                    label: "蔚来",
                    value: 2,
                    sum:
                        obj.WLInfoList && obj.WLInfoList.length > 0
                            ? obj.WLInfoList.length
                            : 0,
                    empty:
                        obj.WLDetail && obj.WLDetail.WLEmpty ? obj.WLDetail.WLEmpty : 0,
                    directionRes: directionRes
                });
                pageDirection['蔚来'] = directionRes
                if (electricityFeeStr) {
                    let electricityFee = electricityFeeStr.split(",")

                    let newList = []
                    if (electricityFee && electricityFee.length > 0) {
                        electricityFee.forEach((item) => {
                            let [electricityBill, electricityTime] = item.split(";");
                            let obj = {
                                electricityBill: electricityBill.indexOf("电费") !== -1 ? electricityBill : '',
                                electricityTime: electricityTime
                            }
                            if (obj.electricityBill && obj.electricityTime) {
                                newList.push(obj)
                            }
                        });
                    }

                    electricityFeeObj['蔚来'] = newList
                }
            }

            if (obj.JKInfoList && obj.JKInfoList.length > 0) {

                let directionList = {}
                let directionTypeList = []
                let electricityFeeStr = ''

                obj.JKInfoList.forEach((item) => {
                    if (item.address) {
                        if (directionTypeList.indexOf(item.address) === -1) {
                            directionTypeList.push(item.address)
                            directionList[item.address] = []
                            directionList[item.address].push(item)
                        } else {
                            if (directionList[item.address] && directionList[item.address].length > 0) {
                                let oldList = directionList[item.address]
                                oldList.push(item)
                                directionList[item.address] = oldList
                            }
                        }
                    }

                    if (item.electricityFee) {
                        electricityFeeStr = item.electricityFee
                    }
                });

                let directionRes = [];
                if (directionList) {
                    for (let key in directionList) {
                        directionRes.push({
                            label: key,
                            list: directionList[key],
                            sum: directionList[key].length,
                        })
                    }
                }

                directionRes.unshift({
                    label: "全部",
                    list: obj.JKInfoList,
                });


                list.push({
                    label: "交控",
                    value: 3,
                    sum:
                        obj.JKInfoList && obj.JKInfoList.length > 0
                            ? obj.JKInfoList.length
                            : 0,
                    empty:
                        obj.JKDetail && obj.JKDetail.JKEmpty ? obj.JKDetail.JKEmpty : 0,
                    directionRes: directionRes
                });

                pageDirection['交控'] = directionRes
                if (electricityFeeStr) {
                    // 交控的电价
                    let electricityFee = electricityFeeStr.split(",")
                    electricityFeeObj['交控'] = electricityFee
                }
            }

            if (obj.GWInfoList && obj.GWInfoList.length > 0) {
                let directionList = {}
                let directionTypeList = []
                let electricityFeeStr = ''

                obj.GWInfoList.forEach((item) => {
                    if (item.address) {
                        if (directionTypeList.indexOf(item.address) === -1) {
                            directionTypeList.push(item.address)
                            directionList[item.address] = []
                            directionList[item.address].push(item)
                        } else {
                            if (directionList[item.address] && directionList[item.address].length > 0) {
                                let oldList = directionList[item.address]
                                oldList.push(item)
                                directionList[item.address] = oldList
                            }
                        }
                    }

                    if (item.electricityFee) {
                        electricityFeeStr = item.electricityFee
                    }
                });

                let directionRes = [];
                if (directionList) {
                    for (let key in directionList) {
                        directionRes.push({
                            label: key,
                            list: directionList[key],
                            sum: directionList[key].length,
                        })
                    }
                }

                directionRes.unshift({
                    label: "全部",
                    list: obj.GWInfoList,
                });

                list.push({
                    label: "国网",
                    value: 4,
                    sum:
                        obj.GWInfoList && obj.GWInfoList.length > 0
                            ? obj.GWInfoList.length
                            : 0,
                    empty:
                        obj.GWDetail && obj.GWDetail.GWEmpty ? obj.GWDetail.GWEmpty : 0,
                    directionRes: directionRes
                });

                pageDirection['国网'] = directionRes
                if (electricityFeeStr) {
                    let electricityFee = electricityFeeStr.split(",")
                    electricityFeeObj['国网'] = electricityFee
                }
            }

            // [
            //   {
            //     label: "理想",
            //     value: 1,
            //     sum:
            //       obj.LXInfoList && obj.LXInfoList.length > 0
            //         ? obj.LXInfoList.length
            //         : 0,
            //   },
            //   { label: "蔚来", value: 2, sum: 0 },
            //   {
            //     label: "交控",
            //     value: 3,
            //     sum:
            //       obj.JKInfoList && obj.JKInfoList.length > 0
            //         ? obj.JKInfoList.length
            //         : 0,
            //   },
            //   {
            //     label: "国网",
            //     value: 4,
            //     sum:
            //       obj.GWInfoList && obj.GWInfoList.length > 0
            //         ? obj.GWInfoList.length
            //         : 0,
            //   },
            // ];

            this.selectPopup = list[0].value || 1;
            let value = list[0].value || 1;
            if (value === 1) {
                // 理想
                this.chargeDetailList = this.nowCurrentObj.LXInfoList;
            } else if (value === 3) {
                // 交控
                this.chargeDetailList = this.nowCurrentObj.JKInfoList;
            } else if (value === 4) {
                // 国网
                this.chargeDetailList = this.nowCurrentObj.GWInfoList;
            } else {
                // 蔚来
                this.chargeDetailList = this.nowCurrentObj.WLInfoList;
            }
            this.popupTab = list;
            this.smallTab = list[0].directionRes
            this.electricityFeeRes = electricityFeeObj

            this.selectElectricityFee = this.electricityFeeRes[list[0].label] || []

            this.pageDirection = pageDirection
            this.$emit("handleChangeShow", true);
            this.$refs.popup.open("bottom");
            this.isShow = true;
        },
        // 跳转地图服务区详情
        handleGoServiceDetail(id, obj) {
            if (this.pageType === "newMap") {
                let res = this.handleChangeServiceInfo(obj);

                if (this.comeForm === "addContact") {
                    uni.setStorageSync("addContact", res);
                } else {
                    uni.setStorageSync("currentService", res); // 当前选中服务区信息
                }

                if (this.comeForm === "home") {
                    uni.navigateTo({ url: "/pages/serviceDetail/index" });
                } else {
                    uni.navigateBack({
                        delta: 1,
                    });
                }
                return;
            }

            uni.navigateTo({
                url: `/pages/serviceDetail/index?id=${id}&come=chargeBox`,
            });
        },
        // 选择的服务区详情
        handleGoDetail(id, obj) {
            if (this.pageType === "newMap") {
                let res = this.handleChangeServiceInfo(obj);
                uni.setStorageSync("currentService", res); // 当前选中服务区信息

                if (this.comeForm === "home") {
                    // uni.navigateTo({ url: "/pages/serviceDetail/shopDetail/index" });
                    uni.navigateTo({ url: "/pages/serviceDetail/index" });
                } else {
                    uni.navigateBack({
                        delta: 1,
                    });
                }
            }
        },
        // 兼容一下老接口要的服务区对象的内容
        handleChangeServiceInfo(obj) {
            let newObj = {
                ...obj,
                Distance: obj.SERVERPART_DISTANCE,
                OwnerUnitId: obj.OWNERUNIT_ID,
                OwnerUnitName: obj.OWNERUNIT_NAME,
                ProvinceCode: "340000",
                ServerPart_Id: obj.SERVERPART_ID,
                ServerPart_Name: obj.SERVERPART_NAME,
                ServerPart_Tel: "",
                ServerPart_X: obj.SERVERPART_X,
                ServerPart_Y: obj.SERVERPART_Y,
                showName: `${obj.SERVERPART_NAME}(${obj.SERVERPART_DISTANCE}km)`,
            };
            return newObj;
        },
    },
};
</script>

<style scoped lang="less">
.chargeBox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .serviceList {
        // margin-top: 8px;
        width: 100%;

        .serviceItem {
            // display: flex;
            // align-items: center;
            margin-bottom: 24rpx;
            // border-bottom: 1px solid #f5f6f7;
            // padding-bottom: 20rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(61, 113, 255, 0.1);
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            width: 100%;
            box-sizing: border-box;
            padding: 26rpx;

            .leftItem {
                width: 100%;
                height: 72px;
                // width: calc(100% - 70px);
                display: flex;
                // align-items: center;
                align-items: flex-start;

                .leftImgBox {
                    width: 72px;
                    height: 72px;
                    overflow: hidden;
                    border-radius: 6rpx;
                    margin-right: 20rpx;
                    // background: #f5f6f7;

                    .leftImg {
                        width: 72px;
                        height: 72px;
                        background-repeat: no-repeat;
                        background-size: contain;
                        background-position: 50% 50%;
                        border-radius: 6rpx;
                    }
                }

                .detailBox {
                    width: calc(100% - 164rpx);
                    height: 72px;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;

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

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

                            .detailName {
                                display: inline-block;
                                max-width: 300rpx;
                                font-family: Source Han Sans SC, Source Han Sans SC;
                                font-weight: 400;
                                font-size: 32rpx;
                                color: #130f05;
                                line-height: 40rpx;
                                text-align: left;
                                font-style: normal;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }

                            .detailState {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 22rpx;
                                color: #01a157;
                                line-height: 32rpx;
                                text-align: justify;
                                font-style: normal;
                                padding: 2rpx 3px;
                                background: #e9f8ee;
                                border-radius: 2rpx;
                                margin-left: 8rpx;
                            }
                        }

                        .topRight {
                            .detailState {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 22rpx;
                                color: #01a157;
                                line-height: 32rpx;
                                text-align: justify;
                                font-style: normal;
                                padding: 2rpx 3px;
                                background: #e9f8ee;
                                border-radius: 2rpx;
                                margin-left: 8rpx;
                            }

                            .chargeType {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 22rpx;
                                color: #ffffff;
                                line-height: 32rpx;
                                text-align: left;
                                font-style: normal;
                                padding: 2rpx 8rpx;
                                background: #ba922f;
                                border-radius: 4rpx 0rpx 0rpx 4rpx;
                            }

                            .chargeValue {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 24rpx;
                                color: #ba922f;
                                line-height: 36rpx;
                                text-align: left;
                                font-style: normal;
                                padding: 2rpx 8rpx;
                                border-radius: 0rpx 4rpx 4rpx 0rpx;
                                background: #f8f4ea;
                            }
                        }
                    }

                    .detailBottom {
                        width: 100%;
                        margin-top: 8rpx;

                        .distanceBox {
                            width: 100%;
                            display: flex;
                            align-items: center;

                            .distanceLeft {
                                display: flex;
                                align-items: center;
                                width: 150rpx;

                                .distanceIcon {
                                    width: 24rpx;
                                    height: 24rpx;
                                    margin-right: 4rpx;
                                }

                                .distanceNumber {
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 24rpx;
                                    // color: #716f69;
                                    color: #000000;
                                    line-height: 36rpx;
                                    text-align: left;
                                    font-style: normal;
                                }
                            }

                            .line {
                                display: inline-block;
                                width: 2rpx;
                                height: 22rpx;
                                background: #e7e7e6;
                                margin: 0 12rpx;
                            }

                            .address {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 24rpx;
                                color: #716f69;
                                line-height: 36rpx;
                                text-align: left;
                                font-style: normal;
                                display: inline-block;
                                max-width: 250rpx;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }

                        .typeList {
                            width: 100%;
                            display: block;
                            overflow-x: auto;
                            margin-top: 16rpx;
                            box-sizing: border-box;

                            .typeListInner {
                                display: flex;
                                flex-direction: row;
                                flex-wrap: nowrap;

                                .typeItem {
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 24rpx;
                                    color: #716f69;
                                    line-height: 36rpx;
                                    text-align: left;
                                    font-style: normal;
                                    padding: 4rpx 8rpx;
                                    background: #f5f6f7;
                                    border-radius: 4rpx;
                                    margin-right: 20rpx;
                                    flex-shrink: 0;
                                }
                            }

                        }

                        // .label {
                        //   font-family: PingFangSC, PingFang SC;
                        //   font-weight: 400;
                        //   font-size: 24rpx;
                        //   color: #716f69;
                        //   line-height: 36rpx;
                        //   text-align: justify;
                        //   font-style: normal;
                        //   width: 100%;
                        //   display: -webkit-box; /* 必须设置 */
                        //   -webkit-box-orient: vertical; /* 垂直排列子元素 */
                        //   -webkit-line-clamp: 3; /* 限制显示的行数 */
                        //   overflow: hidden; /* 超出内容隐藏 */
                        //   text-overflow: ellipsis; /* 超出部分显示省略号 */
                        //   word-break: break-all; /* 强制换行，防止长单词溢出 */
                        // }
                        // .value {
                        //   font-family: PingFangSC, PingFang SC;
                        //   font-weight: 400;
                        //   font-size: 24rpx;
                        //   color: #130f05;
                        //   line-height: 36rpx;
                        //   text-align: right;
                        //   font-style: normal;
                        // }
                    }

                    .chargeBox {
                        width: 100%;
                        margin-top: 8rpx;

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

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

                                .imgIcon {
                                    width: 40rpx;
                                    height: 40rpx;
                                    margin-right: 12rpx;
                                }

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

                            .itemRight {
                                background: #f5f6f7;
                                border-radius: 4rpx;
                                padding: 4rpx 12rpx;
                                display: flex;
                                align-items: center;

                                .emptyText {
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 24rpx;
                                    color: #130f05;
                                    line-height: 32rpx;
                                    text-align: left;
                                    font-style: normal;
                                    margin-right: 4rpx;
                                }

                                .use {
                                    font-family: DINAlternate, DINAlternate;
                                    font-weight: bold;
                                    font-size: 28rpx;
                                    color: #130f05;
                                    line-height: 32rpx;
                                    text-align: left;
                                    font-style: normal;
                                    margin-right: 4rpx;
                                }

                                .sum {
                                    font-family: DINAlternate, DINAlternate;
                                    font-weight: bold;
                                    font-size: 28rpx;
                                    color: #716f69;
                                    line-height: 32rpx;
                                    text-align: left;
                                    font-style: normal;
                                }
                            }

                            // width: 100%;
                            // padding: 8rpx;
                            // background: #f6f6f6;
                            // display: flex;
                            // align-items: center;
                            // justify-content: space-between;
                            // border-radius: 8rpx;
                            // box-sizing: border-box;
                            // padding: 0 16rpx;
                            // margin-bottom: 14rpx;
                            // .chargeItemLabel {
                            //   font-family: PingFangSC, PingFang SC;
                            //   font-weight: 400;
                            //   font-size: 24rpx;
                            //   color: #130f05;
                            //   line-height: 40rpx;
                            //   text-align: left;
                            //   font-style: normal;
                            // }
                            // .chargeItemValue {
                            //   font-family: PingFangSC, PingFang SC;
                            //   font-weight: 400;
                            //   font-size: 24rpx;
                            //   color: #130f05;
                            //   line-height: 36rpx;
                            //   text-align: left;
                            //   font-style: normal;
                            //   .empty {
                            //     font-family: DINAlternate, DINAlternate;
                            //     font-weight: bold;
                            //     font-size: 24rpx;
                            //     color: #130f05;
                            //     line-height: 36rpx;
                            //     text-align: left;
                            //     font-style: normal;
                            //     margin: 0 4rpx;
                            //   }
                            //   .sum {
                            //     font-family: DINAlternate, DINAlternate;
                            //     font-weight: bold;
                            //     font-size: 24rpx;
                            //     color: #716f69;
                            //     line-height: 36rpx;
                            //     text-align: left;
                            //     font-style: normal;
                            //   }
                            // }
                        }
                    }
                }
            }

            .centerItem {
                width: 100%;
                box-sizing: border-box;
                margin-top: 24rpx;
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .centerConfigItem {
                    width: calc(100% / 5);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 24rpx;

                    .configImg {
                        width: 32rpx;
                        height: 32rpx;
                        // margin-right: 8rpx;
                        margin-bottom: 8rpx;
                    }

                    .configText {
                        font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
                            sans-serif;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #130f05;
                        line-height: 40rpx;
                    }
                }

                .centerConfigItemNew {
                    width: calc(100% / 11);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    // margin-bottom: 24rpx;

                    .configImg {
                        width: 48rpx;
                        height: 48rpx;
                        // margin-right: 8rpx;
                        margin-bottom: 8rpx;
                    }

                    .configText {
                        font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
                            sans-serif;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #130f05;
                        line-height: 40rpx;
                    }
                }
            }

            .lineBox {
                width: 100%;
                height: 2rpx;
                background: rgba(0, 0, 0, 0.1);
                margin: 30rpx 0 34rpx;
            }

            .bottomItem {
                width: 100%;
                box-sizing: border-box;
                padding: 0 8rpx 0 20rpx;

                // margin-top: 24rpx;
                .chargeBox {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    // justify-content: space-between;

                    .chargeItem {
                        width: 25%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        // justify-content: flex-start;

                        .chargeIconBox {
                            width: 40rpx;
                            height: 40rpx;
                            border-radius: 50%;
                            overflow: hidden;

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

                        .chargeTitle {
                            display: inline-block;
                            max-width: 400rpx;
                            font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
                                sans-serif;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #130f05;
                            line-height: 40rpx;
                            text-align: left;
                            font-style: normal;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .chargeInfo {
                            margin-top: 8rpx;
                            display: flex;
                            align-items: center;

                            .empty {
                                font-family: "PingFangSC";
                                font-weight: 400;
                                font-size: 24rpx;
                                color: #130f05;
                                line-height: 36rpx;
                                text-align: left;
                                font-style: normal;
                                margin-right: 4rpx;
                            }

                            .emptyValue {
                                font-family: "DINAlternate";
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #130f05;
                                line-height: 36rpx;
                                text-align: left;
                                font-style: normal;
                                margin-right: 4rpx;
                            }

                            .sum {
                                font-family: "DINAlternate";
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #716f69;
                                line-height: 36rpx;
                                text-align: left;
                                font-style: normal;
                            }
                        }
                    }
                }
            }

            .bottomItemNew {
                width: 100%;
                // height: 45px;
                height: 40rpx;
                box-sizing: border-box;
                // padding: 18rpx 24rpx 22rpx;
                // background: #f8f8f8;
                border-radius: 8rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 14rpx;

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

                    .chargeIcon {
                        width: 40rpx;
                        height: 40rpx;
                        // margin-right: 16rpx;
                        margin-right: 30rpx;
                        border-radius: 50%;
                    }
                }

                .rightcharge {
                    .empty {
                        font-family: "PingFangSC";
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #130f05;
                        line-height: 36rpx;
                        text-align: left;
                        font-style: normal;
                        margin-right: 4rpx;
                    }

                    .emptyValue {
                        font-family: "DINAlternate";
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #130f05;
                        line-height: 36rpx;
                        text-align: left;
                        font-style: normal;
                        margin-right: 4rpx;
                    }

                    .sum {
                        font-family: "DINAlternate";
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #716f69;
                        line-height: 36rpx;
                        text-align: left;
                        font-style: normal;
                    }
                }
            }

            .merchantsBox {
                margin-top: 24rpx;

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

                    .leftMerchants {
                        .pageTitle {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #090c1a;
                            line-height: 44rpx;
                            text-align: justify;
                            font-style: normal;
                        }

                        .serviceName {
                            margin-left: 16rpx;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #787879;
                            line-height: 32rpx;
                            text-align: justify;
                            font-style: normal;
                        }
                    }

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

                        .serviceName {
                            margin-left: 16rpx;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #787879;
                            line-height: 32rpx;
                            text-align: justify;
                            font-style: normal;
                        }

                        .moreText {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #787879;
                            line-height: 40rpx;
                            text-align: left;
                            font-style: normal;
                        }

                        .moreIcon {
                            width: 24rpx;
                            height: 24rpx;
                            margin-left: 8rpx;
                        }
                    }
                }

                .merchantsList {
                    width: 100%;
                    height: 276rpx;
                    border-radius: 8rpx;
                    border: 2rpx solid #f3f3f3;
                    padding: 22rpx;
                    box-sizing: border-box;
                    margin-top: 24rpx;
                    display: flex;
                    align-items: center;
                    overflow-x: scroll;

                    .merchantsItem {
                        margin-right: 24rpx;

                        .merchantsIconBox {
                            width: 168rpx;
                            height: 168rpx;
                            border-radius: 8rpx;
                            overflow: hidden;

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

                        .merchantsName {
                            display: inline-block;
                            width: 168rpx;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #090c1a;
                            line-height: 40rpx;
                            text-align: justify;
                            font-style: normal;
                        }
                    }
                }
            }

            .rightItem {
                width: 70px;
                height: 100%;
                display: flex;
                align-items: center;
                flex-direction: column;

                .navigationTop {
                    border-radius: 16px;
                    border: 1px solid #ae8d3e;
                    padding: 14rpx 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #ba922f;
                    line-height: 36rpx;
                    text-align: left;
                    font-style: normal;
                    display: flex;
                    align-items: center;

                    .navigationIcon {
                        width: 24rpx;
                        height: 24rpx;
                        margin-right: 8rpx;
                    }
                }

                .longText {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #787879;
                    line-height: 28rpx;
                    text-align: justify;
                    font-style: normal;
                }
            }
        }
    }
}

.popupBigBox {
    width: 100vw;
    height: 100vh;

    .popupDetailBox {
        width: 100vw;
        background: #fff;
        box-sizing: border-box;
        padding: 0 32rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        // position: relative;
        z-index: 1000;

        /* 确保内容在蒙层之上 */
        .popupTitle {
            width: 100%;
            height: 108rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .closeIcon {
                width: 32rpx;
                height: 32rpx;

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

            .title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 32rpx;
                color: #130f05;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
            }

            .rightElectricity {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #ba922f;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;

            }
        }

        .popupTab {
            width: 100%;
            height: 56rpx;
            border-bottom: 1px solid #f1f1f1;
            display: flex;
            align-items: center;
            // justify-content: space-between;

            .tabItem {
                width: calc((100%) / 4);
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #B3B3B3;
                line-height: 50rpx;
                text-align: left;
                font-style: normal;
                // background: #f5f5f5;
                border-radius: 8rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 8rpx 0;
                box-sizing: border-box;
                margin-right: 16rpx;
                white-space: nowrap;
            }

            .selectTabItem {
                // background: #f8f4ea;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #000000;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
                position: relative;
            }

            .selectTabItem::after {
                content: "";
                width: 2rem;
                height: 4rpx;
                background: #009DFF;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .smallTabBox {
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            margin-top: 30rpx;

            .smallTabItem {
                font-family: Inter, Inter;
                font-weight: 400;
                font-size: 26rpx;
                color: #1A577D;
                text-align: center;
                font-style: normal;
                text-transform: none;
                padding: 12rpx 20rpx;
                background-color: #E6F6FF;
                border-radius: 6rpx 6rpx 6rpx 6rpx;
                margin-right: 20rpx;

                // font-family: PingFangSC, PingFang SC;
                // font-weight: 400;
                // font-size: 28rpx;
                // color: #716f69;
                // line-height: 50rpx;
                // text-align: left;
                // font-style: normal;
                // // background: #f5f5f5;
                // border-radius: 8rpx;
                // display: flex;
                // align-items: center;
                // justify-content: center;
                // padding: 8rpx;
                // box-sizing: border-box;
                // margin-right: 16rpx;
                // white-space: nowrap;
            }

            .selectSmallTabItem {
                // background: #f8f4ea;
                // font-family: PingFangSC, PingFang SC;
                // font-weight: 600;
                // font-size: 28rpx;
                // color: #ba922f;
                // line-height: 40rpx;
                // text-align: left;
                // font-style: normal;
                // position: relative;

                color: #ffffff;
                background-color: #009DFF;
            }

            // .selectSmallTabItem::after {
            //   content: "";
            //   width: 2rem;
            //   height: 4rpx;
            //   background: #ba922f;
            //   position: absolute;
            //   bottom: 0;
            //   left: 50%;
            //   transform: translateX(-50%);
            // }
        }

        .stationList {
            width: 100%;
            margin-top: 24rpx;
            box-sizing: border-box;
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);

            .selectElectricityFeeListBox {
                width: calc(100vw - 64rpx);
                overflow-x: auto;
                margin-bottom: 24rpx;
                /* 添加底部间距 */

                .selectElectricityFeeListInner {
                    white-space: nowrap;

                    .selectElectricityFeeItem {
                        display: inline-block;
                        box-sizing: border-box;
                        padding: 16rpx 20rpx;
                        background-color: #F7F7F7;
                        border-radius: 6rpx;
                        /* 添加 flex-shrink: 0; 防止子元素收缩 */
                        flex-shrink: 0;
                        /* 添加右侧间距 */
                        margin-right: 16rpx;
                        /* 确保内部文本不换行 */
                        white-space: nowrap;

                        .timeBox {
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: 400;
                            font-size: 26rpx;
                            color: #000000;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }

                        .valueBox {
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: bold;
                            font-size: 30rpx;
                            color: #FF6200;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }
                    }
                }
            }

            .stationItem {
                width: 100%;
                box-sizing: border-box;
                padding: 32rpx;
                display: flex;
                align-items: center;
                background: #f9f9f9;
                margin-bottom: 24rpx;
                position: relative;

                .leftItem {
                    width: 152rpx;
                    height: 152rpx;
                    margin-right: 24rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;

                    .chargeType {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        font-size: 32rpx;
                        color: #01bd8b;
                        line-height: 44rpx;
                        text-align: left;
                        font-style: normal;
                    }

                    .stausType {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #01bd8b;
                        line-height: 32rpx;
                        text-align: left;
                        font-style: normal;
                    }
                }

                .rightItem {
                    width: calc(100% - 176rpx);

                    .messageBox {
                        display: flex;
                        align-items: center;
                        margin-bottom: 8rpx;

                        .label {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #716f69;
                            line-height: 36rpx;
                            text-align: left;
                            font-style: normal;
                            margin-right: 16rpx;
                        }

                        .value {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #130f05;
                            line-height: 36rpx;
                            text-align: left;
                            font-style: normal;
                        }
                    }

                    .noticeList {
                        width: 100%;
                        display: flex;
                        align-items: center;

                        .noticeItem {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 22rpx;
                            color: #130f05;
                            line-height: 36rpx;
                            text-align: left;
                            font-style: normal;
                            padding: 0 10rpx;
                            background: #eef0f6;
                            border-radius: 4rpx;
                        }
                    }

                    .addressText {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #FF8830;
                        line-height: 36rpx;
                        text-align: right;
                        font-style: normal;
                        margin-right: 16rpx;
                    }
                }

                .statusBox {
                    border-radius: 0rpx 16rpx 0rpx 16rpx;
                    padding: 10rpx 12rpx;
                    position: absolute;
                    right: 0;
                    top: 0;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    line-height: 36rpx;
                    text-align: left;
                    font-style: normal;
                    display: flex;
                    align-items: center;

                    .chargeIcon {
                        width: 24rpx;
                        height: 24rpx;
                    }
                }
            }
        }

        .stationList ::-webkit-scrollbar {
            display: none;
            width: 0;
        }
    }

    .popup-mask {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        // background-color: rgba(0, 0, 0, 0.5);
        background-color: rgba(0, 0, 0, 0);
        z-index: 999;
        pointer-events: auto;
        /* 允许蒙层拦截触摸事件 */
        /* 以下可选 */
        backdrop-filter: blur(2px);
        /* iOS 毛玻璃效果（可选） */
        transition: opacity 0.3s;
        /* 淡入淡出动画（可选） */
    }
}


.electricityPopup {
    width: 80vw;
    height: 600rpx;
    box-sizing: border-box;
    padding: 32rpx;
    border-radius: 32rpx;
    background: #fff;
}
</style>
