<template>
  <view class="main">
    <view class="topBox" :style="{ height: menu.bottom + 14 + 'px' }">
      <view class="topContent" :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }">
        <view class="backIconBox" @click="handleBack">
          <image class="backIcon" src="/static/images/home/brankBlackArrow.svg" />
        </view>
        <view class="currentServiceBox" @click="goSelectServer">
          <image class="servicePosition" src="/static/images/home/servicePosition.svg" />
          <text class="currentService">{{ detailInfo.SERVERPART_NAME }}</text>
          <image class="rightArrow" src="/static/images/home/rightArrow.svg" />
        </view>
      </view>
    </view>

    <view class="content" :style="{ paddingTop: menu.bottom + 14 + '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" :current="pageMsg.current"
              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>
        <view class="detailBottom">
          <view class="detailFirst">
            <text class="serviceName">{{
              detailInfo.SERVERPART_NAME || ""
            }}</text>
            <text class="serviceStatus">营业中</text>
          </view>
          <view class="detailSecond">
            <image class="detailFixedIcon" src="/static/images/home/address.png" />
            <text class="address">
              <text class="distance">{{
                detailInfo.SERVERPART_DISTANCE === 0
                  ? 0
                  : detailInfo.SERVERPART_DISTANCE || "-"
              }}km</text>
              <text class="addressText">{{ detailInfo.ServerpartInfo.SERVERPART_ADDRESS || "-"
              }}{{ detailInfo.ServerpartInfo.EXPRESSWAY_NAME || "-" }}</text>
            </text>
          </view>
          <view class="navigationBox" @click="handleGomap">
            <image class="navigationIcon" src="/static/images/home/navigationIcon.svg" />
          </view>
        </view>
      </view>

      <!-- 加油 充电 停车场 -->
      <view class="carDetailBox">
        <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 first">
              <image class="gasItemIcon" src="https://eshangtech.com/ShopICO/discovery/92Icon.png" />
              <span class="label">#加油枪</span>
              <span class="value">{{
                detailInfo.sumDetail.REFUELINGGUN92 || "-"
              }}</span>
            </view>
            <view class="gasItem second">
              <image class="gasItemIcon" src="https://eshangtech.com/ShopICO/discovery/95Icon.png" />
              <span class="label">#加油枪</span>
              <span class="value">{{
                detailInfo.sumDetail.REFUELINGGUN95 || "-"
              }}</span>
            </view>
            <view class="gasItem third">
              <image class="gasItemIcon" src="https://eshangtech.com/ShopICO/discovery/zeroIcon.png" />
              <span class="label">#加油枪</span>
              <span class="value">{{
                detailInfo.sumDetail.REFUELINGGUN0 || "-"
              }}</span>
            </view>
          </view>
          <!-- 充电信息 -->
          <view class="chargeContent" v-if="firstTab === 2">
            <view class="stateGrid">
              <view class="leftGrid">
                <!-- <image class="gridImg" src="/static/images/home/stateGrid.png" /> -->
                <text class="gridText">交投新能源</text>
                <text class="fastCharg">快充</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="contentItem" v-if="false">
              <view class="leftItem">
                <image class="carIcon" src="/static/images/home/carIcon.png" />
                充电桩
              </view>
              <view class="rightItem">
                <span class="emptyText">空</span>
                <span class="occupy">{{
                  detailInfo.sumDetail.LIVESTOCKPACKING || "-"
                }}</span>
                <span class="unit"></span>
              </view>
            </view>
            <!--  国网  -->
            <view class="contentItem" v-if="false">
              <view class="leftItem">
                <image class="carIcon" src="/static/images/home/carIcon.png" />
                国网
              </view>
              <view class="rightItem">
                <span class="emptyText">空</span>
                <span class="occupy">{{
                  detailInfo.sumDetail.STATEGRIDCHARGE || "-"
                }}</span>
                <span class="unit"></span>
              </view>
            </view>
            <!--  理想5C  -->
            <view class="contentItem" v-if="false">
              <view class="leftItem">
                <image class="carIcon" src="/static/images/home/carIcon.png" />
                理想5C
              </view>
              <view class="rightItem">
                <span class="emptyText">空</span>
                <span class="occupy">{{
                  detailInfo.sumDetail.LIAUTOCHARGE || "-"
                }}</span>
                <span class="unit"></span>
              </view>
            </view>
            <!--  广汽能源  -->
            <view class="contentItem" v-if="false">
              <view class="leftItem">
                <image class="carIcon" src="/static/images/home/carIcon.png" />
                广汽能源
              </view>
              <view class="rightItem">
                <span class="emptyText">空</span>
                <span class="occupy">{{
                  detailInfo.sumDetail.GACENERGYCHARGE || "-"
                }}</span>
                <span class="unit"></span>
              </view>
            </view>
            <!--  其他  -->
            <view class="contentItem" v-if="false">
              <view class="leftItem">
                <image class="carIcon" src="/static/images/home/carIcon.png" />
                其他
              </view>
              <view class="rightItem">
                <span class="emptyText">空</span>
                <span class="occupy">{{
                  detailInfo.sumDetail.OTHERCHARGE || "-"
                }}</span>
                <span class="unit"></span>
              </view>
            </view>
          </view>
          <!-- 停车场信息 -->
          <view class="carContent" v-if="firstTab === 3">
            <view class="carItem">
              <view class="carTop">
                <image class="carIcon" :src="detailInfo.sumDetail.SMALLPARKING
                  ? '/static/images/home/carIcon.svg'
                  : '/static/images/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
                  ? '/static/images/home/bus.svg'
                  : '/static/images/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
                  ? '/static/images/home/train.svg'
                  : '/static/images/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
                  ? '/static/images/home/chemicals.svg'
                  : '/static/images/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="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="/static/images/home/callPhoneIcon.svg" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 卫生间 母婴室 司机之家 -->
      <view class="otherFacilities">
        <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="toiletIcon" src="/static/images/home/manWC.svg" />
                <text class="toiletText">男厕</text>
              </view>
              <view class="toiletItemRight">
                <!--  绿 #009F43 -->
                <text class="rightText" :style="{
                  color: detailInfo.sumDetail.HASPANTRY > 0 ? '#009F43' : '',
                }">{{ detailInfo.sumDetail.HASPANTRY }}</text>
              </view>
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="toiletIcon" src="/static/images/home/woManWC.svg" />
                <text class="toiletText">女厕</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <text class="rightText" :style="{
                  color: detailInfo.sumDetail.HASWIFI > 0 ? '#009F43' : '',
                }">{{ detailInfo.sumDetail.HASWIFI }}</text>
              </view>
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="toiletIcon" src="/static/images/home/tideToiletSeat.svg" />
                <text class="toiletText">潮汐厕位</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <text class="rightText" :style="{
                  color:
                    detailInfo.sumDetail.TOILETCOUNT > 0 ? '#009F43' : '',
                }">{{ detailInfo.sumDetail.TOILETCOUNT }}</text>
              </view>
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="toiletIcon" src="/static/images/home/toiletPaperTowels.svg" />
                <text class="toiletText">厕纸巾</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <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="toiletIcon" src="/static/images/home/manWC.svg" />
                <text class="toiletText">饮水机</text>
              </view>
              <view class="toiletItemRight">
                <!--  绿 #009F43 -->
                <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="toiletIcon" src="/static/images/home/manWC.svg" />
                <text class="toiletText">哺乳桌</text>
              </view>
              <view class="toiletItemRight">
                <!--  绿 #009F43 -->
                <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="toiletIcon" src="/static/images/home/manWC.svg" />
                <text class="toiletText">婴儿床</text>
              </view>
              <view class="toiletItemRight">
                <!--  绿 #009F43 -->
                <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="toiletIcon" src="/static/images/home/manWC.svg" />
                <text class="toiletText">尿布台</text>
              </view>
              <view class="toiletItemRight">
                <!--  绿 #009F43 -->
                <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="toiletIcon" src="/static/images/home/showerRoom.svg" />
                <text class="toiletText">淋浴间</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <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="toiletIcon" src="/static/images/home/waterBoiler.svg" />
                <text class="toiletText">饮水机</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <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">
              <view class="toiletItemLeft">
                <image class="toiletIcon" src="/static/images/home/showerRoom.svg" />
                <text class="toiletText">淋浴间</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <text class="rightText" :style="{
                  color:
                    detailInfo.sumDetail.HASSHOWERROOM > 0 ? '#009F43' : '',
                }">{{ detailInfo.sumDetail.HASSHOWERROOM }}</text>
              </view>
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="toiletIcon" src="/static/images/home/waterBoiler.svg" />
                <text class="toiletText">开水器</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <text class="rightText" :style="{
                  color:
                    detailInfo.sumDetail.HASWATERROOM > 0 ? '#009F43' : '',
                }">{{ detailInfo.sumDetail.HASWATERROOM }}</text>
              </view>
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="toiletIcon" src="/static/images/home/microwave.svg" />
                <text class="toiletText">微波炉</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <text class="rightText" :style="{
                  color:
                    detailInfo.sumDetail.MICROWAVEOVEN > 0 ? '#009F43' : '',
                }">{{ detailInfo.sumDetail.MICROWAVEOVEN }}</text>
              </view>
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="toiletIcon" src="/static/images/home/washingMachine.svg" />
                <text class="toiletText">洗衣机</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <text class="rightText" :style="{
                  color:
                    detailInfo.sumDetail.WASHERCOUNT > 0 ? '#009F43' : '',
                }">{{ detailInfo.sumDetail.WASHERCOUNT }}</text>
              </view>
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="toiletIcon" src="/static/images/home/watering.svg" />
                <text class="toiletText">加水</text>
              </view>
              <view class="toiletItemRight">
                <!-- #009F43 绿 -->
                <text class="rightText" :style="{
                  color:
                    detailInfo.sumDetail.VEHICLEWATERFILLING > 0
                      ? '#009F43'
                      : '',
                }">{{
                  detailInfo.sumDetail.VEHICLEWATERFILLING > 0 ? "有" : "无"
                }}</text>
              </view>
            </view>
            <view class="toiletItem">
              <view class="toiletItemLeft">
                <image class="toiletIcon" src="/static/images/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 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="goBuy(item)">
            <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="shopName">
                    <!-- max-width: calc(100% - 133rpx); -->
                    <span class="shopTitle" :style="{
                      maxWidth:
                        item.SCANCODE_ORDER === 1 &&
                          item.CouponList &&
                          item.CouponList.length > 0
                          ? 'calc(100% - 270rpx)'
                          : 'calc(100% - 133rpx)',
                    }">{{ item.MERCHANTS_NAME }}</span>
                  </div>
                  <div class="otherDetail">
                    <div class="leftDetail">
                      <span class="mark">{{ item.MERCHANTS_SCORE || "-" }}分</span>
                      <!-- <span class="monthSales"
                        >月售{{ item.MONTHLYSALES || "-" }}</span
                      > -->
                    </div>
                    <div class="monthSales">
                      月售{{ item.MONTHLYSALES || "-" }}
                    </div>
                    <div class="rightDetail">
                      <span class="perCapita">人均 ￥{{ item.PERCAPITA || "-" }}</span>
                    </div>
                  </div>

                  <div class="goOrder" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">
                    <image class="orderIcon" src="/static/images/home/goOrderIcon.png" />
                    <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="/static/images/home/useCoupon.png" />
                    <span class="couponText">优惠券</span>
                  </div>
                </div>
              </div>

              <div class="shopList" v-if="item.GoodsList && item.GoodsList.length > 0">
                <div class="shopItem" style="padding: 0" v-for="(subItem, subIndex) in item.GoodsList" :key="subIndex">
                  <div class="shopImgBox">
                    <image class="shopImg" :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="nearbyAttractions">
        <view class="nearTitle">附近景点</view>
        <view class="attractionsList" v-if="nearScenic && nearScenic.length > 0">
          <view class="attractionsItem" v-for="(item, index) in nearScenic" :key="index">
            <image class="attractionsImg"
              :src="item.ImageList && item.ImageList.length > 0 ? item.ImageList[0] : '/static/images/home/defaultIcon.png'" />
            <view class="rightItem">
              <view class="attractionsText">{{ item.SCENICAREA_NAME || "" }}</view>
              <view class="rightItemBox">营业时间：<text class="timeText">{{ item.SCENICAREA_OPENHOURS || ""
                  }}</text>
              </view>
              <view class="descBox">{{ item.SCENICAREA_INFO || "" }}</view>
            </view>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  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,
      selectTypeList: [],
      seatInfo: {},
      serverpart: "", // 传入的服务区id
      merchantList: [], // 商家列表
      chargingObj: {
        have: 0,
        use: 0,
      }, // 充电桩数据
      nearScenic: [],// 景点列表
      pageType: ""
    };
  },
  async onLoad(query) {
    this.menu = uni.getMenuButtonBoundingClientRect();
    console.log("query", query);
    if (query.id) {
      this.serverpart = query.id;
    }

    if (query.pageType) {
      this.pageType = query.pageType;
    }

    await this.handleGetServerpartDetail(this.serverpart);
    await this.handleGetMerchant();
    await this.handleGetChargingStation(this.detailInfo);
    await this.handleGetNearScenic()
    this.$utils.addUserBehaviorNew();
  },
  async onShow() {
    let currentService = uni.getStorageSync("currentService");
    if (!this.serverpart) {
      this.serverpart = currentService.SERVERPART_ID;
      await this.handleGetServerpartDetail(this.serverpart);
      await this.handleGetMerchant();
      await this.handleGetChargingStation(this.detailInfo);
      await this.handleGetNearScenic()
    }
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  methods: {
    // 附近的景点
    async handleGetNearScenic() {
      // 
      const req = {
        SearchParameter: {
          PROVINCE_CODES: '530000'
        },
        PageIndex: 1,
        PageSize: 10
      }
      const data = await this.$api.$post(
        "/EShangApiMain/WisdomServerpart/GetSCENICAREAList",
        req
      );
      let res = data.Result_Data.List
      this.nearScenic = res
    },
    // 查询现在的充电桩
    async handleGetChargingStation(obj) {
      let _this = this;
      uni.request({
        url: "https://xny.yciccloud.com/interconnect/api/interconnection/open/getConnectList", //仅为示例，并非真实接口地址。
        method: "POST",
        success: (res) => {
          let list = res.data;
          let result = [];
          if (list && list.length > 0) {
            list.forEach((item) => {
              if (
                (item.stationName.indexOf("读书铺") !== -1 &&
                  obj.SERVERPART_NAME.indexOf("读书铺") !== -1) ||
                (item.stationName.indexOf("鸡街") !== -1 &&
                  obj.SERVERPART_NAME.indexOf("鸡街") !== -1) ||
                (item.stationName.indexOf("星云") !== -1 &&
                  obj.SERVERPART_NAME.indexOf("星云") !== -1) ||
                (item.stationName.indexOf("富民") !== -1 &&
                  obj.SERVERPART_NAME.indexOf("富民") !== -1)
              ) {
                result.push(item);
              }
            });
          }
          let sum = 0;
          let have = 0;
          let use = 0;

          if (result && result.length > 0) {
            result.forEach((item) => {
              if (item.status === "50") {
                sum += 1;
              }
            });
          }
          if (sum > 0) {
            use = sum;
            if (obj.sumDetail.STATEGRIDCHARGE > 0) {
              if (obj.sumDetail.STATEGRIDCHARGE < result.length) {
                have = result.length;
              } else {
                have = obj.sumDetail.STATEGRIDCHARGE;
              }
            } else {
              have = result.length;
            }
          } else {
            have = obj.sumDetail.LIVESTOCKPACKING;
            // let rank = Math.random() * (0.7 - 0.5) + 0.5;
            let rank = Number(uni.getStorageSync("rankNumber"));
            if (rank > 0) {
            } else {
              rank = Math.random() * (0.7 - 0.5) + 0.5;
              uni.setStorageSync("rankNumber", rank);
            }
            // let rank = Math.random() * (0.7 - 0.5) + 0.5;
            use = Math.floor(have * rank);
          }
          _this.chargingObj = {
            have: have,
            use: use,
          };

          _this.$forceUpdate();
        },
      });
    },
    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) {
        },
        fail(err) {
        },
      });
    },
    // 查询服务区详情
    async handleGetServerpartDetail(id) {
      let currentService = uni.getStorageSync("currentService");
      let seatInfo = uni.getStorageSync("seatInfo");
      this.seatInfo = JSON.parse(seatInfo);
      let req = {
        ServerpartId: id || currentService.SERVERPART_ID,
        latitude: this.seatInfo.latitude,
        longitude: this.seatInfo.longitude,
      };
      uni.showLoading({
        title: "加载中...",
      });

      const data = await this.$api.$javaGet(
        "/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, // 加水
      };
      if (obj.RegionInfo && obj.RegionInfo.length > 0) {
        obj.RegionInfo.forEach((item) => {
          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;
        });
      }
      obj.sumDetail = sumObj;
      this.detailInfo = obj;
      uni.hideLoading();
    },
    // 跳转到选择服务区
    goSelectServer() {
      uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=home" });
    },
    // 返回上级页面
    handleBack() {
      // uni.navigateBack({
      //   delta: 1,
      // });

      if (this.pageType === "driver" || this.pageType === "userInfo") {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        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: "530000",
      //   showGoods: 1,
      //   pageSize: 9999,
      //   pageIndex: 1,
      // });

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

      // let list = data.Data.List;
      let list = data.Result_Data.List
      this.merchantList = list;
      uni.hideLoading();
    },
    goShop(item) {
      if (item.SCANCODE_ORDER === 1) {
        this.goBuy(item);
      } else {
        uni.navigateTo({
          url: `/pages/storeDetail/index?id=${item.MERCHANTS_ID}`,
        });
      }
    },
    // 去点餐的跳转
    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}&monthlySales=${item.MONTHLYSALES || ""}&perCapita=${item.PERCAPITA || ""}`,
        });
      } 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}&monthlySales=${item.MONTHLYSALES || ""}&perCapita=${item.PERCAPITA || ""}`,
        });
        this.isLogin = true;
      }
    },
    // 打电话
    handleCallPhone(phone) {
      if (!phone) {
        return;
      }
      uni.makePhoneCall({
        phoneNumber: phone, //仅为示例
      });
    },
  },
};
</script>

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

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

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

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

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

      .currentServiceBox {
        display: flex;
        align-items: center;
        padding: 12rpx 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;

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

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

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

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

        .detailFirst {
          width: 100%;

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

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

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

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

          .address {
            width: calc(100% - 120rpx);
            display: inline-block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

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

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

        .navigationBox {
          width: 64rpx;
          height: 64rpx;
          position: absolute;
          right: 24rpx;
          top: 32rpx;

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

    .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: 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: #009f43;
          border-radius: 3rpx;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .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% - 32rpx) / 3);
            padding: 32rpx 0;
            border-radius: 8rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

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

            .label {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #2a2b2e;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              margin: 16rpx 0;
            }

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

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

          .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('/static/images/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-weight: bold;
                font-size: 32rpx;
                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: #009f43;
          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 {
              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;
              }
            }
          }
        }
      }
    }

    .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: 28rpx;
        color: #130f05;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .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 {
        padding: 26rpx 0 26rpx 0;
        background-color: #ffffff;

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

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

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

          .shopDetail {
            width: calc(100% - 112rpx);
            height: 96rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;

            .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: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #130f05;
                text-align: justify;
                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 {
                  color: #d45e0e;
                  font-size: 26rpx;
                  font-weight: bold;
                }

                .monthSales {
                  margin-left: 12px;
                  font-size: 24rpx;
                  color: #666;
                }
              }

              .monthSales {
                margin-left: 12px;
                font-size: 24rpx;
                color: #666;
              }

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

            .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, PingFang SC;
                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% - 120rpx);
          box-sizing: border-box;
          margin-left: 120rpx;
          overflow-x: auto;
          display: flex;

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

            .shopImgBox {
              width: 168rpx;
              height: 128rpx;
              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, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              color: #130f05;
              line-height: 32rpx;
              text-align: justify;
              font-style: normal;
            }

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

              .itemPrice {
                font-family: DINAlternate, 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;
            }
          }
        }
      }
    }


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

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

      .attractionsList {
        width: 100%;

        .attractionsItem {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;

          .attractionsImg {
            width: 196rpx;
            height: 196rpx;
            margin-right: 16rpx;
          }

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

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

            .rightItemBox {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #716f69;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;

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

            .descBox {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              /* 限制显示行数 */
              overflow: hidden;
              text-overflow: ellipsis;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #716f69;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }
    }
  }
}
</style>