<template>
  <view>
    <view class="chargeBox" v-if="showType === 'horizontal'">
      <swiper scroll-x="true" class="serviceList" @change="swiperChange($event, 'currentBan')" :current="currentBan"
        :style="{ height: `${swiperHeight[currentBan]}rpx` }">
        <!-- autoplay="true" -->

        <swiper-item class="serviceItem" v-for="(item, index) in detailObj.servicePart" :key="index" :style="{
          border: index + 1 === detailObj.servicePart.length ? 'none' : '',
          marginBottom: index + 1 === detailObj.servicePart.length ? '0' : '',
          paddingBottom:
            index + 1 === detailObj.servicePart.length ? '0' : '',
        }">
          <view class="leftItem" @click="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/discovery/defaultIcon.png'
                  })`,
              }"></view>
              <!-- <image
                    class="leftImg"
                    :src="
                      item.ImageLits && item.ImageLits.length > 0
                        ? item.ImageLits[0]
                        : 'https://eshangtech.com/wanmeiyizhanImg/discovery/defaultIcon.png'
                    "
                  /> -->
            </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="chargeType">快充</span>
                      <span class="chargeValue">空4/8</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_DISTANCEGD ||
                      item.SERVERPART_DISTANCE ||
                      "-"
                    }}km</span>
                  </div>
                  <span class="line"></span>
                  <span class="address">{{
                    item.SERVERPART_ADDRESS || "-"
                  }}</span>
                </div>
                <div class="typeList" v-if="item.ServerpartInfo.SERVERPART_TARGET">
                  <div class="typeItem" v-for="(
subItem, subIndex
                    ) in item.ServerpartInfo.SERVERPART_TARGET.split(',')" :key="subIndex">
                    {{
                      SERVERPART_TARGETOBJ && subItem
                        ? SERVERPART_TARGETOBJ[subItem]
                        : ""
                    }}
                  </div>
                </div>
              </view>
            </view>
          </view>

          <!-- 老款样式 -->
          <view class="centerItem" @click="handleGoServiceDetail(item.SERVERPART_ID, item)" v-if="styleType === 1">
            <!-- 拥有设施的小图标 -->
            <view class="centerConfigItem" v-for="(subItem, index) in item.imgList" :key="index">
              <image class="configImg" :src="subItem.url" />
              <text class="configText">{{ subItem.title || "" }}</text>
            </view>
          </view>

          <!-- 新款样式 -->
          <view class="centerItem" @click="handleGoServiceDetail(item.SERVERPART_ID, item)"
            v-if="styleType === 2 && showType !== 'horizontal'">
            <view class="centerConfigItemNew" v-for="(subItem, index) in item.imgList.slice(
              0,
              item.noMore ? 5 : 12
            )" :key="index">
              <image class="configImg" :src="subItem.url" />
              <text class="configText">{{ subItem.title || "" }}</text>
            </view>

            <view class="centerConfigItemNew" v-if="item.noMore" @click.stop="handleGetMore(item)">
              <image class="configImg" src="https://eshangtech.com/minTestImg/chargeImgNew/getMore.svg" />
              <text class="configText">更多</text>
            </view>
          </view>

          <view v-if="styleType === 1" class="bottomItem" @click="handleOpenDetail(item)">
            <view class="chargeBox">
              <!-- 理想 -->
              <view class="chargeItem">
                <view class="chargeIconBox">
                  <image class="chargeIcon" src="https://eshangtech.com/minTestImg/LXIcon.png" />
                </view>
                <view class="chargeTitle">理想</view>
                <view class="chargeInfo">
                  <span class="empty">空</span>
                  <span class="emptyValue">{{
                    item.LXDetail && item.LXDetail.LXEmpty
                      ? item.LXDetail.LXEmpty
                      : "0"
                  }}</span>
                  <span class="sum">/{{
                    item.LXDetail && item.LXDetail.LXSum
                      ? item.LXDetail.LXSum
                      : "0"
                  }}</span>
                </view>
              </view>

              <!-- 蔚来 -->
              <view class="chargeItem">
                <view class="chargeIconBox">
                  <image class="chargeIcon" src="https://eshangtech.com/minTestImg/WLIcon.png" />
                </view>
                <view class="chargeTitle">蔚来</view>
                <view class="chargeInfo">
                  <span class="empty">空</span>
                  <span class="emptyValue">{{
                    item.WLDetail && item.WLDetail.WLEmpty
                      ? item.WLDetail.WLEmpty
                      : "0"
                  }}</span>
                  <span class="sum">/{{
                    item.WLDetail && item.WLDetail.WLSum
                      ? item.WLDetail.WLSum
                      : "0"
                  }}</span>
                </view>
              </view>

              <!-- 交控新能源(阳光) -->
              <view class="chargeItem">
                <view class="chargeIconBox">
                  <image class="chargeIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg" />
                </view>
                <view class="chargeTitle">交控新能源</view>
                <view class="chargeInfo">
                  <span class="empty">空</span>
                  <span class="emptyValue">{{
                    item.JKDetail && item.JKDetail.JKEmpty
                      ? item.JKDetail.JKEmpty
                      : "0"
                  }}</span>
                  <span class="sum">/{{
                    item.JKDetail && item.JKDetail.JKSum
                      ? item.JKDetail.JKSum
                      : "0"
                  }}</span>
                </view>
              </view>

              <!-- 国网(充换电) -->
              <view class="chargeItem">
                <view class="chargeIconBox">
                  <image class="chargeIcon" src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
                </view>
                <view class="chargeTitle">国网</view>
                <view class="chargeInfo">
                  <span class="empty">空</span>
                  <span class="emptyValue">{{
                    item.GWDetail && item.GWDetail.GWEmpty
                      ? item.GWDetail.GWEmpty
                      : "0"
                  }}</span>
                  <span class="sum">/{{
                    item.GWDetail && item.GWDetail.GWSum
                      ? item.GWDetail.GWSum
                      : "0"
                  }}</span>
                </view>
              </view>
            </view>
          </view>

          <view class="bottomItemNew" v-if="styleType === 2" style="margin-top: 24rpx" @click="handleOpenDetail(item)">
            <view class="leftCharge">
              <image class="chargeIcon" src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
              <image class="chargeIcon" src="https://eshangtech.com/minTestImg/LXIcon.png" />
              <image class="chargeIcon" src="https://eshangtech.com/minTestImg/WLIcon.png" />
              <image class="chargeIcon" 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>

          <!-- 商家 -->
          <div class="merchantsBox" v-if="showStore && item.storeList && item.storeList.length > 0">
            <div class="merchantsTop">
              <div class="leftMerchants">
                <span class="pageTitle">精选商家</span>
              </div>

              <div class="rightMerchants">
                <span class="serviceName">{{
                  item.SERVERPART_NAME || ""
                }}</span>
                <!-- <image
                  class="moreIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.png"
                /> -->
              </div>
            </div>
            <div class="merchantsList" v-if="item.storeList && item.storeList.length > 0">
              <div class="merchantsItem" v-for="(subItem, subIndex) in item.storeList" :key="subIndex">
                <div class="merchantsIconBox" @click="goShop(subItem)">
                  <image class="merchantsIcon" :src="subItem.IMAGE_URL" />
                </div>
                <span class="merchantsName">{{ subItem.TITLE || "" }}</span>
              </div>
            </div>
            <div class="merchantsList" style="display: flex; justify-content: center" v-else>
              <no-data text="暂无商家" :isShow="true"></no-data>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </view>

    <view class="chargeBox" v-else>
      <view class="serviceList" v-if="
        detailObj && detailObj.servicePart && detailObj.servicePart.length > 0
      ">
        <view class="serviceItem" v-for="(item, index) in detailObj.servicePart" :key="index" :style="{
          border: index + 1 === detailObj.servicePart.length ? 'none' : '',
          marginBottom: index + 1 === detailObj.servicePart.length ? '0' : '',
          paddingBottom:
            index + 1 === detailObj.servicePart.length ? '0' : '',
        }" @click="handleGoDetail(item.SERVERPART_ID, item)">
          <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/discovery/defaultIcon.png'
                  })`,
              }"></view>
              <!-- <image
                    class="leftImg"
                    :src="
                      item.ImageLits && item.ImageLits.length > 0
                        ? item.ImageLits[0]
                        : 'https://eshangtech.com/wanmeiyizhanImg/discovery/defaultIcon.png'
                    "
                  /> -->
            </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="chargeType">快充</span>
                      <span class="chargeValue">空4/8</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>
                <div class="typeList" v-if="item.ServerpartInfo.SERVERPART_TARGET">
                  <div class="typeItem" v-for="(
subItem, subIndex
                    ) in item.ServerpartInfo.SERVERPART_TARGET.split(',')" :key="subIndex">
                    {{
                      SERVERPART_TARGETOBJ && subItem
                        ? SERVERPART_TARGETOBJ[subItem]
                        : ""
                    }}
                  </div>
                </div>
              </view>
            </view>
          </view>

          <!-- 老款样式 -->
          <view class="centerItem" @click.stop="handleGoServiceDetail(item.SERVERPART_ID, item)"
            v-if="styleType === 1 && pageType !== 'mapList'">
            <!-- 拥有设施的小图标 -->
            <view class="centerConfigItem" v-for="(subItem, index) in item.imgList" :key="index">
              <image class="configImg" :src="subItem.url" />
              <text class="configText">{{ subItem.title || "" }}</text>
            </view>
          </view>

          <!-- 新款样式 -->
          <view class="centerItem" v-if="styleType === 2 || pageType === 'mapList'">
            <!-- @click.stop="handleGoServiceDetail(item.SERVERPART_ID, item)" -->

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

            <view class="centerConfigItemNew" @click.stop="handleGetMore(item)">
              <image class="configImg" src="https://eshangtech.com/minTestImg/chargeImgNew/getMore.svg" />
              <text class="configText">{{
                item.noMore ? "更多" : "收起"
              }}</text>
            </view>
          </view>

          <view v-if="styleType === 1" class="bottomItem" @click.stop="handleOpenDetail(item)">
            <view class="chargeBox">
              <!-- 理想 -->
              <view class="chargeItem">
                <view class="chargeIconBox">
                  <image class="chargeIcon" src="https://eshangtech.com/minTestImg/LXIcon.png" />
                </view>
                <view class="chargeTitle">理想</view>
                <view class="chargeInfo">
                  <span class="empty">空</span>
                  <span class="emptyValue">{{
                    item.LXDetail && item.LXDetail.LXEmpty
                      ? item.LXDetail.LXEmpty
                      : "0"
                  }}</span>
                  <span class="sum">/{{
                    item.LXDetail && item.LXDetail.LXSum
                      ? item.LXDetail.LXSum
                      : "0"
                  }}</span>
                </view>
              </view>

              <!-- 蔚来 -->
              <view class="chargeItem">
                <view class="chargeIconBox">
                  <image class="chargeIcon" src="https://eshangtech.com/minTestImg/WLIcon.png" />
                </view>
                <view class="chargeTitle">蔚来</view>
                <view class="chargeInfo">
                  <span class="empty">空</span>
                  <span class="emptyValue">{{
                    item.WLDetail && item.WLDetail.WLEmpty
                      ? item.WLDetail.WLEmpty
                      : "0"
                  }}</span>
                  <span class="sum">/{{
                    item.WLDetail && item.WLDetail.WLSum
                      ? item.WLDetail.WLSum
                      : "0"
                  }}</span>
                </view>
              </view>

              <!-- 交控新能源(阳光) -->
              <view class="chargeItem">
                <view class="chargeIconBox">
                  <image class="chargeIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg" />
                </view>
                <view class="chargeTitle">交控新能源</view>
                <view class="chargeInfo">
                  <span class="empty">空</span>
                  <span class="emptyValue">{{
                    item.JKDetail && item.JKDetail.JKEmpty
                      ? item.JKDetail.JKEmpty
                      : "0"
                  }}</span>
                  <span class="sum">/{{
                    item.JKDetail && item.JKDetail.JKSum
                      ? item.JKDetail.JKSum
                      : "0"
                  }}</span>
                </view>
              </view>

              <!-- 国网(充换电) -->
              <view class="chargeItem">
                <view class="chargeIconBox">
                  <image class="chargeIcon" src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
                </view>
                <view class="chargeTitle">国网</view>
                <view class="chargeInfo">
                  <span class="empty">空</span>
                  <span class="emptyValue">{{
                    item.GWDetail && item.GWDetail.GWEmpty
                      ? item.GWDetail.GWSum
                      : "0"
                  }}</span>
                  <span class="sum">/{{
                    item.GWDetail && item.GWDetail.GWEmpty
                      ? item.GWDetail.GWSum
                      : "0"
                  }}</span>
                </view>
              </view>
            </view>
          </view>

          <view class="bottomItemNew" v-if="styleType === 2" @click.stop="handleOpenDetail(item)">
            <view class="leftCharge">
              <image class="chargeIcon" src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
              <image class="chargeIcon" src="https://eshangtech.com/minTestImg/LXIcon.png" />
              <image class="chargeIcon" src="https://eshangtech.com/minTestImg/WLIcon.png" />
              <image class="chargeIcon" 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">
      <!-- @close="handleClosePopup"
    @maskClick="handleClosePopup" -->
      <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.sum})` : "" }}
            </div>
          </div>

          <scroll-view class="stationList" scroll-y :style="{
            height: `calc(${comeForm === 'home' ? 80 : 95
              }vh - 108rpx - 56rpx - 24rpx - ${comeForm === 'home' ? 100 : 0
              }px)`,
            paddingBottom: comeForm === 'home' ? 0 : '',
          }">
            <div class="stationItem" v-for="(item, index) in chargeDetailList" :key="index">
              <div class="leftItem" :style="{
                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'
                        : ''
                  })`,
              }">
                <!-- item.Status === 0
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/offGrid.svg'
                    : item.Status === 1
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/idle.svg'
                    : item.Status === 2
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/idle.svg'
                    : item.Status === 3
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/idle.svg'
                    : item.Status === 4
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/occupy.svg'
                    : item.Status === 255
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/offGrid.svg'
                    : '' -->

                <div class="chargeType" :style="{
                  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.Power >= 200
                      ? '#FF5959'
                      : item.Power < 200 && item.Power >= 30
                        ? '#FF8830'
                        : item.Power < 30
                          ? '#01BD8B'
                          : '',
                }">
                  {{
                    item.Status === 2 || item.Status === 3 || item.Status === 4
                      ? "占用"
                      : item.Status === 1
                        ? "空闲"
                        : ""
                  }}
                </div>
              </div>
              <div class="rightItem" @click="handleGoMin">
                <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:
                  item.Power >= 200
                    ? '#FF5959'
                    : item.Power < 200 && item.Power > 30
                      ? '#FF8830'
                      : item.Power < 30
                        ? '#01BD8B'
                        : '',
                backgroundColor:
                  item.Power >= 200
                    ? '#FFF1F1'
                    : item.Power < 200 && item.Power > 30
                      ? '#FBF2EB'
                      : item.Power < 30
                        ? '#EAF4F1'
                        : '',
              }">
                <image v-if="item.Status === 3" class="chargeIcon" :src="item.Power >= 200
                  ? 'https://eshangtech.com/wanmeiyizhanImg/home/fast.svg'
                  : item.Power < 200 && item.Power > 30
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/normal.svg'
                    : item.Power < 30
                      ? 'https://eshangtech.com/wanmeiyizhanImg/home/slow.svg'
                      : ''
                  " />
                {{
                  item.Status === 2
                    ? "占用"
                    : item.Status === 3
                      ? "充电中"
                      : item.Status === 4
                        ? "预约锁定"
                        : ""
                }}
              </div>
            </div>
          </scroll-view>
        </div>

        <view class="popup-mask" @catchtouchmove="preventTouchMove" @click="handleClosePopup"></view>
      </view>
    </uni-popup>
    <CustomLoading :visible="isLoading" />
  </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,
    };
  },
  props: {
    serviceAreaList: {
      type: Array,
      default: () => [],
    },
    startObj: {
      type: Object,
      default: () => ({}),
    },
    endObj: {
      type: Object,
      default: () => ({}),
    },
    pageType: {
      // mapIndex 值为这个时候 需要把调用到的充电结果数据扔出去给父组件
      type: String,
      default: "",
    },
    showType: {
      type: String,
      default: "",
    },
    showStore: {
      type: Boolean,
      default: false,
    },
    comeForm: {
      type: String,
      default: "",
    },
    pageStyleType: {
      type: Number,
      default: 2,
    },
    reload: {
      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();
    }
    this.handldGetData();

    if (this.pageStyleType === 1) {
      this.styleType = 1;
    }
  },
  // #endif
  // #ifdef APP-PLUS
  mounted() {
    if (this.pageStyleType === 1) {
      this.styleType = 1;
    }
    let SERVERPART_TARGET = uni.getStorageSync("SERVERPART_TARGET");
    if (SERVERPART_TARGET) {
      this.SERVERPART_TARGETOBJ = JSON.parse(SERVERPART_TARGET);
    } else {
      // 拿到枚举
      this.handleSERVERPART_TARGETOBJ();
    }
    this.handldGetData();
  },
  watch: {
    serviceAreaList: {
      handler(newVal) {
        this.handldGetData();
      },
      deep: true, // 深度监听
      immediate: true, // 立即触发一次
    },
    reload: {
      handler(newVal) { },
      deep: true, // 深度监听
    },
  },
  // #endif
  methods: {
    preventTouchMove(e) {
      return false; // 阻止默认行为，避免滚动穿透
    },
    // 选择的服务区详情
    handleGoDetail(id, obj) {
      if (this.pageType === "newMap") {
        let res = this.handleChangeServiceInfo(obj);
        // let res = {
        //   SERVERPART_NAME: obj.SERVERPART_NAME, // 服务区
        //   SPREGIONTYPE_NAME: obj.SPREGIONTYPE_NAME, // 片区
        //   Serverpart_ID: obj.SERVERPART_ID,
        //   SPRegionType_ID: obj.SPREGIONTYPE_ID,
        //   longitude: obj.SERVERPART_X,
        //   latitude: obj.SERVERPART_Y
        // }
        uni.setStorageSync("currentService", res); // 当前选中服务区信息

        if (this.comeForm === "home") {
          uni.navigateTo({ url: "/pages/serviceDetail/shopDetail/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;
    },
    goShop(item) {
      uni.navigateTo({ url: "/pages/storeDetail/index?id=" + item.ITEM_ID });
    },
    swiperChange(e, name) {
      // this[name] = e.mp.detail.current;
      this.currentBan = e.mp.detail.current;
    },
    handleGetMore(obj) {
      obj.noMore = !obj.noMore;
      this.$forceUpdate();
    },
    // 遍历去调用 理想的全部数据 并输出在一个list里面
    async handleTraverseLXAllData(sum, token) {
      // sum 为遍历次数
      let res = [];
      for (let i = 0; i < sum; i++) {
        const data = await this.$testApi.$post("/send", {
          url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_stations_info",
          data: JSON.stringify({
            PageNo: 2 + i,
            PageSize: 999,
          }),
          id: 0,
          seq: `00${3 + i}`,
          token: token,
        });
        res = res.concat(data.data.Data.StationInfos);
      }
      return res;
    },
    // 解服务区的一个枚举
    async handleSERVERPART_TARGETOBJ() {
      let SERVERPART_TARGET = await this.$api.$get(
        "/EShangApiMain/FrameWork/GetFieldEnumTree",
        { FieldExplainField: "SERVERPART_TARGET" }
      );
      let list = this.$utils.wrapTreeNode(SERVERPART_TARGET.Result_Data.List);
      let obj = {};
      if (list && list.length > 0) {
        list.forEach((item) => {
          obj[String(item.value)] = item.label;
        });
      }
      uni.setStorageSync("SERVERPART_TARGET", JSON.stringify(obj));
      this.SERVERPART_TARGETOBJ = obj;
    },
    async handldGetData() {
      // uni.showLoading({
      //   title: "加载中...",
      // });

      this.isLoading = true;
      // 先去请求一下服务区的繁忙度
      let businessReq = {
        action_type: "getCurHalfCollect",
        province_code: 3544,
      };

      const businessRes = await new Promise((resolve, reject) => {
        uni.request({
          url: `https://cloud.eshangtech.com/MobileServicePlatform/Handler/handler_ajax.ashx`,
          method: "GET",
          data: businessReq,
          success(res) {
            let data = res.data.CollectionObject;
            if (data && data.length > 0) {
              resolve(data);
            } else {
              resolve([]);
            }
          },
        });
      });

      let seatInfo = uni.getStorageSync("seatInfo");
      if (seatInfo) {
        this.seatInfo = seatInfo;
      }
      // 服务区列表
      let serviceList = [];

      let storgeList = uni.getStorageSync("serviceList");

      if (storgeList) {
        serviceList = JSON.parse(storgeList);
      } else {
        let req = {
          Province_Code: "340000",
          longitude: this.seatInfo.longitude || "",
          latitude: this.seatInfo.latitude || "",
          ShowService: true,
        };
        let serviceArea = await this.$api.$get(
          "/CommercialApi/BaseInfo/GetServerpartList",
          req
        );

        serviceList = serviceArea.Result_Data.List;
        uni.setStorageSync("serviceList", JSON.stringify(serviceList));
      }

      let serverpart = {};
      if (serviceList && serviceList.length > 0) {
        serviceList.forEach((item) => {
          serverpart[item.SERVERPART_NAME] = item.SERVERPART_ID;
        });
      }

      let _this = this;

      let list = [];
      let nameList = [];
      let serverpartIdList = [];
      if (_this.serviceAreaList && _this.serviceAreaList.length > 0) {
        _this.serviceAreaList.forEach((item) => {
          nameList.push(item.split("服务区")[0]);
          serverpartIdList.push(serverpart[item]);

          if (serviceList && serviceList.length > 0) {
            serviceList.forEach((subItem) => {
              if (item === subItem.SERVERPART_NAME) {
                // 给这个服务区 赋值服务区的繁忙度
                if (businessRes && businessRes.length > 0) {
                  businessRes.forEach((businessItem) => {
                    if (businessItem.SERVERPART_NAME === item) {
                      subItem.businessObj = businessItem;
                    }
                  });
                }
                list.push(subItem);
              }
              // 理想总数
              let LIAUTOCHARGESum = 0;
              // 国网总数
              let STATEGRIDCHARGESum = 0;
              // 充换电总数
              let GACENERGYCHARGESum = 0;
              let HASPANTRY = 0; // 男厕数量
              let HASWIFI = 0; // 女厕数量
              let TOILETCOUNT = 0; // 潮汐厕位
              let HASSHOWERROOM = 0; // 淋浴房
              let HASWATERROOM = 0; // 开水器
              let MICROWAVEOVEN = 0; // 微波炉
              let WASHERCOUNT = 0; // 洗衣机数量
              let SLEEPINGPODS = 0; // 睡眠仓
              let HASPILOTLOUNGE = false; // 有无司机之家
              let SHOWERROOM = 0; // 司机之家淋浴间
              let HASCHILD = false; // 有无车辆维修
              let HASMOTHER = false; // 有无母婴室
              let SMALLPARKING = 0; // 轿车车位
              let PACKING = 0; // 客车车位
              let TRUCKPACKING = 0; // 货车车位
              let DANPACKING = 0; // 危化品车位
              let DININGBXCOUNT = 0; // 商铺数量
              let DININGROOMCOUNT = 0; // 餐饮店
              let HASBACKGROUNDRADIO = 0; // 便利店
              let POINTCONTROLCOUNT = 0; // 客房
              let TOILET_PAPER = 0; // 厕纸巾
              let MABROOMWATER_DISPENSER = 0; // 母婴室饮水机
              let NURSING_TABLE = 0; // 哺乳桌
              let BABY_COT = 0; // 婴儿床
              let CHANGING_TABLE = 0; // 尿布台
              let DROOMWATER_DISPENSER = 0; // 司机之家饮水机
              let UREA_COUNT = 0; // 尿素
              let VEHICLEWATERFILLING = 0; // 加水
              let REFUELINGGUN92 = 0; // 加油枪92号
              let REFUELINGGUN95 = 0; //  加油枪95号
              let REFUELINGGUN0 = 0; // 加油枪0号

              if (subItem.RegionInfo && subItem.RegionInfo.length > 0) {
                subItem.RegionInfo.forEach((thirdItem) => {
                  HASPANTRY += thirdItem.HASPANTRY;
                  HASWIFI += thirdItem.HASPANTRY;
                  TOILETCOUNT += thirdItem.TOILETCOUNT;
                  HASSHOWERROOM += thirdItem.HASSHOWERROOM;
                  HASWATERROOM += thirdItem.HASWATERROOM;
                  MICROWAVEOVEN += thirdItem.MICROWAVEOVEN;
                  WASHERCOUNT += thirdItem.WASHERCOUNT;
                  SLEEPINGPODS += thirdItem.SLEEPINGPODS;
                  SHOWERROOM += thirdItem.SHOWERROOM;
                  SMALLPARKING += thirdItem.SMALLPARKING;
                  PACKING += thirdItem.PACKING;
                  TRUCKPACKING += thirdItem.TRUCKPACKING;
                  DANPACKING += thirdItem.DANPACKING;
                  DININGBXCOUNT += thirdItem.DININGBXCOUNT;
                  DININGROOMCOUNT += thirdItem.DININGROOMCOUNT;
                  HASBACKGROUNDRADIO += thirdItem.HASBACKGROUNDRADIO;
                  POINTCONTROLCOUNT += thirdItem.POINTCONTROLCOUNT;
                  TOILET_PAPER += thirdItem.TOILET_PAPER;
                  MABROOMWATER_DISPENSER += thirdItem.MABROOMWATER_DISPENSER;
                  NURSING_TABLE += thirdItem.NURSING_TABLE;
                  BABY_COT += thirdItem.BABY_COT;
                  CHANGING_TABLE += thirdItem.CHANGING_TABLE;
                  DROOMWATER_DISPENSER += thirdItem.DROOMWATER_DISPENSER;
                  UREA_COUNT += thirdItem.UREA_COUNT;
                  VEHICLEWATERFILLING += thirdItem.VEHICLEWATERFILLING;
                  REFUELINGGUN92 += thirdItem.REFUELINGGUN92;
                  REFUELINGGUN95 += thirdItem.REFUELINGGUN95;
                  REFUELINGGUN0 += thirdItem.REFUELINGGUN0;

                  if (thirdItem.HASPILOTLOUNGE) {
                    HASPILOTLOUNGE = true;
                  }
                  if (thirdItem.HASCHILD) {
                    HASCHILD = true;
                  }
                  if (thirdItem.HASMOTHER) {
                    HASMOTHER = true;
                  }

                  LIAUTOCHARGESum += Number(thirdItem.LIAUTOCHARGE || 0);
                  STATEGRIDCHARGESum += Number(thirdItem.STATEGRIDCHARGE || 0);
                  GACENERGYCHARGESum += Number(thirdItem.GACENERGYCHARGE || 0);
                });
              }
              subItem.LiXiang = LIAUTOCHARGESum;
              // subItem.Sun = STATEGRIDCHARGESum;
              subItem.chargeAndReplaceSum = GACENERGYCHARGESum;

              // 判断小图标是否有值
              subItem.imgList =
                this.styleType === 1 && this.pageType !== "mapList"
                  ? [
                    {
                      url:
                        HASPANTRY > 0 || HASWIFI > 0
                          ? "https://eshangtech.com/minTestImg/motherAndBaby.svg"
                          : "https://eshangtech.com/minTestImg/nomotherAndBaby.svg",
                      isShow: HASPANTRY > 0 || HASWIFI > 0,
                      title: "母婴室",
                    },
                    {
                      url:
                        HASPILOTLOUNGE > 0
                          ? "https://eshangtech.com/minTestImg/HASPILOTLOUNGE.svg"
                          : "https://eshangtech.com/minTestImg/noHASPILOTLOUNGE.svg",
                      isShow: HASPILOTLOUNGE > 0,
                      title: "司机之家",
                    },
                    {
                      url: HASCHILD
                        ? "https://eshangtech.com/minTestImg/HASCHILD.svg"
                        : "https://eshangtech.com/minTestImg/noHASCHILD.svg",
                      isShow: SMALLPARKING,
                      title: "车辆维修",
                    },
                    {
                      url:
                        DININGROOMCOUNT > 0
                          ? "https://eshangtech.com/minTestImg/DININGROOMCOUNT.svg"
                          : "https://eshangtech.com/minTestImg/noDININGROOMCOUNT.svg",
                      isShow: DININGROOMCOUNT > 0,
                      title: "餐饮",
                    },
                    {
                      url:
                        HASBACKGROUNDRADIO > 0
                          ? "https://eshangtech.com/minTestImg/HASBACKGROUNDRADIO.svg"
                          : "https://eshangtech.com/minTestImg/noHASBACKGROUNDRADIO.svg",
                      isShow: HASBACKGROUNDRADIO > 0,
                      title: "便利店",
                    },
                    {
                      url:
                        HASPANTRY > 0 || HASWIFI > 0
                          ? "https://eshangtech.com/minTestImg/WC.svg"
                          : "https://eshangtech.com/minTestImg/noWC.svg",
                      isShow: HASPANTRY > 0,
                      title: "卫生间",
                    },

                    // {
                    //   url:
                    //     HASSHOWERROOM > 0
                    //       ? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
                    //       : "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
                    //   isShow: HASSHOWERROOM > 0,
                    //   title: "淋浴房",
                    // },

                    // {
                    //   url:
                    //     HASWATERROOM > 0
                    //       ? "https://eshangtech.com/minTestImg/HASWATERROOM.svg"
                    //       : "https://eshangtech.com/minTestImg/noHASWATERROOM.svg",
                    //   isShow: HASWATERROOM > 0,
                    //   title: "开水器",
                    // },
                    {
                      url:
                        SMALLPARKING > 0 ||
                          PACKING > 0 ||
                          TRUCKPACKING > 0 ||
                          DANPACKING > 0
                          ? "https://eshangtech.com/minTestImg/SMALLPARKING.svg"
                          : "https://eshangtech.com/minTestImg/noSMALLPARKING.svg",
                      isShow:
                        SMALLPARKING > 0 ||
                        PACKING > 0 ||
                        TRUCKPACKING > 0 ||
                        DANPACKING > 0,
                      title: "停车场",
                    },
                    {
                      url:
                        REFUELINGGUN92 > 0 ||
                          REFUELINGGUN95 > 0 ||
                          REFUELINGGUN0 > 0
                          ? "https://eshangtech.com/minTestImg/REFUELINGGUN.svg"
                          : "https://eshangtech.com/minTestImg/noREFUELINGGUN.svg",
                      isShow:
                        REFUELINGGUN92 > 0 ||
                        REFUELINGGUN95 > 0 ||
                        REFUELINGGUN0 > 0,
                      title: "加油站",
                    },
                    {
                      url:
                        LIAUTOCHARGESum > 0 ||
                          STATEGRIDCHARGESum > 0 ||
                          GACENERGYCHARGESum > 0
                          ? "https://eshangtech.com/minTestImg/chargingStation.svg"
                          : "https://eshangtech.com/minTestImg/nochargingStation.svg",
                      isShow:
                        LIAUTOCHARGESum > 0 ||
                        STATEGRIDCHARGESum > 0 ||
                        GACENERGYCHARGESum > 0,
                      title: "充电桩",
                    },

                    {
                      url:
                        POINTCONTROLCOUNT > 0
                          ? "https://eshangtech.com/minTestImg/POINTCONTROLCOUNT.svg"
                          : "https://eshangtech.com/minTestImg/noPOINTCONTROLCOUNT.svg",
                      isShow: POINTCONTROLCOUNT > 0,
                      title: "客房",
                    },
                    // {
                    //   url:
                    //     WASHERCOUNT > 0
                    //       ? "https://eshangtech.com/minTestImg/WASHERCOUNT.svg"
                    //       : "https://eshangtech.com/minTestImg/noWASHERCOUNT.svg",
                    //   isShow: WASHERCOUNT > 0,
                    //   title: "洗衣机",
                    // },
                    // {
                    //   url:
                    //     MICROWAVEOVEN > 0
                    //       ? "https://eshangtech.com/minTestImg/MICROWAVEOVEN.svg"
                    //       : "https://eshangtech.com/minTestImg/noMICROWAVEOVEN.svg",
                    //   isShow: MICROWAVEOVEN > 0,
                    //   title: "微波炉",
                    // },

                    // {
                    //   url:
                    //     HASWIFI > 0
                    //       ? "https://eshangtech.com/minTestImg/womanWCIcon.svg"
                    //       : "https://eshangtech.com/minTestImg/nowomanWCIcon.svg",
                    // },
                    // {
                    //   url:
                    //     TOILETCOUNT > 0
                    //       ? "https://eshangtech.com/minTestImg/TOILETCOUNT.svg"
                    //       : "https://eshangtech.com/minTestImg/noTOILETCOUNT.svg",
                    //   isShow: TOILETCOUNT > 0,
                    // },
                    // {
                    //   url:
                    //     HASSHOWERROOM > 0
                    //       ? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
                    //       : "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
                    //   isShow: HASSHOWERROOM > 0,
                    //   title: "淋浴间",
                    // },
                    // {
                    //   url:
                    //     HASWATERROOM > 0
                    //       ? "https://eshangtech.com/minTestImg/HASWATERROOM.svg"
                    //       : "https://eshangtech.com/minTestImg/noHASWATERROOM.svg",
                    //   isShow: HASWATERROOM > 0,
                    //   title: "开水器",
                    // },

                    // // {
                    // //   url:
                    // //     SLEEPINGPODS > 0
                    // //       ? "https://eshangtech.com/minTestImg/SLEEPINGPODS.svg"
                    // //       : "https://eshangtech.com/minTestImg/noSLEEPINGPODS.svg",
                    // //   isShow: SLEEPINGPODS > 0,
                    // //   title: "睡眠仓",
                    // // },
                    // {
                    //   url:
                    //     HASPILOTLOUNGE > 0
                    //       ? "https://eshangtech.com/minTestImg/HASPILOTLOUNGE.svg"
                    //       : "https://eshangtech.com/minTestImg/noHASPILOTLOUNGE.svg",
                    //   isShow: HASPILOTLOUNGE > 0,
                    //   title: "司机之家",
                    // },
                    // {
                    //   url:
                    //     HASCHILD > 0
                    //       ? "https://eshangtech.com/minTestImg/HASCHILD.svg"
                    //       : "https://eshangtech.com/minTestImg/noHASCHILD.svg",
                    //   isShow: HASCHILD > 0,
                    //   title: "车辆维修",
                    // },
                    // {
                    //   url:
                    //     DININGBXCOUNT > 0
                    //       ? "https://eshangtech.com/minTestImg/DININGBXCOUNT.svg"
                    //       : "https://eshangtech.com/minTestImg/noDININGBXCOUNT.svg",
                    //   isShow: DININGBXCOUNT > 0,
                    //   title: "商铺",
                    // },
                    // {
                    //   url:
                    //     SMALLPARKING > 0
                    //       ? "https://eshangtech.com/minTestImg/SMALLPARKING.svg"
                    //       : "https://eshangtech.com/minTestImg/noSMALLPARKING.svg",
                    //   isShow: SMALLPARKING > 0,
                    //   title: "轿车车位",
                    // },
                    // {
                    //   url:
                    //     PACKING > 0
                    //       ? "https://eshangtech.com/minTestImg/PACKING.svg"
                    //       : "https://eshangtech.com/minTestImg/noPACKING.svg",
                    //   isShow: PACKING > 0,
                    //   title: "轿车车位",
                    // },
                    // {
                    //   url:
                    //     TRUCKPACKING > 0
                    //       ? "https://eshangtech.com/minTestImg/TRUCKPACKING.svg"
                    //       : "https://eshangtech.com/minTestImg/noTRUCKPACKING.svg",
                    //   isShow: TRUCKPACKING > 0,
                    // },
                    // {
                    //   url:
                    //     DANPACKING > 0
                    //       ? "https://eshangtech.com/minTestImg/DANPACKING.svg"
                    //       : "https://eshangtech.com/minTestImg/noDANPACKING.svg",
                    //   isShow: DANPACKING > 0,
                    // },
                    // // {
                    // //   url:
                    // //     DININGROOMCOUNT > 0
                    // //       ? "https://eshangtech.com/minTestImg/DININGROOMCOUNT.svg"
                    // //       : "https://eshangtech.com/minTestImg/noDININGROOMCOUNT.svg",
                    // //   isShow: DININGROOMCOUNT > 0,
                    // // },
                    // {
                    //   url:
                    //     HASBACKGROUNDRADIO > 0
                    //       ? "https://eshangtech.com/minTestImg/HASBACKGROUNDRADIO.svg"
                    //       : "https://eshangtech.com/minTestImg/noHASBACKGROUNDRADIO.svg",
                    //   isShow: HASBACKGROUNDRADIO > 0,
                    //   title: "便利店",
                    // },
                    // // {
                    // //   url:
                    // //     POINTCONTROLCOUNT > 0
                    // //       ? "https://eshangtech.com/minTestImg/POINTCONTROLCOUNT.svg"
                    // //       : "https://eshangtech.com/minTestImg/noPOINTCONTROLCOUNT.svg",
                    // //   isShow: POINTCONTROLCOUNT > 0,
                    // // },
                    // {
                    //   url:
                    //     TOILET_PAPER > 0
                    //       ? "https://eshangtech.com/minTestImg/TOILET_PAPER.svg"
                    //       : "https://eshangtech.com/minTestImg/noTOILET_PAPER.svg",
                    //   isShow: TOILET_PAPER > 0,
                    //   title: "厕纸巾",
                    // },
                    // {
                    //   url:
                    //     CHANGING_TABLE > 0
                    //       ? "https://eshangtech.com/minTestImg/CHANGING_TABLE.svg"
                    //       : "https://eshangtech.com/minTestImg/noCHANGING_TABLE.svg",
                    //   isShow: CHANGING_TABLE > 0,
                    //   title: "尿布台",
                    // },
                    // {
                    //   url:
                    //     NURSING_TABLE > 0
                    //       ? "https://eshangtech.com/minTestImg/NURSING_TABLE.svg"
                    //       : "https://eshangtech.com/minTestImg/noNURSING_TABLE.svg",
                    //   isShow: NURSING_TABLE > 0,
                    //   title: "哺乳桌",
                    // },
                    // {
                    //   url:
                    //     BABY_COT > 0
                    //       ? "https://eshangtech.com/minTestImg/BABY_COT.svg"
                    //       : "https://eshangtech.com/minTestImg/noBABY_COT.svg",
                    //   isShow: BABY_COT > 0,
                    //   title: "婴儿床",
                    // },
                  ]
                  : this.styleType === 2 || this.pageType === "mapList"
                    ? [
                      {
                        url:
                          HASPANTRY > 0 || HASWIFI > 0
                            ? "https://eshangtech.com/minTestImg/chargeImgNew/motherAndBaby.svg"
                            : "https://eshangtech.com/minTestImg/chargeImgNew/nomotherAndBaby.svg",
                        isShow: HASPANTRY > 0 || HASWIFI > 0,
                        title: "母婴室",
                      },
                      {
                        url:
                          HASPILOTLOUNGE > 0
                            ? "https://eshangtech.com/minTestImg/chargeImgNew/HASPILOTLOUNGE.svg"
                            : "https://eshangtech.com/minTestImg/chargeImgNew/noHASPILOTLOUNGE.svg",
                        isShow: HASPILOTLOUNGE > 0,
                        title: "司机之家",
                      },
                      {
                        url: HASCHILD
                          ? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
                          : "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
                        isShow: SMALLPARKING,
                        title: "车辆维修",
                      },
                      {
                        url:
                          DININGROOMCOUNT > 0
                            ? "https://eshangtech.com/minTestImg/chargeImgNew/DININGROOMCOUNT.svg"
                            : "https://eshangtech.com/minTestImg/chargeImgNew/noDININGROOMCOUNT.svg",
                        isShow: DININGROOMCOUNT > 0,
                        title: "餐饮",
                      },
                      {
                        url:
                          HASBACKGROUNDRADIO > 0
                            ? "https://eshangtech.com/minTestImg/chargeImgNew/HASBACKGROUNDRADIO.svg"
                            : "https://eshangtech.com/minTestImg/chargeImgNew/noHASBACKGROUNDRADIO.svg",
                        isShow: HASBACKGROUNDRADIO > 0,
                        title: "便利店",
                      },

                      {
                        url:
                          HASPANTRY > 0 || HASWIFI > 0
                            ? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
                            : "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
                        isShow: HASPANTRY > 0,
                        title: "卫生间",
                      },

                      {
                        url:
                          SMALLPARKING > 0 ||
                            PACKING > 0 ||
                            TRUCKPACKING > 0 ||
                            DANPACKING > 0
                            ? "https://eshangtech.com/minTestImg/chargeImgNew/SMALLPARKING.svg"
                            : "https://eshangtech.com/minTestImg/chargeImgNew/noSMALLPARKING.svg",
                        isShow:
                          SMALLPARKING > 0 ||
                          PACKING > 0 ||
                          TRUCKPACKING > 0 ||
                          DANPACKING > 0,
                        title: "停车场",
                      },
                      {
                        url:
                          REFUELINGGUN92 > 0 ||
                            REFUELINGGUN95 > 0 ||
                            REFUELINGGUN0 > 0
                            ? "https://eshangtech.com/minTestImg/chargeImgNew/REFUELINGGUN.svg"
                            : "https://eshangtech.com/minTestImg/chargeImgNew/noREFUELINGGUN.svg",
                        isShow:
                          REFUELINGGUN92 > 0 ||
                          REFUELINGGUN95 > 0 ||
                          REFUELINGGUN0 > 0,
                        title: "加油站",
                      },
                      {
                        url:
                          LIAUTOCHARGESum > 0 ||
                            STATEGRIDCHARGESum > 0 ||
                            GACENERGYCHARGESum > 0
                            ? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
                            : "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg",
                        isShow:
                          LIAUTOCHARGESum > 0 ||
                          STATEGRIDCHARGESum > 0 ||
                          GACENERGYCHARGESum > 0,
                        title: "充电桩",
                      },

                      {
                        url:
                          POINTCONTROLCOUNT > 0
                            ? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
                            : "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
                        isShow: POINTCONTROLCOUNT > 0,
                        title: "客房",
                      },
                      // {
                      //   url:
                      //     WASHERCOUNT > 0
                      //       ? "https://eshangtech.com/minTestImg/chargeImgNew/WASHERCOUNT.svg"
                      //       : "https://eshangtech.com/minTestImg/chargeImgNew/noWASHERCOUNT.svg",
                      //   isShow: WASHERCOUNT > 0,
                      //   title: "洗衣机",
                      // },
                      // {
                      //   url:
                      //     MICROWAVEOVEN > 0
                      //       ? "https://eshangtech.com/minTestImg/chargeImgNew/MICROWAVEOVEN.svg"
                      //       : "https://eshangtech.com/minTestImg/chargeImgNew/noMICROWAVEOVEN.svg",
                      //   isShow: MICROWAVEOVEN > 0,
                      //   title: "微波炉",
                      // },
                    ]
                    : [];
              // 理想的随机百分比
              let LXRate = this.handleGetRandomData(0, 60);
              // 阳光的随机百分比
              let SunRate = this.handleGetRandomData(0, 60);
              // 充换电的随机百分比
              let chargeAndReplaceRate = this.handleGetRandomData(0, 60);

              subItem.LXHave = Math.floor(subItem.LiXiang * (LXRate / 100));
              // subItem.SunHave = Math.floor(subItem.Sun * (SunRate / 100));
              subItem.chargeAndReplace = Math.floor(
                subItem.chargeAndReplaceSum * (chargeAndReplaceRate / 100)
              );
            });
          }
        });
      }

      // 高德key
      const key = "6e96a801bcea5290d3dcbf100358a6b3";
      // 起点经纬度
      const start =
        _this.pageType === "travelNavigation"
          ? `${this.startObj.longitude},${this.startObj.latitude}`
          : "";
      // 终点经纬度
      const end =
        _this.pageType === "travelNavigation"
          ? `${this.endObj.longitude},${this.endObj.latitude}`
          : "";
      // 拿到途径点的所有坐标
      let routePoint = "";

      // 下面的距离变成高速实际距离 不再是直线距离
      if (list && list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          item.noMore = true;
          if (_this.pageType === "travelNavigation") {
            let itemEnd = `${list[i].SERVERPART_X},${list[i].SERVERPART_Y}`;
            await new Promise((resolve) => {
              setTimeout(() => {
                resolve();
              }, 300);
            });
            const res = await new Promise((resolve, reject) => {
              uni.request({
                url: `https://restapi.amap.com/v3/direction/driving?key=${key}&origin=${start}&destination=${itemEnd}&strategy=20`,
                method: "GET",
                success(res) {
                  if (
                    res.data &&
                    res.data.route &&
                    res.data.route.paths &&
                    res.data.route.paths.length > 0
                  ) {
                    resolve(res.data.route.paths[0] || {});
                  } else {
                    resolve(undefined);
                  }
                },
              });
            });

            // if (res) {
            //   list[i].SERVERPART_DISTANCEGD = (
            //     Number(res.distance) / 1000
            //   ).toFixed(2);
            //   list[i].SERVERPART_DISTANCE = (
            //     Number(res.distance) / 1000
            //   ).toFixed(2);
            // }

            let chargeObj = this.handleHaveRandomData();
            list[i].chargeObj = chargeObj;
          }

          let LXSum = 0; // 理想
          let WLSum = 0; // 蔚来
          let SunSum = 0; // 新能源
          let chargeAndReplaceSum = 0; // 国网

          if (item.RegionInfo && item.RegionInfo.length > 0) {
            item.RegionInfo.forEach((item) => {
              chargeAndReplaceSum += item.STATEGRIDCHARGE; // 国网
              SunSum += item.GACENERGYCHARGE; // 新能源
              WLSum += item.OTHERCHAGRE; // 蔚来
              // LXSum += item.LIAUTOCHARGE; // 理想
            });
          }

          // 理想的随机百分比
          // let LXRate = this.handleGetRandomData(0, 60);
          // 蔚来的随机百分比
          let WLRate = this.handleGetRandomData(0, 60);
          // 阳光的随机百分比
          let SunRate = this.handleGetRandomData(0, 60);
          // 充换电的随机百分比
          let chargeAndReplaceRate = this.handleGetRandomData(0, 60);

          // item.LXDetail = {
          //   LXEmpty: Math.floor(LXSum * (LXRate / 100)),
          //   LXSum: LXSum,
          // };
          item.WLDetail = {
            WLEmpty: Math.floor(WLSum * (WLRate / 100)),
            WLSum: WLSum,
          };
          // item.SunDetail = {
          //   SunEmpty: Math.floor(SunSum * (SunRate / 100)),
          //   SunSum: SunSum,
          // };
          // item.GWDetail = {
          //   GWEmpty: Math.floor(
          //     chargeAndReplaceSum * (chargeAndReplaceRate / 100)
          //   ),
          //   GWSum: chargeAndReplaceSum,
          // };
        }
      }

      // 根据当前位置到目的地的位置 排序
      for (let i = 0; i < list.length - 1; i++) {
        // 外层循环控制排序趟数
        for (let j = 0; j < list.length - i - 1; j++) {
          // 内层循环控制每趟排序多少次
          // 如果当前元素大于下一个元素,则交换它们
          if (
            Number(list[j].SERVERPART_DISTANCE || 0) >
            Number(list[j + 1].SERVERPART_DISTANCE || 0)
          ) {
            let temp = list[j];
            list[j] = list[j + 1];
            list[j + 1] = temp;
          }
        }
      }

      if (this.showStore) {
        list = await this.handleGetListStore(list);
      }
      _this.detailObj = {
        // distanceNumber: distance,
        // hour: timeObj.hourStr,
        // minutes: timeObj.minuteStr,
        // tolls: tolls,
        // haveProgress: ((smoothAcount / allAcount) * 100).toFixed(2),
        servicePart: list,
      };
      // _this.handleGetChargeData(list, ["新桥", "丰乐", "肥东"]);
      // 理想
      let newRes = [];
      // newRes = await _this.handleGetChargeData(list, nameList);
      // // 交控
      // newRes = await _this.handleTrafficControlData(newRes, nameList);
      // // 国网
      // newRes = await _this.handleGetStateGrid(newRes, nameList);
      newRes = await _this.handleGetChargeNewData(list, serverpartIdList);

      if (this.pageType === "mapIndex") {
        this.$emit("allChargeData", { res: newRes });
      }

      this.detailObj.servicePart = newRes;
      // uni.hideLoading();
      this.isLoading = false;
    },
    // 新的请求充电的方法
    async handleGetChargeNewData(serviceList, idList) {
      const data = await this.$api.$javaPost("/charge/stationinfo/queryByIds", {
        ids: idList,
        brands: [],
      });
      // 理想
      let LXData = [];
      // 交控
      let JKData = [];
      // 国网
      let GWData = [];

      if (data && data.length > 0) {
        data.forEach((item) => {
          if (item.brand === "理想") {
            LXData.push(item);
          } else if (item.brand === "交控") {
            JKData.push(item);
          } else if (item.brand === "国网") {
            GWData.push(item);
          }
        });
      }
      if (serviceList && serviceList.length > 0) {
        serviceList.forEach((item) => {
          let LXInfoList = [];
          let JKInfoList = [];
          let GWInfoList = [];
          // 理想
          let LXRes = [];
          if (LXData && LXData.length > 0) {
            let thisServiceRes = LXData.filter(
              (filterItem) => filterItem.serverpartId === item.SERVERPART_ID
            );
            if (thisServiceRes && thisServiceRes.length > 0) {
              thisServiceRes.forEach((subItem) => {
                if (subItem.equipments && subItem.equipments.length > 0) {
                  subItem.equipments.forEach((thirdItem) => {
                    if (
                      thirdItem.connectors &&
                      thirdItem.connectors.length > 0
                    ) {
                      thirdItem.connectors.forEach((fourthItem) => {
                        LXRes.push(fourthItem);
                        LXInfoList.push({
                          ...fourthItem,
                          Status: fourthItem.status,
                          Power: Number(fourthItem.powerMax),
                          ConnectorID: fourthItem.connectorCode,
                          ConnectorType: Number(fourthItem.connectorType),
                          NationalStandard: Number(fourthItem.national),
                          VoltageLowerLimits: Number(fourthItem.voltageLimit),
                          VoltageUpperLimits: Number(fourthItem.voltageMax),
                        });
                      });
                    }
                  });
                }
              });
            }
          }
          // 空多少个
          let LXEmpty = 0;
          // 一共多少个
          let LXSum = 0;
          if (LXRes && LXRes.length > 0) {
            LXRes.forEach((subItem) => {
              if (subItem.status !== 3) {
                LXEmpty += 1;
              }
              LXSum += 1;
            });
          }
          item.LXDetail = {
            LXSum: LXSum,
            LXEmpty: LXEmpty,
          };

          // 交控
          let JKRes = [];
          if (JKData && JKData.length > 0) {
            let thisServiceRes = JKData.filter(
              (filterItem) => filterItem.serverpartId === item.SERVERPART_ID
            );
            if (thisServiceRes && thisServiceRes.length > 0) {
              thisServiceRes.forEach((subItem) => {
                if (subItem.equipments && subItem.equipments.length > 0) {
                  subItem.equipments.forEach((thirdItem) => {
                    if (
                      thirdItem.connectors &&
                      thirdItem.connectors.length > 0
                    ) {
                      thirdItem.connectors.forEach((fourthItem) => {
                        JKRes.push(fourthItem);
                        JKInfoList.push({
                          ...fourthItem,
                          Status: fourthItem.status,
                          Power: Number(fourthItem.powerMax),
                          ConnectorID: fourthItem.connectorCode,
                          ConnectorType: Number(fourthItem.connectorType),
                          NationalStandard: Number(fourthItem.national),
                          VoltageLowerLimits: Number(fourthItem.voltageLimit),
                          VoltageUpperLimits: Number(fourthItem.voltageMax),
                        });
                      });
                    }
                  });
                }
              });
            }
          }
          // 空多少个
          let JKEmpty = 0;
          // 一共多少个
          let JKSum = 0;
          if (JKRes && JKRes.length > 0) {
            JKRes.forEach((subItem) => {
              if (subItem.status !== 3) {
                JKEmpty += 1;
              }
              JKSum += 1;
            });
          }
          item.JKDetail = {
            JKEmpty: JKEmpty,
            JKSum: JKSum,
          };

          // 国网
          let GWRes = [];
          if (GWData && GWData.length > 0) {
            let thisServiceRes = GWData.filter(
              (filterItem) => filterItem.serverpartId === item.SERVERPART_ID
            );

            if (thisServiceRes && thisServiceRes.length > 0) {
              thisServiceRes.forEach((subItem) => {
                if (subItem.equipments && subItem.equipments.length > 0) {
                  subItem.equipments.forEach((thirdItem) => {
                    if (
                      thirdItem.connectors &&
                      thirdItem.connectors.length > 0
                    ) {
                      thirdItem.connectors.forEach((fourthItem) => {
                        GWRes.push(fourthItem);
                        GWInfoList.push({
                          ...fourthItem,
                          Status: fourthItem.status,
                          Power: Number(fourthItem.powerMax),
                          ConnectorID: fourthItem.connectorCode,
                          ConnectorType: Number(fourthItem.connectorType),
                          NationalStandard: Number(fourthItem.national),
                          VoltageLowerLimits: Number(fourthItem.voltageLimit),
                          VoltageUpperLimits: Number(fourthItem.voltageMax),
                        });
                      });
                    }
                  });
                }
              });
            }
          }
          // 空多少个
          let GWEmpty = 0;
          // 一共多少个
          let GWSum = 0;
          if (GWRes && GWRes.length > 0) {
            GWRes.forEach((subItem) => {
              if (subItem.status !== 3) {
                GWEmpty += 1;
              }
              GWSum += 1;
            });
          }
          item.GWDetail = {
            GWEmpty: GWEmpty,
            GWSum: GWSum,
          };

          // 蔚来
          // 空多少个
          let WLEmpty = 0;
          // 一共多少个
          let WLSum = 0;

          item.WLDetail = {
            WLEmpty: WLEmpty,
            WLSum: WLSum,
          };

          item.allChargeDetail = {
            allSum:
              Number(
                item.LXDetail && item.LXDetail.LXSum ? item.LXDetail.LXSum : 0
              ) +
              Number(item.WLDetail.WLSum || 0) +
              Number(item.JKDetail.JKSum || 0) +
              Number(item.GWDetail.GWSum || 0),
            empty:
              Number(
                item.LXDetail && item.LXDetail.LXEmpty
                  ? item.LXDetail.LXEmpty
                  : 0
              ) +
              Number(item.WLDetail.WLEmpty || 0) +
              Number(item.JKDetail.JKEmpty || 0) +
              Number(item.GWDetail.GWEmpty || 0),
          };

          item.LXInfoList = LXInfoList;
          item.JKInfoList = JKInfoList;
          item.GWInfoList = GWInfoList;
        });
      }

      return serviceList;
    },
    // 给数组加上他的精选商家
    async handleGetListStore(list) {
      let heightList = [];
      for (let i = 0; i < list.length; i++) {
        const data = await this.$api.getCoop({
          action_type: "GetRcmContent",
          rcmtagKey: "HOME_SELLER",
          serverpartId: list[i].SERVERPART_ID,
          provinceCode: "340000",
        });

        list[i].storeList = data.Data.List;
        if (data.Data.List && data.Data.List.length > 0) {
          heightList.push(642);
        } else {
          heightList.push(260);
        }

        this.swiperHeight = heightList;
      }
      return list;
    },
    // 随机给充电桩数据
    handleHaveRandomData() {
      // 理想当前充电的
      let LXHave = 0;
      // 理想的全部充电的
      let LXSum = 0;
      // 阳光当前充电的
      let SunHave = 0;
      // 阳光全部充电的
      let SunSum = 0;
      // 充换电当前充电的
      let chargeAndReplace = 0;
      // 充换电全部充电的
      let chargeAndReplaceSum = 0;

      // 给理想随机 总数
      LXSum = this.handleGetRandomData(15, 20);
      // 给阳光随机 总数
      SunSum = this.handleGetRandomData(10, 17);
      // 给充换电随机 总数
      chargeAndReplaceSum = this.handleGetRandomData(5, 10);

      // 理想的随机百分比
      let LXRate = this.handleGetRandomData(0, 60);
      // 阳光的随机百分比
      let SunRate = this.handleGetRandomData(0, 60);
      // 充换电的随机百分比
      let chargeAndReplaceRate = this.handleGetRandomData(0, 60);

      LXHave = Math.floor(LXSum * (LXRate / 100));
      SunHave = Math.floor(SunSum * (SunRate / 100));
      chargeAndReplace = Math.floor(
        chargeAndReplaceSum * (chargeAndReplaceRate / 100)
      );

      return {
        LXHave: LXHave,
        LXSum: LXSum,
        SunHave: SunHave,
        SunSum: SunSum,
        chargeAndReplace: chargeAndReplace,
        chargeAndReplaceSum: chargeAndReplaceSum,
      };
    },
    // 拿到充电的理想数据
    async handleGetChargeData(serviceList, nameList) {
      // uni.showLoading({
      //   title: "查询理想设备信息...",
      // });

      const LiOperatorSecret = "bGMyYwJFl17BqwD3";
      const LiOperCode = "MA7EBGWBX";
      const LiSigSecret = "V7I6yvHvEk8STt0P";
      const LiDataSecret = "P2S3WjoLv3rqL0hn";
      const LiIV = "ZRlwcrx7k63ihzXF";

      const OperatorID = "78109626X"; //  组织机构代码（OperatorID）
      const OperatorSecret = "Xh2vLq1Pz9zF7wK3"; // Xh2vLq1Pz9zF7wK3 运营商秘钥（OperatorSecret）
      const SigSecret = "bT8sWn2Aq0Jv6GvD"; // bT8sWn2Aq0Jv6GvD 签名秘钥（SigSecret）
      const DataSecret = "fK7YzAq1R8Vp9hL0"; // fK7YzAq1R8Vp9hL0 数据加密秘钥（DataSecret）
      const DataSecretIV = "z3XnWl8FQ2pTm5Ba"; // z3XnWl8FQ2pTm5Ba 初始化向量（DataSecretIV）

      let tokenData = await this.$testApi.$post("/send", {
        url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_token",

        data: JSON.stringify({
          OperatorID: OperatorID,
          OperatorSecret: LiOperatorSecret,
        }),
        id: 0,
        seq: "001",
        token: "",
      });
      // token的实际值
      let token = tokenData.data.Data.AccessToken;

      // 拿到所有站点的数据
      const allStationList = await this.$testApi.$post("/send", {
        url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_stations_info",
        data: JSON.stringify({
          PageNo: 1,
          PageSize: 999,
        }),
        id: 0,
        seq: "002",
        token: token,
      });
      let stationList = allStationList.data.Data.StationInfos;
      // 判断 因为 理想的数据 是一页20个 20个的返回的 所以需要我们去遍历 拿到 他的全部数据
      // 那么就需要 看看这次有多少页 然后遍历去拿
      // 值为多少 就说明还要遍历  sum - 1次
      let sum = allStationList.data.Data.PageCount;
      let remainData = [];
      if (sum > 1) {
        remainData = await this.handleTraverseLXAllData(sum, token);
        stationList = stationList.concat(remainData);
      }

      if (this.pageType === "mapIndex") {
        this.$emit("allLXDataList", { res: stationList });
      }

      let newStationList = [];
      if (stationList && stationList.length > 0) {
        stationList.forEach((item) => {
          if (item.Address) {
            if (nameList && nameList.length > 0) {
              nameList.forEach((subItem) => {
                if (item.Address.indexOf(subItem) !== -1) {
                  newStationList.push(item);
                }
              });
            }
          }
        });
      }

      // 这段是和自己最近的三个服务区的 理想充电筛出来的数据

      let stationIds = [];
      // 创建吧id当key的对象
      let stationObj = {};
      // 拿到充电站的id数组 去查里面的充电枪详情
      if (newStationList && newStationList.length > 0) {
        newStationList.forEach((item) => {
          stationIds.push(item.StationID);
          stationObj[item.StationID] = item;
        });
      }

      // 查询具体状态
      if (stationIds && stationIds.length > 0) {
        const stationInfo = await this.$testApi.$post("/send", {
          url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_station_status",
          data: JSON.stringify({
            StationIDs: stationIds,
          }),
          id: 0,
          seq: `00${sum + 2}`,
          token: token,
        });
        let statusList = stationInfo.data.Data.StationStatusInfos;
        if (statusList && statusList.length > 0) {
          statusList.forEach((item) => {
            if (stationObj[item.StationID]) {
              stationObj[item.StationID].statusList = item.ConnectorStatusInfos;
            }
          });
        }
      }

      // 带有状态的充电站列表格式
      let haveStationList = [];
      if (stationObj) {
        for (let key in stationObj) {
          haveStationList.push(stationObj[key]);
        }
      }

      if (serviceList && serviceList.length > 0) {
        let newRes = JSON.parse(JSON.stringify(serviceList));
        newRes.forEach((item) => {
          let LXCharge = [];
          let LXInfoList = [];
          let sortName = item.SERVERPART_NAME.split("服务区")[0];

          if (haveStationList && haveStationList.length > 0) {
            haveStationList.forEach((subItem) => {
              if (subItem.Address.indexOf(sortName) !== -1) {
                LXCharge.push(...subItem.statusList);
                if (
                  subItem.EquipmentInfos &&
                  subItem.EquipmentInfos.length > 0
                ) {
                  subItem.EquipmentInfos.forEach((thirdItem) => {
                    if (
                      thirdItem.ConnectorInfos &&
                      thirdItem.ConnectorInfos.length > 0
                    ) {
                      thirdItem.ConnectorInfos.forEach((fourthItem) => {
                        LXInfoList.push(fourthItem);
                      });
                    }
                  });
                }
              }
            });

            // 空多少个
            let LXEmpty = 0;
            // 一共多少个
            let LXSum = 0;

            if (LXCharge && LXCharge.length > 0) {
              LXCharge.forEach((subItem) => {
                if (subItem.Status !== 3) {
                  LXEmpty += 1;
                }
                LXSum += 1;
              });
            }

            item.LXDetail = {
              LXSum: LXSum,
              LXEmpty: LXEmpty,
            };

            if (this.styleType === 2 || this.pageType === "mapList") {
              item.allChargeDetail = {
                allSum:
                  Number(LXSum || 0) +
                  Number(item.WLDetail.WLSum || 0) +
                  Number(
                    item.JKDetail && item.JKDetail.JKSum
                      ? item.JKDetail.JKSum
                      : 0
                  ) +
                  Number(
                    item.GWDetail && item.GWDetail.GWSum
                      ? item.GWDetail.GWSum
                      : 0
                  ),
                empty:
                  Number(LXEmpty || 0) +
                  Number(item.WLDetail.WLEmpty || 0) +
                  Number(
                    item.JKDetail && item.JKDetail.JKEmpty
                      ? item.JKDetail.JKEmpty
                      : 0
                  ) +
                  Number(
                    item.GWDetail && item.GWDetail.GWEmpty
                      ? item.GWDetail.GWEmpty
                      : 0
                  ),
              };
            }

            if (LXInfoList && LXInfoList.length > 0) {
              LXInfoList.forEach((item) => {
                if (LXCharge && LXCharge.length > 0) {
                  LXCharge.forEach((subItem) => {
                    if (item.ConnectorID === subItem.ConnectorID) {
                      item.ParkStatus = subItem.ParkStatus;
                      item.Status = subItem.Status;
                    }
                  });
                }
              });
            }
            item.LXInfoList = LXInfoList;

            item.LXCharge = LXCharge;
          }
        });

        return newRes;
        // this.detailObj.servicePart = newRes;
        // this.$forceUpdate();
      }
      // uni.hideLoading();
    },

    // 拿到交控的充电数据
    async handleTrafficControlData(list, nameList) {
      const tokenData = await new Promise((resolve, reject) => {
        uni.request({
          url: `https://wmgs.anhui-expressway.net/token/generate?client=4d1cf0d1-3bfc-4c91-b9ac-3a3f4ce7a4b5&secret=fEoBj6DFSKmz2fjgIauQkg`,
          method: "GET",
          success(res) {
            resolve(res);
          },
        });
      });
      let token = tokenData.data.data;

      // 拿服务区数据 知道服务区id对应的服务区名称
      const serviceData = await new Promise((resolve, reject) => {
        uni.request({
          url: `https://wmgs.anhui-expressway.net/api/ydcx/v1/v1/jt/share/ext_service_areas`,
          method: "GET",
          data: {
            pageSize: 999,
            pageNum: 1,
            beginDate: "2000-01-01",
            endDate: "2025-03-20",
          },
          header: {
            Authorization: `Bearer ${token}`,
            "content-type": "application/x-www-form-urlencoded",
          },
          success(res) {
            resolve(res);
          },
        });
      });
      let serviceList = serviceData.data.data.records;
      let serviceObj = {}; // 枚举值 value: label
      if (serviceList && serviceList.length > 0) {
        serviceList.forEach((item) => {
          serviceObj[item.code] = item.name;
        });
      }

      // 服务区充电桩数据
      const chargData = await new Promise((resolve, reject) => {
        uni.request({
          url: `https://wmgs.anhui-expressway.net/api/ydcx/v1/service/evcharging/connector/list`,
          method: "GET",
          header: {
            Authorization: `Bearer ${token}`,
            "content-type": "application/x-www-form-urlencoded",
          },
          success(res) {
            resolve(res);
          },
        });
      });
      let chargInfoList = chargData.data.data;
      // chargInfoList 数据 没有服务区名称 根据服务区code 拼上名称
      if (chargInfoList && chargInfoList.length > 0) {
        chargInfoList.forEach((item) => {
          item.serviceName =
            item.serviceCode && serviceObj ? serviceObj[item.serviceCode] : "";
        });
      }

      // 拿到现在查询的这几个服务区数据
      // 现在查询的几个服务区的数据
      let nowServiceList = [];

      if (this.pageType === "mapIndex") {
        const chargPoistionData = await new Promise((resolve, reject) => {
          uni.request({
            url: `https://wmgs.anhui-expressway.net/api/ydcx/v1/service-area/charge/status`,
            method: "GET",
            header: {
              Authorization: `Bearer ${token}`,
              "content-type": "application/x-www-form-urlencoded",
            },
            success(res) {
              resolve(res);
            },
          });
        });

        this.$emit("allJKDataList", { res: chargPoistionData.data.data });
      }

      if (chargInfoList && chargInfoList.length > 0) {
        chargInfoList.forEach((item) => {
          let name = item.serviceName.split("服务区")[0];
          if (nameList.indexOf(name) !== -1) {
            nowServiceList.push(item);
          }
        });
      }

      // nowServiceListssss 就是当前查询的这几个服务区里面的 充电桩数据
      // 接下来就是将它的数据 放到我们显示的数组里面
      if (list && list.length > 0) {
        let newRes = JSON.parse(JSON.stringify(list));
        newRes.forEach((item) => {
          let JKCharge = [];
          let JKInfoList = [];
          let sortName = item.SERVERPART_NAME.split("服务区")[0];

          if (nowServiceList && nowServiceList.length > 0) {
            nowServiceList.forEach((subItem) => {
              if (subItem.serviceName.indexOf(sortName) !== -1) {
                JKInfoList.push({
                  ...subItem,
                  Status: subItem.status,
                  Power: subItem.power,
                  ConnectorID: subItem.equipmentID,
                  VoltageLowerLimits: subItem.voltage_lower_limits,
                  VoltageUpperLimits: subItem.voltage_upper_limits,
                  ConnectorType: subItem.connector_type,
                  NationalStandard: subItem.national_standard,
                });
                JKCharge.push({
                  Status: subItem.status,
                  ConnectorId: subItem.connectorId,
                });
              }
            });
          }

          // 空多少个
          let JKEmpty = 0;
          // 一共多少个
          let JKSum = 0;

          if (JKCharge && JKCharge.length > 0) {
            JKCharge.forEach((subItem) => {
              if (subItem.Status !== 3) {
                JKEmpty += 1;
              }
              JKSum += 1;
            });
          }
          item.JKDetail = {
            JKSum: JKSum,
            JKEmpty: JKEmpty,
          };
          if (this.styleType === 2 || this.pageType === "mapList") {
            item.allChargeDetail = {
              allSum:
                Number(
                  item.LXDetail && item.LXDetail.LXSum ? item.LXDetail.LXSum : 0
                ) +
                Number(item.WLDetail.WLSum || 0) +
                Number(JKSum || 0) +
                Number(
                  item.GWDetail && item.GWDetail.GWSum ? item.GWDetail.GWSum : 0
                ),
              empty:
                Number(
                  item.LXDetail && item.LXDetail.LXEmpty
                    ? item.LXDetail.LXEmpty
                    : 0
                ) +
                Number(item.WLDetail.WLEmpty || 0) +
                Number(JKEmpty || 0) +
                Number(
                  item.GWDetail && item.GWDetail.GWEmpty
                    ? item.GWDetail.GWEmpty
                    : 0
                ),
            };
          }
          item.JKInfoList = JKInfoList;
          item.JKCharge = JKCharge;
        });

        return newRes;

        // this.detailObj.servicePart = newRes;
        // this.$forceUpdate();
      }
    },

    // 拿到充换电数据
    async handleGetStateGrid(list, nameList) {
      const LiOperatorSecret = "tDbBTUSok8TCTjGS";
      const LiOperCode = "MA8PUMF89";
      const LiSigSecret = "PSyM5DrXRjM06a8C";
      const LiDataSecret = "tcqvnw1msfDEtVj9";
      const LiIV = "Uj3F6NWAov6j30tA";

      const OperatorID = "78109626X"; //  组织机构代码（OperatorID）
      const OperatorSecret = "Xh2vLq1Pz9zF7wK3"; // Xh2vLq1Pz9zF7wK3 运营商秘钥（OperatorSecret）
      const SigSecret = "bT8sWn2Aq0Jv6GvD"; // bT8sWn2Aq0Jv6GvD 签名秘钥（SigSecret）
      const DataSecret = "fK7YzAq1R8Vp9hL0"; // fK7YzAq1R8Vp9hL0 数据加密秘钥（DataSecret）
      const DataSecretIV = "z3XnWl8FQ2pTm5Ba"; // z3XnWl8FQ2pTm5Ba 初始化向量（DataSecretIV）

      let newNameList = [];
      if (nameList && nameList.length > 0) {
        nameList.forEach((item) => {
          newNameList.push(`${item}服务区`);
        });
      }

      // $javaPost
      let chargeData = await this.$api.$javaGet(
        "/prod-api/charge/chargefactory/cachemany",
        {
          key: "ChongHuanDian",
          id: 1,
          addrs: newNameList.toString(),
        }
      );
      let newApiRes = JSON.parse(chargeData.data);

      // let url = `https://dipper.in.ah.cn/jgpt-gateway/third`;

      // let tokenData = await this.$testApi.$post("/send", {
      //   url: `${url}/supervise/v1.0.0/query_token`,
      //   data: JSON.stringify({
      //     PlatformID: OperatorID,
      //     PlatformSecret: OperatorSecret,
      //   }),
      //   id: 2,
      //   seq: "001",
      //   token: "",
      // });
      // let token = tokenData.data.Data.AccessToken;

      // let allStationList = [];

      // let GWDataList = uni.getStorageSync("GWDataList");
      // let dataTime = new Date(GWDataList.timestamp || 0).getTime();
      // let nowTime = new Date().getTime();

      // // 小于15分钟的时候 读缓存  大于15分钟 就正常调用
      // if (GWDataList && nowTime < dataTime + 1000 * 60 * 15) {
      //   allStationList = GWDataList;
      //   this.handleGetGWAllData(token);
      // } else {
      //   allStationList = await this.$testApi.$post("/send", {
      //     url: `${url}/supervise/v1.0.0/query_supervise_stations_info`,
      //     data: JSON.stringify({
      //       PageNo: 1,
      //       PageSize: 999,
      //     }),
      //     id: 2,
      //     seq: "002",
      //     token: token,
      //   });
      //   uni.setStorageSync("GWDataList", allStationList);
      // }

      // // 老的
      // let allStationDataList = allStationList.data.Data.StationInfos;

      // 新的
      let allStationDataList = newApiRes.data.StationInfos;

      if (this.pageType === "mapIndex") {
        this.$emit("allGWDataList", { res: allStationDataList });
      }
      let allnewStationList = [];

      if (allStationDataList && allStationDataList.length > 0) {
        allStationDataList.forEach((item) => {
          if (nameList && nameList.length > 0) {
            nameList.forEach((subItem) => {
              let sortName = subItem.split("服务区")[0];
              if (
                item.Address.indexOf(sortName) !== -1 &&
                item.Address.indexOf("方向") !== -1
              ) {
                allnewStationList.push(item);
              }
            });
          }
        });
      }
      let newStationList = [];
      if (allnewStationList && allnewStationList.length > 0) {
        allnewStationList.forEach((item) => {
          if (item.StationClassification === 1) {
            newStationList.push(item);
          }
        });
      }

      // 当前这几个服务区的全部充电数据 按照服务区分类
      if (list && list.length > 0) {
        let newRes = JSON.parse(JSON.stringify(list));
        newRes.forEach((item) => {
          let GWCharge = [];
          let GWInfoList = [];
          let thirdList = [];
          let sortName = item.SERVERPART_NAME.split("服务区")[0];

          if (newStationList && newStationList.length > 0) {
            newStationList.forEach((subItem) => {
              if (
                subItem.Address.indexOf(sortName) !== -1 &&
                subItem.Address.indexOf("方向") !== -1
              ) {
                if (
                  subItem.EquipmentInfos &&
                  subItem.EquipmentInfos.length > 0
                ) {
                  subItem.EquipmentInfos.forEach((thirdItem) => {
                    thirdList.push(subItem);
                    // 不知道为什么  还有一层  ConnectorInfos  里面的数据更详细 就用这个匹配了
                    if (
                      thirdItem.ConnectorInfos &&
                      thirdItem.ConnectorInfos.length > 0
                    ) {
                      thirdItem.ConnectorInfos.forEach((fourthItem) => {
                        GWInfoList.push({
                          ...fourthItem,
                          Status: fourthItem.Status,
                          Power: fourthItem.Power,
                          ConnectorID: fourthItem.ConnectorID,
                          VoltageLowerLimits: fourthItem.VoltageLowerLimits,
                          VoltageUpperLimits: fourthItem.VoltageUpperLimits,
                          ConnectorType: fourthItem.ConnectorType,
                          NationalStandard: fourthItem.NationalStandard,
                        });

                        GWCharge.push({
                          Status: fourthItem.Status,
                          ConnectorId: fourthItem.ConnectorID,
                        });
                      });
                    }
                  });
                }
              }
            });
          }

          // 空多少个
          let GWEmpty = 0;
          // 一共多少个
          let GWSum = 0;

          if (GWCharge && GWCharge.length > 0) {
            GWCharge.forEach((subItem) => {
              if (subItem.Status !== 3) {
                GWEmpty += 1;
              }
              GWSum += 1;
            });
          }

          item.GWDetail = {
            GWSum: GWSum,
            GWEmpty: GWEmpty,
          };
          if (this.styleType === 2 || this.pageType === "mapList") {
            item.allChargeDetail = {
              allSum:
                Number(
                  item.LXDetail && item.LXDetail.LXSum ? item.LXDetail.LXSum : 0
                ) +
                Number(item.WLDetail.WLSum || 0) +
                Number(item.JKDetail.JKSum || 0) +
                Number(item.GWDetail.GWSum || 0),
              empty:
                Number(
                  item.LXDetail && item.LXDetail.LXEmpty
                    ? item.LXDetail.LXEmpty
                    : 0
                ) +
                Number(item.WLDetail.WLEmpty || 0) +
                Number(item.JKDetail.JKEmpty || 0) +
                Number(item.GWDetail.GWEmpty || 0),
            };
          }
          item.GWInfoList = GWInfoList;
          item.GWCharge = GWCharge;
        });

        return newRes;
        // this.detailObj.servicePart = newRes;
        // this.$forceUpdate();
      }
    },

    // 输出拿到国网的方法
    handleGetGWAllData(token) {
      let url = `https://dipper.in.ah.cn/jgpt-gateway/third`;

      this.$testApi
        .$post("/send", {
          url: `${url}/supervise/v1.0.0/query_supervise_stations_info`,
          data: JSON.stringify({
            PageNo: 1,
            PageSize: 999,
          }),
          id: 2,
          seq: "002",
          token: token,
        })
        .then((res) => {
          uni.setStorageSync("GWDataList", res);
        });
    },
    // 生成随机数
    handleGetRandomData(max, min) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    // 跳转地图服务区详情
    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/shopDetail/index" });
        } else {
          uni.navigateBack({
            delta: 1,
          });
        }
        return;
      }

      uni.navigateTo({
        url: `/pages/serviceDetail/index?id=${id}&come=chargeBox`,
      });
      // uni.navigateTo({
      //   url: `/pages/serviceDetail/mapDetail/index?servicePartId=${id}`,
      // });
    },
    // 打开对应的悬浮框
    handleOpenDetail(obj) {
      this.nowCurrentObj = obj;
      this.chargeDetailList = obj.LXInfoList;

      this.popupTab = [
        {
          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.$refs.popup.open("bottom");
      this.isShow = true;
    },
    // 关闭悬浮框
    handleClosePopup() {
      this.$refs.popup.close();
      this.isShow = false;
      this.nowCurrentObj = {};
      this.chargeDetailList = [];
      this.popupTab = [
        { label: "理想", value: 1 },
        { label: "蔚来", value: 2 },
        { label: "交控新能源", value: 3 },
        { label: "国网", value: 4 },
      ];
      this.selectPopup = 1;
    },
    handleChangeSelectPopup(value) {
      this.selectPopup = value;
      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 = [];
      }
    },
  },
};
</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;

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

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

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

        .detailBox {
          width: calc(100% - 164rpx);
          // height: 144rpx;
          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: "PingFang SC", "Noto Sans CJK SC",
                  "Microsoft YaHei", sans-serif;
                font-weight: 400;
                font-size: 28rpx;
                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 {
              .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;
                  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: flex;
              flex-wrap: nowrap;
              overflow-x: auto;
              margin-top: 16rpx;

              .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: 12rpx;
              }
            }

            // .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% / 6);
          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;
          }
        }
      }

      .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: space-between;

          .chargeItem {
            display: flex;
            flex-direction: column;
            align-items: center;

            .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%;
        box-sizing: border-box;
        padding: 18rpx 24rpx 22rpx;
        background: #f8f8f8;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

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

          .chargeIcon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 16rpx;
            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;
      }
    }

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

      .tabItem {
        width: calc((100% - 72rpx) / 4);
        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 0;
        box-sizing: border-box;
      }

      .selectTabItem {
        // 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;
      }

      .selectTabItem::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);

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

        .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;
    /* 淡入淡出动画（可选） */
  }
}
</style>
