<template>
  <view class="main">
    <!--    :scroll-y="pageScroll"    :scroll-into-view="currentView" :scroll-with-animation="true"-->
    <view class="pageContent">
      <!-- <view class="topImg" :style="{height: serviceImageList && serviceImageList.length>0 ? '430rpx':(menu.bottom + 20) + 'px' }" @click="handlePreview">
                <image class="img" :style="{top: menu.top + ((menu.height - 24)/2) + 'px'}" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click.stop="handleBack"></image>
                <swiper :current="currentImg" class="carousel" @change="changeSwiper">
                        <swiper-item class="imgIndex" v-for="(item,index) in serviceImageList" :key="index" >
                            <image style="width: 100%;height: 100%"  :src="item" ></image>
                        </swiper-item>
                </swiper>
                <view v-if="serviceImageList && serviceImageList.length>0" class="picNumber" >
                    <image class="icon" src="/static/images/home/noImg.svg"></image>
                    <text class="text"> {{ currentImg+1<=1?1:currentImg>serviceImageList.length?serviceImageList.length:currentImg + 1 }} / {{ serviceImageList.length }}</text>
                </view>
            </view> -->

      <view class="contentBox">
        <!--            顶部内容-->
        <!-- <view class="topBg">
          <view class="contentTop">
            <view class="left">
              <view class="leftTop">
                <view class="serviceName">{{
                  detail.SERVERPART_NAME || ""
                }}</view>
                <view class="stateBox">运营中</view>
              </view>
              <view class="leftBottom">
                <span class="address" v-if="detail && detail.ServerpartInfo">{{
                  detail.ServerpartInfo.SERVERPART_ADDRESS || ""
                }}</span>
              </view>
            </view>
            <view
              class="rightMessage"
              @click="handleToMap"
              v-if="detail.SERVERPART_DISTANCE"
            >
              <image
                class="navigationIcon"
                src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png"
              />
              <span class="distance">{{
                detail.SERVERPART_DISTANCE
                  ? detail.SERVERPART_DISTANCE + "km"
                  : ""
              }}</span>
            </view>
          </view>
        </view> -->
        <!--tab-->
        <scroll-view
          class="scrollBox"
          :scroll-y="pageScroll"
          :scroll-into-view="currentView"
          :scroll-with-animation="true"
        >
          <div
            style="
              width: 100%;
              box-sizing: border-box;
              padding: 0 32rpx;
              background: #fff;
            "
          >
            <current-service
              :goDetail="false"
              :currentServiceMessage="currentServiceMessage"
            />
          </div>

          <view class="tabBox" v-if="showTab">
            <view
              :class="
                selectTab === item.value ? 'tabItem selectTabItem' : 'tabItem'
              "
              v-for="(item, index) in tabList"
              :key="index"
              @click="handleChangeTab(item.value)"
              >{{ item.label || "" }}</view
            >
          </view>

          <!--            充电信息-->
          <view
            class="detailItem"
            id="chargeBox"
            v-if="(showTab && selectTab === 1) || !showTab"
          >
            <view class="top">
              <!-- <image
                class="boxIcon"
                src="/static/images/home/chargeIcon.png"
              /> -->
              <span class="boxName">充电信息</span>
            </view>
            <view class="chargeContent">
              <!--  充电桩  -->
              <view class="contentItem">
                <view class="leftItem">
                  <image
                    class="carIcon"
                    src="/static/images/home/carIcon.png"
                  />
                  充电桩
                  <!-- <image
                    class="configIcon"
                    src="/static/images/home/chargeLabel1.png"
                  /> -->
                </view>
                <view class="rightItem">
                  <!-- <image
                    class="smallIcon"
                    src="/static/images/home/chargeSmallIcon.png"
                  /> -->
                  <span class="emptyText">空</span>
                  <span class="occupy">{{
                    detailInfo.LIVESTOCKPACKING || "-"
                  }}</span>
                  <span class="unit"></span>
                  <!-- <span class="value">{{
                    detailInfo.LIVESTOCKPACKING || "-"
                  }}</span> -->
                </view>
              </view>
              <!--  国网  -->
              <view class="contentItem">
                <view class="leftItem">
                  <image
                    class="carIcon"
                    src="/static/images/home/carIcon.png"
                  />
                  国网
                  <!-- <image
                    class="configIcon"
                    src="/static/images/home/chargeLabel2.png"
                  /> -->
                </view>
                <view class="rightItem">
                  <span class="emptyText">空</span>
                  <span class="occupy">{{
                    detailInfo.STATEGRIDCHARGE || "-"
                  }}</span>
                  <span class="unit"></span>
                  <!-- <image
                    class="smallIcon"
                    src="/static/images/home/chargeSmallIcon.png"
                  />
                  <span class="value">{{
                    detailInfo.STATEGRIDCHARGE || "-"
                  }}</span> -->
                </view>
              </view>
              <!--  理想5C  -->
              <view class="contentItem">
                <view class="leftItem">
                  <image
                    class="carIcon"
                    src="/static/images/home/carIcon.png"
                  />
                  理想5C
                  <!-- <image
                    class="configIcon"
                    src="/static/images/home/chargeLabel3.png"
                  /> -->
                </view>
                <view class="rightItem">
                  <span class="emptyText">空</span>
                  <span class="occupy">{{
                    detailInfo.LIAUTOCHARGE || "-"
                  }}</span>
                  <span class="unit"></span>
                  <!-- <image
                    class="smallIcon"
                    src="/static/images/home/chargeSmallIcon.png"
                  />
                  <span class="value">{{
                    detailInfo.LIAUTOCHARGE || "-"
                  }}</span> -->
                </view>
              </view>
              <!--  广汽能源  -->
              <view class="contentItem">
                <view class="leftItem">
                  <image
                    class="carIcon"
                    src="/static/images/home/carIcon.png"
                  />
                  广汽能源
                  <!-- <image
                    class="configIcon"
                    src="/static/images/home/chargeLabel4.png"
                  /> -->
                </view>
                <view class="rightItem">
                  <span class="emptyText">空</span>
                  <span class="occupy">{{
                    detailInfo.GACENERGYCHARGE || "-"
                  }}</span>
                  <span class="unit"></span>
                  <!-- <image
                    class="smallIcon"
                    src="/static/images/home/chargeSmallIcon.png"
                  />
                  <span class="value">{{
                    detailInfo.GACENERGYCHARGE || "-"
                  }}</span> -->
                </view>
              </view>
              <!--  其他  -->
              <view class="contentItem">
                <view class="leftItem">
                  <image
                    class="carIcon"
                    src="/static/images/home/carIcon.png"
                  />
                  其他
                  <!-- <image
                    class="configIcon"
                    src="/static/images/home/chargeLabel5.png"
                  /> -->
                </view>
                <view class="rightItem">
                  <span class="emptyText">空</span>
                  <span class="occupy">{{
                    detailInfo.OTHERCHARGE || "-"
                  }}</span>
                  <span class="unit"></span>
                  <!-- <image
                    class="smallIcon"
                    src="/static/images/home/chargeSmallIcon.png"
                  />
                  <span class="value">{{ detailInfo.OTHERCHARGE || "-" }}</span> -->
                </view>
              </view>
            </view>
          </view>
          <!--            加油信息-->
          <view
            class="detailItem"
            id="gasBox"
            v-if="(showTab && selectTab === 2) || !showTab"
          >
            <view class="top">
              <!-- <image
                class="boxIcon"
                src="/static/images/home/gasIcon.png"
              /> -->
              <span class="boxName">加油信息</span>
            </view>

            <view class="gasContent">
              <view class="gasItem">
                <image
                  class="gasItemIcon"
                  src="/static/images/home/92Icon.png"
                />
                <span class="label">#加油枪</span>
                <span class="value">{{
                  detailInfo.REFUELINGGUN92 || "-"
                }}</span>
              </view>
              <view class="gasItem">
                <image
                  class="gasItemIcon"
                  src="/static/images/home/95Icon.png"
                />
                <span class="label">#加油枪</span>
                <span class="value">{{
                  detailInfo.REFUELINGGUN95 || "-"
                }}</span>
              </view>
              <view class="gasItem">
                <image
                  class="gasItemIcon"
                  src="/static/images/home/zeroIcon.png"
                />
                <span class="label">#加油枪</span>
                <span class="value">{{ detailInfo.REFUELINGGUN0 || "-" }}</span>
              </view>
            </view>
          </view>
          <!--            服务信息-->
          <view
            class="detailItem"
            id="serviceConfigBox"
            v-if="(showTab && selectTab === 3) || !showTab"
          >
            <view class="top">
              <!-- <image
                class="boxIcon"
                src="/static/images/discovery/serviceConfigIcon.png"
              /> -->
              <span class="boxName">服务区信息</span>
            </view>
            <view class="serviceContent">
              <view class="serviceItem">
                <!-- <view class="smallTitle">卫生间</view> -->
                <view class="serviceMessage">
                  <view class="messageItem">
                    <view class="serviceTop">
                      <image
                        class="serviceIcon"
                        :src="
                          detailInfo.HASPANTRY
                            ? '/static/images/home/manWCIcon.svg'
                            : '/static/images/home/noManWCIcon.svg'
                        "
                      />
                      <view class="serviceName">男厕</view>
                    </view>
                    <view class="serviceBottom">{{
                      detailInfo.HASPANTRY || "-"
                    }}</view>
                  </view>
                  <view class="messageItem">
                    <view class="serviceTop">
                      <image
                        class="serviceIcon"
                        :src="
                          detailInfo.HASWIFI
                            ? '/static/images/home/womanWCIcon.svg'
                            : '/static/images/home/noWomanWCIcon.svg'
                        "
                      />
                      <view class="serviceName">女厕</view>
                    </view>
                    <view class="serviceBottom">{{
                      detailInfo.HASWIFI || "-"
                    }}</view>
                  </view>
                  <view class="messageItem">
                    <view class="serviceTop">
                      <image
                        class="serviceIcon"
                        :src="
                          detailInfo.TOILETCOUNT
                            ? '/static/images/home/tideWC.svg'
                            : '/static/images/home/noTideWC.svg'
                        "
                      />
                      <view class="serviceName">潮汐厕位</view>
                    </view>
                    <view class="serviceBottom">{{
                      detailInfo.TOILETCOUNT || "-"
                    }}</view>
                  </view>
                </view>
              </view>

              <view class="serviceItem">
                <!-- <view class="smallTitle">其他服务</view> -->
                <view class="serviceMessage">
                  <view class="messageItem">
                    <view class="serviceTop">
                      <image
                        class="serviceIcon"
                        :src="
                          detailInfo.HASSHOWERROOM
                            ? '/static/images/home/shower.svg'
                            : '/static/images/home/noShower.svg'
                        "
                      />
                      <view class="serviceName">淋浴间</view>
                    </view>
                    <view class="serviceBottom">{{
                      detailInfo.HASSHOWERROOM || "-"
                    }}</view>
                  </view>
                  <view class="messageItem">
                    <view class="serviceTop">
                      <image
                        class="serviceIcon"
                        :src="
                          detailInfo.HASWATERROOM
                            ? '/static/images/home/waterBoiler.svg'
                            : '/static/images/home/noWaterBoiler.svg'
                        "
                      />
                      <view class="serviceName">开水器</view>
                    </view>
                    <view class="serviceBottom">{{
                      detailInfo.HASWATERROOM || "-"
                    }}</view>
                  </view>
                  <view class="messageItem">
                    <view class="serviceTop">
                      <image
                        class="serviceIcon"
                        :src="
                          detailInfo.MICROWAVEOVEN
                            ? '/static/images/home/microwave.svg'
                            : '/static/images/home/noMicrowave.svg'
                        "
                      />
                      <view class="serviceName">微波炉</view>
                    </view>
                    <view class="serviceBottom">{{
                      detailInfo.MICROWAVEOVEN || "-"
                    }}</view>
                  </view>
                </view>
              </view>

              <view class="serviceItem">
                <view class="serviceMessage">
                  <view class="messageItem">
                    <view class="serviceTop">
                      <image
                        class="serviceIcon"
                        :src="
                          detailInfo.WASHERCOUNT
                            ? '/static/images/home/washing.svg'
                            : '/static/images/home/noWashing.svg'
                        "
                      />
                      <view class="serviceName">洗衣机</view>
                    </view>
                    <view class="serviceBottom">{{
                      detailInfo.WASHERCOUNT || "-"
                    }}</view>
                  </view>
                  <view class="messageItem">
                    <view class="serviceTop">
                      <image
                        class="serviceIcon"
                        :src="
                          detailInfo.SLEEPINGPODS
                            ? '/static/images/home/sleep.svg'
                            : '/static/images/home/noSleep.svg'
                        "
                      />
                      <view class="serviceName">睡眠仓</view>
                    </view>
                    <view class="serviceBottom">{{
                      detailInfo.SLEEPINGPODS || "-"
                    }}</view>
                  </view>
                </view>
              </view>

              <view
                class="serviceItem"
                style="box-sizing: border-box; padding: 0 24rpx"
              >
                <!-- <view class="smallTitle">配套设置</view> -->
                <view class="otherMessage">
                  <view class="otherItem">
                    <image
                      class="haveIcon"
                      :src="
                        detailInfo.HASPILOTLOUNGE
                          ? '/static/images/home/haveIcon.svg'
                          : '/static/images/home/noHaveIcon.svg'
                      "
                    />
                    <span class="configText">司机之家</span>
                  </view>
                  <view class="otherItem">
                    <image
                      class="haveIcon"
                      :src="
                        detailInfo.HASCHILD
                          ? '/static/images/home/haveIcon.svg'
                          : '/static/images/home/noHaveIcon.svg'
                      "
                    />
                    <span class="configText">车辆维修</span>
                  </view>
                  <view class="otherItem">
                    <image
                      class="haveIcon"
                      :src="
                        detailInfo.VEHICLEWATERFILLING
                          ? '/static/images/home/haveIcon.svg'
                          : '/static/images/home/noHaveIcon.svg'
                      "
                    />
                    <span class="configText">车辆加水</span>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!--            停车信息-->
          <view
            class="detailItem"
            id="stopCarBox"
            v-if="(showTab && selectTab === 4) || !showTab"
          >
            <view class="top">
              <!-- <image
                class="boxIcon"
                src="/static/images/home/stopCarIcon.png"
              /> -->
              <span class="boxName">停车信息</span>
            </view>
            <view class="carContent">
              <view class="carItem">
                <view class="carTop">
                  <image
                    class="carIcon"
                    :src="
                      detailInfo.SMALLPARKING
                        ? '/static/images/home/carIcon.svg'
                        : '/static/images/home/noCarIcon.svg'
                    "
                  />
                </view>
                <view class="carBottom">
                  <view class="carName">轿车车位</view>
                  <view class="carValue"
                    >{{ detailInfo.SMALLPARKING || "-"
                    }}<span class="unit">个</span></view
                  >
                </view>
              </view>
              <view class="carItem">
                <view class="carTop">
                  <image
                    class="carIcon"
                    :src="
                      detailInfo.PACKING
                        ? '/static/images/home/bus.svg'
                        : '/static/images/home/noBus.svg'
                    "
                  />
                </view>
                <view class="carBottom">
                  <view class="carName">客车车位</view>
                  <view class="carValue"
                    >{{ detailInfo.PACKING || "-" }}
                    <span class="unit">个</span>
                  </view>
                </view>
              </view>
              <view class="carItem">
                <view class="carTop">
                  <image
                    class="carIcon"
                    :src="
                      detailInfo.TRUCKPACKING
                        ? '/static/images/home/train.svg'
                        : '/static/images/home/noTrain.svg'
                    "
                  />
                </view>
                <view class="carBottom">
                  <view class="carName">货车车位</view>
                  <view class="carValue"
                    >{{ detailInfo.TRUCKPACKING || "-"
                    }}<span class="unit">个</span></view
                  ></view
                >
              </view>
              <view class="carItem" style="margin-top: 24rpx">
                <view class="carTop">
                  <image
                    class="carIcon"
                    :src="
                      detailInfo.DANPACKING
                        ? '/static/images/home/chemicals.svg'
                        : '/static/images/home/noChemicals.svg'
                    "
                  />
                </view>
                <view class="carBottom">
                  <view class="carName">危化品车位</view>
                  <view class="carValue"
                    >{{ detailInfo.DANPACKING || "-"
                    }}<span class="unit">个</span></view
                  ></view
                >
              </view>
            </view>
          </view>
          <!--            经营信息-->
          <view
            class="detailItem"
            id="storeBox"
            v-if="(showTab && selectTab === 5) || !showTab"
          >
            <view class="top">
              <!-- <image class="boxIcon" src="/static/images/home/storeIcon.png" /> -->
              <span class="boxName">经营信息</span>
            </view>
            <view class="storeContent">
              <!-- <view class="storeItem" style="width: 100%">
                <view class="storeTop">
                  <image
                    class="storeIcon"
                    src="/static/images/home/storeAll.png"
                  />
                  <view class="storeName">商铺总量</view>
                  <view class="mode">{{ detailInfo.BUSINESSTYPE || "" }}</view>
                </view>
                <view class="storeBottom">{{
                  detailInfo.DININGBXCOUNT || ""
                }}</view>
              </view> -->

              <view class="storeItem">
                <view class="storeTop">
                  <image
                    class="storeIcon"
                    src="/static/images/home/storeAll.png"
                  />
                </view>
                <view class="storeBottom">
                  <view class="storeName">商铺总量</view>
                  <view class="value"
                    >{{ detailInfo.DININGROOMCOUNT || "-"
                    }}<span class="unit">个</span></view
                  >
                </view>
              </view>

              <view class="storeItem">
                <view class="storeTop">
                  <image
                    class="storeIcon"
                    src="/static/images/home/foodStore.png"
                  />
                </view>
                <view class="storeBottom">
                  <view class="storeName">餐饮店</view>
                  <view class="value">
                    {{ detailInfo.DININGROOMCOUNT || "-"
                    }}<span class="unit">个</span></view
                  ></view
                >
              </view>

              <view class="storeItem">
                <view class="storeTop">
                  <image
                    class="storeIcon"
                    src="/static/images/home/storeFacilitate.png"
                  />
                </view>
                <view class="storeBottom">
                  <view class="storeName">便利店</view>
                  <view class="value">
                    {{ detailInfo.HASBACKGROUNDRADIO || "-"
                    }}<span class="unit">个</span></view
                  ></view
                >
              </view>

              <view class="storeItem">
                <view class="storeTop">
                  <image
                    class="storeIcon"
                    src="/static/images/home/sleep.png"
                  />
                </view>
                <view class="storeBottom">
                  <view class="storeName">客房</view>
                  <view class="value">
                    {{ detailInfo.POINTCONTROLCOUNT || "-"
                    }}<span class="unit">个</span></view
                  ></view
                >
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import currentService from "../../components/currentService.vue";
export default {
  name: "index",
  data() {
    return {
      serviceImageList: [],
      defaultBg: [
        "https://eshangtech.com/ShopICO/ahyd-BID/service/default.png",
      ],
      currentImg: 0, // 当前选中的图片
      menu: {},
      detail: {}, // 服务区详情信息
      tabList: [
        { label: "充电信息", value: 1 },
        { label: "加油信息", value: 2 },
        { label: "服务信息", value: 3 },
        { label: "停车信息", value: 4 },
        { label: "经营信息", value: 5 },
      ], // tab的数组
      selectTab: 1, // 选中的tab
      detailInfo: {}, // 服务区两侧需要的字段加起来的合计对象
      BUSINESSTYPEObj: {}, // 经营模式枚举
      pageScroll: true, // 是否允许页面滚动
      currentView: "", // 现在要滚动到的锚点位置
      currentServiceMessage: {},
      showTab: false, // 判断是否根据tab去显示对应的内容
    };
  },
  components: {
    currentService,
  },
  async onLoad(query) {
    let res = uni.getStorageSync("currentService");
    console.log("resserviceDetail", res);
    this.currentServiceMessage = res;
    this.menu = uni.getMenuButtonBoundingClientRect();
    console.log("query", query);
    await this.handleGetServiceDetail(query.id);
    await this.handleGetSumObj(query.id);
  },
  methods: {
    handleBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    handleToMap() {
      let _this = this;
      uni.openLocation({
        latitude: _this.detail.ServerpartInfo.SERVERPART_Y * 1,
        longitude: _this.detail.ServerpartInfo.SERVERPART_X * 1,
        scale: 16, // 缩放比例
        name: _this.detail.SERVERPART_NAME,
        address: "", // 这个可能会影响地图的定位，所以可以选择不填
        success(data) {
          console.log(data);
        },
        fail(err) {
          console.log(err);
        },
      });
    },
    //   请求服务区详情数据
    async handleGetServiceDetail(id) {
      let seatInfo = JSON.parse(uni.getStorageSync("actualLocation"));
      console.log("seatInfo", seatInfo);

      const req = {
        ServerpartId: id,
        longitude: seatInfo.longitude || "",
        latitude: seatInfo.latitude || "",
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartInfo",
        req
      );
      let res = data.Result_Data;
      console.log("res", res);
      this.detail = res;
      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, // 有无司机之家
        HASCHILD: false, // 有无车辆维修
        VEHICLEWATERFILLING: false, // 有无车辆加水
        SMALLPARKING: 0, // 轿车车位
        PACKING: 0, // 客车车位
        TRUCKPACKING: 0, // 货车车位
        DANPACKING: 0, // 危化品车位
        DININGBXCOUNT: 0, // 商铺数量
        DININGROOMCOUNT: 0, // 餐饮店
        HASBACKGROUNDRADIO: 0, // 便利店
        POINTCONTROLCOUNT: 0, // 客房
        BUSINESSTYPE: "",
      };
      console.log("res.RegionInfo", res.RegionInfo);
      if (res.RegionInfo && res.RegionInfo.length > 0) {
        res.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;
          if (item.HASPILOTLOUNGE) {
            sumObj.HASPILOTLOUNGE = true;
          }
          if (item.VEHICLEWATERFILLING) {
            sumObj.VEHICLEWATERFILLING = true;
          }
          if (item.HASCHILD) {
            sumObj.HASCHILD = true;
          }
          sumObj.DININGBXCOUNT += item.DININGBXCOUNT;
          sumObj.DININGROOMCOUNT += item.DININGROOMCOUNT;
          sumObj.HASBACKGROUNDRADIO += item.HASBACKGROUNDRADIO;
          sumObj.POINTCONTROLCOUNT += item.POINTCONTROLCOUNT;
        });
      }

      this.detailInfo = sumObj;
      console.log("this.detailInfo", this.detailInfo);
      this.serviceImageList = res.ImageLits;
      console.log("this.serviceImageList", this.serviceImageList);
    },
    // 点击预览图片
    handlePreview(type) {
      if (type === "default") {
        uni.previewImage({
          current: this.defaultBg[this.currentImg], // 图片的地址url
          urls: this.defaultBg, // 预览的地址url
        });
      } else {
        uni.previewImage({
          current: this.serviceImageList[this.currentImg], // 图片的地址url
          urls: this.serviceImageList, // 预览的地址url
        });
      }
    },
    //     改变tab
    handleChangeTab(value) {
      this.selectTab = value;
      let nameList = [
        "chargeBox",
        "gasBox",
        "serviceConfigBox",
        "stopCarBox",
        "storeBox",
      ];
      this.currentView = nameList[value - 1];
    },
    // 拿到设施的合计信息
    async handleGetSumObj(id) {
      const req = {
        ProvinceCode: 340000,
        ServerpartIds: id,
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerInfoTree",
        req
      );
      console.log("sum", data);
    },
    // 滚动轮播图
    changeSwiper(e) {
      console.log("e", e);
      this.currentImg = Number(e.mp.detail.current);
      console.log("this.currentImg", this.currentImg);
    },
    // 请求枚举
    async handleGetEnumeration() {
      const data = await this.$api.$get(
        "/EShangApiMain/FrameWork/GetFieldEnumByField",
        { FieldExplainField: "BUSINESS_TYPE" }
      );
      console.log("Enumeration", data);
      let res = data.Result_Data.List;
      let obj = {};
      if (res && res.length > 0) {
        res.forEach((item) => {
          obj[item.value] = item.label;
        });
      }
      this.BUSINESSTYPEObj = obj;
    },
  },
};
</script>

<style scoped lang="stylus">
.main {
  width: 100%;
  height: 100vh;
  background-color: #fff;

  .pageContent {
    width: 100%;
    height: 100%;
    background-color: #fff;

    // min-height: 100vh;
    .topImg {
      background: #fff;
      width: 100%;
      height: 430rpx;
      position: relative;

      .img {
        width: 24px;
        height: 24px;
        position: absolute;
        left: 32rpx;
        top: 32rpx;
        z-index: 20;
      }

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

      .carousel {
        width: 100%;
        height: 100%;
        overflow: hidden;
        float: left;
        display: flex;

        .imgIndex {
          width: 100%;
          height: 100%;
          background-size: 100% 100%;
        }
      }

      .picNumber {
        position: absolute;
        left: 32rpx;
        bottom: 66rpx;
        padding: 8rpx 16rpx;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 32rpx;
        border: 2rpx solid rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;

        .icon {
          width: 32rpx;
          height: 32rpx;
          opacity: 0.7;
          margin-right: 4rpx;
        }

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

    .contentBox {
      width: 100%;
      height: 100%;
      // height: calc(100vh - 430rpx + 42rpx);
      background-color: #F7F7F8;
      border-radius: 32rpx 32rpx 0rpx 0rpx;
      overflow: hidden;
      transform: translateY(-42rpx);
      box-sizing: border-box;
      padding: 12px 0 0 0;

      .topBg {
        height: 162rpx;
        background: #fff;

        .contentTop {
          width: 100%;
          box-sizing: border-box;
          padding: 30rpx;
          background-image: url('https://eshangtech.com/ShopICO/discovery/navigationBg.png');
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left {
            flex: 1;
            margin-right: 16rpx;

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

              .serviceName {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 36rpx;
                color: #282622;
                line-height: 52rpx;
                text-align: left;
                font-style: normal;
              }

              .stateBox {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #1BA74D;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                padding: 2rpx 8rpx;
                background: #E9F8EE;
                border-radius: 4rpx;
                margin-left: 16rpx;
              }
            }

            .leftBottom {
              margin-top: 8rpx;

              .address {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #5F5B52;
                line-height: 32rpx;
                text-align: left;
                font-style: normal;
                display: inline-block;
                width: 100%;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }
            }
          }

          .rightMessage {
            width: 162rpx;
            height: 64rpx;
            border-radius: 32rpx;
            border: 2rpx solid #AE8D3E;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 16rpx 8rpx;

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

            .distance {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              color: #AE8D3E;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }

      .scrollBox {
        width: 100%;
        height: 100%;
        // height: calc(100% - 100rpx);
        margin: 16rpx 0;
        background: #fff;
        box-sizing: border-box;

        .tabBox {
          width: 100%;
          height: 98rpx;
          box-sizing: border-box;
          padding: 24rpx 32rpx 12rpx;
          background: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;

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

          .selectTabItem {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 28rpx;
            color: #AE8D3E;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            position: relative;
            display: inline-block;
          }

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

        // padding: 0 0 48rpx 0;
        .detailItem {
          width: 100%;
          box-sizing: border-box;
          padding: 32rpx 32rpx 8rpx;
          background: #fff;

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

            .boxIcon {
              width: 40rpx;
              height: 40rpx;
              margin-right: 16rpx;
            }

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

          .chargeContent {
            margin-top: 24rpx;

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

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

            .gasItem {
              width: calc(((100% - 32rpx) / 3));
              padding: 32rpx 0;
              border-radius: 8rpx;
              display: flex;
              flex-direction: column;
              align-items: center;
              border-radius: 8rpx;
              border: 2rpx solid #F5F6F7;

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

          .serviceContent {
            padding-bottom: 24rpx;
            box-sizing: border-box;
            border-radius: 8rpx;
            border: 2rpx solid #F5F6F7;
            margin-top: 16rpx;

            .serviceItem {
              margin-top: 24rpx;

              .smallTitle {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 28rpx;
                color: #282622;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
                position: relative;
                text-indent: 12rpx;
              }

              .smallTitle:before {
                width: 4rpx;
                height: 24rpx;
                background: #C5A65B;
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
              }

              .serviceMessage {
                width: 100%;
                // background: #FAFAFC;
                border-radius: 8rpx;
                box-sizing: border-box;
                padding: 0 24rpx 0;
                display: flex;
                flex-wrap: wrap;
                align-items: center;

                .messageItem {
                  width: calc((100% / 3));

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

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

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

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

              .otherMessage {
                width: 100%;
                display: flex;
                margin-top: 16rpx;
                align-items: center;

                .otherItem {
                  width: calc((100% / 3));
                  display: flex;
                  align-items: center;

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

                  .configText {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    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;
                  }
                }
              }
            }
          }

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

            .storeItem {
              width: calc((100% / 4));
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              .storeTop {
                width: 80rpx;
                height: 80rpx;
                border: 1rpx solid #E7E7E6;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;

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

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

                .mode {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #FF7D00;
                  line-height: 36rpx;
                  text-align: left;
                  font-style: normal;
                  background: #FEEEDE;
                  border-radius: 4rpx;
                  display: inline-block;
                  padding: 2rpx 8rpx;
                  margin-left: 16rpx;
                }
              }

              .storeBottom {
                margin-top: 4rpx;

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

                .value {
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 32rpx;
                  color: #130F05;
                  line-height: 36rpx;
                  text-align: center;
                  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;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
