<template>
  <view class="main">
    <view :class="showListPage ? 'mapBox moveLeft' : 'mapBox'" v-if="!showListPage">
      <view style="width: 100vw; height: 100vh">
        <map id="myMap" :longitude="longitude" :latitude="latitude" class="map" :show-location="true" :markers="markers"
          @markertap="handleClickMarker"></map>

        <view class="topBox">
          <view class="topRight">
            <image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/searchIcon.png" />
            <input style="margin-left: 16rpx; font-size: 28rpx;width: calc(100% - 32rpx);" placeholder="请输入服务区"
              v-model="searchText" @confirm="handleConfirm" />
            <!-- <span class="searchText">请输入服务区</span> -->
          </view>

          <!-- <view class="listBox" @click="handleChangePageType">
                        <image class="listIcon" src="/static/home/listIcon.svg" />
                        <text class="text">列表</text>
                    </view> -->
        </view>

        <view class="serviceDetailBox" v-if="showChargeBox">
          <!-- <charge-box :serviceAreaList="currentServiceList" :pageType="'mapIndex'"
              @allChargeData="handleGetChargeData" /> -->
          <view>
            {{ currentServiceObj.SERVERPART_NAME || '' }}
          </view>
          <view class="gasContent">
            <view class="gasItem">
              <image class="gasItemIcon" src="/static/home/new92.svg" />
              <view class="newValue">
                <view class="newValueLeft">
                  <span class="unit">￥</span>
                  <span class="price">{{
                    oliData && oliData["92"]
                      ? `${oliData["92"].toString().split('.')[0]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                  <span class="smallPrice">{{
                    oliData && oliData["92"]
                      ? `.${oliData["92"].toString().split('.')[1]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                </view>

                <view class="newValueRight">
                  /升
                </view>
              </view>
            </view>
            <view class="gasItem">
              <image class="gasItemIcon" src="/static/home/new95.svg" />
              <view class="newValue">
                <view class="newValueLeft">
                  <span class="unit">￥</span>
                  <span class="price">{{
                    oliData && oliData["95"]
                      ? `${oliData["95"].toString().split('.')[0]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                  <span class="smallPrice">{{
                    oliData && oliData["95"]
                      ? `.${oliData["95"].toString().split('.')[1]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                </view>

                <view class="newValueRight">
                  /升
                </view>
              </view>
            </view>
            <view class="gasItem">
              <image class="gasItemIcon" src="/static/home/new0.svg" />
              <view class="newValue">
                <view class="newValueLeft">
                  <span class="unit">￥</span>
                  <span class="price">{{
                    oliData && oliData["0"]
                      ? `${oliData["0"].toString().split('.')[0]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                  <span class="smallPrice">{{
                    oliData && oliData["0"]
                      ? `.${oliData["0"].toString().split('.')[1]}`
                      : detailInfo.sumDetail.REFUELINGGUN92 || "-"
                  }}</span>
                </view>

                <view class="newValueRight">
                  /升
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view :class="showListPage ? 'listPage moveRight' : 'listPage '" v-if="showListPage">
      <!-- 搜索框 -->
      <view class="searchBox">
        <view class="topRight">
          <image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/searchIcon.png" />
          <input style="margin-left: 16rpx; font-size: 28rpx;width: calc(100% - 32rpx)" placeholder="请输入服务区" v-model="searchText"
            @confirm="handleConfirm" />
          <!-- <span class="searchText">请输入服务区</span> -->
        </view>

        <view class="listBox" @click="handleChangePageType">
          <image class="listIcon" src="/static/home/mapFixed.svg" />
          <text class="text">地图</text>
        </view>
      </view>

      <scroll-view class="scrollListBox" :scroll-into-view="scrollView" :scroll-y="true" scroll-with-animation
        @scrolltolower="handleScrollToBottom" @scroll="handlePageScroll">
        <view id="navItem"></view>
        <view v-if="showChargeList">
          <!-- <charge-box ref="chargeBoxRef" :serviceAreaList="allServiceNameList" :pageStyleType="1"
              :pageType="'mapList'" /> -->
        </view>
      </scroll-view>

      <view class="backTopBox" v-if="showBackTop" @click="handleGoBack">
        <image class="backTopIcon" src="/static/home/backTopIcon.png" />
      </view>
    </view>
    <CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
  </view>
</template>

<script>
import ChargeBox from "../../components/chargeBox.vue";
import CustomLoading from "../../components/customLoading.vue";
let systemInfo = uni.getSystemInfoSync();

export default {
  components: { ChargeBox, CustomLoading },
  data() {
    return {
      longitude: "",
      latitude: "",
      seatInfo: {}, // 经纬度数据
      currentServiceObj: {}, // 当前选择的服务区
      currentServiceList: [], // 当前服务区的名称数组
      allServiceNameList: [], // 全部服务区的名字列表
      defaultAllServiceNameList: [], // 所有服务区的名称列表
      chargeData: {}, // 理想的数据
      markers: [], // 点位数据
      serviceList: [], // 所有服务区的数据
      searchText: "", // 搜索的内容
      showChargeBox: true,
      showChargeList: true,
      showListPage: false, // 是否显示列表页面
      isTouchMove: false, // 用于判断是否开始拖动
      loginType: "",
      menu: {},
      startX: 0, // 拖动开始时的 X 坐标
      startY: 0, // 拖动开始时的 Y 坐标
      positionX: systemInfo.safeArea.width - 130, // 元素当前的 X 坐标
      positionY: 180, // 元素当前的 Y 坐标
      isDragging: false, // 是否正在拖动
      screenWidth: 0, // 屏幕宽度
      screenHeight: 0, // 屏幕高度
      lastMoveTime: 0, // 上次移动的时间戳，用于节流
      lastMoveTime: 0, // 上次移动的时间戳，用于节流
      pageIndex: 1,
      scrollView: "",
      showBackTop: false, // 页面滚动距离
      isHaveMore: false,
      pageScrollNumber: 0,
      isShowAllData: true, // 判断是否点击了服务区 没有点击 就显示全部的数据 点击了 就显示单个服务区的具体每个品牌的数据
      oliData: [], // 油价信息
      isLoading: false,
      detailInfo: {}, //当前服务区的详情数据
    };
  },
  onLoad() {
    let systemInfo = uni.getSystemInfoSync();

    // this.positionX = systemInfo.safeArea.width - 66;

    this.screenWidth = systemInfo.safeArea.width;
    this.screenHeight = systemInfo.safeArea.height;
    let storgeList = uni.getStorageSync("serviceList");
    if (storgeList) {
      this.serviceList = JSON.parse(storgeList);
      this.handleAddServiceMarkers();
    }
    let nearService = uni.getStorageSync("nearService");
    if (nearService) {
      this.currentServiceObj = nearService;
      this.currentServiceList = [nearService.SERVERPART_NAME];
    }
    console.log("this.currentServiceObj", this.currentServiceObj);

    let seatInfo = uni.getStorageSync("seatInfo");
    if (seatInfo) {
      let res = seatInfo;
      this.seatInfo = {
        longitude: this.currentServiceObj.SERVERPART_X || res.longitude,
        latitude: this.currentServiceObj.SERVERPART_Y || res.latitude,
      };
      this.longitude = this.seatInfo.longitude;
      this.latitude = this.seatInfo.latitude;
      // this.longitude = 116.894166;
      // this.latitude = 31.920213;

      // this.currentServiceList = ["新桥服务区"];
      // 全部服务区的名称
      // this.handleGetServiceNameList();
      // 拿到油价数据
      this.handleGetOilData();
    }
    this.$utils.addUserBehaviorNew();
  },
  methods: {
    // 拿到油价数据
    async handleGetOilData() {
      this.isLoading = true;
      const data = await this.$api.$javaGet2("/oil-price/getList", {
        serverpartId: this.currentServiceObj.SERVERPART_ID,
      });
      let oliData = data.Result_Data.List;
      // 暂时只展示 92  95  0
      let oliObj = {};
      if (oliData && oliData.length > 0) {
        oliData.forEach((item) => {
          if (
            item.oilNo === "92" ||
            item.oilNo === "95" ||
            item.oilNo === "0"
          ) {
            oliObj[item.oilNo] = item.price;
          }
        });
      }
      this.oliData = oliObj;
      console.log("this.oliData", this.oliData);

      // let req = {
      //     ServerpartId: this.currentServiceObj.SERVERPART_ID,
      //     latitude: this.seatInfo.latitude,
      //     longitude: this.seatInfo.longitude,
      //     excludeProperty: true,
      // };
      // const detailObj = await this.$api.$get(
      //     "/CommercialApi/BaseInfo/GetServerpartInfo",
      //     req
      // );

      // let sumObj = {
      //     REFUELINGGUN92: 0, // 加油枪92号
      //     REFUELINGGUN95: 0, //  加油枪95号
      //     REFUELINGGUN0: 0, // 加油枪0号
      // }

      // let obj = detailObj.Result_Data;

      // if (obj.RegionInfo && obj.RegionInfo.length > 0) {
      //     obj.RegionInfo.forEach((item) => {
      //         sumObj.REFUELINGGUN92 += item.REFUELINGGUN92;
      //         sumObj.REFUELINGGUN95 += item.REFUELINGGUN95;
      //         sumObj.REFUELINGGUN0 += item.REFUELINGGUN0;
      //     })
      // }
      // obj.sumDetail = sumObj;
      // this.detailInfo = obj;
      // this.oliData = {}
      // const tokenData = await new Promise((resolve, reject) => {
      //     uni.request({
      //         url: `https://wmgs.anhui-expressway.net/token/generate?client=4d1cf0d1-3bfc-4c91-b9ac-3a3f4ce7a4b5&secret=fEoBj6DFSKmz2fjgIauQkg`,
      //         method: "GET",
      //         success(res) {
      //             resolve(res);
      //         },
      //     });
      // });
      // let token = tokenData.data.data;

      // // 拿服务区数据 知道服务区id对应的服务区名称
      // const serviceData = await new Promise((resolve, reject) => {
      //     uni.request({
      //         url: `https://wmgs.anhui-expressway.net/api/ydcx/v1/v1/jt/share/ext_service_areas`,
      //         method: "GET",
      //         data: {
      //             pageSize: 999,
      //             pageNum: 1,
      //             beginDate: "2000-01-01",
      //             endDate: "2025-03-20",
      //         },
      //         header: {
      //             Authorization: `Bearer ${token}`,
      //             "content-type": "application/x-www-form-urlencoded",
      //         },
      //         success(res) {
      //             resolve(res);
      //         },
      //     });
      // });
      // let serviceList = serviceData.data.data.records;
      // console.log("serviceList", serviceList);
      // // 从他们的服务区列表中 找到我们当前的服务区 并拿到他们对应的服务区id 之后 再去查数据
      // let currentObj = {};
      // if (serviceList && serviceList.length > 0) {
      //     serviceList.forEach((item) => {
      //         if (item.name === this.currentServiceObj.SERVERPART_NAME) {
      //             currentObj = item;
      //         }
      //     });
      // }

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

      // const oilres = await new Promise((resolve, reject) => {
      //     uni.request({
      //         url: `https://wmgs.anhui-expressway.net/api/ydcx/v1/service-area/oil/price`,
      //         method: "GET",
      //         data: {
      //             areaId: currentObj.id,
      //         },
      //         header: {
      //             Authorization: `Bearer ${token}`,
      //             "content-type": "application/x-www-form-urlencoded",
      //         },
      //         success(res) {
      //             resolve(res);
      //         },
      //     });
      // });
      // let oliData = oilres.data.data;
      // console.log("oliData", oliData);
      // // 暂时只展示 92  95  0
      // let oliObj = {}
      // if (oliData && oliData.length > 0) {
      //     oliData.forEach(item => {
      //         if (item.oilNo === "92" || item.oilNo === "95" || item.oilNo === '0') {
      //             oliObj[item.oilNo] = item.price
      //         }
      //     })
      // }
      // this.oliData = oliObj
      // console.log('this.oliData', this.oliData);
      this.isLoading = false;
    },
    // 回到顶部
    handleGoBack() {
      this.scrollView = "navItem";
    },
    // 下拉触发事件
    handlePageScroll(e) {
      console.log("e", e);

      this.pageScrollNumber = Number(e.detail.scrollTop);
      if (Number(e.detail.scrollTop) > 100) {
        this.showBackTop = true;
      } else {
        this.scrollView = "";
        this.showBackTop = false;
      }
    },
    // 显示自己的定位
    handleShowLocal() {
      let seatInfo = uni.getStorageSync("seatInfo");
      if (seatInfo) {
        // let res = JSON.parse(seatInfo);
        let res = seatInfo;
        this.seatInfo = {
          longitude: res.longitude,
          latitude: res.latitude,
        };
        this.longitude = this.seatInfo.longitude;
        this.latitude = this.seatInfo.latitude;

        uni.createMapContext("myMap", this).moveToLocation({
          longitude: this.longitude,
          latitude: this.latitude,
        });
      }
      this.$forceUpdate();
    },
    // 给服务区添加点位
    handleAddServiceMarkers() {
      let list = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          list.push({
            id: Number(`${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
            serviceId: item.SERVERPART_ID,
            serviceName: `${item.SERVERPART_NAME}`,
            latitude: item.SERVERPART_Y,
            longitude: item.SERVERPART_X,
            iconPath: "/static/home/redFixed.svg",
            width: 30,
            height: 30,
          });
        });
      }
      this.markers = list;
    },
    handleChangeScanBox(e) {
      this.positionX = e.target.offsetLeft;
      this.positionY = e.target.offsetTop;
    },
    touchStart(e) {
      this.isDragging = true;
      const touch = e.touches[0];
      this.startX = touch.clientX - this.positionX;
      this.startY = touch.clientY - this.positionY;
    },
    touchMove(e) {
      if (!this.isDragging) return;

      // 使用时间戳进行节流，每16ms（约60fps）更新一次位置
      const touch = e.touches[0];
      let newPosX = touch.clientX - this.startX;
      let newPosY = touch.clientY - this.startY;

      // 限制拖动范围，不让元素移出屏幕
      newPosX = Math.max(0, Math.min(newPosX, this.screenWidth - 50)); // 限制 X 轴范围
      newPosY = Math.max(0, Math.min(newPosY, this.screenHeight - 50)); // 限制 Y 轴范围

      this.positionX = newPosX;
      this.positionY = newPosY;
    },
    touchEnd(e) {
      this.isDragging = false;
    },
    // 取问号后面的参数
    getQueryParams(url) {
      let queryStr = url.split("?")[1]; // 获取 ? 后面的部分
      let params = {};

      if (queryStr) {
        let pairs = queryStr.split("&");
        pairs.forEach((pair) => {
          let [key, value] = pair.split("=");
          params[key] = decodeURIComponent(value || "");
        });
      }

      return params;
    },
    // 扫码
    handleScan() {
      let _this = this;
      uni.scanCode({
        success: function (res) {
          let url = res.result;
          if (url.indexOf("lixiang") !== -1) {
            let obj = _this.getQueryParams(url);
            uni.showModal({
              title: "",
              content: `识别二维码类型为【理想】，确认跳转？`,
              success(res) {
                uni.navigateToMiniProgram({
                  appId: "wxefd5d8119561aaca",
                  path: `/pages/electricity/pile/index?connectorId=${obj.qrcode}`,
                  success(res) { },
                });
              },
            });
          } else if (url.indexOf("jksdxny") !== -1) {
            // 交控
            uni.showModal({
              title: "",
              content: `识别二维码类型为【交控新能源】，确认跳转？`,
              success(res) {
                uni.navigateToMiniProgram({
                  appId: "wx01617ba079061ca9",
                  path: `/pages/map/index`,
                  success(res) { },
                });
              },
            });
          } else if (url.indexOf("app.nio") !== -1) {
            // 蔚来
            uni.showModal({
              title: "",
              content: `识别二维码类型为【蔚来】，确认跳转？`,
              success(res) {
                uni.navigateToMiniProgram({
                  appId: "wx35849c7f0cf7f7a9",
                  path: `/pages/index/index`,
                  success(res) { },
                });
              },
            });
          }
        },
      });
    },
    // 拿到全部服务区的名称
    handleGetServiceNameList() {
      let name = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          name.push(item.SERVERPART_NAME);
        });
      }
      let res = JSON.parse(JSON.stringify(name));
      this.defaultAllServiceNameList = res;
      this.allServiceNameList = name.splice(0, this.pageIndex * 10 - 1);
    },
    // 滚动到底部
    async handleScrollToBottom() {
      if (this.isHaveMore) {
        return;
      }
      this.isHaveMore = true;
      this.pageIndex = this.pageIndex += 1;
      let res = JSON.parse(JSON.stringify(this.defaultAllServiceNameList));
      this.allServiceNameList = res.splice(0, this.pageIndex * 10 - 1);

      await this.$refs.chargeBoxRef.handldGetData();
      this.isHaveMore = false;
      this.$forceUpdate();
    },
    // 改变页面显示的内容
    handleChangePageType() {
      this.showListPage = !this.showListPage;
    },
    // 搜索服务区的方法
    async handleConfirm() {
      if (this.showListPage) {
        this.showChargeList = false;
      } else {
        this.showChargeBox = false;
      }
      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 data = await this.$api.$javaGet2('/third-party/getServerPartList', req)
      let list = data.Result_Data.List;
      this.pageIndex = 1;
      let obj = list[0];
      if (this.showListPage) {
        this.showChargeList = true;
        // if (this.searchText) {
        //     this.allServiceNameList = [obj.SERVERPART_NAME];
        // } else {
        //     // this.handleGetServiceNameList();
        //     this.handleGetOilData()
        // }
      } else {
        this.seatInfo = {
          longitude: obj.SERVERPART_X,
          latitude: obj.SERVERPART_Y,
        };
        this.longitude = this.seatInfo.longitude;
        this.latitude = this.seatInfo.latitude;
        this.currentServiceObj = obj;
        this.currentServiceList = [obj.SERVERPART_NAME];
        this.showChargeBox = true;
      }
      await this.handleGetOilData();
      this.searchText = "";
    },
    // 给理想的充电站标点
    handleLXAddMarker(e) {
      let stationList = e.res;

      let pointList = [];
      // 确保一个服务区点位 只用加一个
      let pointIdList = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          if (stationList && stationList.length > 0) {
            stationList.forEach((subItem) => {
              if (subItem.Address.indexOf(item.SERVERPART_NAME) !== -1) {
                const date = new Date();
                if (
                  pointIdList.indexOf(Number(`1${item.SERVERPART_ID}`)) === -1
                ) {
                  pointIdList.push(Number(`1${item.SERVERPART_ID}`));
                  pointList.push({
                    id: Number(`1${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
                    markerId: `${item.SERVERPART_ID}LX`,
                    serviceId: item.SERVERPART_ID,
                    serviceName: `${item.SERVERPART_NAME}`,
                    latitude: subItem.StationLat,
                    longitude: subItem.StationLng,
                    iconPath: "/static/home/redFixed.svg",
                    width: 30,
                    height: 30,
                    // label: {
                    //   // 文本标签
                    //   content: "",
                    //   color: "#3EC273",
                    //   fontSize: 14,
                    //   bgColor: "#ffffff",
                    //   borderRadius: 4,
                    //   padding: 5,
                    //   textAlign: "center",
                    // },
                  });
                }
              }
            });
          }
        });
      }
      this.markers = this.markers.concat(pointList);
    },
    // 给交控的充电站标点
    handleJKAddMarker(e) {
      let stationList = e.res;

      let pointList = [];
      // 确保一个服务区点位 只用加一个
      let pointIdList = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          if (stationList && stationList.length > 0) {
            stationList.forEach((subItem) => {
              if (subItem.areaName.indexOf(item.SERVERPART_NAME) !== -1) {
                const date = new Date();
                if (
                  pointIdList.indexOf(Number(`2${item.SERVERPART_ID}`)) === -1
                ) {
                  pointIdList.push(Number(`2${item.SERVERPART_ID}`));
                  pointList.push({
                    id: Number(`2${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
                    markerId: `${item.SERVERPART_ID}JK`,
                    serviceId: item.SERVERPART_ID,
                    serviceName: `${item.SERVERPART_NAME}`,
                    latitude: subItem.lat,
                    longitude: subItem.lng,
                    iconPath: "/static/home/greenFixed.svg",
                    width: 30,
                    height: 30,
                  });
                }
              }
            });
          }
        });
      }
      this.markers = this.markers.concat(pointList);
    },
    // 给国网的充电站标点
    handleGWAddMarker(e) {
      let stationList = e.res.data.Data.StationInfos;

      let pointList = [];
      // 确保一个服务区点位 只用加一个
      let pointIdList = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          if (stationList && stationList.length > 0) {
            stationList.forEach((subItem) => {
              if (subItem.Address.indexOf(item.SERVERPART_NAME) !== -1) {
                if (
                  pointIdList.indexOf(Number(`3${item.SERVERPART_ID}`)) === -1
                ) {
                  pointIdList.push(Number(`3${item.SERVERPART_ID}`));
                  pointList.push({
                    id: Number(`3${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
                    markerId: `${item.SERVERPART_ID}GW`,
                    serviceId: item.SERVERPART_ID,
                    serviceName: `${item.SERVERPART_NAME}`,
                    latitude: subItem.StationLat,
                    longitude: subItem.StationLng,
                    iconPath: "/static/home/orangeFixed.svg",
                    width: 30,
                    height: 30,
                  });
                }
              }
            });
          }
        });
      }
      this.markers = this.markers.concat(pointList);
    },
    // 拿到当前服务区的充电数据
    handleGetChargeData(e) {
      let obj = e.res[0];
      // 因为只返回一个服务区 所以直接e[0]就可以拿到服务区数据
      this.chargeData = obj;

      // this.markers = [
      //   {
      //     id: Number(obj.ServerPart_Id), // 使用时间戳作为唯一ID
      //     latitude: obj.SERVERPART_Y,
      //     longitude: obj.SERVERPART_X,
      //     width: 20,
      //     height: 30,
      //     label: {
      //       // 文本标签
      //       content: obj.name,
      //       color: "#3EC273",
      //       fontSize: 14,
      //       bgColor: "#ffffff",
      //       borderRadius: 4,
      //       padding: 5,
      //       textAlign: "center",
      //     },
      //   },
      // ];
    },
    // 点击地图上的锚点
    handleClickMarker(e) {
      const clickedMarker = this.markers.find(
        (item) => item.id === e.detail.markerId // 用小程序返回的id匹配
      );
      this.showChargeBox = false;

      const serviceDetail = this.serviceList.find(
        (item) => item.SERVERPART_ID === Number(clickedMarker.serviceId) // 用小程序返回的id匹配
      );
      this.longitude = this.longitude;
      this.latitude = this.latitude;
      this.currentServiceObj = serviceDetail;
      this.currentServiceList = [clickedMarker.serviceName];

      this.handleGetOilData();
      let _this = this;
      setTimeout(() => {
        _this.showChargeBox = true;
      }, 500);
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;

  .mapBox {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease;

    .map {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .topBox {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      box-sizing: border-box;
      padding: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .topRight {
        // width: calc(100% - 240rpx); 
        width: 100%;
        height: 72rpx;
        background: #fff;
        border-radius: 36rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

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

        .searchText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #9fa1aa;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-left: 8rpx;
        }
      }

      .listBox {
        width: 180rpx;
        height: 72rpx;
        background: #fff;
        border-radius: 36rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

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

        .text {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 30rpx;
          color: #130f05;
          line-height: 36rpx;
          text-align: justify;
          font-style: normal;
        }
      }
    }

    .statusBox {
      box-sizing: border-box;
      padding: 16rpx;
      border-radius: 16rpx;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      position: absolute;
      top: 120rpx;
      right: 16rpx;
      z-index: 2;

      .statusItem {
        display: flex;
        align-items: center;
        padding: 8rpx 0;

        .colorBox {
          width: 18rpx;
          height: 18rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 16rpx;
        }

        .statusIcon {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 16rpx;
        }

        .brandCharge {
          font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
            sans-serif;
          font-weight: 400;
          font-size: 24rpx;
          color: #130f05;
          line-height: 40rpx;
          font-style: normal;
          display: inline-block;
          width: 120rpx;
          margin-right: 16rpx;
        }

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

        .valueBox {
          display: flex;
          justify-content: flex-end;
          width: 100rpx;

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

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

    .localPosition {
      width: 100rpx;
      height: 100rpx;
      box-sizing: border-box;
      padding: 16rpx;
      border-radius: 16rpx;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 360rpx;
      right: 16rpx;
      z-index: 1;

      .localIcon {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .serviceDetailBox {
      width: calc(100% - 64rpx);
      box-sizing: border-box;
      padding: 16rpx;
      border-radius: 16rpx;
      position: absolute;
      left: 32rpx;
      // bottom: 160rpx;
      bottom: 80rpx;
      z-index: 2;
      background: #fff;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .scanBox {
      // width: 100%;
      width: 100rpx;
      height: 100rpx;
      // height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      // bottom: 40rpx;
      // top: 0;
      // left: 0;
      // left: 0;
      z-index: 1;

      .scanIconBox {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background: #ba922f;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .scanIcon {
          width: 80rpx;
          height: 80rpx;
        }

        .scanBox {
          position: absolute;
          width: 40rpx;
          height: 40rpx;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #ba922f;
          overflow: hidden;

          .line {
            position: absolute;
            width: 37rpx;
            height: 4rpx;
            background: #fff;
            animation: moveUpDown 2s linear infinite;
          }

          @keyframes moveUpDown {
            0% {
              top: 8rpx;
            }

            50% {
              top: calc(100% - 12rpx);
              /* 40rpx(容器高度) - 4rpx(线条高度) */
            }

            100% {
              top: 8rpx;
            }
          }
        }
      }
    }
  }

  .moveLeft {
    transform: translateX(-100%);
  }

  .listPage {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 100%;
    transition: transform 0.5s ease;
    box-sizing: border-box;
    padding: 16rpx;
    z-index: 2;

    .backTopBox {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 32rpx;
      bottom: 100rpx;
      box-shadow: 0 2rpx 4rpx #7f7f7f;

      .backTopIcon {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .searchBox {
      width: 100%;
      height: 72rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .topRight {
        // width: calc(100% - 240rpx);
        width: 100%;
        height: 72rpx;
        background: #fff;
        border-radius: 36rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

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

        .searchText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #9fa1aa;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-left: 8rpx;
        }
      }

      .listBox {
        width: 180rpx;
        height: 72rpx;
        // background: #fff;
        background-image: url("https://eshangtech.com/minTestImg/mapBg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 36rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

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

        .text {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 30rpx;
          color: #130f05;
          line-height: 36rpx;
          text-align: justify;
          font-style: normal;
        }
      }
    }

    .scrollListBox {
      width: 100%;
      height: calc(100% - 100rpx);
      margin-top: 16rpx;
    }
  }

  .moveRight {
    transform: translateX(-100%);
  }
}
</style>