<template>
  <view class="main">
    <view :class="showListPage ? 'mapBox moveLeft' : 'mapBox'" v-show="!showListPage">

      <!-- <view class="topBox">
        <view class="topRight">
          <image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/searchIcon.png" />
          <input style="margin-left: 16rpx; font-size: 28rpx" placeholder="请输入服务区" v-model="searchText"
            @confirm="handleConfirm" />
        </view>

        <view class="listBox" @click="handleChangePageType">
          <image class="listIcon" src="/static/home/listIcon.svg" />
          <text class="text">列表</text>
        </view>
      </view> -->

      <cover-view v-if="loginType !== 'min'" style="width: 100vw; height: calc(100vh - 606rpx);position: relative;"
        v-show="showMap">
        <map id="myMap" :longitude="longitude" :latitude="latitude" class="map" :scale="17" :show-location="true"
          :markers="markers" :enable-scroll="!isDragging" @markertap="handleClickMarker"></map>

        <cover-view class="statusBox" style="z-index: 9999;">
          <!-- 国网 -->
          <cover-view class="statusItem" style="margin: 0 16rpx;">
            <cover-view class="colorBox" style="background-color: #ff9929"></cover-view>
            <cover-view class="brandCharge">国网</cover-view>
            <cover-view class="empty">空</cover-view>
            <cover-view class="valueBox">
              <cover-view class="emptyValue">{{
                chargeData && chargeData.GWDetail
                  ? chargeData.GWDetail.GWEmpty
                  : 0
              }}
              </cover-view>
              <cover-view class="sum">/{{
                chargeData && chargeData.GWDetail
                  ? chargeData.GWDetail.GWSum
                  : 0
              }}</cover-view>
            </cover-view>
          </cover-view>

          <!-- 理想 -->
          <cover-view class="statusItem" style="margin: 0 16rpx;">
            <cover-view class="colorBox" style="background-color: #d81e06"></cover-view>

            <cover-view class="brandCharge">理想</cover-view>
            <cover-view class="empty">空</cover-view>
            <cover-view class="valueBox">
              <cover-view class="emptyValue">{{
                chargeData && chargeData.LXDetail
                  ? chargeData.LXDetail.LXEmpty
                  : 0
              }}</cover-view>
              <cover-view class="sum">/{{
                chargeData && chargeData.LXDetail
                  ? chargeData.LXDetail.LXSum
                  : 0
              }}</cover-view>
            </cover-view>
          </cover-view>

          <!-- 蔚来 -->
          <cover-view class="statusItem">
            <cover-view class="colorBox" style="background-color: #f4ea2a;margin: 0 16rpx;"></cover-view>
            <cover-view class="brandCharge">蔚来</cover-view>
            <cover-view class="empty">空</cover-view>
            <cover-view class="valueBox">
              <cover-view class="emptyValue">{{
                chargeData && chargeData.WLDetail
                  ? chargeData.WLDetail.WLEmpty
                    ? chargeData.WLDetail.WLEmpty
                    : 0
                  : 0
              }}</cover-view>
              <cover-view class="sum">/{{
                chargeData && chargeData.WLDetail
                  ? chargeData.WLDetail.WLSum
                    ? chargeData.WLDetail.WLSum
                    : 0
                  : 0
              }}</cover-view>
            </cover-view>
          </cover-view>

          <!-- 交控 -->
          <cover-view class="statusItem" style="margin: 0 16rpx;">
            <cover-view class="colorBox" style="background-color: #57d16e"></cover-view>
            <cover-view class="brandCharge">交控新能源</cover-view>
            <cover-view class="empty">空</cover-view>
            <cover-view class="valueBox">
              <cover-view class="emptyValue">{{
                chargeData && chargeData.JKDetail
                  ? chargeData.JKDetail.JKEmpty
                  : 0
              }}
              </cover-view>
              <cover-view class="sum">/{{
                chargeData && chargeData.JKDetail
                  ? chargeData.JKDetail.JKSum
                  : 0
              }}</cover-view>
            </cover-view>
          </cover-view>
        </cover-view>

      </cover-view>

      <view v-else style="width: 100vw; height: calc(100vh - 606rpx);position: relative;" v-show="showMap">
        <map id="myMap" :longitude="longitude" :latitude="latitude" class="map" :scale="17" :show-location="true"
          :markers="markers" :enable-scroll="!isDragging" @markertap="handleClickMarker"></map>

        <view class="statusBox" @click="handleShowChargeDetail">
          <view>
            <!-- 国网 -->
            <view class="statusItem">
              <!-- <image
          class="statusIcon"
          src="https://eshangtech.com/minTestImg/stateGridIcon.png"
        /> -->
              <view class="colorBox" style="background-color: #ff9929"></view>
              <text class="brandCharge">国网</text>
              <span class="empty">空</span>
              <view class="valueBox">
                <span class="emptyValue">{{
                  chargeData && chargeData.GWDetail
                    ? chargeData.GWDetail.GWEmpty
                    : 0
                }}
                </span>
                <span class="sum">/{{
                  chargeData && chargeData.GWDetail
                    ? chargeData.GWDetail.GWSum
                    : 0
                }}</span>
              </view>
            </view>

            <!-- 理想 -->
            <view class="statusItem">
              <view class="colorBox" style="background-color: #d81e06"></view>
              <!-- <image
          class="statusIcon"
          src="https://eshangtech.com/minTestImg/LXIcon.png"
        /> -->
              <text class="brandCharge">理想</text>
              <span class="empty">空</span>
              <view class="valueBox">
                <span class="emptyValue">{{
                  chargeData && chargeData.LXDetail
                    ? chargeData.LXDetail.LXEmpty
                    : 0
                }}</span>
                <span class="sum">/{{
                  chargeData && chargeData.LXDetail
                    ? chargeData.LXDetail.LXSum
                    : 0
                }}</span>
              </view>
            </view>

            <!-- 蔚来 -->
            <view class="statusItem">
              <!-- <image
          class="statusIcon"
          src="https://eshangtech.com/minTestImg/WLIcon.png"
        /> -->
              <view class="colorBox" style="background-color: #f4ea2a"></view>
              <text class="brandCharge">蔚来</text>
              <span class="empty">空</span>
              <view class="valueBox">
                <span class="emptyValue">{{
                  chargeData && chargeData.WLDetail
                    ? chargeData.WLDetail.WLEmpty
                      ? chargeData.WLDetail.WLEmpty
                      : 0
                    : 0
                }}</span>
                <span class="sum">/{{
                  chargeData && chargeData.WLDetail
                    ? chargeData.WLDetail.WLSum
                      ? chargeData.WLDetail.WLSum
                      : 0
                    : 0
                }}</span>
              </view>
            </view>

            <!-- 交控 -->
            <view class="statusItem">
              <!-- <image
          class="statusIcon"
          src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg"
        /> -->
              <view class="colorBox" style="background-color: #57d16e"></view>
              <text class="brandCharge">交控新能源</text>
              <span class="empty">空</span>
              <view class="valueBox">
                <span class="emptyValue">{{
                  chargeData && chargeData.JKDetail
                    ? chargeData.JKDetail.JKEmpty
                    : 0
                }}
                </span>
                <span class="sum">/{{
                  chargeData && chargeData.JKDetail
                    ? chargeData.JKDetail.JKSum
                    : 0
                }}</span>
              </view>
            </view>
          </view>
        </view>

      </view>

      <view class="pageBottomStyle">
        <view class="pageBottomTop">
          <view class="leftSearchBox">
            <image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/app/chargeSearch.png" />
            <input style="margin-left: 16rpx; font-size: 28rpx" placeholder="请输入服务区" v-model="searchText"
              @confirm="handleConfirm" />
          </view>

          <view class="rightBox" @click="handleChangePageType">
            显示列表
          </view>
        </view>

        <view class="funBox">
          <view class="funItem" @click="handleScan">
            <image class="funItemIcon" src="https://eshangtech.com/wanmeiyizhanImg/app/scanCode.gif" />
            <span class="funItemText">扫一扫</span>
          </view>

          <view class="funItem" style="margin-left: 20rpx;" @click="handleShowLocal">
            <image class="funItemIcon" src="https://eshangtech.com/wanmeiyizhanImg/app/chargeLocal.png" />
            <span class="funItemText">定位</span>
          </view>
        </view>

        <view class="currentServiceBox">
          <chargeBoxStyle :dataList="dataList" :pageType="'mapList'" :hideConfig="true"
            :noChargeDetail="loginType !== 'min'" />
        </view>
      </view>



      <!-- <view style="width: 100%; display: flex;align-items: flex-start;justify-content: space-between;">
        <view style="width: calc(100vw- 120rpx)">
          <view class="serviceDetailBox" v-if="showChargeBox">
            <charge-box ref="chargeBoxRef" :serviceAreaList="currentServiceList" :pageType="'mapIndex'"
              @allChargeData="handleGetChargeData" @handleChangeShow="handleChangeShow" />
          </view>
        </view>
        <view style="width: 120rpx">
          <view style="margin-top: 16rpx;" class="scanBox" direction="all" @change="handleChangeScanBox"
            :x="positionX || 16" :y="positionY || 60" :damping="100" :friction="100" :inertia="false">

            <view class="scanIconBox" @click="handleScan">
              <image class="scanIcon" src="/static/home/scanCodeIcon.svg" />
            </view>
          </view>

          <view style="margin-top: 16rpx;" class="localPosition" @click="handleShowLocal">
            <image class="localIcon" src="/static/home/localPosition.svg" />
          </view>
        </view>
      </view> -->

    </view>

    <view :class="showListPage ? 'listPage moveRight' : 'listPage '" v-show="showListPage">
      <!-- 搜索框 -->
      <!-- <view class="searchBox">
        <view class="topRight">
          <image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/searchIcon.png" />
          <input style="margin-left: 16rpx; font-size: 28rpx" placeholder="请输入服务区" v-model="searchText"
            @confirm="handleConfirm" />
        </view>

        <view class="listBox" @click="handleChangePageType">
          <image class="listIcon" src="/static/home/mapFixed.svg" />
          <text class="text">地图</text>
        </view>
      </view> -->

      <view class="pageBottomTop">
        <view class="leftSearchBox">
          <image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/app/chargeSearch.png" />
          <input style="margin-left: 16rpx; font-size: 28rpx" placeholder="请输入服务区" v-model="searchText"
            @confirm="handleConfirm" />
        </view>

        <view class="rightBox" @click="handleChangePageType">
          显示地图
        </view>
      </view>

      <scroll-view class="scrollListBox" :scroll-y="true" @scrolltolower="handleScrollToBottom">
        <view v-if="showChargeList">
          <!-- <charge-box ref="chargeBoxRef" :serviceAreaList="allServiceNameList" :pageStyleType="1"
            :pageType="'mapList'" /> -->
          <chargeBoxStyle :dataList="allDataList" :pageType="'mapList'" />
        </view>
      </scroll-view>
    </view>
    <CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
  </view>
</template>

<script>
import { mapGetters } from "vuex";
// import ChargeBox from "../../components/chargeBox.vue";
import chargeBoxStyle from "../../components/chargeBoxStyle.vue";
import CustomLoading from "../../components/customLoading.vue";


let systemInfo = uni.getSystemInfoSync();

export default {
  components: { chargeBoxStyle, CustomLoading },
  data() {
    return {
      longitude: "",
      latitude: "",
      seatInfo: {}, // 经纬度数据
      currentServiceObj: {}, // 当前选择的服务区
      currentServiceList: [], // 当前服务区的名称数组
      allServiceNameList: [], // 全部服务区的名字列表
      defaultAllServiceNameList: [], // 所有服务区的名称列表
      chargeData: {}, // 理想的数据
      markers: [], // 点位数据
      serviceList: [], // 所有服务区的数据
      searchText: "", // 搜索的内容
      showChargeBox: true,
      showChargeList: true,
      showListPage: false, // 是否显示列表页面
      isTouchMove: false, // 用于判断是否开始拖动
      loginType: "",
      menu: {},
      startX: 0, // 拖动开始时的 X 坐标
      startY: 0, // 拖动开始时的 Y 坐标
      positionX: systemInfo.safeArea.width - 130, // 元素当前的 X 坐标
      positionY: 140, // 元素当前的 Y 坐标
      isDragging: false, // 是否正在拖动
      screenWidth: 0, // 屏幕宽度
      screenHeight: 0, // 屏幕高度
      lastMoveTime: 0, // 上次移动的时间戳，用于节流
      lastMoveTime: 0, // 上次移动的时间戳，用于节流
      pageIndex: 1,
      isHaveMore: false,
      isShowAllData: true, // 判断是否点击了服务区 没有点击 就显示全部的数据 点击了 就显示单个服务区的具体每个品牌的数据,
      showMap: true, // 是否显示地图
      dataList: [],
      businessObj: {},// 繁忙度对象
      allDataList: [],// 充电列表的数据
      isLoading: false,
    };
  },
  async onLoad() {
    let systemInfo = uni.getSystemInfoSync();
    let type = uni.getStorageSync("loginType");
    this.loginType = type;
    console.log('this.loginType', this.loginType);

    // this.positionX = systemInfo.safeArea.width - 66;

    this.screenWidth = systemInfo.safeArea.width;
    this.screenHeight = systemInfo.safeArea.height;
    let storgeList = uni.getStorageSync("serviceList");
    if (storgeList) {
      this.serviceList = JSON.parse(storgeList);
      this.handleAddServiceMarkers();
    }
    let nearService = uni.getStorageSync("nearService");
    let seatInfo = uni.getStorageSync("seatInfo");
    if (seatInfo) {
      let res = seatInfo;
      this.seatInfo = {
        longitude: res.longitude,
        latitude: res.latitude,
      };
      this.longitude = this.seatInfo.longitude;
      this.latitude = this.seatInfo.latitude;
      // this.longitude = 116.894166;
      // this.latitude = 31.920213;

      // this.currentServiceList = ["新桥服务区"];
      // 全部服务区的名称
      // this.handleGetServiceNameList();
    }
    await this.handleGetBusiness()
    await this.handleGetDefaultService()
    // if (nearService) {
    //   this.currentServiceObj = nearService;
    //   this.currentServiceList = [nearService.SERVERPART_NAME];
    // }
    this.$utils.addUserBehaviorNew();
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  methods: {
    extractDirection(stationName) {
      if (!stationName) return '';
      // 定义方向匹配的正则表达式（按优先级排序）
      const directionPatterns = [
        /(?:（|\(|【)([^）\)】]*方向\d*)(?:\)|）|】)/,  // 匹配括号内的方向（可含数字）
        /([^，,。.;;！!?？、\s]+方向\d*)/,            // 匹配无括号的方向（可含数字）
        /方向([^，,。.;;！!?？、\s]+)/                 // 匹配"方向XX"格式
      ];

      for (const pattern of directionPatterns) {
        const match = stationName.match(pattern);
        if (match) {
          // 提取最核心的方向信息
          let direction = match[1] || match[0];
          // 清理结果：去除括号和数字
          direction = direction
            .replace(/^[（\(【]|[）\)】]$/g, '')  // 去除括号
            .replace(/\d+$/, '')                 // 去除末尾数字
            .trim();
          return direction;
        }
      }

      return '';
    },
    // 每次进入页面拿到一次繁忙度的数据
    async handleGetBusiness() {
      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([]);
            }
          },
        });
      });

      console.log('fljddlkjalkd', businessRes);

      let obj = {}
      if (businessRes && businessRes.length > 0) {
        businessRes.forEach((item) => {
          obj[item.SERVERPART_ID] = item
        })
      }
      this.businessObj = obj

    },
    // 拿到第一个默认的 
    async handleGetDefaultService() {
      let req = {
        Province_Code: "340000",
        longitude: this.seatInfo.longitude,
        latitude: this.seatInfo.latitude,
        PageIndex: 1,
        ShowService: true,
        PageSize: 1
      };
      this.isLoading = true
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartList",
        req
      );

      let list = data.Result_Data.List;

      let nameList = [];
      let idList = []
      if (list && list.length > 0) {
        list.forEach((item) => {
          nameList.push(item.SERVERPART_NAME);
          idList.push(item.SERVERPART_ID)
          // 理想总数
          let LIAUTOCHARGESum = 0;
          // 国网总数
          let STATEGRIDCHARGESum = 0;
          // 充换电总数
          let GACENERGYCHARGESum = 0;
          let HASPANTRY = 0; // 男厕数量
          let HASWIFI = 0; // 女厕数量
          let HASSHOWERROOM = 0; // 淋浴房
          let MICROWAVEOVEN = 0; // 微波炉
          let WASHERCOUNT = 0; // 洗衣机数量
          let HASPILOTLOUNGE = false; // 有无司机之家
          let HASCHILD = false; // 有无车辆维修
          let SMALLPARKING = 0; // 轿车车位
          let PACKING = 0; // 客车车位
          let TRUCKPACKING = 0; // 货车车位
          let DANPACKING = 0; // 危化品车位
          let DININGROOMCOUNT = 0; // 餐饮店
          let HASBACKGROUNDRADIO = 0; // 便利店
          let POINTCONTROLCOUNT = 0; // 客房
          let REFUELINGGUN92 = 0; // 加油枪92号
          let REFUELINGGUN95 = 0; //  加油枪95号
          let REFUELINGGUN0 = 0; // 加油枪0号

          if (item.RegionInfo && item.RegionInfo.length > 0) {
            item.RegionInfo.forEach((subItem) => {
              HASPANTRY += subItem.HASPANTRY;
              HASWIFI += subItem.HASPANTRY;
              HASSHOWERROOM += subItem.HASSHOWERROOM;
              MICROWAVEOVEN += subItem.MICROWAVEOVEN;
              WASHERCOUNT += subItem.WASHERCOUNT;
              SMALLPARKING += subItem.SMALLPARKING;
              PACKING += subItem.PACKING;
              TRUCKPACKING += subItem.TRUCKPACKING;
              DANPACKING += subItem.DANPACKING;
              DININGROOMCOUNT += subItem.DININGROOMCOUNT;
              HASBACKGROUNDRADIO += subItem.HASBACKGROUNDRADIO;
              POINTCONTROLCOUNT += subItem.POINTCONTROLCOUNT;
              REFUELINGGUN92 += subItem.REFUELINGGUN92;
              REFUELINGGUN95 += subItem.REFUELINGGUN95;
              REFUELINGGUN0 += subItem.REFUELINGGUN0;

              if (subItem.HASPILOTLOUNGE) {
                HASPILOTLOUNGE = true;
              }
              if (subItem.HASCHILD) {
                HASCHILD = true;
              }
            });
          }

          item.imgList = [
            {
              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:
                HASSHOWERROOM > 0
                  ? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
                  : "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
              isShow: HASSHOWERROOM > 0,
              title: "淋浴房",
            },
          ]

          item.businessObj = this.businessObj[item.SERVERPART_ID.toString()]
        });
      }


      // 拿到电价数据
      list = await this.handleGetChargeData(list, idList)
      // 拿到油价数据
      list = await this.handleGetOilData(list, idList)

      this.isLoading = false
      this.dataList = list
      console.log('djasijdaskjdaslkdj', this.dataList);
      this.chargeData = list[0]
    },
    // 到充电数据
    async handleGetChargeData(serviceList, idList) {
      const data = await this.$api.$javaPost("/charge/stationinfo/queryByIds", {
        ids: idList,
        brands: [],
      });
      // 理想
      let LXData = [];
      // 交控
      let JKData = [];
      // 国网
      let GWData = [];
      // 蔚来
      let WLData = [];

      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);
          } else if (item.brand === "蔚来") {
            WLData.push(item);
          }
        });
      }

      if (serviceList && serviceList.length > 0) {
        serviceList.forEach((item) => {
          let LXInfoList = [];
          let JKInfoList = [];
          let GWInfoList = [];
          let WLInfoList = [];
          // 理想
          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,
                          address: this.extractDirection(subItem.name),
                          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),
                          electricityFee: subItem.electricityFee
                        });
                      });
                    }
                  });
                }
              });
            }
          }
          // 空多少个
          let LXEmpty = 0;
          // 一共多少个
          let LXSum = 0;
          if (LXRes && LXRes.length > 0) {
            LXRes.forEach((subItem) => {
              // if (subItem.status !== 3) {
              // 替换空的逻辑  只有空闲的状态 才算空
              if (subItem.status === 1) {
                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,
                          address: this.extractDirection(subItem.name),
                          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),
                          electricityFee: subItem.electricityFee
                        });
                      });
                    }
                  });
                }
              });
            }
          }
          // 空多少个
          let JKEmpty = 0;
          // 一共多少个
          let JKSum = 0;
          if (JKRes && JKRes.length > 0) {
            JKRes.forEach((subItem) => {
              // 替换空的逻辑  只有空闲的状态 才算空
              if (subItem.status === 1) {
                JKEmpty += 1;
              }
              JKSum += 1;
            });
          }
          item.JKDetail = {
            JKEmpty: JKEmpty,
            JKSum: JKSum,
          };

          console.log('GWDataGWDataGWDataGWData', GWData);

          // 国网
          let GWRes = [];
          if (GWData && GWData.length > 0) {
            let thisServiceRes = GWData.filter(
              (filterItem) => filterItem.serverpartId === item.SERVERPART_ID && filterItem.name.indexOf('方向）') !== -1 && filterItem.name.indexOf('充电站') !== -1
            );
            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,
                          address: this.extractDirection(subItem.name),
                          Power: Number(fourthItem.powerMax),
                          ConnectorID: fourthItem.connectorCode,
                          ConnectorType: Number(fourthItem.connectorType),
                          NationalStandard: Number(fourthItem.national),
                          VoltageLowerLimits: Number(fourthItem.voltageLimit),
                          VoltageUpperLimits: Number(fourthItem.voltageMax),
                          electricityFee: subItem.electricityFee
                        });
                      });
                    }
                  });
                }
              });
            }
          }
          // 空多少个
          let GWEmpty = 0;
          // 一共多少个
          let GWSum = 0;
          if (GWRes && GWRes.length > 0) {
            GWRes.forEach((subItem) => {
              // 替换空的逻辑  只有空闲的状态 才算空
              if (subItem.status === 1) {
                GWEmpty += 1;
              }
              GWSum += 1;
            });
          }
          item.GWDetail = {
            GWEmpty: GWEmpty,
            GWSum: GWSum,
          };

          // console.log('daskjdaskjdaskljdaslkhfjdshf', GWRes);


          // 蔚来
          let WLRes = [];

          if (WLData && WLData.length > 0) {
            let thisServiceRes = WLData.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) => {
                        WLRes.push(fourthItem);
                        WLInfoList.push({
                          ...fourthItem,
                          Status: fourthItem.status,
                          address: this.extractDirection(subItem.name),
                          Power: Number(fourthItem.powerMax),
                          ConnectorID: fourthItem.connectorCode,
                          ConnectorType: Number(fourthItem.connectorType),
                          NationalStandard: Number(fourthItem.national),
                          VoltageLowerLimits: Number(fourthItem.voltageLimit),
                          VoltageUpperLimits: Number(fourthItem.voltageMax),
                          electricityFee: subItem.electricityFee
                        });
                      });
                    }
                  });
                }
              });
            }
          }

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

          if (WLRes && WLRes.length > 0) {
            WLRes.forEach((subItem) => {
              // 替换空的逻辑  只有空闲的状态 才算空
              if (subItem.status === 1) {
                WLEmpty += 1;
              }
              WLSum += 1;
            });
          }

          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;
          item.WLInfoList = WLInfoList;
        });
      }
      console.log('dksjdisjfdf', serviceList)
      return serviceList
    },
    // 加油的数据
    async handleGetOilData(list, idList) {
      const data = await this.$api.$javaGet2("/oil-price/getListByServerPartIds", {
        serverpartIds: idList.toString(),
      });
      let oilData = data.Result_Data.List


      if (list && list.length > 0) {
        list.forEach((item) => {
          let haveOil = false
          let oilList = oilData.filter((filterItem => item.SERVERPART_ID === filterItem.serverpartId))
          if (oilList && oilList.length > 0) {
            haveOil = true
          }

          item.imgList.forEach((subItem) => {
            if (subItem.title === '充电桩') {
              let isHave = false
              if (item.GWDetail.GWSum > 0 || item.JKDetail.JKSum > 0 || item.LXDetail.LXSum > 0 || item.WLDetail.WLSum > 0) {
                isHave = true
              }
              subItem.url = isHave ? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
                : "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg"
            } else if (subItem.title === '加油站' && haveOil) {
              subItem.url = haveOil ? "https://eshangtech.com/minTestImg/REFUELINGGUN.svg"
                : "https://eshangtech.com/minTestImg/noREFUELINGGUN.svg"
            }
          })
        })
      }

      return list
    },
    // 拿到前面10个默认的 
    async handleGetchargeAllService() {
      let req = {
        Province_Code: "340000",
        longitude: this.seatInfo.longitude,
        latitude: this.seatInfo.latitude,
        PageIndex: this.pageIndex,
        ShowService: true,
        PageSize: 10
      };
      this.isLoading = true
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartList",
        req
      );

      let list = data.Result_Data.List;

      let nameList = [];
      let idList = []
      if (list && list.length > 0) {
        list.forEach((item) => {
          nameList.push(item.SERVERPART_NAME);
          idList.push(item.SERVERPART_ID)
          // 理想总数
          let LIAUTOCHARGESum = 0;
          // 国网总数
          let STATEGRIDCHARGESum = 0;
          // 充换电总数
          let GACENERGYCHARGESum = 0;
          let HASPANTRY = 0; // 男厕数量
          let HASWIFI = 0; // 女厕数量
          let HASSHOWERROOM = 0; // 淋浴房
          let MICROWAVEOVEN = 0; // 微波炉
          let WASHERCOUNT = 0; // 洗衣机数量
          let HASPILOTLOUNGE = false; // 有无司机之家
          let HASCHILD = false; // 有无车辆维修
          let SMALLPARKING = 0; // 轿车车位
          let PACKING = 0; // 客车车位
          let TRUCKPACKING = 0; // 货车车位
          let DANPACKING = 0; // 危化品车位
          let DININGROOMCOUNT = 0; // 餐饮店
          let HASBACKGROUNDRADIO = 0; // 便利店
          let POINTCONTROLCOUNT = 0; // 客房
          let REFUELINGGUN92 = 0; // 加油枪92号
          let REFUELINGGUN95 = 0; //  加油枪95号
          let REFUELINGGUN0 = 0; // 加油枪0号

          if (item.RegionInfo && item.RegionInfo.length > 0) {
            item.RegionInfo.forEach((subItem) => {
              HASPANTRY += subItem.HASPANTRY;
              HASWIFI += subItem.HASPANTRY;
              HASSHOWERROOM += subItem.HASSHOWERROOM;
              MICROWAVEOVEN += subItem.MICROWAVEOVEN;
              WASHERCOUNT += subItem.WASHERCOUNT;
              SMALLPARKING += subItem.SMALLPARKING;
              PACKING += subItem.PACKING;
              TRUCKPACKING += subItem.TRUCKPACKING;
              DANPACKING += subItem.DANPACKING;
              DININGROOMCOUNT += subItem.DININGROOMCOUNT;
              HASBACKGROUNDRADIO += subItem.HASBACKGROUNDRADIO;
              POINTCONTROLCOUNT += subItem.POINTCONTROLCOUNT;
              REFUELINGGUN92 += subItem.REFUELINGGUN92;
              REFUELINGGUN95 += subItem.REFUELINGGUN95;
              REFUELINGGUN0 += subItem.REFUELINGGUN0;

              if (subItem.HASPILOTLOUNGE) {
                HASPILOTLOUNGE = true;
              }
              if (subItem.HASCHILD) {
                HASCHILD = true;
              }
            });
          }

          item.imgList = [
            {
              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:
                HASSHOWERROOM > 0
                  ? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
                  : "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
              isShow: HASSHOWERROOM > 0,
              title: "淋浴房",
            },
          ]

          item.businessObj = this.businessObj[item.SERVERPART_ID.toString()]
        });
      }
      // 拿到电价数据
      list = await this.handleGetChargeData(list, idList)
      // 拿到油价数据
      list = await this.handleGetOilData(list, idList)

      this.isLoading = false

      this.allDataList = this.allDataList.concat(list)
      console.log('djasijdaskjdaslkdj', this.allDataList);
    },

    handleChangeShow(e) {
      this.showMap = !e
      this.$forceUpdate();
    },
    handleShowChargeDetail() {
      this.$refs.chargeBoxRef.handleOpenDetail(null);
    },
    // 显示自己的定位
    handleShowLocal() {
      let seatInfo = uni.getStorageSync("seatInfo");
      if (seatInfo) {
        // let res = JSON.parse(seatInfo);
        let res = seatInfo
        this.seatInfo = {
          longitude: Number(res.longitude),
          latitude: Number(res.latitude),
        };
        this.longitude = this.seatInfo.longitude;
        this.latitude = this.seatInfo.latitude;
        let _this = this
        setTimeout(() => {
          uni.createMapContext("myMap", this).moveToLocation({
            longitude: _this.longitude,
            latitude: _this.latitude,
          });
        }, 300); // 300ms 延迟
      }
      this.$forceUpdate();
    },
    // 给服务区添加点位
    handleAddServiceMarkers() {
      let list = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          list.push({
            id: Number(`${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
            serviceId: item.SERVERPART_ID,
            serviceName: `${item.SERVERPART_NAME}`,
            latitude: item.SERVERPART_Y,
            longitude: item.SERVERPART_X,
            iconPath: "/static/home/redFixed.svg",
            width: 30,
            height: 30,
          });
        });
      }
      this.markers = list;
    },
    handleChangeScanBox(e) {
      this.positionX = e.target.offsetLeft;
      this.positionY = e.target.offsetTop;
    },
    touchStart(e) {
      this.isDragging = true;
      const touch = e.touches[0];
      this.startX = touch.clientX - this.positionX;
      this.startY = touch.clientY - this.positionY;
    },
    touchMove(e) {
      if (!this.isDragging) return;

      // 使用时间戳进行节流，每16ms（约60fps）更新一次位置
      const touch = e.touches[0];
      let newPosX = touch.clientX - this.startX;
      let newPosY = touch.clientY - this.startY;

      // 限制拖动范围，不让元素移出屏幕
      newPosX = Math.max(0, Math.min(newPosX, this.screenWidth - 50)); // 限制 X 轴范围
      newPosY = Math.max(0, Math.min(newPosY, this.screenHeight - 50)); // 限制 Y 轴范围

      this.positionX = newPosX;
      this.positionY = newPosY;
    },
    touchEnd(e) {
      this.isDragging = false;
    },
    // 取问号后面的参数
    getQueryParams(url) {
      let queryStr = url.split("?")[1]; // 获取 ? 后面的部分
      let params = {};

      if (queryStr) {
        let pairs = queryStr.split("&");
        pairs.forEach((pair) => {
          let [key, value] = pair.split("=");
          params[key] = decodeURIComponent(value || "");
        });
      }

      return params;
    },
    // 扫码
    handleScan() {
      let _this = this;
      uni.scanCode({
        success: function (res) {
          console.log('res', res);

          let url = res.result;
          if (url.indexOf("lixiang") !== -1) {
            let obj = _this.getQueryParams(url);
            uni.showModal({
              title: "",
              content: `识别二维码类型为【理想】，确认跳转？`,
              success(res) {
                let str = url
                console.log('strstrstrstr', url);

                //"https://www.lixiang.com/business/charge/start?channelCode=169006&devType=hpc&qrcode=81003867"
                plus.runtime.openURL('http://saas.eshangtech.com/openWxLx.html?' + str.split('?')[1]);
                // uni.navigateToMiniProgram({
                //   appId: "wxefd5d8119561aaca",
                //   path: `/pages/electricity/pile/index?connectorId=${obj.qrcode}`,
                //   success(res) {
                //     plus.runtime.openURL('http://saas.eshangtech.com/openWxLx.html');

                //   },
                // });
              },
            });
          } else if (url.indexOf("jksdxny") !== -1) {
            // 交控
            uni.showModal({
              title: "",
              content: `识别二维码类型为【交控新能源】，确认跳转？`,
              success(res) {
                plus.runtime.openURL('http://saas.eshangtech.com/openWxJK.html');
                // uni.navigateToMiniProgram({
                //   appId: "wx01617ba079061ca9",
                //   path: `/pages/map/index`,
                //   success(res) { },
                // });
              },
            });
          } else if (url.indexOf("app.nio") !== -1) {
            // 蔚来
            uni.showModal({
              title: "",
              content: `识别二维码类型为【蔚来】，确认跳转？`,
              success(res) {
                plus.runtime.openURL('http://saas.eshangtech.com/openWxWL.html');
                // uni.navigateToMiniProgram({
                //   appId: "wx35849c7f0cf7f7a9",
                //   path: `/pages/index/index`,
                //   success(res) { },
                // });
              },
            });
          } else if (url.indexOf("hlht://") !== -1) {
            // 国网
            uni.showModal({
              title: "",
              content: `识别二维码类型为【国网】，确认跳转？`,
              success(res) {
                // plus.runtime.openURL(`https://dipper.in.ah.cn/wsth5/#/${_this.user.MEMBERSHIP_MOBILEPHONE}`);


                uni.navigateTo({
                  url: `/pages/thirdParty/chargAndSwapp`,
                });
                // uni.navigateToMiniProgram({
                //   appId: "wx35849c7f0cf7f7a9",
                //   path: `/pages/index/index`,
                //   success(res) { },
                // });
              },
            });
          }
        },
      });
    },
    // 拿到全部服务区的名称
    handleGetServiceNameList() {
      let name = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          name.push(item.SERVERPART_NAME);
        });
      }
      let res = JSON.parse(JSON.stringify(name));
      this.defaultAllServiceNameList = res;
      this.allServiceNameList = name.splice(0, this.pageIndex * 10 - 1);
    },
    // 滚动到底部
    async handleScrollToBottom() {
      console.log('滚动到底部了');

      this.pageIndex = this.pageIndex + 1
      this.handleGetchargeAllService()
      // if (this.isHaveMore) {
      //   return;
      // }
      // this.isHaveMore = true;
      // this.pageIndex = this.pageIndex += 1;
      // let res = JSON.parse(JSON.stringify(this.defaultAllServiceNameList));
      // this.allServiceNameList = res.splice(0, this.pageIndex * 10 - 1);

      // await this.$refs.chargeBoxRef.handldGetData();
      // this.isHaveMore = false;
      // this.$forceUpdate();
    },
    // 改变页面显示的内容
    handleChangePageType() {
      this.showListPage = !this.showListPage;
      this.handleGetchargeAllService()
    },
    // 搜索服务区的方法
    async handleConfirm() {
      if (this.showListPage) {
        this.showChargeList = false;
      } else {
        this.showChargeBox = false;
      }
      this.chaegeBoxList = [];


      let req = {
        Province_Code: "340000",
        longitude: this.seatInfo.longitude,
        latitude: this.seatInfo.latitude,
        PageIndex: 1,
        Serverpart_Name: this.searchText,
        ShowService: true,
        PageSize: 10
      };
      this.isLoading = true
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartList",
        req
      );
      let list = data.Result_Data.List;

      let nameList = [];
      let idList = []
      if (list && list.length > 0) {
        list.forEach((item) => {
          nameList.push(item.SERVERPART_NAME);
          idList.push(item.SERVERPART_ID)
          // 理想总数
          let LIAUTOCHARGESum = 0;
          // 国网总数
          let STATEGRIDCHARGESum = 0;
          // 充换电总数
          let GACENERGYCHARGESum = 0;
          let HASPANTRY = 0; // 男厕数量
          let HASWIFI = 0; // 女厕数量
          let HASSHOWERROOM = 0; // 淋浴房
          let MICROWAVEOVEN = 0; // 微波炉
          let WASHERCOUNT = 0; // 洗衣机数量
          let HASPILOTLOUNGE = false; // 有无司机之家
          let HASCHILD = false; // 有无车辆维修
          let SMALLPARKING = 0; // 轿车车位
          let PACKING = 0; // 客车车位
          let TRUCKPACKING = 0; // 货车车位
          let DANPACKING = 0; // 危化品车位
          let DININGROOMCOUNT = 0; // 餐饮店
          let HASBACKGROUNDRADIO = 0; // 便利店
          let POINTCONTROLCOUNT = 0; // 客房
          let REFUELINGGUN92 = 0; // 加油枪92号
          let REFUELINGGUN95 = 0; //  加油枪95号
          let REFUELINGGUN0 = 0; // 加油枪0号

          if (item.RegionInfo && item.RegionInfo.length > 0) {
            item.RegionInfo.forEach((subItem) => {
              HASPANTRY += subItem.HASPANTRY;
              HASWIFI += subItem.HASPANTRY;
              HASSHOWERROOM += subItem.HASSHOWERROOM;
              MICROWAVEOVEN += subItem.MICROWAVEOVEN;
              WASHERCOUNT += subItem.WASHERCOUNT;
              SMALLPARKING += subItem.SMALLPARKING;
              PACKING += subItem.PACKING;
              TRUCKPACKING += subItem.TRUCKPACKING;
              DANPACKING += subItem.DANPACKING;
              DININGROOMCOUNT += subItem.DININGROOMCOUNT;
              HASBACKGROUNDRADIO += subItem.HASBACKGROUNDRADIO;
              POINTCONTROLCOUNT += subItem.POINTCONTROLCOUNT;
              REFUELINGGUN92 += subItem.REFUELINGGUN92;
              REFUELINGGUN95 += subItem.REFUELINGGUN95;
              REFUELINGGUN0 += subItem.REFUELINGGUN0;

              if (subItem.HASPILOTLOUNGE) {
                HASPILOTLOUNGE = true;
              }
              if (subItem.HASCHILD) {
                HASCHILD = true;
              }
            });
          }

          item.imgList = [
            {
              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:
                HASSHOWERROOM > 0
                  ? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
                  : "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
              isShow: HASSHOWERROOM > 0,
              title: "淋浴房",
            },
          ]

          item.businessObj = this.businessObj[item.SERVERPART_ID.toString()]
        });
      }


      // 拿到电价数据
      list = await this.handleGetChargeData(list, idList)
      // 拿到油价数据
      list = await this.handleGetOilData(list, idList)

      this.isLoading = false
      if (this.showListPage) {
        this.allDataList = list
      } else {
        this.dataList = list
      }

      let obj = list[0];
      if (this.showListPage) {
        this.showChargeList = true;
        if (this.searchText) {
          this.allServiceNameList = [obj.SERVERPART_NAME];
        } else {
          this.handleGetServiceNameList();
        }
      } else {
        this.seatInfo = {
          longitude: obj.SERVERPART_X,
          latitude: obj.SERVERPART_Y,
        };
        this.longitude = this.seatInfo.longitude;
        this.latitude = this.seatInfo.latitude;
        this.currentServiceObj = obj;
        this.currentServiceList = [obj.SERVERPART_NAME];
        this.showChargeBox = true;
      }
      this.searchText = "";


      // let req = {
      //   // longitude: this.longitude,
      //   Province_Code: "340000",
      //   longitude: this.seatInfo.longitude,
      //   latitude: this.seatInfo.latitude,
      //   Serverpart_Name: this.searchText,
      //   ShowService: true,
      // };
      // // const data = await this.$api.$get(
      // //   "/CommercialApi/BaseInfo/GetServerpartList",
      // //   req
      // // );
      // let data = await this.$api.$javaGet2('/third-party/getServerPartList', req)
      // let list = data.Result_Data.List;
      // this.pageIndex = 1;
      // let obj = list[0];
      // if (this.showListPage) {
      //   this.showChargeList = true;
      //   if (this.searchText) {
      //     this.allServiceNameList = [obj.SERVERPART_NAME];
      //   } else {
      //     this.handleGetServiceNameList();
      //   }
      // } else {
      //   this.seatInfo = {
      //     longitude: obj.SERVERPART_X,
      //     latitude: obj.SERVERPART_Y,
      //   };
      //   this.longitude = this.seatInfo.longitude;
      //   this.latitude = this.seatInfo.latitude;
      //   this.currentServiceObj = obj;
      //   this.currentServiceList = [obj.SERVERPART_NAME];
      //   this.showChargeBox = true;
      // }
      // this.searchText = "";
    },
    // 给理想的充电站标点
    handleLXAddMarker(e) {
      let stationList = e.res;

      let pointList = [];
      // 确保一个服务区点位 只用加一个
      let pointIdList = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          if (stationList && stationList.length > 0) {
            stationList.forEach((subItem) => {
              if (subItem.Address.indexOf(item.SERVERPART_NAME) !== -1) {
                const date = new Date();
                if (
                  pointIdList.indexOf(Number(`1${item.SERVERPART_ID}`)) === -1
                ) {
                  pointIdList.push(Number(`1${item.SERVERPART_ID}`));
                  pointList.push({
                    id: Number(`1${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
                    markerId: `${item.SERVERPART_ID}LX`,
                    serviceId: item.SERVERPART_ID,
                    serviceName: `${item.SERVERPART_NAME}`,
                    latitude: subItem.StationLat,
                    longitude: subItem.StationLng,
                    iconPath: "/static/home/redFixed.svg",
                    width: 30,
                    height: 30,
                    // label: {
                    //   // 文本标签
                    //   content: "",
                    //   color: "#3EC273",
                    //   fontSize: 14,
                    //   bgColor: "#ffffff",
                    //   borderRadius: 4,
                    //   padding: 5,
                    //   textAlign: "center",
                    // },
                  });
                }
              }
            });
          }
        });
      }
      this.markers = this.markers.concat(pointList);
    },
    // 给交控的充电站标点
    handleJKAddMarker(e) {
      let stationList = e.res;

      let pointList = [];
      // 确保一个服务区点位 只用加一个
      let pointIdList = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          if (stationList && stationList.length > 0) {
            stationList.forEach((subItem) => {
              if (subItem.areaName.indexOf(item.SERVERPART_NAME) !== -1) {
                const date = new Date();
                if (
                  pointIdList.indexOf(Number(`2${item.SERVERPART_ID}`)) === -1
                ) {
                  pointIdList.push(Number(`2${item.SERVERPART_ID}`));
                  pointList.push({
                    id: Number(`2${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
                    markerId: `${item.SERVERPART_ID}JK`,
                    serviceId: item.SERVERPART_ID,
                    serviceName: `${item.SERVERPART_NAME}`,
                    latitude: subItem.lat,
                    longitude: subItem.lng,
                    iconPath: "/static/home/greenFixed.svg",
                    width: 30,
                    height: 30,
                  });
                }
              }
            });
          }
        });
      }
      this.markers = this.markers.concat(pointList);
    },
    // 给国网的充电站标点
    handleGWAddMarker(e) {
      let stationList = e.res.data.Data.StationInfos;

      let pointList = [];
      // 确保一个服务区点位 只用加一个
      let pointIdList = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          if (stationList && stationList.length > 0) {
            stationList.forEach((subItem) => {
              if (subItem.Address.indexOf(item.SERVERPART_NAME) !== -1) {
                if (
                  pointIdList.indexOf(Number(`3${item.SERVERPART_ID}`)) === -1
                ) {
                  pointIdList.push(Number(`3${item.SERVERPART_ID}`));
                  pointList.push({
                    id: Number(`3${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
                    markerId: `${item.SERVERPART_ID}GW`,
                    serviceId: item.SERVERPART_ID,
                    serviceName: `${item.SERVERPART_NAME}`,
                    latitude: subItem.StationLat,
                    longitude: subItem.StationLng,
                    iconPath: "/static/home/orangeFixed.svg",
                    width: 30,
                    height: 30,
                  });
                }
              }
            });
          }
        });
      }
      this.markers = this.markers.concat(pointList);
    },
    // // 拿到当前服务区的充电数据
    // handleGetChargeData(e) {
    //   let obj = e.res[0];
    //   // 因为只返回一个服务区 所以直接e[0]就可以拿到服务区数据
    //   this.chargeData = obj;

    //   // this.markers = [
    //   //   {
    //   //     id: Number(obj.ServerPart_Id), // 使用时间戳作为唯一ID
    //   //     latitude: obj.SERVERPART_Y,
    //   //     longitude: obj.SERVERPART_X,
    //   //     width: 20,
    //   //     height: 30,
    //   //     label: {
    //   //       // 文本标签
    //   //       content: obj.name,
    //   //       color: "#3EC273",
    //   //       fontSize: 14,
    //   //       bgColor: "#ffffff",
    //   //       borderRadius: 4,
    //   //       padding: 5,
    //   //       textAlign: "center",
    //   //     },
    //   //   },
    //   // ];
    // },
    // 点击地图上的锚点
    handleClickMarker(e) {
      const clickedMarker = this.markers.find(
        (item) => item.id === e.detail.markerId // 用小程序返回的id匹配
      );
      this.showChargeBox = false;

      const serviceDetail = this.serviceList.find(
        (item) => item.SERVERPART_ID === Number(clickedMarker.serviceId) // 用小程序返回的id匹配
      );
      this.longitude = this.longitude;
      this.latitude = this.latitude;
      this.currentServiceObj = serviceDetail;
      this.currentServiceList = [clickedMarker.serviceName];

      let _this = this;
      setTimeout(() => {
        _this.showChargeBox = true;
      }, 500);
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  // background: #f8f8f8;
  background: #F3F4F6;

  .mapBox {
    width: 100vw;
    height: 100vh;
    transition: transform 0.5s ease;

    .map {
      width: 100%;
      height: 100%;
      // height: calc(100vh - 55px - 300rpx);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .topBox {
      width: 100%;
      height: 55px;
      z-index: 2;
      box-sizing: border-box;
      padding: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .topRight {
        width: calc(100% - 240rpx);
        height: 72rpx;
        background: #fff;
        border-radius: 36rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

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

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

      .listBox {
        width: 180rpx;
        height: 72rpx;
        background: #fff;
        border-radius: 36rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

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

        .text {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 30rpx;
          color: #130f05;
          line-height: 36rpx;
          text-align: justify;
          font-style: normal;
        }
      }
    }

    .statusBox {
      box-sizing: border-box;
      padding: 16rpx;
      border-radius: 16rpx;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      position: absolute;
      top: 40rpx;
      right: 16rpx;
      z-index: 2;

      .statusItem {
        display: flex;
        align-items: center;
        padding: 8rpx 0;

        .colorBox {
          width: 18rpx;
          height: 18rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 16rpx;
        }

        .statusIcon {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 16rpx;
        }

        .brandCharge {
          font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
            sans-serif;
          font-weight: 400;
          font-size: 24rpx;
          color: #130f05;
          line-height: 40rpx;
          font-style: normal;
          display: inline-block;
          width: 120rpx;
          margin-right: 16rpx;
        }

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

        .valueBox {
          display: flex;
          justify-content: flex-end;
          width: 100rpx;

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

    .localPosition {
      width: 100rpx;
      height: 100rpx;
      box-sizing: border-box;
      padding: 16rpx;
      border-radius: 16rpx;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      // position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      // top: 280rpx;
      // right: 16rpx;
      z-index: 1;

      .localIcon {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .serviceDetailBox {
      width: 100%;
      // width: calc(100% - 80rpx);
      height: 450rpx;
      box-sizing: border-box;
      padding: 16rpx;
      border-radius: 16rpx;
      background: #fff;
      box-sizing: border-box;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }

    .scanBox {
      // width: 100%;
      width: 100rpx;
      height: 100rpx;
      // height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      // position: absolute;
      // top: 280rpx;
      // right: 160rpx;
      // bottom: 40rpx;
      // top: 0;
      // left: 0;
      // left: 0;
      z-index: 1;

      .scanIconBox {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background: #ba922f;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .scanIcon {
          width: 80rpx;
          height: 80rpx;
        }

        .scanBox {
          position: absolute;
          width: 40rpx;
          height: 40rpx;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #ba922f;
          overflow: hidden;

          .line {
            position: absolute;
            width: 37rpx;
            height: 4rpx;
            background: #fff;
            animation: moveUpDown 2s linear infinite;
          }

          @keyframes moveUpDown {
            0% {
              top: 8rpx;
            }

            50% {
              top: calc(100% - 12rpx);
              /* 40rpx(容器高度) - 4rpx(线条高度) */
            }

            100% {
              top: 8rpx;
            }
          }
        }
      }
    }
  }

  .moveLeft {
    transform: translateX(-100%);
  }

  .listPage {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 100%;
    transition: transform 0.5s ease;
    box-sizing: border-box;
    padding: 16rpx;
    padding-top: 40rpx;
    z-index: 2;
    // background-color: #fff;
    // background-color: #F3F4F7;
    // background: linear-gradient(0deg, #F2F3F6 0%, #CFE6F5 100%);
    background-image: url(https://eshangtech.com/wanmeiyizhanImg/app/chargeBg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .pageBottomTop {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .leftSearchBox {
        width: 486rpx;
        height: 54rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 32rpx;
        box-sizing: border-box;
        padding: 14rpx 30rpx;
        box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(61, 113, 255, 0.1);

        .searchIcon {
          width: 28rpx;
          height: 28rpx;
          margin-right: 16rpx;
        }
      }

      .rightBox {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        text-align: left;
        font-style: normal;
        display: inline-flex;
        align-items: center;
        background-color: #009DFF;
        padding: 6rpx 30rpx 10rpx 32rpx;
        border-radius: 32rpx;
        height: 54rpx;
        box-sizing: border-box;
      }
    }

    .searchBox {
      width: 100%;
      height: 72rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .topRight {
        width: calc(100% - 240rpx);
        height: 72rpx;
        background: #fff;
        border-radius: 36rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

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

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

      .listBox {
        width: 180rpx;
        height: 72rpx;
        // background: #fff;
        background-image: url("https://eshangtech.com/minTestImg/mapBg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 36rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

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

        .text {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 30rpx;
          color: #130f05;
          line-height: 36rpx;
          text-align: justify;
          font-style: normal;
        }
      }
    }

    .scrollListBox {
      width: 100%;
      // height: calc(100% - 100rpx);
      height: calc(100% - 138rpx);
      // margin-top: 16rpx;
      margin-top: 40rpx;
    }

    .scrollListBox ::-webkit-scrollbar {
      display: none;
    }
  }

  .moveRight {
    transform: translateX(-100%);
  }


  .pageBottomStyle {
    width: 100%;
    height: 606rpx;
    background-image: url(https://eshangtech.com/wanmeiyizhanImg/app/chargeBg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 44rpx 40rpx;

    .pageBottomTop {
      width: 100%;
      height: 54rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .leftSearchBox {
        width: 486rpx;
        height: 54rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 32rpx;
        padding: 14rpx 30rpx;
        box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(61, 113, 255, 0.1);

        .searchIcon {
          width: 28rpx;
          height: 28rpx;
          margin-right: 16rpx;
        }
      }

      .rightBox {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        text-align: left;
        font-style: normal;
        display: inline-flex;
        align-items: center;
        background-color: #009DFF;
        padding: 6rpx 30rpx 10rpx 32rpx;
        border-radius: 32rpx;
        height: 54rpx;
        box-sizing: border-box;
      }
    }

    .funBox {
      width: 100%;
      margin-top: 20rpx;

      .funItem {
        height: 50rpx;
        box-sizing: border-box;
        padding: 10rpx 16rpx;
        background-color: #009DFF;
        border-radius: 32rpx;
        display: inline-flex;
        align-items: center;

        .funItemIcon {
          width: 28rpx;
          height: 28rpx;
          margin-right: 10rpx;
        }

        .funItemText {
          font-family: Source Han Sans SC, Source Han Sans SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #FFFFFF;
          text-align: left;
          font-style: normal;
        }
      }
    }

    .currentServiceBox {
      width: 100%;
      margin-top: 40rpx;
    }
  }
}
</style>