<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))` : '',
      background: '#EEF1F9'
    }">
      <!--            :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>
      <scroll-view @scrolltolower="handleScrollBottom" :scroll-y="true" class="serviceList"
        :style="{ height: isMoveUp ? `calc(100vh - 130px)` : 'calc(60vh - 74px)' }">
        <div style="height: 100%">
          <!-- <charge-box :serviceAreaList="chaegeBoxList" :pageType="'newMap'" :comeForm="comeForm" :noLoading="true" /> -->
          <ChargeBoxStyle :dataList="serviceList" :pageType="'newMap'" :comeForm="comeForm" />
        </div>
      </scroll-view>
    </div>

    <CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
  </div>
</template>

<script>
import {
  handleHavePointInMin,
  handleHavePointInApp,
  hanldeHavePointInIos,
  handleGetUserPointInfo,
  handleGetNearThreeService
} from "../../../utils/publicMethods";
import ChargeBoxStyle from "../../../components/chargeBoxStyle.vue";
import CustomLoading from '../../../components/customLoading.vue'
export default {
  components: { ChargeBoxStyle, CustomLoading },
  data() {
    return {
      menu: {}, // 手机参数
      longitude: null,
      latitude: null,
      userLongitude: null,
      userLatitude: null,
      seat: "",
      statusBarHeight: "",
      isMoveUp: false, // 是否展开
      array: [], // 服务区选择器选择的列表
      selectIndex: null, // 服务区选择器选择的值
      selectValue: "", // 选择的值
      selectName: "", // 选择的片区名字
      searchText: "",
      serviceList: [],
      isShowMap: true,
      serviceTypeObj: {},
      currentServiceMessage: {}, // 当前的服务区数据
      seatInfo: {}, // 经纬度
      loginType: "", // 登录类别
      comeForm: "",
      chaegeBoxList: [], //服务区名称列表
      markers: [],
      pageIndex: 1,
      businessObj: {},// 繁忙度对象
      isLoading: false,

    };
  },
  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 = seatInfo;
    // }
    let type = uni.getStorageSync("loginType");
    this.loginType = type
    // 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)
    //   }
    // })

    console.log("type", type);

    const seatInfo = await handleGetUserPointInfo()
    console.log("seatInfo", seatInfo);
    this.seatInfo = seatInfo

    await this.handleGetBusiness()

    await this.handleGetServiceList();
    // 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();
    //   }
    // }
    this.$utils.addUserBehaviorNew();
  },
  onHide() {
    this.isShowMap = true;
  },
  onUnload() {
    this.isShowMap = false;
  },
  methods: {
    // 每次进入页面拿到一次繁忙度的数据
    async handleGetBusiness() {
      let businessReq = {
        action_type: "getCurHalfCollect",
        province_code: 3544,
      };

      const businessRes = await new Promise((resolve, reject) => {
        uni.request({
          url: `https://cloud.eshangtech.com/MobileServicePlatform/Handler/handler_ajax.ashx`,
          method: "GET",
          data: businessReq,
          success(res) {
            let data = res.data.CollectionObject;
            if (data && data.length > 0) {
              resolve(data);
            } else {
              resolve([]);
            }
          },
        });
      });

      console.log('fljddlkjalkd', businessRes);

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

    },
    // 滚动到底部
    handleScrollBottom() {
      console.log('到底部啦');
      this.pageIndex = this.pageIndex + 1
      this.handleGetServiceList()
    },
    // 点击了展开
    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) {
        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 {
        this.selectIndex = 0;
        this.selectValue = this.array[this.selectIndex].value;
        this.selectName = this.array[this.selectIndex].name;
      }
    },
    // 加油的数据
    async handleGetOilData(list, idList) {
      const data = await this.$api.$javaGet2("/oil-price/getListByServerPartIds", {
        serverpartIds: idList.toString(),
      });
      let oilData = data.Result_Data.List


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

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

      return list
    },
    // 拿到服务区列表
    async handleGetServiceList() {
      // if (!(this.seatInfo.longitude && this.seatInfo.latitude)) {
      //   return;
      // }
      this.isLoading = true
      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,
        PageIndex: this.pageIndex,
        PageSize: 10
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartList",
        req
      );
      console.log('djisajdasijd', data);

      let list = data.Result_Data.List;

      // const res = await handleGetNearThreeService()
      // let list = res.allServiceList;

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

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

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

          item.imgList = [
            {
              url:
                HASPANTRY > 0 || HASWIFI > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/motherAndBaby.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/nomotherAndBaby.svg",
              isShow: HASPANTRY > 0 || HASWIFI > 0,
              title: "母婴室",
            },
            {
              url:
                HASPILOTLOUNGE > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/HASPILOTLOUNGE.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noHASPILOTLOUNGE.svg",
              isShow: HASPILOTLOUNGE > 0,
              title: "司机之家",
            },
            {
              url: HASCHILD
                ? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
                : "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
              isShow: SMALLPARKING,
              title: "车辆维修",
            },
            {
              url:
                DININGROOMCOUNT > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/DININGROOMCOUNT.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noDININGROOMCOUNT.svg",
              isShow: DININGROOMCOUNT > 0,
              title: "餐饮",
            },
            {
              url:
                HASBACKGROUNDRADIO > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/HASBACKGROUNDRADIO.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noHASBACKGROUNDRADIO.svg",
              isShow: HASBACKGROUNDRADIO > 0,
              title: "便利店",
            },

            {
              url:
                HASPANTRY > 0 || HASWIFI > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
              isShow: HASPANTRY > 0,
              title: "卫生间",
            },

            {
              url:
                SMALLPARKING > 0 ||
                  PACKING > 0 ||
                  TRUCKPACKING > 0 ||
                  DANPACKING > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/SMALLPARKING.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noSMALLPARKING.svg",
              isShow:
                SMALLPARKING > 0 ||
                PACKING > 0 ||
                TRUCKPACKING > 0 ||
                DANPACKING > 0,
              title: "停车场",
            },
            {
              url:
                REFUELINGGUN92 > 0 ||
                  REFUELINGGUN95 > 0 ||
                  REFUELINGGUN0 > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/REFUELINGGUN.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noREFUELINGGUN.svg",
              isShow:
                REFUELINGGUN92 > 0 ||
                REFUELINGGUN95 > 0 ||
                REFUELINGGUN0 > 0,
              title: "加油站",
            },
            {
              url:
                LIAUTOCHARGESum > 0 ||
                  STATEGRIDCHARGESum > 0 ||
                  GACENERGYCHARGESum > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg",
              isShow:
                LIAUTOCHARGESum > 0 ||
                STATEGRIDCHARGESum > 0 ||
                GACENERGYCHARGESum > 0,
              title: "充电桩",
            },

            {
              url:
                POINTCONTROLCOUNT > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
              isShow: POINTCONTROLCOUNT > 0,
              title: "客房",
            },
            {
              url:
                HASSHOWERROOM > 0
                  ? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
                  : "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
              isShow: HASSHOWERROOM > 0,
              title: "淋浴房",
            },
          ]

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

      this.chaegeBoxList = nameList;

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

      this.isLoading = false

      this.serviceList = this.serviceList.concat(list);

      this.longitude = this.serviceList[0].SERVERPART_X;
      this.latitude = this.serviceList[0].SERVERPART_Y;
      this.isShowMap = true;

      console.log("this.serviceList", this.serviceList);


      // await this.getServiceDetail(this.serviceList[0].SERVERPART_ID);
    },
    extractDirection(stationName) {
      if (!stationName) return '';
      // 定义方向匹配的正则表达式
      const directionPatterns = [
        /(?:（|\(|【)([^）\)】]*方向)(?:\)|）|】)/,  // 匹配括号内的方向
        /([^，,。.;;！!?？、\s]+方向)/,           // 匹配无括号的方向
        /方向([^，,。.;;！!?？、\s]+)/              // 匹配"方向XX"格式
      ];
      for (const pattern of directionPatterns) {
        const match = stationName.match(pattern);
        if (match) {
          // 提取最核心的方向信息（去掉前后可能的多余字符）
          const direction = match[1] || match[0];
          return direction.replace(/^[（\(【]|[）\)】]$/g, '').trim();
        }
      }
      return '';
    },
    // 拿到充电数据
    async handleGetChargeData(serviceList, idList) {
      const data = await this.$api.$javaPost("/charge/stationinfo/queryByIds", {
        ids: idList,
        brands: [],
      });
      // 理想
      let LXData = [];
      // 交控
      let JKData = [];
      // 国网
      let GWData = [];
      // 蔚来
      let WLData = [];

      if (data && data.length > 0) {
        data.forEach((item) => {
          if (item.brand === "理想") {
            LXData.push(item);
          } else if (item.brand === "交控") {
            JKData.push(item);
          } else if (item.brand === "国网") {
            GWData.push(item);
          } else if (item.brand === "蔚来") {
            WLData.push(item);
          }
        });
      }

      if (serviceList && serviceList.length > 0) {
        serviceList.forEach((item) => {
          let LXInfoList = [];
          let JKInfoList = [];
          let GWInfoList = [];
          let WLInfoList = [];
          // 理想
          let LXRes = [];
          if (LXData && LXData.length > 0) {
            let thisServiceRes = LXData.filter(
              (filterItem) => filterItem.serverpartId === item.SERVERPART_ID
            );
            if (thisServiceRes && thisServiceRes.length > 0) {
              thisServiceRes.forEach((subItem) => {
                if (subItem.equipments && subItem.equipments.length > 0) {
                  subItem.equipments.forEach((thirdItem) => {
                    if (
                      thirdItem.connectors &&
                      thirdItem.connectors.length > 0
                    ) {
                      thirdItem.connectors.forEach((fourthItem) => {
                        LXRes.push(fourthItem);
                        LXInfoList.push({
                          ...fourthItem,
                          address: this.extractDirection(subItem.name),
                          Status: fourthItem.status,
                          Power: Number(fourthItem.powerMax),
                          ConnectorID: fourthItem.connectorCode,
                          ConnectorType: Number(fourthItem.connectorType),
                          NationalStandard: Number(fourthItem.national),
                          VoltageLowerLimits: Number(fourthItem.voltageLimit),
                          VoltageUpperLimits: Number(fourthItem.voltageMax),
                          electricityFee: subItem.electricityFee
                        });
                      });
                    }
                  });
                }
              });
            }
          }
          // 空多少个
          let LXEmpty = 0;
          // 一共多少个
          let LXSum = 0;
          if (LXRes && LXRes.length > 0) {
            LXRes.forEach((subItem) => {
              // if (subItem.status !== 3) {
              // 替换空的逻辑  只有空闲的状态 才算空
              if (subItem.status === 1) {
                LXEmpty += 1;
              }
              LXSum += 1;
            });
          }
          item.LXDetail = {
            LXSum: LXSum,
            LXEmpty: LXEmpty,
          };

          // 交控
          let JKRes = [];
          if (JKData && JKData.length > 0) {
            let thisServiceRes = JKData.filter(
              (filterItem) => filterItem.serverpartId === item.SERVERPART_ID
            );
            if (thisServiceRes && thisServiceRes.length > 0) {
              thisServiceRes.forEach((subItem) => {
                if (subItem.equipments && subItem.equipments.length > 0) {
                  subItem.equipments.forEach((thirdItem) => {
                    if (
                      thirdItem.connectors &&
                      thirdItem.connectors.length > 0
                    ) {
                      thirdItem.connectors.forEach((fourthItem) => {
                        JKRes.push(fourthItem);
                        JKInfoList.push({
                          ...fourthItem,
                          address: this.extractDirection(subItem.name),
                          Status: fourthItem.status,
                          Power: Number(fourthItem.powerMax),
                          ConnectorID: fourthItem.connectorCode,
                          ConnectorType: Number(fourthItem.connectorType),
                          NationalStandard: Number(fourthItem.national),
                          VoltageLowerLimits: Number(fourthItem.voltageLimit),
                          VoltageUpperLimits: Number(fourthItem.voltageMax),
                          electricityFee: subItem.electricityFee
                        });
                      });
                    }
                  });
                }
              });
            }
          }
          // 空多少个
          let JKEmpty = 0;
          // 一共多少个
          let JKSum = 0;
          if (JKRes && JKRes.length > 0) {
            JKRes.forEach((subItem) => {
              // 替换空的逻辑  只有空闲的状态 才算空
              if (subItem.status === 1) {
                JKEmpty += 1;
              }
              JKSum += 1;
            });
          }
          item.JKDetail = {
            JKEmpty: JKEmpty,
            JKSum: JKSum,
          };

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

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


          // 蔚来
          let WLRes = [];

          if (WLData && WLData.length > 0) {
            let thisServiceRes = WLData.filter(
              (filterItem) => filterItem.serverpartId === item.SERVERPART_ID
            );
            if (thisServiceRes && thisServiceRes.length > 0) {
              thisServiceRes.forEach((subItem) => {
                if (subItem.equipments && subItem.equipments.length > 0) {
                  subItem.equipments.forEach((thirdItem) => {
                    if (
                      thirdItem.connectors &&
                      thirdItem.connectors.length > 0
                    ) {
                      thirdItem.connectors.forEach((fourthItem) => {
                        WLRes.push(fourthItem);
                        WLInfoList.push({
                          ...fourthItem,
                          Status: fourthItem.status,
                          address: this.extractDirection(subItem.name),
                          Power: Number(fourthItem.powerMax),
                          ConnectorID: fourthItem.connectorCode,
                          ConnectorType: Number(fourthItem.connectorType),
                          NationalStandard: Number(fourthItem.national),
                          VoltageLowerLimits: Number(fourthItem.voltageLimit),
                          VoltageUpperLimits: Number(fourthItem.voltageMax),
                          electricityFee: subItem.electricityFee
                        });
                      });
                    }
                  });
                }
              });
            }
          }

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

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

          item.WLDetail = {
            WLEmpty: WLEmpty,
            WLSum: WLSum,
          };


          item.allChargeDetail = {
            allSum:
              Number(
                item.LXDetail && item.LXDetail.LXSum ? item.LXDetail.LXSum : 0
              ) +
              Number(item.WLDetail.WLSum || 0) +
              Number(item.JKDetail.JKSum || 0) +
              Number(item.GWDetail.GWSum || 0),
            empty:
              Number(
                item.LXDetail && item.LXDetail.LXEmpty
                  ? item.LXDetail.LXEmpty
                  : 0
              ) +
              Number(item.WLDetail.WLEmpty || 0) +
              Number(item.JKDetail.JKEmpty || 0) +
              Number(item.GWDetail.GWEmpty || 0),
          };

          item.LXInfoList = LXInfoList;
          item.JKInfoList = JKInfoList;
          item.GWInfoList = GWInfoList;
          item.WLInfoList = WLInfoList;
        });
      }
      console.log('dksjdisjfdf', serviceList)
      return serviceList
    },
    // 选择的服务区详情
    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.pageIndex = 1
      this.chaegeBoxList = [];
      let req = {
        // longitude: this.longitude,
        Province_Code: "340000",
        longitude: this.seatInfo.longitude,
        latitude: this.seatInfo.latitude,
        Serverpart_Name: this.searchText,
        ShowService: true,
        PageIndex: this.pageIndex,
        PageSize: 10
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartList",
        req
      );

      // let data = await this.$api.$javaGet2('/third-party/getServerPartList', req)
      let list = data.Result_Data.List;

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

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

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

          item.imgList = [
            {
              url:
                HASPANTRY > 0 || HASWIFI > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/motherAndBaby.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/nomotherAndBaby.svg",
              isShow: HASPANTRY > 0 || HASWIFI > 0,
              title: "母婴室",
            },
            {
              url:
                HASPILOTLOUNGE > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/HASPILOTLOUNGE.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noHASPILOTLOUNGE.svg",
              isShow: HASPILOTLOUNGE > 0,
              title: "司机之家",
            },
            {
              url: HASCHILD
                ? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
                : "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
              isShow: SMALLPARKING,
              title: "车辆维修",
            },
            {
              url:
                DININGROOMCOUNT > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/DININGROOMCOUNT.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noDININGROOMCOUNT.svg",
              isShow: DININGROOMCOUNT > 0,
              title: "餐饮",
            },
            {
              url:
                HASBACKGROUNDRADIO > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/HASBACKGROUNDRADIO.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noHASBACKGROUNDRADIO.svg",
              isShow: HASBACKGROUNDRADIO > 0,
              title: "便利店",
            },

            {
              url:
                HASPANTRY > 0 || HASWIFI > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
              isShow: HASPANTRY > 0,
              title: "卫生间",
            },

            {
              url:
                SMALLPARKING > 0 ||
                  PACKING > 0 ||
                  TRUCKPACKING > 0 ||
                  DANPACKING > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/SMALLPARKING.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noSMALLPARKING.svg",
              isShow:
                SMALLPARKING > 0 ||
                PACKING > 0 ||
                TRUCKPACKING > 0 ||
                DANPACKING > 0,
              title: "停车场",
            },
            {
              url:
                REFUELINGGUN92 > 0 ||
                  REFUELINGGUN95 > 0 ||
                  REFUELINGGUN0 > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/REFUELINGGUN.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noREFUELINGGUN.svg",
              isShow:
                REFUELINGGUN92 > 0 ||
                REFUELINGGUN95 > 0 ||
                REFUELINGGUN0 > 0,
              title: "加油站",
            },
            {
              url:
                LIAUTOCHARGESum > 0 ||
                  STATEGRIDCHARGESum > 0 ||
                  GACENERGYCHARGESum > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg",
              isShow:
                LIAUTOCHARGESum > 0 ||
                STATEGRIDCHARGESum > 0 ||
                GACENERGYCHARGESum > 0,
              title: "充电桩",
            },

            {
              url:
                POINTCONTROLCOUNT > 0
                  ? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
                  : "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
              isShow: POINTCONTROLCOUNT > 0,
              title: "客房",
            },
            {
              url:
                HASSHOWERROOM > 0
                  ? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
                  : "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
              isShow: HASSHOWERROOM > 0,
              title: "淋浴房",
            },
          ]
        });
      }

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

      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: 32rpx 16px;
      overflow-y: auto;

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

    .serviceList ::-webkit-box{
      display: none;
    }
  }
}
</style>
