<template>
  <div class="main">
    <!--        <div class="leftArrow" :style="{top:(menu.top + ((menu.height - 24)/2) )+ 'px'}" @click="handleBack">-->
    <!--            <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>-->
    <!--        </div>-->
    <view class="mapBox" v-if="isShowMap">
      <map
        id="myMap"
        :longitude="longitude"
        :latitude="latitude"
        :markers="markers"
        class="map"
        show-location
      ></map>
      <!--            <view class="ydBox" @click="handleClickYD">-->
      <!--                <image class="ydIcon" src="https://eshangtech.com/wanmeiyizhanImg/tabBar/company_active.png"/>-->
      <!--            </view>-->
    </view>
    <!--        <view v-else class="map"></view>-->
    <div
      class="list"
      :style="{
        transform: isMoveUp ? `translateY(calc(-40vh + 40px))` : '',
      }"
    >
      <!--            :style="{transform:isMoveUp?`translateY(calc(-40vh + ${menu.bottom + 5}px))`:''}"-->
      <div class="top">
        <div class="topImg">
          <image
            class="packUp"
            :style="{ transform: isMoveUp ? 'rotate(180deg)' : '' }"
            src="https://eshangtech.com/ShopICO/ahyd-BID/service/packUp.svg"
            @click="handleClickShowMoveUp"
          ></image>
        </div>
        <div class="search">
          <!-- <div class="left">
                        <picker class="pick" @change="handleChangeService($event)" :value="selectIndex" :range="array" range-key="name">
                            <div class="box">
                                <view class="picker">
                                    {{selectName || ''}}
                                </view>
                                <image class="selectIcon"  src="https://eshangtech.com/ShopICO/ahyd-BID/service/upArrow.svg"></image>
                            </div>
                        </picker>
                    </div> -->
          <div class="right">
            <input
              class="searchText"
              v-model="searchText"
              confirm-type="search"
              @confirm="handleSearch"
              placeholder="搜索服务区"
              placeholder-style="font-size: 14px;color: #A69E9F;"
            />
          </div>
        </div>
      </div>
      <div
        class="serviceList"
        :style="{ height: isMoveUp ? `calc(100vh - 130px)` : '' }"
      >
        <div v-if="false">
          <div
            class="serviceItem"
            v-for="(item, index) in serviceList"
            :key="index"
            @click="handleGoDetail(item.SERVERPART_ID, item)"
          >
            <div class="topItem">
              <view class="leftItem">
                <p class="title">{{ item.SERVERPART_NAME }}</p>
                <view class="typeBox" v-if="false">{{
                  item.SERVERPART_TYPE
                    ? serviceTypeObj[item.SERVERPART_TYPE]
                    : ""
                }}</view>
              </view>
              <div class="box">
                <div class="imgBox">
                  <image
                    class="icon"
                    src="https://eshangtech.com/wanmeiyizhanImg/home/phone.png"
                  ></image>
                </div>
                <div
                  class="imgBox"
                  style="margin-right: 0px"
                  @click.stop="handleGomap(item)"
                >
                  <image
                    class="icon"
                    src="https://eshangtech.com/wanmeiyizhanImg/home/map.png"
                  ></image>
                </div>
              </div>
            </div>
            <!-- <p class="distance">
            距您 <text class="number">{{ item.SERVERPART_DISTANCE }}</text> km
          </p> -->
            <div class="info">
              <image
                class="infoIcon"
                src="https://eshangtech.com/wanmeiyizhanImg/home/address.svg"
              ></image>
              <div class="addressBox">
                <span class="distance">{{ item.SERVERPART_DISTANCE }}km</span>
                <div class="line"></div>
                <span class="address">{{ item.SERVERPART_ADDRESS }}</span>
              </div>
            </div>
            <div class="info" v-if="item.STARTDATE">
              <image
                class="infoIcon"
                src="https://eshangtech.com/wanmeiyizhanImg/home/time.png"
              ></image>
              <p class="time">{{ item.STARTDATE }}</p>
            </div>

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

            <div class="typeList" v-if="false">
              <image
                class="typeItem"
                :src="
                  item.HASCHARGE
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/Charging.svg'
                    : 'https://eshangtech.com/wanmeiyizhanImg/home/noCharging.svg'
                "
              ></image>
              <image
                class="typeItem"
                :src="
                  item.HASPILOTLOUNGE
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/jinCar.svg'
                    : 'https://eshangtech.com/wanmeiyizhanImg/home/noJinCar.svg'
                "
              ></image>
              <image
                class="typeItem"
                :src="
                  item.SERVERPART_TYPE
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/health.svg'
                    : 'https://eshangtech.com/wanmeiyizhanImg/home/noHealth.svg'
                "
              ></image>
              <image
                class="typeItem"
                :src="
                  item.HASMOTHER
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/baby.svg'
                    : 'https://eshangtech.com/wanmeiyizhanImg/home/nobaby.svg'
                "
              ></image>

              <image
                class="typeItem"
                :src="
                  item.HASGUESTROOM
                    ? 'https://eshangtech.com/wanmeiyizhanImg/home/hotel.svg'
                    : 'https://eshangtech.com/wanmeiyizhanImg/home/nohotel.svg'
                "
              ></image>
            </div>
          </div>
        </div>
        <div v-if="chaegeBoxList && chaegeBoxList.length > 0">
          <charge-box
            :serviceAreaList="chaegeBoxList"
            :pageType="'newMap'"
            :comeForm="comeForm"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  handleHavePointInMin,
  handleHavePointInApp,
  hanldeHavePointInIos,
} from "../../../utils/publicMethods";
import ChargeBox from "../../../components/chargeBox.vue";
export default {
  components: { ChargeBox },
  data() {
    return {
      menu: {}, // 手机参数
      longitude: null,
      latitude: null,
      userLongitude: null,
      userLatitude: null,
      seat: "",
      statusBarHeight: "",
      isMoveUp: false, // 是否展开
      array: [], // 服务区选择器选择的列表
      selectIndex: null, // 服务区选择器选择的值
      selectValue: "", // 选择的值
      selectName: "", // 选择的片区名字
      searchText: "",
      serviceList: [],
      isShowMap: false,
      serviceTypeObj: {},
      currentServiceMessage: {}, // 当前的服务区数据
      seatInfo: {}, // 经纬度
      loginType: "", // 登录类别
      comeForm: "",
      chaegeBoxList: [], //服务区名称列表
    };
  },
  async onLoad(option) {
    console.log("option", option);
    if (option.comeForm) {
      this.comeForm = option.comeForm;
    }
    // 获取手机参数
    let systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = Number(systemInfo.statusBarHeight);
    this.loginType = type;
    if (type === "min") {
      this.menu = uni.getMenuButtonBoundingClientRect();
    } else {
      this.menu = systemInfo.safeArea;
    }
    // 地图初始化
    this.mapCtx = uni.createMapContext("myMap");
    let seatInfo = uni.getStorageSync("seatInfo");
    if (seatInfo) {
      this.seatInfo = JSON.parse(seatInfo);
    }
    let type = uni.getStorageSync("loginType");
    // wx.getLocation({
    //   type: 'gcj02',
    //   altitude: true,
    //   success: async (res) => {
    //     console.log('rewrwqerwq', res)
    //     let seatInfo = {
    //       latitude: res.latitude,
    //       longitude: res.longitude
    //     }
    //     uni.setStorageSync('seatInfo', seatInfo)
    //   }
    // })

    if (this.seatInfo.longitude && this.seatInfo.latitude) {
      let res = uni.getStorageSync("currentService");
      console.log("res", res);
      // 已经拿到选中的服务区了
      if (res) {
        this.currentServiceMessage = res;
      }
      // 获取片区列表
      await this.getServiceList();
      // 服务区的枚举类型
      await this.handleServiceType();

      // 拿到服务区的列表
      await this.handleGetServiceList();
    } else {
      if (this.loginType === "min") {
        handleHavePointInMin().then((res) => {
          console.log("handleHavePointInMin", res);
          _this.handleGetOnLoad();
        });
      } else if (this.loginType === "android") {
        handleHavePointInApp().then((res) => {
          console.log("handleHavePointInApp", res);
        });
      } else {
        console.log("ios");
        hanldeHavePointInIos();
      }
    }
  },
  onHide() {
    this.isShowMap = true;
  },
  onUnload() {
    this.isShowMap = false;
  },
  methods: {
    // 点击了展开
    handleClickShowMoveUp() {
      if (this.isMoveUp) {
        this.isMoveUp = false;
      } else {
        this.isMoveUp = true;
      }
    },
    // 切换片区
    handleChangeService(e) {
      console.log("e", e);
      this.selectIndex = Number(e.mp.detail.value);
      this.selectValue = this.array[this.selectIndex].value;
      this.selectName = this.array[this.selectIndex].name;
    },
    // 获取片区列表
    async getServiceList() {
      let req = {
        Province_Code: "340000",
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetSPRegionList",
        req
      );
      console.log("data", data);
      this.array = data.Result_Data.List;
      // 已经有选择的服务区的话 根据数据 自动把片区选择起来
      if (this.currentServiceMessage.SPREGIONTYPE_ID) {
        console.log("1");
        let selectIndex = 0;
        this.array.forEach((item, index) => {
          if (item.value === this.currentServiceMessage.SPREGIONTYPE_ID) {
            selectIndex = index;
          }
        });
        this.selectIndex = selectIndex;
        this.selectValue = this.currentServiceMessage.SPREGIONTYPE_ID;
        this.selectName = this.currentServiceMessage.SPREGIONTYPE_NAME;
      } else {
        console.log("2");
        this.selectIndex = 0;
        this.selectValue = this.array[this.selectIndex].value;
        this.selectName = this.array[this.selectIndex].name;
      }
    },
    // 拿到服务区列表
    async handleGetServiceList() {
      if (!(this.seatInfo.longitude && this.seatInfo.latitude)) {
        return;
      }

      let req = {
        Province_Code: "340000",
        SPRegionType_ID: this.selectValue,
        Serverpart_ID: this.currentServiceMessage.Serverpart_ID || "",
        // 用自己当前位置去查找
        longitude: this.seatInfo.longitude,
        latitude: this.seatInfo.latitude,
        ShowService: true,
        // longitude: this.currentServiceMessage.ServerPart_X || "",
        // latitude: this.currentServiceMessage.ServerPart_Y || "",
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartList",
        req
      );

      let list = data.Result_Data.List;
      let nameList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          nameList.push(item.SERVERPART_NAME);

          // 理想总数
          let LIAUTOCHARGESum = 0;
          // 国网总数
          let STATEGRIDCHARGESum = 0;
          // 充换电总数
          let GACENERGYCHARGESum = 0;
          let HASPANTRY = 0; // 男厕数量
          let HASWIFI = 0; // 女厕数量
          let MICROWAVEOVEN = 0; // 微波炉
          let WASHERCOUNT = 0; // 洗衣机数量
          let HASPILOTLOUNGE = false; // 有无司机之家
          let HASCHILD = false; // 有无车辆维修
          let SMALLPARKING = 0; // 轿车车位
          let PACKING = 0; // 客车车位
          let TRUCKPACKING = 0; // 货车车位
          let DANPACKING = 0; // 危化品车位
          let DININGROOMCOUNT = 0; // 餐饮店
          let HASBACKGROUNDRADIO = 0; // 便利店
          let POINTCONTROLCOUNT = 0; // 客房
          let REFUELINGGUN92 = 0; // 加油枪92号
          let REFUELINGGUN95 = 0; //  加油枪95号
          let REFUELINGGUN0 = 0; // 加油枪0号

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

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

          item.imgList = [
            {
              url:
                HASPANTRY > 0 || HASWIFI > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
              isShow: HASPANTRY > 0,
              title: "卫生间",
            },
            {
              url:
                HASPANTRY > 0 || HASWIFI > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/motherAndBaby.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/nomotherAndBaby.svg",
              isShow: HASPANTRY > 0 || HASWIFI > 0,
              title: "母婴室",
            },
            {
              url:
                HASPILOTLOUNGE > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/HASPILOTLOUNGE.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noHASPILOTLOUNGE.svg",
              isShow: HASPILOTLOUNGE > 0,
              title: "司机之家",
            },
            {
              url:
                SMALLPARKING > 0 ||
                PACKING > 0 ||
                TRUCKPACKING > 0 ||
                DANPACKING > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/SMALLPARKING.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noSMALLPARKING.svg",
              isShow:
                SMALLPARKING > 0 ||
                PACKING > 0 ||
                TRUCKPACKING > 0 ||
                DANPACKING > 0,
              title: "停车场",
            },
            {
              url:
                REFUELINGGUN92 > 0 || REFUELINGGUN95 > 0 || REFUELINGGUN0 > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/REFUELINGGUN.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noREFUELINGGUN.svg",
              isShow:
                REFUELINGGUN92 > 0 || REFUELINGGUN95 > 0 || REFUELINGGUN0 > 0,
              title: "加油站",
            },
            {
              url:
                LIAUTOCHARGESum > 0 ||
                STATEGRIDCHARGESum > 0 ||
                GACENERGYCHARGESum > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg",
              isShow:
                LIAUTOCHARGESum > 0 ||
                STATEGRIDCHARGESum > 0 ||
                GACENERGYCHARGESum > 0,
              title: "充电桩",
            },
            {
              url:
                DININGROOMCOUNT > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/DININGROOMCOUNT.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noDININGROOMCOUNT.svg",
              isShow: DININGROOMCOUNT > 0,
              title: "餐饮",
            },
            {
              url:
                HASBACKGROUNDRADIO > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/HASBACKGROUNDRADIO.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noHASBACKGROUNDRADIO.svg",
              isShow: HASBACKGROUNDRADIO > 0,
              title: "便利店",
            },
            {
              url: HASCHILD
                ? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
                : "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
              isShow: SMALLPARKING,
              title: "车辆维修",
            },
            {
              url:
                POINTCONTROLCOUNT > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
              isShow: POINTCONTROLCOUNT > 0,
              title: "客房",
            },
            {
              url:
                WASHERCOUNT > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/WASHERCOUNT.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noWASHERCOUNT.svg",
              isShow: WASHERCOUNT > 0,
              title: "洗衣机",
            },
            {
              url:
                MICROWAVEOVEN > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/MICROWAVEOVEN.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noMICROWAVEOVEN.svg",
              isShow: MICROWAVEOVEN > 0,
              title: "微波炉",
            },
          ];
        });
      }

      this.chaegeBoxList = nameList;
      this.serviceList = list;
      console.log("this.serviceList", this.serviceList);
      await this.getServiceDetail(this.serviceList[0].SERVERPART_ID);
    },
    // 选择的服务区详情
    handleGoDetail(id, obj) {
      console.log("id", id);
      console.log("obj", obj);
      let res = this.handleChangeServiceInfo(obj);
      // let res = {
      //   SERVERPART_NAME: obj.SERVERPART_NAME, // 服务区
      //   SPREGIONTYPE_NAME: obj.SPREGIONTYPE_NAME, // 片区
      //   Serverpart_ID: obj.SERVERPART_ID,
      //   SPRegionType_ID: obj.SPREGIONTYPE_ID,
      //   longitude: obj.SERVERPART_X,
      //   latitude: obj.SERVERPART_Y
      // }
      console.log("this.comeForm", this.comeForm);

      uni.setStorageSync("currentService", res); // 当前选中服务区信息
      if (this.comeForm === "home") {
        uni.navigateTo({ url: "/pages/serviceDetail/shopDetail/index" });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    // 兼容一下老接口要的服务区对象的内容
    handleChangeServiceInfo(obj) {
      let newObj = {
        ...obj,
        Distance: obj.SERVERPART_DISTANCE,
        OwnerUnitId: obj.OWNERUNIT_ID,
        OwnerUnitName: obj.OWNERUNIT_NAME,
        ProvinceCode: "340000",
        ServerPart_Id: obj.SERVERPART_ID,
        ServerPart_Name: obj.SERVERPART_NAME,
        ServerPart_Tel: "",
        ServerPart_X: obj.SERVERPART_X,
        ServerPart_Y: obj.SERVERPART_Y,
        showName: `${obj.SERVERPART_NAME}(${obj.SERVERPART_DISTANCE}km)`,
      };
      return newObj;
    },
    // 获取服务区详情信息
    async getServiceDetail(id) {
      let req = {
        ServerpartId: id,
        longitude: this.seatInfo.longitude,
        latitude: this.seatInfo.latitude,
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartInfo",
        req
      );
      console.log("data", data);
      this.longitude = data.Result_Data.ServerpartInfo.SERVERPART_X;
      this.latitude = data.Result_Data.ServerpartInfo.SERVERPART_Y;
      this.isShowMap = true;
    },
    // 枚举服务区类型 SERVERPART_TYPE
    async handleServiceType() {
      const data = await this.$api.$get(
        "/EShangApiMain/FrameWork/GetFieldEnumByField",
        { FieldExplainField: "SERVERPART_TYPE" }
      );
      console.log("data", data);
      let obj = {};
      data.Result_Data.List.forEach((item) => {
        obj[Number(item.value)] = item.label;
      });
      console.log("obj", obj);
      this.serviceTypeObj = obj;
    },
    // 搜索框触发的方法
    async handleSearch() {
      this.chaegeBoxList = [];
      let req = {
        // longitude: this.longitude,
        Province_Code: "340000",
        longitude: this.seatInfo.longitude,
        latitude: this.seatInfo.latitude,
        Serverpart_Name: this.searchText,
        ShowService: true,
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartList",
        req
      );
      let list = data.Result_Data.List;
      let nameList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          nameList.push(item.SERVERPART_NAME);
          // 理想总数
          let LIAUTOCHARGESum = 0;
          // 国网总数
          let STATEGRIDCHARGESum = 0;
          // 充换电总数
          let GACENERGYCHARGESum = 0;
          let HASPANTRY = 0; // 男厕数量
          let HASWIFI = 0; // 女厕数量
          let MICROWAVEOVEN = 0; // 微波炉
          let WASHERCOUNT = 0; // 洗衣机数量
          let HASPILOTLOUNGE = false; // 有无司机之家
          let HASCHILD = false; // 有无车辆维修
          let SMALLPARKING = 0; // 轿车车位
          let PACKING = 0; // 客车车位
          let TRUCKPACKING = 0; // 货车车位
          let DANPACKING = 0; // 危化品车位
          let DININGROOMCOUNT = 0; // 餐饮店
          let HASBACKGROUNDRADIO = 0; // 便利店
          let POINTCONTROLCOUNT = 0; // 客房
          let REFUELINGGUN92 = 0; // 加油枪92号
          let REFUELINGGUN95 = 0; //  加油枪95号
          let REFUELINGGUN0 = 0; // 加油枪0号

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

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

          item.imgList = [
            {
              url:
                HASPANTRY > 0 || HASWIFI > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
              isShow: HASPANTRY > 0,
              title: "卫生间",
            },
            {
              url:
                HASPANTRY > 0 || HASWIFI > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/motherAndBaby.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/nomotherAndBaby.svg",
              isShow: HASPANTRY > 0 || HASWIFI > 0,
              title: "母婴室",
            },
            {
              url:
                HASPILOTLOUNGE > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/HASPILOTLOUNGE.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noHASPILOTLOUNGE.svg",
              isShow: HASPILOTLOUNGE > 0,
              title: "司机之家",
            },
            {
              url:
                SMALLPARKING > 0 ||
                PACKING > 0 ||
                TRUCKPACKING > 0 ||
                DANPACKING > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/SMALLPARKING.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noSMALLPARKING.svg",
              isShow:
                SMALLPARKING > 0 ||
                PACKING > 0 ||
                TRUCKPACKING > 0 ||
                DANPACKING > 0,
              title: "停车场",
            },
            {
              url:
                REFUELINGGUN92 > 0 || REFUELINGGUN95 > 0 || REFUELINGGUN0 > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/REFUELINGGUN.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noREFUELINGGUN.svg",
              isShow:
                REFUELINGGUN92 > 0 || REFUELINGGUN95 > 0 || REFUELINGGUN0 > 0,
              title: "加油站",
            },
            {
              url:
                LIAUTOCHARGESum > 0 ||
                STATEGRIDCHARGESum > 0 ||
                GACENERGYCHARGESum > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg",
              isShow:
                LIAUTOCHARGESum > 0 ||
                STATEGRIDCHARGESum > 0 ||
                GACENERGYCHARGESum > 0,
              title: "充电桩",
            },
            {
              url:
                DININGROOMCOUNT > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/DININGROOMCOUNT.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noDININGROOMCOUNT.svg",
              isShow: DININGROOMCOUNT > 0,
              title: "餐饮",
            },
            {
              url:
                HASBACKGROUNDRADIO > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/HASBACKGROUNDRADIO.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noHASBACKGROUNDRADIO.svg",
              isShow: HASBACKGROUNDRADIO > 0,
              title: "便利店",
            },
            {
              url: HASCHILD
                ? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
                : "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
              isShow: SMALLPARKING,
              title: "车辆维修",
            },
            {
              url:
                POINTCONTROLCOUNT > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
              isShow: POINTCONTROLCOUNT > 0,
              title: "客房",
            },
            {
              url:
                WASHERCOUNT > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/WASHERCOUNT.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noWASHERCOUNT.svg",
              isShow: WASHERCOUNT > 0,
              title: "洗衣机",
            },
            {
              url:
                MICROWAVEOVEN > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/MICROWAVEOVEN.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noMICROWAVEOVEN.svg",
              isShow: MICROWAVEOVEN > 0,
              title: "微波炉",
            },
          ];
        });
      }
      this.serviceList = list;
      this.chaegeBoxList = nameList;
      console.log("this.chaegeBoxList", this.chaegeBoxList);
    },
  },
};
</script>
<style scoped lang="stylus">
.main {
  height: 100vh;
  width: 100%;
  position: relative;

  .leftArrow {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 16px;
    z-index: 99999999999;

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

  .mapBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40vh;

    .map {
      width: 100%;
      height: 40vh;
    }

    .ydBox {
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      bottom: 40px;
      left: 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      .ydIcon {
        width: 30px;
        height: 30px;
      }
    }
  }

  .list {
    width: 100%;
    height: calc(60vh + 20px);
    box-sizing: border-box;
    transform: translateY(-20px);
    background: #F2F4F5;
    position: absolute;
    top: 40vh;

    .top {
      width: 100%;
      height: 74px;
      padding: 0 16px;
      // border-radius: 20px 20px 0 0;
      box-sizing: border-box;
      background: #fff;
      box-shadow: 0 4px 4px 0 rgba(22, 0, 2, 0.04);

      .topImg {
        display: flex;
        justify-content: center;

        .packUp {
          width: 26px;
          height: 5px;
          margin-top: 8px;
        }
      }

      .search {
        width: 100%;
        height: 36px;
        background: #F2F4F5;
        border-radius: 4px;
        margin-top: 13px;
        box-sizing: border-box;
        padding: 8px 24rpx;
        display: flex;
        align-items: center;

        .left {
          width: 40%;
          position: relative;

          .pick {
            .box {
              display: flex;
              align-items: center;

              .picker {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 20px;
              }

              .selectIcon {
                width: 15px;
                height: 15px;
                margin-left: 6px;
              }
            }
          }
        }

        .left:after {
          content: '';
          width: 2px;
          height: 20px;
          position: absolute;
          right: 0;
          top: 0;
          background: #E1DFDF;
        }

        .right {
          width: 100%;

          .searchText {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 20px;
          }
        }
      }
    }

    .serviceList {
      width: 100%;
      height: calc(100% - 90px);
      box-sizing: border-box;
      padding: 0 16px;
      overflow-y: auto;
      background: #FFFFFF;

      .serviceItem {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 8rpx;
        border: 2rpx solid #F5F6F7;
        margin-bottom: 12px;

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

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

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

            .typeBox {
              // background: linear-gradient(180deg, rgba(49, 144, 255, 0.2) 0%, rgba(22, 87, 255, 0.2) 100%);
              background: #FEF7E5;
              border-radius: 4rpx;
              padding: 0 8rpx;
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              // color: #1E67FF;
              color: #BA922F;
              line-height: 40rpx;
              // margin-left: 16rpx;
            }
          }

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

            .imgBox {
              width: 28px;
              height: 28px;
              // border: 1px solid #F1F1F1;
              // overflow: hidden;
              margin-right: 16px;
              border-radius: 50%;
              background: #F5F6F7;
              display: flex;
              align-items: center;
              justify-content: center;

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

        .distance {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
          line-height: 18px;

          .number {
            color: #D7000F;
            margin: 0 2px;
          }
        }

        .info {
          display: flex;
          align-items: center;
          margin-top: 4px;

          .time {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 18px;
          }

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

          .addressBox, .time {
            display: flex;
            align-items: center;
            width: 100%;

            .distance {
              color: #130F05;
              margin-right: 4rpx;
            }

            .line {
              width: 1px;
              height: 24rpx;
              background: #E7E7E6;
              margin: 0 12rpx;
            }

            .address {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 18px;
            }
          }
        }

        .typeList {
          margin-top: 8px;
          display: flex;
          align-items: center;

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

        .centerItem {
          width: 100%;
          box-sizing: border-box;
          margin-top: 24rpx;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .centerConfigItem {
            width: calc((100% / 5));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 24rpx;

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

            .configText {
              font-family: 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
              font-weight: 400;
              font-size: 24rpx;
              color: #130f05;
              line-height: 40rpx;
            }
          }

          .centerConfigItemNew {
            width: calc((100% / 6));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 24rpx;

            .configImg {
              width: 48rpx;
              height: 48rpx;
              // margin-right: 8rpx;
              margin-bottom: 8rpx;
            }

            .configText {
              font-family: 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
              font-weight: 400;
              font-size: 24rpx;
              color: #130f05;
              line-height: 40rpx;
            }
          }
        }
      }
    }
  }
}
</style>
