<template>
  <view class="main">
    <view class="topBox" :style="{
      height: `${loginType === 'min' ? menu.bottom + 8 : menu.top + 50}px`,
      paddingTop: `${loginType === 'min' ? menu.top : menu.top + 10}px`,
    }">
      <view class="topContent">
        <view class="backIconBox" @click="handleBack">
          <image class="backIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/brankBlackArrow.svg" />
        </view>
        <view class="currentServiceBox" @click="goSelectServer">
          <image class="servicePosition" src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png" />
          <text class="currentService">{{ detailInfo.SERVERPART_NAME }}</text>
          <image class="rightArrow" src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.svg" />
        </view>
      </view>
    </view>

    <view class="content" :style="{
      paddingTop: `${loginType === 'min' ? menu.bottom + 8 : menu.top + 50
        }px`,
    }">
      <!-- 服务区照片 服务区距离名字信息 -->
      <view class="serviceDetail">
        <view class="detailTop">
          <view class="serviceImg" v-if="detailInfo.ImageLits && detailInfo.ImageLits.length > 0">
            <swiper scroll-x="true" circular="true" class="banner" indicator-dots="true"
              indicator-active-color="#272625" autoplay interval="3000" style="width: 100%; height: 100%">
              <swiper-item v-for="(img, i) in detailInfo.ImageLits" :key="i" style="width: 100%; height: 100%">
                <image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true" :src="img"></image>
              </swiper-item>
            </swiper>
          </view>

          <view class="noDataBg" v-else></view>
        </view>
        <view class="detailBottom">
          <view class="detailFirst">
            <view class="firstLeft">
              <text class="serviceName">{{
                detailInfo.SERVERPART_NAME || ""
              }}</text>
              <text class="serviceStatus">营业中</text>
            </view>
            <view class="firstRight" @click="handleGomap">
              <view class="goBox">出发</view>
            </view>
          </view>
          <view class="detailSecond">
            <view class="secondLeft">
              <text class="addressText">{{ detailInfo.ServerpartInfo.SERVERPART_ADDRESS || "-"
              }}{{ detailInfo.ServerpartInfo.EXPRESSWAY_NAME || "-" }}</text>
            </view>

            <view class="secondRight">
              <!-- <image class="detailFixedIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/address.png" /> -->
              <image class="detailFixedIcon" src="/static/home/newFixedIcon.svg" />

              <text class="address">
                <text class="distance">{{
                  detailInfo.SERVERPART_DISTANCE === 0
                    ? 0
                    : detailInfo.SERVERPART_DISTANCE || "-"
                }}km</text>
              </text>
            </view>

          </view>
          <!-- <view class="navigationBox" @click="handleGomap">
            <image class="navigationIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/map.png" />
          </view> -->
        </view>
      </view>

      <!-- 加油 充电 停车场 -->
      <view class="carDetailBox">
        <!-- v-if="false" -->
        <view class="detailTab">
          <view :class="firstTab === item.value ? 'tabItem selectTabItem' : 'tabItem'
            " v-for="(item, index) in firstTabList" :key="index" @click="handleChangeFirstTab(item)">
            {{ item.label }}
          </view>
        </view>
        <view class="firstContent">
          <!-- 加油 -->
          <view class="gasContent" v-if="firstTab === 1">
            <view class="gasItem">
              <!-- <image class="gasItemIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/92Icon.svg" /> -->
              <image class="gasItemIcon" src="/static/home/new92.svg" />
              <!-- <span class="label">#加油枪</span> -->
              <!-- <span class="value">
                {{
                  oliData && oliData["92"]
                    ? `￥${oliData["92"]}`
                    : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                }}
              </span> -->
              <!-- {{
                detailInfo.sumDetail.REFUELINGGUN92 || "-"
              }} -->
              <view class="newValue">
                <view class="newValueLeft">
                  <span class="unit">￥</span>
                  <span class="price">{{
                    oliData && oliData["92"]
                      ? `${oliData["92"].toString().split('.')[0]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                  <span class="smallPrice">{{
                    oliData && oliData["92"]
                      ? `.${oliData["92"].toString().split('.')[1]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                </view>

                <view class="newValueRight">
                  /升
                </view>
              </view>
            </view>
            <view class="gasItem">
              <!-- <image class="gasItemIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/95Icon.svg" /> -->
              <image class="gasItemIcon" src="/static/home/new95.svg" />
              <!-- <span class="label">#加油枪</span> -->
              <!-- <span class="value">
                {{
                  oliData && oliData["95"]
                    ? `￥${oliData["95"]}`
                    : detailInfo.sumDetail.REFUELINGGUN95 || "-"
                }}
              </span> -->
              <!-- {{detailInfo.sumDetail.REFUELINGGUN95 || "-"}} -->
              <view class="newValue">
                <view class="newValueLeft">
                  <span class="unit">￥</span>
                  <span class="price">{{
                    oliData && oliData["95"]
                      ? `${oliData["95"].toString().split('.')[0]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                  <span class="smallPrice">{{
                    oliData && oliData["95"]
                      ? `.${oliData["95"].toString().split('.')[1]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                </view>

                <view class="newValueRight">
                  /升
                </view>
              </view>
            </view>
            <view class="gasItem">
              <!-- <image class="gasItemIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/zeroIcon.svg" /> -->
              <image class="gasItemIcon" src="/static/home/new0.svg" />
              <!-- <span class="label">#加油枪</span> -->
              <!-- <span class="value">
                {{
                  oliData && oliData["0"]
                    ? `￥${oliData["0"]}`
                    : detailInfo.sumDetail.REFUELINGGUN0 || "-"
                }}
              </span> -->
              <!-- {{detailInfo.sumDetail.REFUELINGGUN0 || "-"}} -->
              <view class="newValue">
                <view class="newValueLeft">
                  <span class="unit">￥</span>
                  <span class="price">{{
                    oliData && oliData["0"]
                      ? `${oliData["0"].toString().split('.')[0]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                  <span class="smallPrice">{{
                    oliData && oliData["0"]
                      ? `.${oliData["0"].toString().split('.')[1]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                </view>

                <view class="newValueRight">
                  /升
                </view>
              </view>
            </view>
          </view>
          <!-- 充电信息 -->
          <view class="chargeContent" v-if="false">
            <!-- v-if="firstTab === 2" -->
            <view class="chargeItem">
              <view class="itemLeft">
                <img class="imgIcon" src="https://eshangtech.com/minTestImg/LXIcon.png" />
                <span class="chargeTypeName">理想</span>
              </view>
              <view class="itemRight">
                <span class="emptyText">空</span>
                <span class="use">{{
                  detailInfo.LXDetail && detailInfo.LXDetail.LXEmpty
                    ? detailInfo.LXDetail.LXEmpty
                    : "0"
                }}</span>
                <span class="sum">/{{
                  detailInfo.LXDetail && detailInfo.LXDetail.LXSum
                    ? detailInfo.LXDetail.LXSum
                    : "0"
                }}</span>
              </view>
            </view>

            <view class="chargeItem">
              <view class="itemLeft">
                <img class="imgIcon" src="https://eshangtech.com/minTestImg/WLIcon.png" />
                <span class="chargeTypeName">蔚来</span>
              </view>
              <view class="itemRight">
                <span class="emptyText">空</span>
                <span class="use">{{
                  detailInfo.WLDetail && detailInfo.WLDetail.WLEmpty
                    ? detailInfo.WLDetail.WLEmpty
                    : "0"
                }}</span>
                <span class="sum">/{{
                  detailInfo.WLDetail && detailInfo.WLDetail.WLSum
                    ? detailInfo.WLDetail.WLSum
                    : "0"
                }}</span>
              </view>
            </view>

            <view class="chargeItem">
              <view class="itemLeft">
                <img class="imgIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg" />
                <span class="chargeTypeName">新能源</span>
              </view>
              <view class="itemRight">
                <span class="emptyText">空</span>
                <span class="use">{{
                  detailInfo.SunDetail && detailInfo.SunDetail.SunEmpty
                    ? detailInfo.SunDetail.SunEmpty
                    : "0"
                }}</span>
                <span class="sum">/{{
                  detailInfo.SunDetail && detailInfo.SunDetail.SunSum
                    ? detailInfo.SunDetail.SunSum
                    : "0"
                }}</span>
              </view>
            </view>

            <view class="chargeItem" style="margin-bottom: 0">
              <view class="itemLeft">
                <img class="imgIcon" src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
                <span class="chargeTypeName">国网</span>
              </view>
              <view class="itemRight">
                <span class="emptyText">空</span>
                <span class="use">{{
                  detailInfo.chargeAndReplaceDetail &&
                    detailInfo.chargeAndReplaceDetail.chargeAndReplace
                    ? detailInfo.chargeAndReplaceDetail.chargeAndReplace
                    : "0"
                }}</span>
                <span class="sum">/{{
                  detailInfo.chargeAndReplaceDetail &&
                    detailInfo.chargeAndReplaceDetail.chargeAndReplaceSum
                    ? detailInfo.chargeAndReplaceDetail.chargeAndReplaceSum
                    : "0"
                }}</span>
              </view>
            </view>

            <view class="stateGrid" v-if="false">
              <view class="leftGrid">
                <!-- <image class="gridImg" src="https://eshangtech.com/wanmeiyizhanImg/home/stateGrid.png" /> -->
                <text class="gridText">充电桩</text>
              </view>
              <view class="rightGrid">
                <text class="other">空</text>
                <text class="have">{{ chargingObj.use || "0" }}</text>
                <text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
                <text class="all" v-else>/{{ detailInfo.sumDetail.LIVESTOCKPACKING || "0" }}</text>
              </view>
            </view>
            <view class="stateGrid" v-if="false">
              <view class="leftGrid">
                <!-- <image class="gridImg" src="https://eshangtech.com/wanmeiyizhanImg/home/stateGrid.png" /> -->
                <text class="gridText">国网</text>
              </view>
              <view class="rightGrid">
                <text class="other">空</text>
                <text class="have">{{ chargingObj.use || "0" }}</text>
                <text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
                <text class="all" v-else>/{{ detailInfo.sumDetail.STATEGRIDCHARGE || "0" }}</text>
              </view>
            </view>
            <view class="stateGrid" v-if="false">
              <view class="leftGrid">
                <!-- <image class="gridImg" src="https://eshangtech.com/wanmeiyizhanImg/home/stateGrid.png" /> -->
                <text class="gridText">理想5C</text>
              </view>
              <view class="rightGrid">
                <text class="other">空</text>
                <text class="have">{{ chargingObj.use || "0" }}</text>
                <text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
                <text class="all" v-else>/{{ detailInfo.sumDetail.LIAUTOCHARGE || "0" }}</text>
              </view>
            </view>
            <view class="stateGrid" v-if="false">
              <view class="leftGrid">
                <!-- <image class="gridImg" src="https://eshangtech.com/wanmeiyizhanImg/home/stateGrid.png" /> -->
                <text class="gridText">广汽能源</text>
              </view>
              <view class="rightGrid">
                <text class="other">空</text>
                <text class="have">{{ chargingObj.use || "0" }}</text>
                <text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
                <text class="all" v-else>/{{ detailInfo.sumDetail.GACENERGYCHARGE || "0" }}</text>
              </view>
            </view>
            <view class="stateGrid" v-if="false">
              <view class="leftGrid">
                <!-- <image class="gridImg" src="https://eshangtech.com/wanmeiyizhanImg/home/stateGrid.png" /> -->
                <text class="gridText">其他</text>
              </view>
              <view class="rightGrid">
                <text class="other">空</text>
                <text class="have">{{ chargingObj.use || "0" }}</text>
                <text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
                <text class="all" v-else>/{{ detailInfo.sumDetail.OTHERCHARGE || "0" }}</text>
              </view>
            </view>
          </view>
          <!-- 停车场信息 -->
          <view class="carContent" v-if="false">
            <!-- v-if="firstTab === 3" -->
            <view class="carItem">
              <view class="carTop">
                <image class="carIcon" :src="detailInfo.sumDetail.SMALLPARKING
                  ? 'https://eshangtech.com/wanmeiyizhanImg/home/carIcon.svg'
                  : 'https://eshangtech.com/wanmeiyizhanImg/home/noCarIcon.svg'
                  " />
              </view>
              <view class="carBottom">
                <view class="carName">轿车车位</view>
                <view class="carValue">{{ detailInfo.sumDetail.SMALLPARKING || "-"
                }}<span class="unit">个</span></view>
              </view>
            </view>
            <view class="carItem">
              <view class="carTop">
                <image class="carIcon" :src="detailInfo.sumDetail.PACKING
                  ? 'https://eshangtech.com/wanmeiyizhanImg/home/bus.svg'
                  : 'https://eshangtech.com/wanmeiyizhanImg/home/noBus.svg'
                  " />
              </view>
              <view class="carBottom">
                <view class="carName">客车车位</view>
                <view class="carValue">{{ detailInfo.sumDetail.PACKING || "-" }}
                  <span class="unit">个</span>
                </view>
              </view>
            </view>
            <view class="carItem">
              <view class="carTop">
                <image class="carIcon" :src="detailInfo.sumDetail.TRUCKPACKING
                  ? 'https://eshangtech.com/wanmeiyizhanImg/home/train.svg'
                  : 'https://eshangtech.com/wanmeiyizhanImg/home/noTrain.svg'
                  " />
              </view>
              <view class="carBottom">
                <view class="carName">货车车位</view>
                <view class="carValue">{{ detailInfo.sumDetail.TRUCKPACKING || "-"
                }}<span class="unit">个</span></view>
              </view>
            </view>
            <view class="carItem" style="margin-top: 24rpx">
              <view class="carTop">
                <image class="carIcon" :src="detailInfo.sumDetail.DANPACKING
                  ? 'https://eshangtech.com/wanmeiyizhanImg/home/chemicals.svg'
                  : 'https://eshangtech.com/wanmeiyizhanImg/home/noChemicals.svg'
                  " />
              </view>
              <view class="carBottom">
                <view class="carName">危化品车位</view>
                <view class="carValue">{{ detailInfo.sumDetail.DANPACKING || "-"
                }}<span class="unit">个</span></view>
              </view>
            </view>
          </view>
          <!-- 车辆维修 -->
          <view class="vehicleMaintenance" v-if="false">
            <!-- v-if="firstTab === 4" -->
            <!-- v-if="detailInfo.sumDetail.HASCHILD" -->
            <view class="vehicleTitle">车辆维修</view>
            <view class="vehicleContent">
              <view class="vehicleContentLeft">
                <view class="leftLabel">{{
                  detailInfo.sumDetail.REPAIR_TEL || "-"
                }}</view>
                <view class="onlineTime">营业时间：24小时</view>
              </view>
              <view class="vehicleContentRight" @click="handleCallPhone(detailInfo.sumDetail.REPAIR_TEL)">
                <image class="callPhone" src="https://eshangtech.com/wanmeiyizhanImg/home/callPhoneIcon.svg" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 新的司机之家等图片的展示 -->
      <view class="newContentBox" v-if="
        detailInfo &&
        detailInfo.configList &&
        detailInfo.configList.length > 0
      ">
        <view class="detailTab">
          <view :class="thirdTab === item.key ? 'tabItem selectTabItem' : 'tabItem'"
            v-for="(item, index) in detailInfo.configList" :key="index" @click="handleChangeThirdTab(item)">
            {{ item.name }}
          </view>
        </view>
        <scroll-view class="detailContent" :scroll-x="true" v-if="
          detailInfo &&
          detailInfo.configObj &&
          detailInfo.configObj[thirdTab] &&
          detailInfo.configObj[thirdTab].length > 0
        ">
          <view class="imgList">
            <view class="configImg" v-for="(item, index) in detailInfo.configObj[thirdTab]" :key="index"
              @click="handleShowImg(index, detailInfo.configObj[thirdTab])">
              <image class="img" :src="item.src" lazy-load="true" />
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 热门商家 -->
      <view class="popularMerchants">
        <view class="popularTitle">热门商家</view>
        <template v-if="merchantList && merchantList.length > 0">
          <div class="newShopUnit" v-for="(item, i) in merchantList" :key="i" @click="goShop(item)" :style="{
            marginBottom: i + 1 === merchantList.length ? '0' : '',
          }">
            <!-- borderWidth: i + 1 === merchantList.length ? '0' : '', -->
            <div>
              <div class="shopItemTop">
                <div class="shopImg">
                  <image class="shopIcon" :src="item.MERCHANTS_LOGO ||
                    'https://eshangtech.com/ShopICO/no-picture.png'
                    " mode="aspectFit" />
                </div>
                <div class="shopDetail">

                  <div class="shopDetailLeft">
                    <div class="detailLeftTop">
                      <span class="topShopName">{{ item.MERCHANTS_NAME }}</span>
                    </div>

                    <div class="detailLeftBottom">
                      <view class="scoreBox">
                        <uni-rate :value="item.MERCHANTS_SCORE" size="16" readonly allowHalf color="#D9D9D9"
                          activeColor="#FFC300" style="margin-right: 8rpx" />
                        {{ item.MERCHANTS_SCORE || '' }}
                      </view>
                      <view class="newOtherDetail">
                        <span class="label">月售</span>
                        <span class="value">{{ item.MONTHLYSALES || "-" }}</span>
                        <span class="label" style="margin-left: 20rpx;">人均</span>
                        <span class="value">￥{{ item.PERCAPITA || "-" }}</span>
                      </view>
                    </div>
                  </div>
                  <div class="shopDetailRight">
                    <view class="goFood" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">点餐</view>
                    <view class="search" v-else-if="item.GOODSLIST && item.GOODSLIST.length > 0"
                      @click.stop="goBuy(item)">查看</view>
                  </div>

                  <!-- <div class="shopName">
                    <span class="shopTitle">{{ item.MERCHANTS_NAME }}</span>
                  </div> -->

                  <!-- <span class="titleIcon" v-if="item.SCANCODE_ORDER === 1"></span> -->
                  <!-- <div class="otherDetail">
                    <div class="leftDetail">
                      <span class="mark">{{ item.MERCHANTS_SCORE
                      }}<span class="unit">分</span></span>
                      <span class="monthSales">月售{{ item.MONTHLYSALES || "-" }}</span>
                      <span class="perCapita">人均 ￥{{ item.PERCAPITA || "-" }}</span>
                    </div>
                    <div class="rightDetail">

                    </div>
                  </div> -->
                  <!-- <span class="perCapita"
                        >人均 ￥{{ item.PERCAPITA || "-" }}</span
                      > -->
                  <!-- <span
                        v-show="item.CouponList && item.CouponList.length > 0"
                        class="icon-coupon"
                        >优惠券</span
                      > -->

                  <!-- <div class="couponList">
                    <div class="couponBox" :style="{
                      right:
                        item.SCANCODE_ORDER === 1 &&
                          item.CouponList &&
                          item.CouponList.length > 0
                          ? '160rpx'
                          : '0',
                    }" v-if="item.CouponList && item.CouponList.length > 0">
                      <view class="couponIconBox">
                        <image class="couponIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/useCoupon.svg" />
                      </view>
                      <span class="couponText">优惠券</span>
                    </div>
                  </div> -->

                  <!-- 去点餐 -->
                  <!-- <div class="goOrder" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">
                    <image class="orderIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/goOrderIcon.svg" />
                    <span class="goOrderText">去点餐</span>
                  </div> -->



                  <!-- 优惠券 -->
                  <!-- <div
                class="couponBox"
                :style="{
                  right:
                    item.SCANCODE_ORDER === 1 &&
                    item.CouponList &&
                    item.CouponList.length > 0
                      ? '160rpx'
                      : '0',
                }"
                v-if="item.CouponList && item.CouponList.length > 0"
              >
                <image
                  class="couponIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/useCoupon.png"
                />
                <span class="couponText">优惠券</span>
              </div> -->
                </div>
              </div>

              <!-- <div class="shopList" v-if="
                item.GoodsList &&
                item.GoodsList.length > 0 &&
                item.SCANCODE_ORDER === 1
              ">
                <div class="shopItem" v-for="(subItem, subIndex) in item.GoodsList" :key="subIndex">
                  <div class="shopImgBox">
                    <image class="shopImg" mode="aspectFit" lazy-load="true" :src="subItem.IMAGE_URL" />
                  </div>
                  <div class="shopName">{{ subItem.COMMODITY_NAME || "" }}</div>
                  <div class="itemPrice">
                    <span class="itemUnit">¥</span>
                    <span class="itemPrice">{{
                      subItem.COMMODITY_RETAILPRICE || ""
                    }}</span>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </template>
      </view>

      <!-- 卫生间 母婴室 司机之家 -->
      <view class="otherFacilities" v-if="false">
        <view class="detailTab">
          <view :class="secondTab === item.value ? 'tabItem selectTabItem' : 'tabItem'
            " v-for="(item, index) in secondTabList" :key="index" @click="handleChangeSecondTab(item)">
            {{ item.label }}
          </view>
        </view>
        <view class="secondContent">
          <view class="toiletBox" v-if="secondTab === 1">
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWCIcon.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">男厕</view>
                <view class="value">{{ detailInfo.sumDetail.HASPANTRY
                }}<span class="unit">个</span></view>
              </view>

              <!-- <view class="toiletItemLeft">
                <image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWC.svg" />
                <text class="toiletText">男厕</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color: detailInfo.sumDetail.HASPANTRY > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.HASPANTRY }}</text
                >
              </view> -->
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/womanWCIcon.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">女厕</view>
                <view class="value">{{ detailInfo.sumDetail.HASWIFI
                }}<span class="unit">个</span></view>
              </view>

              <!-- <view class="toiletItemLeft">
                <image
                  class="toiletIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/woManWC.svg"
                />
                <text class="toiletText">女厕</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color: detailInfo.sumDetail.HASWIFI > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.HASWIFI }}</text
                >
              </view> -->
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/tideToiletSeat.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">潮汐厕位</view>
                <view class="value">{{ detailInfo.sumDetail.TOILETCOUNT
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image
                  class="toiletIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/tideToiletSeat.svg"
                />
                <text class="toiletText">潮汐厕位</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.TOILETCOUNT > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.TOILETCOUNT }}</text
                >
              </view> -->
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/toiletPaperTowels.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">厕纸巾</view>
                <view class="value">{{ detailInfo.sumDetail.TOILET_PAPER
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image
                  class="toiletIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/toiletPaperTowels.svg"
                />
                <text class="toiletText">厕纸巾</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.TOILET_PAPER > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.TOILET_PAPER }}</text
                >
              </view> -->
            </view>
          </view>
          <view class="toiletBox" v-if="secondTab === 2">
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/waterDispenser.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">饮水机</view>
                <view class="value">{{ detailInfo.sumDetail.MABROOMWATER_DISPENSER
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWC.svg" />
                <text class="toiletText">饮水机</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.MABROOMWATER_DISPENSER > 0
                        ? '#009F43'
                        : '',
                  }"
                  >{{ detailInfo.sumDetail.MABROOMWATER_DISPENSER }}</text
                >
              </view> -->
            </view>

            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/nursingTable.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">哺乳桌</view>
                <view class="value">{{ detailInfo.sumDetail.NURSING_TABLE
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWC.svg" />
                <text class="toiletText">哺乳桌</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.NURSING_TABLE > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.NURSING_TABLE }}</text
                >
              </view> -->
            </view>

            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/crib.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">婴儿床</view>
                <view class="value">{{ detailInfo.sumDetail.BABY_COT
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWC.svg" />
                <text class="toiletText">婴儿床</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color: detailInfo.sumDetail.BABY_COT > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.BABY_COT }}</text
                >
              </view> -->
            </view>

            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/changingTable.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">尿布台</view>
                <view class="value">{{ detailInfo.sumDetail.CHANGING_TABLE
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWC.svg" />
                <text class="toiletText">尿布台</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.CHANGING_TABLE > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.CHANGING_TABLE }}</text
                >
              </view> -->
            </view>
          </view>
          <view class="toiletBox" v-if="secondTab === 3">
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">淋浴间</view>
                <view class="value">{{
                  detailInfo.sumDetail.SHOWERROOM === 0
                    ? "无"
                    : detailInfo.sumDetail.SHOWERROOM === 1
                      ? "有"
                      : detailInfo.sumDetail.SHOWERROOM === 2
                        ? "热水"
                        : "-"
                }}</view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image
                  class="toiletIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg"
                />
                <text class="toiletText">淋浴间</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color: detailInfo.sumDetail.SHOWERROOM > 0 ? '#009F43' : '',
                  }"
                  >{{
                    detailInfo.sumDetail.SHOWERROOM === 0
                      ? "无"
                      : detailInfo.sumDetail.SHOWERROOM === 1
                      ? "有"
                      : detailInfo.sumDetail.SHOWERROOM === 2
                      ? "热水"
                      : "-"
                  }}</text
                >
              </view> -->
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">饮水机</view>
                <view class="value">{{ detailInfo.sumDetail.DROOMWATER_DISPENSER
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image
                  class="toiletIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg"
                />
                <text class="toiletText">饮水机</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.DROOMWATER_DISPENSER > 0
                        ? '#009F43'
                        : '',
                  }"
                  >{{ detailInfo.sumDetail.DROOMWATER_DISPENSER }}</text
                >
              </view> -->
            </view>
          </view>
          <view class="toiletBox" v-if="secondTab === 4">
            <view class="toiletItem" v-if="false">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">淋浴间</view>
                <view class="value">{{ detailInfo.sumDetail.HASSHOWERROOM
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image
                  class="toiletIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg"
                />
                <text class="toiletText">淋浴间</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.HASSHOWERROOM > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.HASSHOWERROOM }}</text
                >
              </view> -->
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">开水器</view>
                <view class="value">{{ detailInfo.sumDetail.HASWATERROOM
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image
                  class="toiletIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg"
                />
                <text class="toiletText">开水器</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.HASWATERROOM > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.HASWATERROOM }}</text
                >
              </view> -->
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/microwave.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">微波炉</view>
                <view class="value">{{ detailInfo.sumDetail.MICROWAVEOVEN
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image
                  class="toiletIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/microwave.svg"
                />
                <text class="toiletText">微波炉</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.MICROWAVEOVEN > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.MICROWAVEOVEN }}</text
                >
              </view> -->
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/washingMachine.svg" />
              </view>
              <view class="toiletItemRight">
                <view class="label">洗衣机</view>
                <view class="value">{{ detailInfo.sumDetail.WASHERCOUNT
                }}<span class="unit">个</span></view>
              </view>
              <!-- <view class="toiletItemLeft">
                <image
                  class="toiletIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/washingMachine.svg"
                />
                <text class="toiletText">洗衣机</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.WASHERCOUNT > 0 ? '#009F43' : '',
                  }"
                  >{{ detailInfo.sumDetail.WASHERCOUNT }}</text
                >
              </view> -->
            </view>
            <view class="toiletItem" v-if="false">
              <!-- <view class="toiletItemLeft">
                <image
                  class="toiletIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/watering.svg"
                />
                <text class="toiletText">加水</text>
              </view>
              <view class="toiletItemRight">
                <text
                  class="rightText"
                  :style="{
                    color:
                      detailInfo.sumDetail.VEHICLEWATERFILLING > 0
                        ? '#009F43'
                        : '',
                  }"
                  >{{
                    detailInfo.sumDetail.VEHICLEWATERFILLING > 0 ? "有" : "无"
                  }}</text
                >
              </view> -->
            </view>
            <view class="toiletItem" v-if="false">
              <view class="toiletItemLeft">
                <image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/urea.svg" />
                <text class="toiletText">尿素</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <text class="rightText" :style="{
                  color: detailInfo.sumDetail.UREA_COUNT ? '#009F43' : '',
                }">{{ detailInfo.sumDetail.UREA_COUNT ? "有" : "无" }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import customLoading from "../../components/customLoading.vue";
export default {
  components: { customLoading },
  data() {
    return {
      menu: {},
      detailInfo: {}, // 服务区信息对象
      firstTabList: [
        { label: "加油", value: 1 },
        // { label: "充电", value: 2 },
        // { label: "停车场", value: 3 },
        // { label: "汽修", value: 4 },
      ], // 加油 充电 停车场 的tab
      firstTab: 1,
      secondTabList: [
        { label: "卫生间", value: 1 },
        { label: "母婴室", value: 2 },
        { label: "司机之家", value: 3 },
        { label: "其他设施", value: 4 },
      ],
      secondTab: 1,
      thirdTab: "",
      selectTypeList: [],
      seatInfo: {},
      serverpart: "", // 传入的服务区id
      merchantList: [], // 商家列表
      chargingObj: {
        have: 0,
        use: 0,
      }, // 充电桩数据
      loginType: "",
      come: "", // 来自哪个页面
      isFirst: true,
      isLoading: false,
      oliData: {}, // 油价信息
    };
  },
  async onLoad(query) {
    // this.isLoading = true;
    let systemInfo = uni.getSystemInfoSync();
    let type = uni.getStorageSync("loginType");
    this.loginType = type;
    if (type === "min") {
      this.menu = uni.getMenuButtonBoundingClientRect();
    } else {
      this.menu = systemInfo.safeArea;
    }
    console.log("query", query);
    if (query.id) {
      this.serverpart = query.id;
    }
    if (query.come) {
      this.come = query.come;
    }

    await this.handleGetServerpartDetail(this.serverpart);
    await this.handleGetMerchant();

    // this.isLoading = false;
    this.$utils.addUserBehaviorNew();
  },
  async onShow() {
    // this.isLoading = true;
    if (this.isFirst) {
      this.isFirst = false;
    } else {
      let currentService = uni.getStorageSync("currentService");
      // && this.come !== "chargeBox"
      if (currentService.SERVERPART_ID !== this.serverpart) {
        this.serverpart = currentService.SERVERPART_ID;
        await this.handleGetServerpartDetail(this.serverpart);
        await this.handleGetMerchant();
      }
    }
    // this.isLoading = false;
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  methods: {
    // 预览新的图片
    handleShowImg(index, imgList) {
      console.log("imgList", imgList);
      let list = [];
      imgList.forEach((item) => {
        list.push(item.src);
      });

      uni.previewImage({
        urls: list,
        current: index,
        loop: true,
        indicator: "number",
      });
    },
    // 新的tab选择
    handleChangeThirdTab(obj) {
      console.log("obj", obj);
      this.thirdTab = obj.key;
    },
    handleChangeFirstTab(obj) {
      this.firstTab = obj.value;
    },
    handleChangeSecondTab(obj) {
      this.secondTab = obj.value;
    },
    // 打开导航
    handleGomap() {
      let obj = this.detailInfo;
      uni.openLocation({
        latitude: obj.latitude ? obj.latitude * 1 : obj.SERVERPART_Y * 1,
        longitude: obj.longitude ? obj.longitude * 1 : obj.SERVERPART_X * 1,
        scale: 16, // 缩放比例
        name: obj.SERVERPART_NAME,
        // address: "", // 这个可能会影响地图的定位，所以可以选择不填
        success(data) {
          console.log(data);
        },
        fail(err) {
          console.log(err);
        },
      });
    },
    // 查询服务区详情
    async handleGetServerpartDetail(id) {
      let currentService = uni.getStorageSync("currentService");
      let seatInfo = uni.getStorageSync("seatInfo");
      this.seatInfo = seatInfo;
      console.log('currentServicecurrentService', currentService);
      console.log('this.seatInfothis.seatInfothis.seatInfo', seatInfo);


      let req = {
        ServerpartId: id || currentService.SERVERPART_ID,
        latitude: this.seatInfo.latitude,
        longitude: this.seatInfo.longitude,
        excludeProperty: true,
      };
      // uni.showLoading({
      //   title: "加载中...",
      // });

      const data = await this.$api.$javaGet2(
        "/third-party/getServerPartInfo",
        req
      );

      // const data = await this.$api.$get(
      //   "/CommercialApi/BaseInfo/GetServerpartInfo",
      //   req
      // );

      let obj = data.Result_Data;
      let sumObj = {
        LIVESTOCKPACKING: 0, // 充电桩数
        STATEGRIDCHARGE: 0, // 国网充电桩数量
        LIAUTOCHARGE: 0, //  理想5C充电桩数量
        GACENERGYCHARGE: 0, //  广汽能源充电桩数量
        OTHERCHARGE: 0, // 其他充电桩数量
        REFUELINGGUN92: 0, // 加油枪92号
        REFUELINGGUN95: 0, //  加油枪95号
        REFUELINGGUN0: 0, // 加油枪0号
        HASPANTRY: 0, // 男厕数量
        HASWIFI: 0, // 女厕数量
        TOILETCOUNT: 0, // 潮汐厕位
        HASSHOWERROOM: 0, // 淋浴房
        HASWATERROOM: 0, // 开水器
        MICROWAVEOVEN: 0, // 微波炉
        WASHERCOUNT: 0, // 洗衣机数量
        SLEEPINGPODS: 0, // 睡眠仓
        HASPILOTLOUNGE: false, // 有无司机之家
        SHOWERROOM: 0, // 司机之家淋浴间
        HASCHILD: false, // 有无车辆维修
        // VEHICLEWATERFILLING: false, // 有无车辆加水
        SMALLPARKING: 0, // 轿车车位
        PACKING: 0, // 客车车位
        TRUCKPACKING: 0, // 货车车位
        DANPACKING: 0, // 危化品车位
        DININGBXCOUNT: 0, // 商铺数量
        DININGROOMCOUNT: 0, // 餐饮店
        HASBACKGROUNDRADIO: 0, // 便利店
        POINTCONTROLCOUNT: 0, // 客房
        BUSINESSTYPE: "",
        TOILET_PAPER: 0, // 厕纸巾
        MABROOMWATER_DISPENSER: 0, // 母婴室饮水机
        NURSING_TABLE: 0, // 哺乳桌
        BABY_COT: 0, // 婴儿床
        CHANGING_TABLE: 0, // 尿布台
        DROOMWATER_DISPENSER: 0, // 司机之家饮水机
        REPAIR_TEL: "",
        UREA_COUNT: 0, // 尿素
        VEHICLEWATERFILLING: 0, // 加水
      };

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

      let configList = []; // 方位区的内容
      let typeList = []; // 类型判断有过没
      let typeObj = {
        1001: "母婴室",
        1002: "司机之家",
        2001: "住宿",
        2002: "便利店",
      };
      let configObj = {};

      console.log("res.RegionInfo", obj.RegionInfo);
      if (obj.RegionInfo && obj.RegionInfo.length > 0) {
        obj.RegionInfo.forEach((item) => {
          if (item.ImgList && item.ImgList.length > 0) {
            item.ImgList.forEach((subItem) => {
              if (subItem.key) {
                if (typeList.indexOf(subItem.key) === -1) {
                  typeList.push(subItem.key);
                  configList.push({
                    key: subItem.key,
                    name: typeObj[subItem.key],
                  });
                  configObj[subItem.key] = [
                    {
                      key: subItem.key,
                      name: typeObj[subItem.key],
                      SERVERPART_REGIONNAME: item.SERVERPART_REGIONNAME,
                      SERVERPART_REGION: item.SERVERPART_REGION,
                      SERVERPART_ID: item.SERVERPART_ID,
                      src: subItem.value,
                    },
                  ];
                } else {
                  configObj[subItem.key].push({
                    key: subItem.key,
                    name: typeObj[subItem.key],
                    SERVERPART_REGIONNAME: item.SERVERPART_REGIONNAME,
                    SERVERPART_REGION: item.SERVERPART_REGION,
                    SERVERPART_ID: item.SERVERPART_ID,
                    src: subItem.value,
                  });
                }
              }

              // configList.push({
              //   SERVERPART_REGIONNAME: item.SERVERPART_REGIONNAME,
              //   SERVERPART_REGION: item.SERVERPART_REGION,
              //   SERVERPART_ID: item.SERVERPART_ID,
              //   ImgList: item.ImgList,
              // });
            });
          }

          sumObj.LIVESTOCKPACKING += item.LIVESTOCKPACKING;
          sumObj.STATEGRIDCHARGE += item.STATEGRIDCHARGE;
          sumObj.LIAUTOCHARGE += item.LIAUTOCHARGE;
          sumObj.GACENERGYCHARGE += item.GACENERGYCHARGE;
          sumObj.OTHERCHARGE += item.OTHERCHARGE;
          sumObj.REFUELINGGUN92 += item.REFUELINGGUN92;
          sumObj.REFUELINGGUN95 += item.REFUELINGGUN95;
          sumObj.REFUELINGGUN0 += item.REFUELINGGUN0;
          sumObj.HASPANTRY += item.HASPANTRY;
          sumObj.HASWIFI += item.HASWIFI;
          sumObj.TOILETCOUNT += item.TOILETCOUNT;
          sumObj.HASSHOWERROOM += item.HASSHOWERROOM;
          sumObj.HASWATERROOM += item.HASWATERROOM;
          sumObj.MICROWAVEOVEN += item.MICROWAVEOVEN;
          sumObj.WASHERCOUNT += item.WASHERCOUNT;
          sumObj.SLEEPINGPODS += item.SLEEPINGPODS;
          sumObj.SMALLPARKING += item.SMALLPARKING;
          sumObj.PACKING += item.PACKING;
          sumObj.TRUCKPACKING += item.TRUCKPACKING;
          sumObj.DANPACKING += item.DANPACKING;
          sumObj.BUSINESSTYPE = item.BUSINESSTYPE;
          sumObj.TOILET_PAPER += item.TOILET_PAPER;
          sumObj.MABROOMWATER_DISPENSER += item.MABROOMWATER_DISPENSER;
          sumObj.NURSING_TABLE += item.NURSING_TABLE;
          sumObj.BABY_COT += item.BABY_COT;
          sumObj.CHANGING_TABLE += item.CHANGING_TABLE;
          sumObj.DROOMWATER_DISPENSER += item.DROOMWATER_DISPENSER;
          sumObj.UREA_COUNT += item.UREA_COUNT;
          sumObj.HASSHOWERROOM += item.HASSHOWERROOM;
          sumObj.VEHICLEWATERFILLING += item.VEHICLEWATERFILLING;
          if (item.HASPILOTLOUNGE) {
            sumObj.HASPILOTLOUNGE = true;
          }
          if (item.HASCHILD) {
            sumObj.HASCHILD = true;
          }
          sumObj.DININGBXCOUNT += item.DININGBXCOUNT;
          sumObj.DININGROOMCOUNT += item.DININGROOMCOUNT;
          sumObj.HASBACKGROUNDRADIO += item.HASBACKGROUNDRADIO;
          sumObj.POINTCONTROLCOUNT += item.POINTCONTROLCOUNT;
          if (item.REPAIR_TEL) {
            sumObj.REPAIR_TEL = item.REPAIR_TEL;
          }
          sumObj.SHOWERROOM = item.SHOWERROOM;

          // 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);

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

      console.log("configObj", configObj);

      obj.configList = configList;
      console.log("configList", configList);
      obj.configObj = configObj;
      obj.sumDetail = sumObj;
      if (configList && configList.length > 0) {
        this.thirdTab = configList[0].key;
      }
      this.detailInfo = obj;
      console.log("this.detailInfo", this.detailInfo);
      // let sortName = this.detailInfo.SERVERPART_NAME.split("服务区")[0];
      // if (["新桥", "丰乐", "肥东"].indexOf(sortName) !== -1) {
      //   // 调用理想的数据
      //   this.handleGetChargeData(sortName);
      // }

      // 拿到油价的数据
      this.handleGetOilData();

      // uni.hideLoading();
    },
    // 拿到油价数据
    async handleGetOilData() {
      // 拿服务区数据 知道服务区id对应的服务区名称
      const data = await this.$api.$javaGet2("/oil-price/getList", {
        serverpartId: this.detailInfo.SERVERPART_ID,
      });
      let oliData = data.Result_Data.List;
      // 暂时只展示 92  95  0
      let oliObj = {};
      if (oliData && oliData.length > 0) {
        oliData.forEach((item) => {
          if (
            item.oilNo === "92" ||
            item.oilNo === "95" ||
            item.oilNo === "0"
          ) {
            oliObj[item.oilNo] = item.price;
          }
        });
      }
      this.oliData = oliObj;
      console.log("this.oliData", this.oliData);

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

      // 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;
      // console.log("serviceList", serviceList);
      // // 从他们的服务区列表中 找到我们当前的服务区 并拿到他们对应的服务区id 之后 再去查数据
      // let currentObj = {};
      // if (serviceList && serviceList.length > 0) {
      //   serviceList.forEach((item) => {
      //     if (item.name === this.detailInfo.SERVERPART_NAME) {
      //       currentObj = item;
      //     }
      //   });
      // }

      // console.log("currentObj", currentObj);

      // const oilres = await new Promise((resolve, reject) => {
      //   uni.request({
      //     url: `https://wmgs.anhui-expressway.net/api/ydcx/v1/service-area/oil/price`,
      //     method: "GET",
      //     data: {
      //       areaId: currentObj.id,
      //     },
      //     header: {
      //       Authorization: `Bearer ${token}`,
      //       "content-type": "application/x-www-form-urlencoded",
      //     },
      //     success(res) {
      //       resolve(res);
      //     },
      //   });
      // });
      // let oliData = oilres.data.data;
      // console.log("oliData", oliData);
      // // 暂时只展示 92  95  0
      // let oliObj = {}
      // if (oliData && oliData.length > 0) {
      //   oliData.forEach(item => {
      //     if (item.oilNo === "92" || item.oilNo === "95" || item.oilNo === '0') {
      //       oliObj[item.oilNo] = item.price
      //     }
      //   })
      // }
      // this.oliData = oliObj
      // console.log('this.oliData', this.oliData);
    },
    // 生成随机数
    handleGetRandomData(max, min) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    // 拿到充电的理想数据
    async handleGetChargeData(name) {
      // 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: "",
      });
      console.log("tokenData", tokenData);
      // token的实际值
      let token = tokenData.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.StationInfos;
      console.log("stationList", stationList);

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

      // 这段是和自己最近的三个服务区的 理想充电筛出来的数据
      console.log("newStationList", newStationList);

      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: "003",
          token: token,
        });
        let statusList = stationInfo.Data.StationStatusInfos;
        console.log("statusList", statusList);
        if (statusList && statusList.length > 0) {
          statusList.forEach((item) => {
            if (stationObj[item.StationID]) {
              stationObj[item.StationID].statusList = item.ConnectorStatusInfos;
            }
          });
        }
      }
      console.log("stationObj", stationObj);

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

      console.log("haveStationList", haveStationList);

      let LXCharge = [];
      let LXInfoList = [];
      if (haveStationList && haveStationList.length > 0) {
        haveStationList.forEach((subItem) => {
          if (subItem.Address.indexOf(name) !== -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;
          });
        }

        this.detailInfo.LXDetail = {
          LXEmpty: LXEmpty,
          LXSum: LXSum,
        };
      }
      // uni.hideLoading();
    },
    // 跳转到选择服务区
    goSelectServer() {
      uni.navigateTo({ url: "/pages/newMap/index/index" });
    },
    // 返回上级页面
    handleBack() {
      uni.navigateBack({
        delta: 1,
      });
      // uni.switchTab({
      //   url: "/pages/index/index",
      // });
    },
    // 拿到精选商家数据
    async handleGetMerchant() {
      // uni.showLoading({
      //   title: "加载中...",
      // });

      // const data = await this.$api.getCoop({
      //   action_type: "GetSellerList",
      //   showSales: 1,
      //   showCoupon: 1,
      //   showComment: 1,
      //   serverpartId: this.detailInfo.SERVERPART_ID,
      //   provinceCode: "340000",
      //   showGoods: 1,
      //   pageSize: 9999,
      //   pageIndex: 1,
      // });
      // let list = data.Data.List || [];

      const data = await this.$api.$javaGet2("/third-party/getMerchantsList", {
        serverpartId: this.detailInfo.SERVERPART_ID,
      });
      let list = data.Result_Data.List;

      console.log("handleGetMerchant", list);
      this.merchantList = list;
      // uni.hideLoading();
      this.isLoading = false;
    },
    goShop(item) {
      console.log("goShop", item);
      this.goBuy(item);
      // if (item.SCANCODE_ORDER === 1) {
      //   this.goBuy(item);
      // } else {
      //   uni.navigateTo({
      //     url: `/pages/storeDetail/index?id=${item.MERCHANTS_ID}`,
      //   });
      // }
    },
    // 去点餐的跳转
    goBuy(item) {
      console.log("goBuy", item);
      if (this.user.MEMBERSHIP_MOBILEPHONE) {
        let id = item.SERVERPARTSHOP_IDS.split(",")[0];
        uni.navigateTo({
          url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}&buyType=${item.SCANCODE_ORDER}`,
        });
      } else {
        let id = item.SERVERPARTSHOP_IDS.split(",")[0];
        uni.navigateTo({
          url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}&buyType=${item.SCANCODE_ORDER}`,
        });
        this.isLogin = true;
      }
    },
    // 打电话
    handleCallPhone(phone) {
      if (!phone) {
        return;
      }
      uni.makePhoneCall({
        phoneNumber: phone, //仅为示例
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  min-height: 100vh;
  background: #f5f5f5;

  .topBox {
    width: 100%;
    padding: 0 32rpx 16rpx;
    box-sizing: border-box;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;

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

      .backIconBox {
        width: 48rpx;
        height: 48rpx;

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

      .currentServiceBox {
        display: flex;
        align-items: center;
        padding: 8rpx 16rpx;
        background: #fff;
        border-radius: 32rpx;
        border: 1rpx solid #e7e7e6;
        margin-left: 8rpx;

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

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

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

  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx 48rpx;
    margin-top: 24rpx;

    .serviceDetail {
      width: 100%;
      background: #ffffff;
      border-radius: 16rpx;

      .detailTop {
        width: 100%;
        height: 320rpx;
        border-radius: 16rpx;
        overflow: hidden;

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

        .noDataBg {
          width: 100%;
          height: 100%;
          background-image: url(https://eshangtech.com/wanmeiyizhanImg/discovery/defaultIcon.png);
          background-repeat: no-repeat;
          background-position-x: 50%;
          background-position-y: 50%;
        }
      }

      .detailBottom {
        width: 100%;
        box-sizing: border-box;
        padding: 20rpx 28rpx 28rpx;
        position: relative;

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

          .firstLeft {
            width: calc(100% - 150rpx);
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .serviceName {
              max-width: calc(100% - 190rpx);
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 36rpx;
              color: #130f05;
              line-height: 46rpx;
              text-align: left;
              font-style: normal;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              margin-right: 20rpx;
            }

            .serviceStatus {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              color: #009f43;
              line-height: 32rpx;
              text-align: justify;
              font-style: normal;
              display: inline-block;
              padding: 2rpx 6rpx;
              background: #e9f8ee;
              border-radius: 4rpx;
            }
          }

          .firstRight {
            .goBox {
              font-family: "MicrosoftYaHei";
              font-weight: 400;
              font-size: 26rpx;
              color: #FFFFFF;
              text-align: center;
              font-style: normal;
              text-transform: none;
              padding: 4rpx 30rpx;
              border-radius: 32rpx;
              background-color: #00C920;
            }
          }


        }

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

          .secondLeft {
            width: calc(100% - 150rpx);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .addressText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #716f69;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              width: 100%;
            }
          }

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

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

            .detailFixedIcon {
              width: 34rpx;
              height: 34rpx;
            }
          }
        }

        .navigationBox {
          width: 64rpx;
          height: 64rpx;
          position: absolute;
          right: 24rpx;
          top: 32rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f8f4ea;
          border-radius: 50%;

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

    .carDetailBox {
      width: 100%;
      background: #fff;
      border-radius: 16rpx;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 24rpx;

      .detailTab {
        width: 100%;
        // border-bottom: 1px solid #f3f3f3;
        display: flex;
        align-items: center;

        .tabItem {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-right: 40rpx;
          padding-bottom: 14rpx;
        }

        .selectTabItem {
          font-weight: 600;
          color: #160002;
          position: relative;
        }

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

      .detailContent {
        width: 100%;
        height: 150rpx;
      }

      .firstContent {
        width: 100%;
        margin-top: 24rpx;

        .gasContent {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 24rpx;
          box-sizing: border-box;

          .gasItem {
            width: calc((100% - 44rpx) / 3);
            box-sizing: border-box;
            padding: 20rpx 20rpx 10rpx;
            border-radius: 16rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #F7F7F7;

            .gasItemIcon {
              width: 160rpx;
              height: 160rpx;
            }

            // .label {
            //   font-family: "PingFangSC";
            //   font-weight: 400;
            //   font-size: 26rpx;
            //   color: #2a2b2e;
            //   line-height: 36rpx;
            //   text-align: left;
            //   font-style: normal;
            //   margin: 16rpx 0;
            // }

            .value {
              font-family: "DINAlternate";
              font-size: 24rpx;
              color: #2a2b2e;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }

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

              .newValueLeft {
                display: flex;
                align-items: flex-end;

                .unit {
                  font-family: "MicrosoftYaHei";
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #FF6200;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                }

                .price {
                  font-family: "MicrosoftYaHei";
                  font-weight: bold;
                  font-size: 36rpx;
                  line-height: 36rpx;
                  color: #FF6200;
                  text-align: right;
                  font-style: normal;
                }

                .smallPrice {
                  font-family: "MicrosoftYaHei";
                  font-weight: bold;
                  font-size: 26rpx;
                  line-height: 26rpx;
                  color: #FF6200;
                  text-align: right;
                  font-style: normal;
                }
              }

              .newValueRight {
                font-family: "MicrosoftYaHei";
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(0, 0, 0, 0.3);
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
          }

          .first {
            background: linear-gradient(180deg, #f3fbf7 0%, #f3faf7 100%);
          }

          .second {
            background: linear-gradient(180deg, #f8f9ff 0%, #f5f6fe 100%);
          }

          .third {
            background: linear-gradient(180deg, #f1f7ff 0%, #f2f7ff 100%);
          }
        }

        .chargeContent {
          margin-top: 24rpx;

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

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

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

              .chargeTypeName {
                font-family: "PingFangSC";
                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";
                font-weight: 400;
                font-size: 24rpx;
                color: #130f05;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                margin-right: 4rpx;
              }

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

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

          .stateGrid {
            width: 100%;
            margin-top: 24rpx;
            background: #f6f6f6;
            border-radius: 12rpx;
            box-sizing: border-box;
            padding: 24rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

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

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

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

              .fastCharg {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 20rpx;
                color: #ffffff;
                line-height: 28rpx;
                text-align: justify;
                font-style: normal;
                display: inline;
                padding: 2rpx 6rpx;
                background: linear-gradient(270deg, #ff500e 0%, #ff7d0a 100%);
                border-radius: 4rpx;
              }
            }

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

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

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

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

          .contentItem {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 24rpx;
            margin-bottom: 24rpx;
            // background-image: url('https://eshangtech.com/wanmeiyizhanImg/home/chargeBg.png');
            // background-repeat: no-repeat;
            // background-size: 100% 100%;
            border-radius: 8rpx;
            border: 2rpx solid #f5f6f7;

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

              // width: 128rpx;
              // height: 64rpx;
              .carIcon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 12rpx;
              }

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

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

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

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

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

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

              .value {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 36rpx;
                color: #282622;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }
        }

        .carContent {
          width: 100%;
          // background: #FAFAFC;
          border-radius: 8rpx;
          border: 2rpx solid #f5f6f7;
          margin-top: 24rpx;
          box-sizing: border-box;
          padding: 24rpx 24rpx 0;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 32rpx;

          .carItem {
            width: calc((100% / 2));
            display: flex;
            align-items: center;
            margin-bottom: 32rpx;

            .carTop {
              width: 80rpx;
              height: 80rpx;
              display: flex;
              align-items: center;
              border: 1rpx solid #e7e7e6;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              margin-right: 16rpx;

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

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

            .carBottom {
              // margin-top: 4rpx;
              // padding-left: 38rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #8c8981;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;

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

              .carValue {
                font-family: DINAlternate, DINAlternate;
                font-size: 28rpx;
                color: #130f05;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;

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

        .vehicleMaintenance {
          width: 100%;
          box-sizing: border-box;
          padding: 0 24rpx;
          background: #ffffff;
          border-radius: 16rpx;

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

          .vehicleContent {
            margin-top: 12rpx;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;

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

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

            .vehicleContentRight {
              .callPhone {
                width: 64rpx;
                height: 64rpx;
              }
            }
          }
        }
      }
    }

    .otherFacilities {
      width: 100%;
      background: #fff;
      border-radius: 16rpx;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 24rpx;

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

      .detailTab {
        width: 100%;
        border-bottom: 1px solid #f3f3f3;
        display: flex;
        align-items: center;

        .tabItem {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-right: 40rpx;
          padding-bottom: 14rpx;
        }

        .selectTabItem {
          font-weight: 600;
          color: #160002;
          position: relative;
        }

        .selectTabItem::after {
          position: absolute;
          content: "";
          width: 2rem;
          height: 6rpx;
          background: #ba922f;
          border-radius: 3rpx;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .secondContent {
        width: 100%;
        margin-top: 24rpx;

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

          .toiletItem {
            width: calc((100% - 16rpx) / 2);
            box-sizing: border-box;
            padding: 24rpx;
            // background: #f6f6f6;
            border-radius: 12rpx;
            margin-bottom: 16rpx;
            display: flex;
            align-items: center;
            // justify-content: space-between;

            .toiletItemLeft {
              width: 80rpx;
              height: 80rpx;
              border: 1rpx solid #e7e7e6;
              border-radius: 50%;
              margin-right: 16rpx;
              display: flex;
              align-items: center;
              justify-content: center;

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

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

              .value {
                margin-top: 4rpx;
                font-family: DINAlternate, DINAlternate;
                font-size: 28rpx;
                color: #130f05;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;

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

            // .toiletItemLeft {
            //   display: flex;
            //   align-items: center;

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

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

            // .toiletItemRight {
            //   .rightText {
            //     font-family: PingFangSC, PingFang SC;
            //     font-weight: 400;
            //     font-size: 28rpx;
            //     color: #999da3;
            //     line-height: 40rpx;
            //     text-align: left;
            //     font-style: normal;
            //   }
            // }
          }
        }
      }
    }

    .newContentBox {
      width: 100%;
      background: #fff;
      border-radius: 16rpx;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 24rpx;

      .detailTab {
        width: 100%;
        border-bottom: 1px solid #f3f3f3;
        display: flex;
        align-items: center;

        .tabItem {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #BDBDBD;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-right: 40rpx;
          padding-bottom: 14rpx;
        }

        .selectTabItem {
          font-weight: 600;
          color: #160002;
          position: relative;
        }

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

      .detailContent {
        width: calc(100%);
        height: 180rpx;
        margin-top: 24rpx;

        .imgList {
          width: 100%;
          white-space: nowrap;

          /* 防止子项换行 */
          .configImg {
            width: 176rpx;
            height: 176rpx;
            border-radius: 18rpx;
            display: inline-block;
            overflow: hidden;
            margin-right: 16rpx;

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

    .popularMerchants {
      width: 100%;
      box-sizing: border-box;
      padding: 24rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 24rpx;

      .popularTitle {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 30rpx;
        color: #130f05;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        margin-bottom: 36rpx;
      }

      .newTabList {
        width: 100%;
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
        border-bottom: 1px solid #f5f6f7;

        .newTabItem {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          padding: 0 50rpx 12rpx 50rpx;
          white-space: nowrap;
        }

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

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

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

      .newShopUnit {
        width: 100%;
        margin-bottom: 30rpx;
        // border-bottom: 1px solid #ededed;
        // padding-bottom: 32rpx;

        .shopItemTop {
          width: 100%;
          display: flex;
          align-items: flex-start;

          .shopImg {
            width: 130rpx;
            height: 130rpx;
            overflow: hidden;
            border-radius: 16rpx;
            margin-right: 28rpx;

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

          .shopDetail {
            width: calc(100% - 158rpx);
            height: 130rpx;
            // height: 96rpx;
            display: flex;
            align-items: center;
            // flex-direction: column;
            // justify-content: space-between;
            // position: relative;

            .shopDetailLeft {
              width: calc(100% - 150rpx);
              height: 130rpx;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .detailLeftTop {
                .topShopName {
                  font-family: "Microsoft YaHei";
                  font-weight: 400;
                  font-size: 29rpx;
                  color: #000000;
                  text-align: left;
                  font-style: normal;
                }
              }

              .detailLeftBottom {
                .scoreBox {
                  display: flex;
                  align-items: center;
                  font-family: "Microsoft YaHei";
                  font-weight: 400;
                  font-size: 22rpx;
                  color: #FF6200;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                }

                .newOtherDetail {
                  width: 100%;
                  display: flex;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  margin-top: 12rpx;

                  .label {
                    font-family: "Microsoft YaHei";
                    font-weight: 400;
                    font-size: 22rpx;
                    color: rgba(0, 0, 0, 0.5);
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    display: inline-block;
                    width: 50rpx;
                  }

                  .value {
                    font-family: "Microsoft YaHei";
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #009DFF;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    display: inline-block;
                    width: 70rpx;
                  }
                }
              }
            }

            .shopDetailRight {
              width: 150rpx;
              display: flex;
              justify-content: flex-end;

              .goFood {
                font-family: "Microsoft YaHei";
                font-weight: 400;
                font-size: 26rpx;
                color: #FFFFFF;
                text-align: center;
                font-style: normal;
                text-transform: none;
                padding: 4rpx 28rpx;
                background-color: #FF6200;
                border-radius: 32rpx;
                display: inline-block;
              }

              .search {
                font-family: "Microsoft YaHei";
                font-weight: 400;
                font-size: 26rpx;
                color: #FFFFFF;
                text-align: center;
                font-style: normal;
                text-transform: none;
                padding: 4rpx 28rpx;
                background-color: #009DFF;
                border-radius: 32rpx;
                display: inline-block;

              }
            }

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

              .shopTitle {
                display: inline-block;
                max-width: calc(100% - 133rpx);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 32rpx;
                color: #130f05;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
              }

              .titleIcon {
                display: inline-block;
                background: url("https://eshangtech.com/ShopICO/icos/to-eat.png") no-repeat center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center;
                background-size: contain;
                width: 133rpx;
                height: 48rpx;
              }
            }

            .otherDetail {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .leftDetail {
                .mark {
                  font-family: "DINAlternate";
                  font-weight: bold;
                  font-size: 32rpx;
                  color: #ba922f;
                  line-height: 36rpx;
                  text-align: justify;
                  font-style: normal;

                  .unit {
                    font-family: "PingFangSC";
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #ba922f;
                    line-height: 32rpx;
                    text-align: left;
                    font-style: normal;
                  }
                }

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

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

              .rightDetail {
                .perCapita {
                  font-size: 24rpx;
                  color: #666;
                }

                .icon-coupon {
                  background: url("https://eshangtech.com/ShopICO/icos/y-yhq.png") no-repeat left center; // eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
                  background-size: contain;
                  // width 75rpx
                  // height 22rpx
                  padding-left: 40rpx;
                  height: 27rpx;
                  line-height: 27rpx;
                  // padding-left 25rpx
                  font-size: 24rpx;
                  color: #ec5930;
                  margin-left: 8px;
                }
              }
            }

            .couponList {
              display: inline-block;
              margin-top: 12rpx;

              .couponBox {
                background: #fef0e5;
                border-radius: 2rpx;
                display: flex;
                align-items: center;

                .couponIconBox {
                  width: 40rpx;
                  height: 40rpx;
                  background: linear-gradient(180deg, #ffddc0 0%, #ffeada 100%);
                  border-radius: 4rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;

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

                .couponText {
                  margin: 0 10rpx;
                  font-family: "PingFangSC";
                  font-weight: 400;
                  font-size: 22rpx;
                  color: #fa5825;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                }
              }
            }

            .goOrder {
              position: absolute;
              right: 0;
              top: 0;
              padding: 10rpx 12rpx;
              border-radius: 4rpx;
              border: 2rpx solid #ae8d3e;
              display: flex;
              align-items: center;

              .orderIcon {
                width: 32rpx;
                height: 32rpx;
                margin-right: 8rpx;
              }

              .goOrderText {
                font-family: "PingFangSC";
                font-weight: 400;
                font-size: 22rpx;
                color: #ba922f;
                line-height: 32rpx;
                text-align: left;
                font-style: normal;
              }
            }

            // .couponBox {
            //   padding: 4rpx 6rpx;
            //   background: rgba(247, 80, 49, 0.08);
            //   border-radius: 2rpx;
            //   display: flex;
            //   align-items: center;
            //   position: absolute;
            //   right: 160rpx;
            //   top: 0;
            //   .couponIcon {
            //     width: 24rpx;
            //     height: 24rpx;
            //     margin-right: 4rpx;
            //   }
            //   .couponText {
            //     font-family: PingFangSC, PingFang SC;
            //     font-weight: 400;
            //     font-size: 22rpx;
            //     color: #f75031;
            //     line-height: 32rpx;
            //     text-align: left;
            //     font-style: normal;
            //     white-space: nowrap;
            //   }
            // }
          }
        }

        .shopList {
          width: calc(100% - 160rpx);
          box-sizing: border-box;
          margin-left: 160rpx;
          overflow-x: auto;
          display: flex;
          margin-top: 24rpx;

          .shopItem {
            width: 168rpx;
            margin-right: 16rpx;

            .shopImgBox {
              width: 168rpx;
              height: 168rpx;
              overflow: hidden;
              border-radius: 12rpx;
              margin-bottom: 8rpx;

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

            .shopName {
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-family: "PingFangSC";
              font-weight: 400;
              font-size: 22rpx;
              color: #130f05;
              line-height: 32rpx;
              text-align: justify;
              font-style: normal;
            }

            .itemPrice {
              .itemUnit {
                font-family: "DINAlternate";
                font-weight: bold;
                font-size: 24rpx;
                color: #130f05;
                text-align: left;
                font-style: normal;
              }

              .itemPrice {
                font-family: "DINAlternate";
                font-weight: bold;
                font-size: 32rpx;
                color: #130f05;
                text-align: left;
                font-style: normal;
              }
            }
          }
        }

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

        .activitieBox {
          width: 100%;
          box-sizing: border-box;
          padding-top: 24rpx;

          .activeTitle {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #716f69;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 16rpx;
          }

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

            .couponItem {
              width: calc((100% - 24rpx) / 2) !important;
              margin-right: 24rpx;

              .itemImgBox {
                width: 100%;
                height: 192rpx;
                border-radius: 12rpx;
                overflow: hidden;
                margin-bottom: 16rpx;

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

              .couponText {
                font-family: PingFangSC, PingFang SC;
                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;
              }

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

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

                .couponTimeText {
                  width: calc(100% - 32rpx);
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #716f69;
                  line-height: 36rpx;
                  text-align: justify;
                  font-style: normal;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }

            .couponItem:nth-child(2n) {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>