<template>
  <view class="main">
    <view class="content">
      <view class="trafficState">
        <view class="newPositionBox">
          <view class="positionItem">
            <view class="itemLeft">
              <view class="itemLeftItem">
                <view class="positionIcon startObj"></view>
                <view class="positionBox" v-if="startEndType === 1">{{
                  startObj.name || ""
                }}</view>
                <view class="positionBox" v-if="startEndType !== 1">
                  <textarea
                    style="width: 100%"
                    placeholder="请输入目的地"
                    auto-height
                    placeholder-style="font-size: 30rpx"
                    v-model="searchPoint"
                    confirm-type="search"
                    @focus="handleEndPlaceFocus"
                    @input="searchPOI"
                    @confirm="handleConfirmToSearch"
                  ></textarea>
                  <!-- @blur="handleEndPlaceBlur" -->
                  <!-- @confirm="searchPOI" -->

                  <!-- {{ endObj.name || "" }} -->
                </view>
              </view>

              <view class="itemLeftItem">
                <view class="positionIcon endObj"></view>
                <view
                  class="positionBox noBorderBottom"
                  v-if="startEndType === 1"
                >
                  <textarea
                    style="width: 100%"
                    placeholder="请输入目的地"
                    auto-height
                    placeholder-style="font-size: 30rpx"
                    v-model="searchPoint"
                    confirm-type="search"
                    @focus="handleEndPlaceFocus"
                    @input="searchPOI"
                    @confirm="handleConfirmToSearch"
                  ></textarea>
                  <!-- @blur="handleEndPlaceBlur" -->
                  <!-- @confirm="searchPOI" -->

                  <!-- {{ endObj.name || "" }} -->
                </view>
                <view
                  class="positionBox noBorderBottom"
                  v-if="startEndType !== 1"
                  >{{ endObj.name || "" }}</view
                >
              </view>
            </view>
            <view class="itemRight">
              <image
                class="reachIcon"
                src="https://eshangtech.com/wanmeiyizhanImg/home/reachIcon.png"
                @click="handleChangeStartEnd"
              />
            </view>
          </view>
        </view>

        <!-- <view class="positionBox">
          <view class="startItem" @click="handleChangeService(startObj)">{{
            startObj.name || ""
          }}</view>
          <image
            class="reachIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/reachIcon.png"
            @click="handleChangeStartEnd"
          />
          <view class="endItem" @click="handleChangeService(endObj)">{{
            endObj.name || ""
          }}</view>
        </view> -->
        <!-- @click="handleTrafficSearch" -->
        <view class="searchBtn" @click="handleConfirmToSearch">路况查询</view>
      </view>

      <!-- 地名搜索的列表 -->
      <view
        class="placeSearchListBox"
        v-if="pointList && pointList.length > 0 && endPlaceFocus"
      >
        <view
          class="listItem"
          v-for="(item, index) in pointList"
          :key="index"
          @click="handleGoUsMap(item)"
        >
          <view class="topItem">
            <view class="topLeft">
              <image
                class="listIcon"
                src="https://eshangtech.com/wanmeiyizhanImg/home/address.png"
              />
              <span class="listName">{{ item.name || "" }}</span>
            </view>
            <view class="rightDistance">{{
              item.distance ? `${item.distance}km` : ""
            }}</view>
          </view>
          <view class="bottom">{{ item.address || "" }}</view>
        </view>
      </view>

      <!-- 下面的信息 -->
      <view class="bottomBox" v-if="!endPlaceFocus">
        <view class="boxTop">
          <view class="leftTop">
            <span class="boldText">{{ detailObj.distanceNumber || "-" }}</span>
            <span class="unit" style="margin: 0 4rpx">公里</span>
            <span class="line"></span>
            <span class="boldText" style="margin-right: 4rpx">{{
              detailObj.hour || "0"
            }}</span>
            <span class="unit" style="margin-right: 8rpx">小时</span>
            <span class="boldText">{{ detailObj.minute || "0" }}</span>
            <span class="unit" style="margin-left: 4rpx">分</span>
            <span class="line"></span>
            <span class="boldText"
              ><span style="font-size: 24rpx; margin-right: 4rpx">¥</span
              >{{ detailObj.tolls || "" }}</span
            >
          </view>

          <view class="rightTop" @click="handleToMap(endObj)">
            <image
              class="navigationIcon"
              src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png"
            />
            导航
          </view>
        </view>

        <view class="roadConditions">
          <view class="roadTop">
            <image
              class="stateIcon"
              src="https://eshangtech.com/wanmeiyizhanImg/home/trafficState1.png"
            />
            <span class="stateText" :style="{ color: '#01a157' }"
              >该路线全线畅通</span
            >
          </view>
          <view class="progress">
            <view
              class="have"
              :style="{
                width:
                  detailObj && detailObj.haveProgress
                    ? detailObj.haveProgress + '%'
                    : '',
              }"
            ></view>
          </view>
        </view>

        <!-- 横向线 -->
        <!-- <view class="horizontal"></view> -->

        <!-- 服务区列表 -->
        <view class="serviceBox">
          <view class="serviceTitle">沿途服务区</view>

          <view v-if="chaegeBoxList && chaegeBoxList.length > 0">
            <charge-box
              :serviceAreaList="chaegeBoxList"
              :pageType="'travelNavigation'"
              :startObj="startObj"
              :endObj="endObj"
            />
          </view>

          <view v-if="false">
            <view
              class="serviceList"
              v-if="
                detailObj &&
                detailObj.servicePart &&
                detailObj.servicePart.length > 0
              "
            >
              <view
                class="serviceItem"
                v-for="(item, index) in detailObj.servicePart"
                :key="index"
                :style="{
                  border:
                    index + 1 === detailObj.servicePart.length ? 'none' : '',
                  marginBottom:
                    index + 1 === detailObj.servicePart.length ? '0' : '',
                  paddingBottom:
                    index + 1 === detailObj.servicePart.length ? '0' : '',
                }"
                @click="handleGoServiceDetail(item.SERVERPART_ID)"
              >
                <view class="leftItem">
                  <view class="leftImgBox">
                    <view
                      class="leftImg"
                      :style="{
                        backgroundImage: `url(${
                          item.ImageLits && item.ImageLits.length > 0
                            ? item.ImageLits[0]
                            : 'https://eshangtech.com/wanmeiyizhanImg/discovery/defaultIcon.png'
                        })`,
                      }"
                    ></view>
                    <!-- <image
                    class="leftImg"
                    :src="
                      item.ImageLits && item.ImageLits.length > 0
                        ? item.ImageLits[0]
                        : 'https://eshangtech.com/wanmeiyizhanImg/discovery/defaultIcon.png'
                    "
                  /> -->
                  </view>
                  <view class="detailBox">
                    <view class="detailTop">
                      <view class="topLeft">
                        <span class="detailName">{{
                          item.SERVERPART_NAME
                        }}</span>
                        <span class="detailState">营业中</span>
                      </view>
                      <!-- <view class="topRight">
                      <span class="chargeType">快充</span>
                      <span class="chargeValue">空4/8</span>
                    </view> -->
                    </view>
                    <view class="detailBottom">
                      <div class="distanceBox">
                        <div class="distanceLeft">
                          <image
                            class="distanceIcon"
                            src="https://eshangtech.com/wanmeiyizhanImg/home/address.png"
                          />
                          <span class="distanceNumber"
                            >{{ item.SERVERPART_DISTANCEGD || "-" }}km</span
                          >
                        </div>
                        <span class="line"></span>
                        <span class="address">{{
                          item.SERVERPART_ADDRESS || "-"
                        }}</span>
                      </div>
                      <div
                        class="typeList"
                        v-if="item.ServerpartInfo.SERVERPART_TARGET"
                      >
                        <div
                          class="typeItem"
                          v-for="(
                            subItem, subIndex
                          ) in item.ServerpartInfo.SERVERPART_TARGET.split(',')"
                          :key="subIndex"
                        >
                          {{
                            SERVERPART_TARGETOBJ && subItem
                              ? SERVERPART_TARGETOBJ[subItem]
                              : ""
                          }}
                        </div>
                      </div>

                      <!-- <span class="label"
                      >服务区特色：{{
                        item.ServerpartInfo.SERVERPART_INFO || ""
                      }}</span
                    >
                    <span class="value"></span> -->
                    </view>

                    <view class="chargeBox" v-if="false">
                      <view class="chargeItem">
                        <view class="itemLeft">
                          <image
                            class="imgIcon"
                            src="@https://eshangtech.com/wanmeiyizhanImg/home/https://eshangtech.com/minTestImg/lixiangIcon.png"
                          />
                          <span class="chargeTypeName">理想</span>
                        </view>
                        <view class="itemRight">
                          <span class="emptyText">空</span>
                          <span class="use">{{ item.LXHave || "0" }}</span>
                          <span class="sum">/{{ item.LiXiang || "0" }}</span>
                        </view>
                        <!-- <view class="chargeItemLabel">理想</view>
                      <view class="chargeItemValue">
                        空<span class="empty">0</span
                        ><span class="sum">/12</span>
                      </view> -->
                      </view>
                      <view class="chargeItem">
                        <view class="itemLeft">
                          <image
                            class="imgIcon"
                            src="@https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.png"
                          />
                          <span class="chargeTypeName">交控新能源</span>
                        </view>
                        <view class="itemRight">
                          <span class="emptyText">空</span>
                          <span class="use">{{ item.SunHave || "0" }}</span>
                          <span class="sum">/{{ item.Sun || "0" }}</span>
                        </view>
                      </view>

                      <view class="chargeItem">
                        <view class="itemLeft">
                          <image
                            class="imgIcon"
                            src="https://eshangtech.com/minTestImg/chargeAndReplace.png"
                          />
                          <span class="chargeTypeName">国网</span>
                        </view>
                        <view class="itemRight">
                          <span class="emptyText">空</span>
                          <span class="use">{{
                            item.chargeAndReplace || "0"
                          }}</span>
                          <span class="sum"
                            >/{{ item.chargeAndReplaceSum || "0" }}</span
                          >
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

                <view class="centerItem">
                  <!-- 拥有设施的小图标 -->
                  <view
                    class="centerConfigItem"
                    v-for="(subItem, index) in item.imgList"
                    :key="index"
                  >
                    <image
                      v-if="subItem.isShow"
                      class="configImg"
                      :src="subItem.url"
                    />
                  </view>
                </view>

                <view class="bottomItem">
                  <view class="chargeBox">
                    <!-- 理想 -->
                    <view class="chargeItem">
                      <view class="chargeIconBox">
                        <image
                          class="chargeIcon"
                          src="https://eshangtech.com/minTestImg/LXIcon.png"
                        />
                      </view>
                      <view class="chargeInfo">
                        <span class="empty">空</span>
                        <span class="emptyValue">{{
                          item.LXDetail && item.LXDetail.LXEmpty
                            ? item.LXDetail.LXEmpty
                            : "0"
                        }}</span>
                        <span class="sum"
                          >/{{
                            item.LXDetail && item.LXDetail.LXSum
                              ? item.LXDetail.LXSum
                              : "0"
                          }}</span
                        >
                      </view>
                    </view>

                    <!-- 蔚来 -->
                    <view class="chargeItem">
                      <view class="chargeIconBox">
                        <image
                          class="chargeIcon"
                          src="https://eshangtech.com/minTestImg/WLIcon.png"
                        />
                      </view>
                      <view class="chargeInfo">
                        <span class="empty">空</span>
                        <span class="emptyValue">{{
                          item.WLDetail && item.WLDetail.WLEmpty
                            ? item.WLDetail.WLEmpty
                            : "0"
                        }}</span>
                        <span class="sum"
                          >/{{
                            item.WLDetail && item.WLDetail.WLSum
                              ? item.WLDetail.WLSum
                              : "0"
                          }}</span
                        >
                      </view>
                    </view>

                    <!-- 交控新能源(阳光) -->
                    <view class="chargeItem">
                      <view class="chargeIconBox">
                        <image
                          class="chargeIcon"
                          src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg"
                        />
                      </view>
                      <view class="chargeInfo">
                        <span class="empty">空</span>
                        <span class="emptyValue">{{
                          item.SunDetail && item.SunDetail.SunEmpty
                            ? item.SunDetail.SunEmpty
                            : "0"
                        }}</span>
                        <span class="sum"
                          >/{{
                            item.SunDetail && item.SunDetail.SunSum
                              ? item.SunDetail.SunSum
                              : "0"
                          }}</span
                        >
                      </view>
                    </view>

                    <!-- 国网(充换电) -->
                    <view class="chargeItem">
                      <view class="chargeIconBox">
                        <image
                          class="chargeIcon"
                          src="https://eshangtech.com/minTestImg/stateGridIcon.png"
                        />
                      </view>
                      <view class="chargeInfo">
                        <span class="empty">空</span>
                        <span class="emptyValue">{{
                          item.chargeAndReplaceDetail &&
                          item.chargeAndReplaceDetail.chargeAndReplace
                            ? item.chargeAndReplaceDetail.chargeAndReplace
                            : "0"
                        }}</span>
                        <span class="sum"
                          >/{{
                            item.chargeAndReplaceDetail &&
                            item.chargeAndReplaceDetail.chargeAndReplaceSum
                              ? item.chargeAndReplaceDetail.chargeAndReplaceSum
                              : "0"
                          }}</span
                        >
                      </view>
                    </view>
                  </view>
                </view>

                <!-- <view class="rightItem" @click="handleToMap(item)">
                <view class="navigationTop">
                  <image
                    class="navigationIcon"
                    src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png"
                  />
                  导航
                </view>
                <span class="longText"
                  >{{ item.SERVERPART_DISTANCEGD }}公里</span
                >
              </view> -->
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 充换电app跳转 -->
      <view class="goAppBox" @click="handleGo" v-if="false">
        <div class="appLeft">
          <image
            class="goAppIcon"
            src="https://eshangtech.com/ShopICO/ahyd-user/images/home/anhuiAPPIcon.png"
          />
          <span class="appName">安徽充换电APP</span>
        </div>

        <div class="appRight">
          <span class="search">查看</span>
          <image
            class="searchIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.png"
          />
        </div>
      </view>

      <!-- <view class="goTest" @click="handleGoTest" v-if="loginType !== 'min'">
        <span>跳转测试页面</span>
      </view> -->
      <!-- <view>{{ JSON.stringify(userInfo) }}</view> -->
    </view>
    <uni-popup
      ref="popup"
      :show="isShow"
      :safe-area="false"
      @close="handleClosePopup"
      @maskClick="handleClosePopup"
    >
      <view class="selectPointBox">
        <view class="searchBox">
          <image
            class="searchIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/searchIcon.png"
          />
          <input
            class="inputBox"
            v-model="searchPoint"
            placeholder="搜索地点、服务区"
            placeholder-style="font-size: 24rpx"
            confirm-type="search"
            @input="searchPOI"
            @confirm="searchPOI"
          />
          <span class="searchBtn" @click="searchPOI">搜索</span>
        </view>

        <view class="filterBox" v-if="!hideFilterSearch">
          <view class="filterItem" @click="handleAddSearchText('服务区')">
            <view class="filterContent service"> 服务区</view>
          </view>
          <view class="filterItem" @click="handleAddSearchText('加油站')">
            <view class="filterContent gasStation">加油站</view>
          </view>
          <view class="filterItem" @click="handleAddSearchText('收费站')">
            <view class="filterContent tollStation">收费站</view>
          </view>
          <view class="filterItem" @click="handleAddSearchText('充电站')"
            ><view class="filterContent chargingStation">充电站</view></view
          >
        </view>

        <scroll-view scroll-y class="listBox">
          <view
            class="listItem"
            v-for="(item, index) in pointList"
            :key="index"
            @click="handleGoUsMap(item)"
          >
            <view class="topItem">
              <view class="topLeft">
                <image
                  class="listIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/address.png"
                />
                <span class="listName">{{ item.name || "" }}</span>
              </view>
              <view class="rightDistance">{{
                item.distance ? `${item.distance}km` : ""
              }}</view>
            </view>
            <view class="bottom">{{ item.address || "" }}</view>
          </view>
        </scroll-view>
        <!-- name  -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
import serverInfo from "./serverInfo.js";
import ChargeBox from "../../components/chargeBox.vue";
// uni.requireNativePlugin("myTest");
// const CryptoJS = require("crypto-js");
// import md5 from "js-md5";
import {
  handleGetNearService,
  handleHavePointInMin,
  handleHavePointInApp,
  hanldeHavePointInIos,
} from "../../utils/publicMethods.js";

export default {
  components: { ChargeBox },
  data() {
    return {
      startObj: {}, // 起点的数据对象
      endObj: {}, // 终点的数据对象
      currentService: "", // 当前服务区信息
      howLong: "", // 多少公里
      hour: "", // 花费小时
      minute: "", // 花费分钟
      money: "", // 花费钱
      serviceList: [], // 沿途服务区列表
      detailObj: {
        distanceNumber: "",
        hour: "",
        minutes: "",
        tolls: "",
        haveProgress: "",
      },
      userObj: {
        name: "我的位置",
        seatInfo: {}, // 用户当前的经纬度位置
      },
      endPointObj: {},
      seatInfo: "",
      loginType: "",
      SERVERPART_TARGETOBJ: {},
      userInfo: {}, //用户信息
      context: "",
      isShow: false,
      searchPoint: "", // 搜索地名的值
      pointList: [], // 查询到的地名数组
      chaegeBoxList: [], // 组件要的服务区名称的数组
      hideFilterSearch: false, // 隐藏筛选的小项
      endPlaceFocus: false, // 目的地的聚焦
      startEndType: 1, // 起始的类型  1的时候 代表没交换过  2的时候 代表交换了
    };
  },
  onLoad() {
    let type = uni.getStorageSync("loginType");
    this.loginType = type;
    console.log("type", type);

    let _this = this;
    if (type === "min") {
      handleHavePointInMin().then((res) => {
        _this.handleGetOnLoad();
      });
    } else if (type === "android") {
      handleHavePointInApp().then((res) => {});
    } else {
      hanldeHavePointInIos();
    }

    let SERVERPART_TARGET = uni.getStorageSync("SERVERPART_TARGET");
    if (SERVERPART_TARGET) {
      this.SERVERPART_TARGETOBJ = JSON.parse(SERVERPART_TARGET);
    } else {
      // 拿到枚举
      this.handleSERVERPART_TARGETOBJ();
    }

    // 理想的数据对接的方法
    // this.handleGetLXData();
  },
  onShow() {
    let _this = this;
    // 判断服务区是否已经改变了
    let res = uni.getStorageSync("currentService");
    // 存在了经纬度
    // if (res) {
    //   // 不等于的时候就是改变了
    //   if (res.SERVERPART_ID !== this.endObj.SERVERPART_ID) {
    //     let res = uni.getStorageSync("currentService");

    //     this.currentService = res;
    //     console.log("res", res);

    //     this.seatInfo = JSON.parse(uni.getStorageSync("seatInfo"));

    //     this.userObj = {
    //       ...this.userObj,
    //       longitude: this.seatInfo.longitude,
    //       latitude: this.seatInfo.latitude,
    //     };

    //     this.endPointObj = {
    //       ...res,
    //       longitude: res.SERVERPART_X,
    //       latitude: res.SERVERPART_Y,
    //       name: res.SERVERPART_NAME,
    //     };
    //     console.log("seatInfo", this.seatInfo);
    //     // 给起点和终点赋值
    //     this.startObj = this.userObj;
    //     this.endObj = this.endPointObj;

    //     this.handleTrafficSearch();
    //   }
    // } else {
    //   if (this.loginType === "min") {
    //   } else if (this.loginType === "android") {
    //     plus.geolocation.getCurrentPosition(
    //       async function (position) {
    //         let res = position.coords;
    //         let seatInfo = {
    //           latitude: res.latitude,
    //           longitude: res.longitude,
    //         };
    //         uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
    //         uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
    //         _this.seat = seatInfo;
    //         _this.handleGetOnLoad();
    //       },
    //       function (error) {
    //         // handleHavePointInApp();
    //         console.error("获取位置失败:", error.message);
    //       }
    //     );
    //   }
    // }

    let seatInfo = uni.getStorageSync("seatInfo");
    if (seatInfo) {
      this.seatInfo = JSON.parse(seatInfo);
    }

    this.userObj = {
      ...this.userObj,
      longitude: this.seatInfo.longitude,
      latitude: this.seatInfo.latitude,
    };

    if (this.endObj.longitude && this.endObj.latitude) {
    } else {
      this.endPointObj = {
        name: "请选择目的地",
      };
      this.startObj = this.userObj;
      this.endObj = this.endPointObj;
    }

    let userInfo = uni.getStorageSync("userInfo");
    this.userInfo = userInfo;
  },
  onShareAppMessage() {
    // let _this = this;
    return {
      title: "出行导航",
      path: "/pages/scanCodeCharge/travelNavigation",
      // imageUrl: _this.good.DEFAULT_IMG,
    };
  },
  onShareTimeline() {
    return {
      title: "出行导航",
      path: "/pages/scanCodeCharge/travelNavigation",
      // imageUrl: _this.good.DEFAULT_IMG,
    };
  },
  methods: {
    // 目的地的聚焦事件
    handleEndPlaceFocus(e) {
      this.endPlaceFocus = true;
    },
    // 失去焦点
    handleEndPlaceBlur() {
      this.endPlaceFocus = false;
    },
    // 直接点击回车 触发搜索
    handleConfirmToSearch() {
      if (this.pointList && this.pointList.length > 0) {
        this.handleGoUsMap(this.pointList[0]);
        this.endPlaceFocus = false;
      }
    },
    // 给搜索框 加上指定文字
    handleAddSearchText(searchType) {
      this.searchPoint += searchType;
      this.hideFilterSearch = true;
      this.searchPOI();
    },
    // 高德的搜索
    searchPOI() {
      if (!this.searchPoint) {
        this.hideFilterSearch = false;
      }
      if (this.startEndType === 1) {
        this.endObj.name = this.searchPoint;
      } else {
        this.startObj.name = this.searchPoint;
      }
      let _this = this;
      const key = "6e96a801bcea5290d3dcbf100358a6b3"; // 在高德开发者平台申请
      const url = `https://restapi.amap.com/v5/place/text?key=${key}&types=&keywords=${this.searchPoint}&offset=10&page=1&region=合肥市`;
      // radius=5000&types=餐饮服务|购物服务&
      console.log("url", url);

      // types 010100|010101|010102  加油站 180300|180301|180302 服务区

      uni.request({
        url,
        success: (res) => {
          console.log("res", res.data.pois);
          let list = res.data.pois;

          console.log("_this.startObj", _this.startObj);
          if (list && list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              let item = list[i];

              let [lon2, lat2] = item.location.split(",");
              let distance = _this.getDistance(
                _this.startObj.latitude,
                _this.startObj.longitude,
                lat2,
                lon2
              );
              item.distance = distance;
            }
          }

          if (list && list.length > 0) {
            for (let i = 0; i < list.length - 1; i++) {
              // 外层循环控制排序趟数
              for (let j = 0; j < list.length - i - 1; j++) {
                if (Number(list[j].distance) > Number(list[j + 1].distance)) {
                  let temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          }
          _this.pointList = list;
          console.log("_this.pointList", _this.pointList);
        },
      });
    },
    // 点击高德搜索出来的 导航
    handleGoUsMap(obj) {
      console.log("obj", obj);
      let [lon2, lat2] = obj.location.split(",");
      let newRes = {
        SERVERPART_X: lon2,
        SERVERPART_Y: lat2,
        ServerPart_Name: obj.name,
        name: obj.name,
        longitude: lon2,
        latitude: lat2,
      };

      if (this.startEndType === 1) {
        this.endObj = newRes;
      } else {
        this.startObj = newRes;
      }
      this.searchPoint = newRes.name;
      this.endPlaceFocus = false;
      this.detailObj = {
        distanceNumber: "",
        hour: "",
        minutes: "",
        tolls: "",
        haveProgress: "",
        servicePart: [],
      };
      this.$refs.popup.close();
      this.isShow = false;
      console.log("startEndType", this.startEndType);
      console.log("endObj", this.endObj);
      console.log("startObj", this.startObj);
      this.handleTrafficSearch();

      return;
      console.log("obj", obj);
      let [lon, lat] = obj.location.split(",");

      if (this.loginType === "min") {
        uni.openLocation({
          latitude: lat * 1,
          longitude: lon * 1,
          scale: 16, // 缩放比例
          name: obj.name,
          // address: "", // 这个可能会影响地图的定位，所以可以选择不填
          success(data) {
            console.log(data);
          },
          fail(err) {
            console.log(err);
          },
        });
      } else {
        if (this.seatInfo) {
          const addModule = uni.requireNativePlugin("AMapModule");
          addModule.auth(
            "d773aa156f8ca2160cfb06d5f117dacd",
            (suc) => {
              addModule.reg(
                (suc) => {
                  addModule.navfrom(
                    this.startObj.latitude,
                    this.startObj.longitude,
                    "我的位置",
                    lat,
                    lon,
                    obj.name,
                    (suc) => {
                      console.log(suc);
                    },
                    (err) => {
                      console.log(err);
                    }
                  );
                },
                (err) => {
                  uni.showToast({
                    title: err,
                    icon: "none",
                  });
                }
              );
            },
            (err) => {
              uni.showToast({
                title: err,
                icon: "none",
              });
            }
          );
        }
      }
    },
    // 计算经纬度的实际距离的方法
    getDistance(lat1, lon1, lat2, lon2) {
      const toRad = (d) => (d * Math.PI) / 180; // 角度转弧度
      const R = 6371.0; // 地球半径（单位：km）
      const dLat = toRad(lat2 - lat1);
      const dLon = toRad(lon2 - lon1);
      const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(toRad(lat1)) *
          Math.cos(toRad(lat2)) *
          Math.sin(dLon / 2) *
          Math.sin(dLon / 2);

      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      return (R * c).toFixed(2); // 返回单位：米
    },
    // 随机给充电桩数据
    handleHaveRandomData() {
      // 理想当前充电的
      let LXHave = 0;
      // 理想的全部充电的
      let LXSum = 0;
      // 阳光当前充电的
      let SunHave = 0;
      // 阳光全部充电的
      let SunSum = 0;
      // 充换电当前充电的
      let chargeAndReplace = 0;
      // 充换电全部充电的
      let chargeAndReplaceSum = 0;

      // 给理想随机 总数
      LXSum = this.handleGetRandomData(15, 20);
      // 给阳光随机 总数
      SunSum = this.handleGetRandomData(10, 17);
      // 给充换电随机 总数
      chargeAndReplaceSum = this.handleGetRandomData(5, 10);

      // 理想的随机百分比
      let LXRate = this.handleGetRandomData(0, 60);
      // 阳光的随机百分比
      let SunRate = this.handleGetRandomData(0, 60);
      // 充换电的随机百分比
      let chargeAndReplaceRate = this.handleGetRandomData(0, 60);

      LXHave = Math.floor(LXSum * (LXRate / 100));
      SunHave = Math.floor(SunSum * (SunRate / 100));
      chargeAndReplace = Math.floor(
        chargeAndReplaceSum * (chargeAndReplaceRate / 100)
      );

      return {
        LXHave: LXHave,
        LXSum: LXSum,
        SunHave: SunHave,
        SunSum: SunSum,
        chargeAndReplace: chargeAndReplace,
        chargeAndReplaceSum: chargeAndReplaceSum,
      };
    },
    // 生成随机数
    handleGetRandomData(max, min) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    //理想的数据对接的方法
    async handleGetLXData() {
      const LiOperatorSecret = "bGMyYwJFl17BqwD3";
      const LiOperCode = "MA7EBGWBX";
      const LiSigSecret = "V7I6yvHvEk8STt0P";
      const LiDataSecret = "P2S3WjoLv3rqL0hn";
      const LiIV = "ZRlwcrx7k63ihzXF";

      const OperatorID = "78109626X"; //  组织机构代码（OperatorID）
      const OperatorSecret = "Xh2vLq1Pz9zF7wK3"; // Xh2vLq1Pz9zF7wK3 运营商秘钥（OperatorSecret）
      const SigSecret = "bT8sWn2Aq0Jv6GvD"; // bT8sWn2Aq0Jv6GvD 签名秘钥（SigSecret）
      const DataSecret = "fK7YzAq1R8Vp9hL0"; // fK7YzAq1R8Vp9hL0 数据加密秘钥（DataSecret）
      const DataSecretIV = "z3XnWl8FQ2pTm5Ba"; // z3XnWl8FQ2pTm5Ba 初始化向量（DataSecretIV

      // 调用token接口拿到数据
      let tokenData = await this.$testApi.$post("/send", {
        url: "https://iot-openapi-ontest-b.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_token",
        data: JSON.stringify({
          OperatorID: OperatorID,
          OperatorSecret: LiOperatorSecret,
        }),
        seq: "001",
        token: "",
      });
      console.log("tokenData", tokenData);
      // token的实际值
      let token = tokenData.Data.AccessToken;

      // 拿到所有站点的数据
      const allStationList = await this.$testApi.$post("/send", {
        url: "https://iot-openapi-ontest-b.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_stations_info",
        data: JSON.stringify({
          PageNo: 1,
          OperatorSecret: 999,
        }),
        seq: "002",
        token: token,
      });
      console.log("allStationList", allStationList);
      let stationList = allStationList.Data.StationInfos;

      // 找到匹配 站点id
      let stationId = [];

      const stationInfo = await this.$testApi.$post("/send", {
        url: "https://iot-openapi-ontest-b.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/notification_stationStatus",
        data: JSON.stringify({
          ConnectorStatusInfo: {
            ConnectorID: 81000251,
            Status: 2,
          },
        }),
        seq: "003",
        token: token,
      });
      console.log("stationInfo", stationInfo);
    },
    // 跳转测试页面
    handleGoTest() {
      uni.scanCode({
        success: function (res) {
          uni.navigateTo({
            url: `/pages/thirdParty/testPage?url=${res.result}`,
          });
        },
      });
    },
    // 跳转安徽充换电
    handleGo() {
      uni.navigateTo({
        url: `/pages/thirdParty/chargAndSwapp`,
      });
    },
    // 跳转地图服务区详情
    handleGoServiceDetail(id) {
      uni.navigateTo({
        url: `/pages/serviceDetail/mapDetail/index?servicePartId=${id}`,
      });
    },
    // 解服务区的一个枚举
    async handleSERVERPART_TARGETOBJ() {
      let SERVERPART_TARGET = await this.$api.$get(
        "/EShangApiMain/FrameWork/GetFieldEnumTree",
        { FieldExplainField: "SERVERPART_TARGET" }
      );
      let list = this.$utils.wrapTreeNode(SERVERPART_TARGET.Result_Data.List);
      let obj = {};
      if (list && list.length > 0) {
        list.forEach((item) => {
          obj[String(item.value)] = item.label;
        });
      }
      console.log("obj", obj);
      uni.setStorageSync("SERVERPART_TARGET", JSON.stringify(obj));
      this.SERVERPART_TARGETOBJ = obj;
    },
    // 把onLoad需要调用的内容变成一个方法 可以方便调用
    async handleGetOnLoad() {
      if (this.seatInfo) {
      } else {
        this.seatInfo = JSON.parse(uni.getStorageSync("seatInfo"));
      }
      let res = uni.getStorageSync("currentService");
      if (res) {
      } else {
        res = await handleGetNearService(this);
      }

      this.endPointObj = {
        ...res,
        longitude: res.SERVERPART_X,
        latitude: res.SERVERPART_Y,
        name: res.SERVERPART_NAME,
      };
      this.currentService = res;
      // this.endName = this.currentService.ServerPart_Name;
      this.userObj = {
        ...this.userObj,
        longitude: this.seatInfo.longitude,
        latitude: this.seatInfo.latitude,
      };
      // 给起点和终点赋值
      this.startObj = this.userObj;
      this.endObj = this.endPointObj;
    },
    // 切换出发点和 终点
    handleChangeStartEnd() {
      if (this.startEndType === 1) {
        this.startEndType = 2;
        this.searchPoint = this.endObj.name;
      } else {
        this.startEndType = 1;
        this.searchPoint = this.startObj.name;
      }
      let middleObj = this.endObj;
      this.endObj = JSON.parse(JSON.stringify(this.startObj));
      this.startObj = middleObj;
      console.log("this.startObj", this.startObj);
      console.log("this.endObj", this.endObj);
    },
    // 获取权限
    handleGetPermission() {
      const context = plus.android.runtimeMainActivity();
      const PackageManager = plus.android.importClass(
        "android.content.pm.PackageManager"
      );
      const hasPermission =
        context.checkCallingOrSelfPermission(
          "android.permission.ACCESS_FINE_LOCATION"
        ) === PackageManager.PERMISSION_GRANTED;

      // true 的时候 就是有了位置权限
      if (hasPermission) {
        let seatInfo = uni.getStorageSync("seatInfo");
        if (seatInfo) {
          return JSON.parse(seatInfo);
        } else {
          plus.geolocation.getCurrentPosition(async function (position) {
            console.log("当前位置:", position);
            let res = position.coords;
            let seatInfo = {
              latitude: res.latitude,
              longitude: res.longitude,
            };
            uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
            uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
            _this.seat = seatInfo;
            let latitude = res.latitude;
            let longitude = res.longitude;
            return {
              latitude: latitude,
              longitude: longitude,
            };
          });
        }
      } else {
        uni.showModal({
          title: "注意",
          content:
            "拒绝授权位置服务会导致小程序功能无法正常使用，建议授权位置信息",
          confirmText: "去设置",
          success: function (res) {
            if (res.confirm) {
              const main = plus.android.runtimeMainActivity();
              const Intent = plus.android.importClass("android.content.Intent");
              const Settings = plus.android.importClass(
                "android.provider.Settings"
              );
              const intent = new Intent(
                Settings.ACTION_APPLICATION_DETAILS_SETTINGS
              );
              const uri = plus.android.invoke(
                "android.net.Uri",
                "parse",
                "package:" + main.getPackageName()
              );
              intent.setData(uri);
              main.startActivity(intent);
              uni.switchTab({
                url: "/pages/home/index",
              });
            }
          },
        });
      }
    },
    // 获得高德隐私协议
    handleGetGoDePrivacy() {
      this.myTest.auth(
        this.context,
        "d773aa156f8ca2160cfb06d5f117dacd",
        (suc) => {
          console.log("suc", suc);
          true;
        },
        (err) => {
          console.log("err", err);
          false;
        }
      );
    },

    // 路况查询
    async handleTrafficSearch() {
      this.chaegeBoxList = [];
      // let privacyRes = this.handleGetGoDePrivacy();

      // this.myTest.navfrom(
      //   39.904556,
      //   116.427231,
      //   "火车站",
      //   39.917337,
      //   116.397056,
      //   "博物院",
      //   (suc) => {
      //     console.log("suc", suc);
      //   },
      //   (err) => {
      //     console.log("err", err);
      //   }
      // );

      // this.myTest.reg(
      //   this.context,
      //   "d773aa156f8ca2160cfb06d5f117dacd",
      //   (res) => {
      //     console.log("单次回调：", res);
      //   }
      // );

      // this.myTest.open(this.context, (res) => {
      //   console.log("单次回调：", res);
      // });
      // console.log("1111");
      console.log("this.endObj", this.endObj);

      if (!this.endObj.longitude || !this.endObj.latitude) {
        return;
      }

      let _this = this;

      if (!(this.seatInfo.longitude && this.seatInfo.latitude)) {
        if (this.loginType === "min") {
          handleHavePointInMin().then((res) => {
            _this.handleGetOnLoad();
          });
        } else if (this.loginType === "android") {
          handleHavePointInApp().then((res) => {});
        } else {
          hanldeHavePointInIos();
        }
        return;
      }

      this.handleDelete();
      uni.showLoading({ 
        title: "加载中...",
      });
      // 高德key
      const key = "6e96a801bcea5290d3dcbf100358a6b3";
      // 起点经纬度
      const start = `${this.startObj.longitude},${this.startObj.latitude}`;
      // const start = `117.202392,31.833196`;
      // 终点经纬度
      const end = `${this.endObj.longitude},${this.endObj.latitude}`;
      // 拿到途径点的所有坐标
      let routePoint = "";

      // 服务区列表
      let serviceList = [];

      let storgeList = uni.getStorageSync("serviceList");
      if (storgeList) {
        serviceList = JSON.parse(storgeList);
      } else {
        let req = {
          Province_Code: "340000",
          longitude: this.seatInfo.longitude || "",
          latitude: this.seatInfo.latitude || "",
          ShowService: true,
        };
        let serviceArea = await this.$api.$get(
          "/CommercialApi/BaseInfo/GetServerpartList",
          req
        );
        let serviceList = serviceArea.Result_Data.List;
        uni.setStorageSync("serviceList", JSON.stringify(serviceList));
      }
      // 拿到当前位置 跟服务区的距离
      console.log("serviceList", serviceList);
      console.log("start", start);
      console.log("this.endObj", this.endObj);

      const data = await new Promise((resolve, reject) => {
        uni.request({
          url: `https://restapi.amap.com/v3/direction/driving?key=${key}&origin=${start}&destination=${this.endObj.longitude},${this.endObj.latitude}&extensions=all&strategy=20`,
          method: "GET",
          success(res) {
            console.log("resresresresresresresresresresres", res);

            if (
              res.data &&
              res.data.route &&
              res.data.route.paths &&
              res.data.route.paths.length > 0
            ) {
              resolve(res.data.route.paths[0] || {});
            } else {
              resolve(undefined);
            }
          },
        });
      });
      let distance =
        data && data.distance ? (data.distance / 1000).toFixed(2) : 0; // 公里
      // 耗时
      let duration = data && data.duration ? Math.ceil(data.duration / 60) : 0; // 分钟
      // 收费金额
      let tolls = data && data.tolls ? data.tolls : 0; // 收费金额
      // 转一下时间的格式
      let timeObj = _this.handleChangeTimeRule(duration);

      // 通畅个数
      let smoothAcount = 0;
      // 全部个数
      let allAcount = 0;

      //拿到是否通畅的数据
      if (data && data.steps && data.steps.length > 0) {
        data.steps.forEach((item) => {
          if (item.tmcs && item.tmcs.length > 0) {
            item.tmcs.forEach((subItem) => {
              if (subItem.status === "畅通") {
                smoothAcount += 1;
              }
              allAcount += 1;
            });
          }
          if (routePoint) {
            routePoint += `;${item.polyline}`;
          } else {
            routePoint = `${item.polyline}`;
          }
        });
      }

      let areaList = routePoint.split(";");

      let newAreaList = [];
      if (areaList && areaList.length > 0) {
        areaList.forEach((item) => {
          let [long, lat] = item.split(",");
          let newLong = this.extractFourDecimals(long);
          let newLat = this.extractFourDecimals(lat);
          newAreaList.push(`${newLong},${newLat}`);
        });
      }
      console.log("newAreaList", newAreaList);

      console.log("serverInfo.cityCoordinate", serverInfo.cityCoordinate);

      // 途径的服务区
      let serviceAreaList = [];
      if (serverInfo.cityCoordinate && newAreaList && newAreaList.length > 0) {
        for (const key in serverInfo.cityCoordinate) {
          const [name, coord] = [key, serverInfo.cityCoordinate[key]];

          const [serviceLng, serviceLat] = coord.split(",");
          newAreaList.forEach((item) => {
            const [arrayLng, arrayLat] = item.split(",");
            // // 检查经度和纬度是否在允许的波动范围内（±0.03）
            const lngDiff = Math.abs(Number(serviceLng) - Number(arrayLng));
            const latDiff = Math.abs(Number(serviceLat) - Number(arrayLat));

            if (lngDiff <= 0.03 && latDiff <= 0.03) {
              console.log("name", name);
              if(serviceAreaList.indexOf(name)===-1){
                serviceAreaList.push(name);
              }
            }
          });
        }

        // for (let key in serverInfo.cityCoordinate) {
        //   if (
        //     newAreaList.indexOf(serverInfo.cityCoordinate[key]) !== -1 &&
        //     key !== this.endObj.SERVERPART_NAME
        //   ) {
        //     serviceAreaList.push(key);
        //   }
        // }
      }

      console.log("serviceAreaList", serviceAreaList);

      // 判断终点服务区 是否在途径服务区里面 在的话 就push到最后面
      if (serviceAreaList.indexOf(this.endObj.ServerPart_Name) === -1) {
        serviceAreaList.push(this.endObj.ServerPart_Name);
      }

      console.log("serviceAreaListdsads", serviceAreaList);
      this.chaegeBoxList = serviceAreaList;
      _this.detailObj = {
        distanceNumber: distance,
        hour: timeObj.hourStr,
        minutes: timeObj.minuteStr,
        tolls: tolls,
        haveProgress: ((smoothAcount / allAcount) * 100).toFixed(2),
      };

      uni.hideLoading();
      return;
      let list = [];

      if (serviceAreaList && serviceAreaList.length > 0) {
        serviceAreaList.forEach((item) => {
          if (serviceList && serviceList.length > 0) {
            serviceList.forEach((subItem) => {
              if (item === subItem.SERVERPART_NAME) {
                list.push(subItem);
              }

              // 理想总数
              let LIAUTOCHARGESum = 0;
              // 国网总数
              let STATEGRIDCHARGESum = 0;
              // 充换电总数
              let GACENERGYCHARGESum = 0;
              let HASPANTRY = 0; // 男厕数量
              let HASWIFI = 0; // 女厕数量
              let TOILETCOUNT = 0; // 潮汐厕位
              let HASSHOWERROOM = 0; // 淋浴房
              let HASWATERROOM = 0; // 开水器
              let MICROWAVEOVEN = 0; // 微波炉
              let WASHERCOUNT = 0; // 洗衣机数量
              let SLEEPINGPODS = 0; // 睡眠仓
              let HASPILOTLOUNGE = false; // 有无司机之家
              let SHOWERROOM = 0; // 司机之家淋浴间
              let HASCHILD = false; // 有无车辆维修
              let SMALLPARKING = 0; // 轿车车位
              let PACKING = 0; // 客车车位
              let TRUCKPACKING = 0; // 货车车位
              let DANPACKING = 0; // 危化品车位
              let DININGBXCOUNT = 0; // 商铺数量
              let DININGROOMCOUNT = 0; // 餐饮店
              let HASBACKGROUNDRADIO = 0; // 便利店
              let POINTCONTROLCOUNT = 0; // 客房
              let TOILET_PAPER = 0; // 厕纸巾
              let MABROOMWATER_DISPENSER = 0; // 母婴室饮水机
              let NURSING_TABLE = 0; // 哺乳桌
              let BABY_COT = 0; // 婴儿床
              let CHANGING_TABLE = 0; // 尿布台
              let DROOMWATER_DISPENSER = 0; // 司机之家饮水机
              let UREA_COUNT = 0; // 尿素
              let VEHICLEWATERFILLING = 0; // 加水

              if (subItem.RegionInfo && subItem.RegionInfo.length > 0) {
                subItem.RegionInfo.forEach((thirdItem) => {
                  HASPANTRY += thirdItem.HASPANTRY;
                  HASWIFI += thirdItem.HASPANTRY;
                  TOILETCOUNT += thirdItem.TOILETCOUNT;
                  HASSHOWERROOM += thirdItem.HASSHOWERROOM;
                  HASWATERROOM += thirdItem.HASWATERROOM;
                  MICROWAVEOVEN += thirdItem.MICROWAVEOVEN;
                  WASHERCOUNT += thirdItem.WASHERCOUNT;
                  SLEEPINGPODS += thirdItem.SLEEPINGPODS;
                  SHOWERROOM += thirdItem.SHOWERROOM;
                  SMALLPARKING += thirdItem.SMALLPARKING;
                  PACKING += thirdItem.PACKING;
                  TRUCKPACKING += thirdItem.TRUCKPACKING;
                  DANPACKING += thirdItem.DANPACKING;
                  DININGBXCOUNT += thirdItem.DININGBXCOUNT;
                  DININGROOMCOUNT += thirdItem.DININGROOMCOUNT;
                  HASBACKGROUNDRADIO += thirdItem.HASBACKGROUNDRADIO;
                  POINTCONTROLCOUNT += thirdItem.POINTCONTROLCOUNT;
                  TOILET_PAPER += thirdItem.TOILET_PAPER;
                  MABROOMWATER_DISPENSER += thirdItem.MABROOMWATER_DISPENSER;
                  NURSING_TABLE += thirdItem.NURSING_TABLE;
                  BABY_COT += thirdItem.BABY_COT;
                  CHANGING_TABLE += thirdItem.CHANGING_TABLE;
                  DROOMWATER_DISPENSER += thirdItem.DROOMWATER_DISPENSER;
                  UREA_COUNT += thirdItem.UREA_COUNT;
                  VEHICLEWATERFILLING += thirdItem.VEHICLEWATERFILLING;

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

                  LIAUTOCHARGESum += Number(thirdItem.LIAUTOCHARGE || 0);
                  STATEGRIDCHARGESum += Number(thirdItem.STATEGRIDCHARGE || 0);
                  GACENERGYCHARGESum += Number(thirdItem.GACENERGYCHARGE || 0);
                });
              }
              subItem.LiXiang = LIAUTOCHARGESum;
              subItem.Sun = STATEGRIDCHARGESum;
              subItem.chargeAndReplaceSum = GACENERGYCHARGESum;

              // 判断小图标是否有值
              subItem.imgList = [
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/manWCIcon.svg",
                  isShow: HASPANTRY > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/womanWCIcon.svg",
                  isShow: HASWIFI > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/tideToiletSeat.svg",
                  isShow: TOILETCOUNT > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg",
                  isShow: HASSHOWERROOM > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg",
                  isShow: HASWATERROOM > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/microwave.svg",
                  isShow: MICROWAVEOVEN > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/washingMachine.svg",
                  isShow: WASHERCOUNT > 0,
                },
                // {
                //   url:"https://eshangtech.com/wanmeiyizhanImg/home/washingMachine.svg",
                //   isShow: SLEEPINGPODS>0
                // },
                // {
                //   url:"https://eshangtech.com/wanmeiyizhanImg/home/washingMachine.svg",
                //   isShow: HASPILOTLOUNGE>0
                // },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg",
                  isShow: SHOWERROOM > 0,
                },
                ,
                // {
                //   url:"https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg",
                //   isShow: HASCHILD>0
                // },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/carIcon.svg",
                  isShow: SMALLPARKING > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/bus.svg",
                  isShow: PACKING > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/train.svg",
                  isShow: TRUCKPACKING > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/chemicals.svg",
                  isShow: DANPACKING > 0,
                },
                // {
                //   url:"https://eshangtech.com/wanmeiyizhanImg/home/chemicals.svg",
                //   isShow: DININGROOMCOUNT>0
                // },
                // {
                //   url:"https://eshangtech.com/wanmeiyizhanImg/home/chemicals.svg",
                //   isShow: HASBACKGROUNDRADIO>0
                // },
                // {
                //   url:"https://eshangtech.com/wanmeiyizhanImg/home/chemicals.svg",
                //   isShow: POINTCONTROLCOUNT>0
                // },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/toiletPaperTowels.svg",
                  isShow: TOILET_PAPER > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/waterDispenser.svg",
                  isShow: MABROOMWATER_DISPENSER > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/nursingTable.svg",
                  isShow: NURSING_TABLE > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/crib.svg",
                  isShow: BABY_COT > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/changingTable.svg",
                  isShow: BABY_COT > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg",
                  isShow: DROOMWATER_DISPENSER > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/urea.svg",
                  isShow: UREA_COUNT > 0,
                },
                {
                  url: "https://eshangtech.com/wanmeiyizhanImg/home/watering.svg",
                  isShow: VEHICLEWATERFILLING > 0,
                },
              ];
              // 理想的随机百分比
              let LXRate = this.handleGetRandomData(0, 60);
              // 阳光的随机百分比
              let SunRate = this.handleGetRandomData(0, 60);
              // 充换电的随机百分比
              let chargeAndReplaceRate = this.handleGetRandomData(0, 60);

              subItem.LXHave = Math.floor(subItem.LiXiang * (LXRate / 100));
              subItem.SunHave = Math.floor(subItem.Sun * (SunRate / 100));
              subItem.chargeAndReplace = Math.floor(
                subItem.chargeAndReplaceSum * (chargeAndReplaceRate / 100)
              );
            });
          }
        });
      }
      // 下面的距离变成高速实际距离 不再是直线距离
      if (list && list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          let itemEnd = `${list[i].SERVERPART_X},${list[i].SERVERPART_Y}`;
          await new Promise((resolve) => {
            setTimeout(() => {
              resolve();
            }, 300);
          });

          const res = await new Promise((resolve, reject) => {
            uni.request({
              url: `https://restapi.amap.com/v3/direction/driving?key=${key}&origin=${start}&destination=${itemEnd}&strategy=0`,
              method: "GET",
              success(res) {
                if (
                  res.data &&
                  res.data.route &&
                  res.data.route.paths &&
                  res.data.route.paths.length > 0
                ) {
                  console.log("res1", res);

                  resolve(res.data.route.paths[0] || {});
                } else {
                  resolve(undefined);
                }
              },
            });
          });
          console.log("itemEnd", itemEnd);
          console.log("res", res);

          if (res) {
            list[i].SERVERPART_DISTANCEGD = (
              Number(res.distance) / 1000
            ).toFixed(2);
          }

          let chargeObj = this.handleHaveRandomData();
          list[i].chargeObj = chargeObj;

          let item = list[i];
          console.log("item", item);

          let LXSum = 0; // 理想
          let WLSum = 0; // 蔚来
          let SunSum = 0; // 新能源
          let chargeAndReplaceSum = 0; // 国网

          if (item.RegionInfo && item.RegionInfo.length > 0) {
            item.RegionInfo.forEach((item) => {
              chargeAndReplaceSum += item.STATEGRIDCHARGE; // 国网
              SunSum += item.GACENERGYCHARGE; // 新能源
              WLSum += item.OTHERCHAGRE; // 蔚来
              LXSum += item.LIAUTOCHARGE; // 理想
            });
          }

          // 理想的随机百分比
          let LXRate = this.handleGetRandomData(0, 60);
          // 蔚来的随机百分比
          let WLRate = this.handleGetRandomData(0, 60);
          // 阳光的随机百分比
          let SunRate = this.handleGetRandomData(0, 60);
          // 充换电的随机百分比
          let chargeAndReplaceRate = this.handleGetRandomData(0, 60);

          item.LXDetail = {
            LXEmpty: Math.floor(LXSum * (LXRate / 100)),
            LXSum: LXSum,
          };
          item.WLDetail = {
            WLEmpty: Math.floor(WLSum * (WLRate / 100)),
            WLSum: WLSum,
          };
          item.SunDetail = {
            SunEmpty: Math.floor(SunSum * (SunRate / 100)),
            SunSum: SunSum,
          };
          item.chargeAndReplaceDetail = {
            chargeAndReplace: Math.floor(
              chargeAndReplaceSum * (chargeAndReplaceRate / 100)
            ),
            chargeAndReplaceSum: chargeAndReplaceSum,
          };
        }
      }

      console.log("listasdsadasdas", list);

      _this.detailObj = {
        distanceNumber: distance,
        hour: timeObj.hourStr,
        minutes: timeObj.minuteStr,
        tolls: tolls,
        haveProgress: ((smoothAcount / allAcount) * 100).toFixed(2),
        servicePart: list,
      };

      console.log("_this.detailObj", _this.detailObj);

      // LXDetail.LXEmpty
      // LXDetail.LXSum
      // WLDetail.WLEmpty
      // WLDetail.WLSum
      // SunDetail.SunEmpty
      // SunDetail.SunSum
      // chargeAndReplaceDetail.chargeAndReplace
      // chargeAndReplaceDetail.chargeAndReplaceSum

      // 调用理想的数据
      _this.handleGetChargeData(list, ["新桥", "丰乐", "肥东"]);

      uni.hideLoading();
    },

    // 拿到充电的理想数据
    async handleGetChargeData(serviceList, nameList) {
      uni.showLoading({
        title: "查询理想设备信息...",
      });

      const LiOperatorSecret = "bGMyYwJFl17BqwD3";
      const LiOperCode = "MA7EBGWBX";
      const LiSigSecret = "V7I6yvHvEk8STt0P";
      const LiDataSecret = "P2S3WjoLv3rqL0hn";
      const LiIV = "ZRlwcrx7k63ihzXF";

      const OperatorID = "78109626X"; //  组织机构代码（OperatorID）
      const OperatorSecret = "Xh2vLq1Pz9zF7wK3"; // Xh2vLq1Pz9zF7wK3 运营商秘钥（OperatorSecret）
      const SigSecret = "bT8sWn2Aq0Jv6GvD"; // bT8sWn2Aq0Jv6GvD 签名秘钥（SigSecret）
      const DataSecret = "fK7YzAq1R8Vp9hL0"; // fK7YzAq1R8Vp9hL0 数据加密秘钥（DataSecret）
      const DataSecretIV = "z3XnWl8FQ2pTm5Ba"; // z3XnWl8FQ2pTm5Ba 初始化向量（DataSecretIV）

      let tokenData = await this.$testApi.$post("/send", {
        url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_token",

        data: JSON.stringify({
          OperatorID: OperatorID,
          OperatorSecret: LiOperatorSecret,
        }),
        id: 0,
        seq: "001",
        token: "",
      });
      console.log("tokenData", tokenData);
      // token的实际值
      let token = tokenData.Data.AccessToken;

      // 拿到所有站点的数据
      const allStationList = await this.$testApi.$post("/send", {
        url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_stations_info",
        data: JSON.stringify({
          PageNo: 1,
          PageSize: 999,
        }),
        id: 0,
        seq: "002",
        token: token,
      });
      let stationList = allStationList.Data.StationInfos;
      console.log("stationList", stationList);

      let newStationList = [];

      if (stationList && stationList.length > 0) {
        stationList.forEach((item) => {
          if (item.Address) {
            if (nameList && nameList.length > 0) {
              nameList.forEach((subItem) => {
                if (item.Address.indexOf(subItem) !== -1) {
                  newStationList.push(item);
                }
              });
            }
          }
        });
      }

      // 这段是和自己最近的三个服务区的 理想充电筛出来的数据
      console.log("newStationList", newStationList);

      let stationIds = [];
      // 创建吧id当key的对象
      let stationObj = {};
      // 拿到充电站的id数组 去查里面的充电枪详情
      if (newStationList && newStationList.length > 0) {
        newStationList.forEach((item) => {
          stationIds.push(item.StationID);
          stationObj[item.StationID] = item;
        });
      }

      // 查询具体状态
      if (stationIds && stationIds.length > 0) {
        const stationInfo = await this.$testApi.$post("/send", {
          url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_station_status",
          data: JSON.stringify({
            StationIDs: stationIds,
          }),
          id: 0,
          seq: "003",
          token: token,
        });
        let statusList = stationInfo.Data.StationStatusInfos;
        console.log("statusList", statusList);
        if (statusList && statusList.length > 0) {
          statusList.forEach((item) => {
            if (stationObj[item.StationID]) {
              stationObj[item.StationID].statusList = item.ConnectorStatusInfos;
            }
          });
        }
      }
      console.log("stationObj", stationObj);

      // 带有状态的充电站列表格式
      let haveStationList = [];
      if (stationObj) {
        for (let key in stationObj) {
          haveStationList.push(stationObj[key]);
        }
      }

      console.log("haveStationList", haveStationList);

      if (serviceList && serviceList.length > 0) {
        let newRes = JSON.parse(JSON.stringify(serviceList));
        newRes.forEach((item) => {
          let LXCharge = [];
          let LXInfoList = [];
          let sortName = item.SERVERPART_NAME.split("服务区")[0];

          if (haveStationList && haveStationList.length > 0) {
            haveStationList.forEach((subItem) => {
              if (subItem.Address.indexOf(sortName) !== -1) {
                LXCharge.push(...subItem.statusList);
                if (
                  subItem.EquipmentInfos &&
                  subItem.EquipmentInfos.length > 0
                ) {
                  subItem.EquipmentInfos.forEach((thirdItem) => {
                    if (
                      thirdItem.ConnectorInfos &&
                      thirdItem.ConnectorInfos.length > 0
                    ) {
                      thirdItem.ConnectorInfos.forEach((fourthItem) => {
                        LXInfoList.push(fourthItem);
                      });
                    }
                  });
                }
              }
            });
            // 空多少个
            let LXEmpty = 0;
            // 一共多少个
            let LXSum = 0;

            if (LXCharge && LXCharge.length > 0) {
              LXCharge.forEach((subItem) => {
                if (subItem.Status !== 3) {
                  LXEmpty += 1;
                }
                LXSum += 1;
              });
            }

            item.LXDetail = {
              LXSum: LXSum,
              LXEmpty: LXEmpty,
            };
            if (LXInfoList && LXInfoList.length > 0) {
              LXInfoList.forEach((item) => {
                if (LXCharge && LXCharge.length > 0) {
                  LXCharge.forEach((subItem) => {
                    if (item.ConnectorID === subItem.ConnectorID) {
                      item.ParkStatus = subItem.ParkStatus;
                      item.Status = subItem.Status;
                    }
                  });
                }
              });
            }
            item.LXInfoList = LXInfoList;

            item.LXCharge = LXCharge;
          }
        });

        console.log("newRes", newRes);
        this.detailObj.servicePart = newRes;
        this.$forceUpdate();
      }
      uni.hideLoading();

      // const stationFee = await this.$testApi.$post("/send", {
      //   url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_equip_business_policy",
      //   data: JSON.stringify({
      //     ConnectorID: "81003879",
      //     EquipBizSeq: "78109626",
      //   }),
      //   id: 0,
      //   seq: "003",
      //   token: token,
      // });
      // console.log("stationFee", stationFee);
    },

    // 转成几时几分
    handleChangeTimeRule(minutes) {
      if (isNaN(minutes) || minutes < 0) {
        return undefined;
      }

      const hours = Math.floor(minutes / 60); // 小时部分
      const remainingMinutes = minutes % 60; // 剩余分钟部分

      // 构建返回字符串
      const hourStr = hours > 0 ? `${hours}` : "";
      const minuteStr = remainingMinutes > 0 ? `${remainingMinutes}` : "";
      return {
        hourStr: hourStr,
        minuteStr: minuteStr,
      };
    },
    //只取小数点后四位
    extractFourDecimals(str) {
      if (!str) {
        return "";
      }
      // 正则匹配小数部分
      const match = str.toString().match(/^(-?\d+)(\.\d{0,2})?/);
      if (match) {
        return match[1] + (match[2] || ""); // 拼接整数部分和截取的小数部分
      }
    },
    // 初始化页面数据
    handleDelete() {
      this.detailObj = {
        distanceNumber: "",
        hour: "",
        minutes: "",
        tolls: "",
        haveProgress: "",
      };
    },
    // 改变终点
    handleChangeService(obj) {
      this.$refs.popup.open("bottom");
      this.isShow = true;
      return;
      if (obj.SERVERPART_ID) {
        uni.navigateTo({ url: "/pages/newMap/index/index" });
      }
    },

    // 关闭悬浮框
    handleClosePopup() {
      this.$refs.popup.close();
      this.isShow = false;

      this.searchPoint = "";
      this.pointList = [];
      this.hideFilterSearch = false;
    },
    // 跳转去地图
    handleToMap(obj) {
      // console.log("this.loginType", this.loginType);

      if (this.loginType === "min" || this.loginType === "ios") {
        uni.openLocation({
          latitude: obj.latitude ? obj.latitude * 1 : obj.SERVERPART_Y * 1,
          longitude: obj.longitude ? obj.longitude * 1 : obj.SERVERPART_X * 1,
          scale: 16, // 缩放比例
          name: obj.SERVERPART_NAME,
          // address: "", // 这个可能会影响地图的定位，所以可以选择不填
          success(data) {
            console.log(data);
          },
          fail(err) {
            console.log(err);
          },
        });
      } else {
        if (this.seatInfo) {
          const addModule = uni.requireNativePlugin("AMapModule");
          addModule.auth(
            "d773aa156f8ca2160cfb06d5f117dacd",
            (suc) => {
              addModule.reg(
                (suc) => {
                  addModule.navfrom(
                    this.startObj.latitude,
                    this.startObj.longitude,
                    this.startObj.name,
                    this.endObj.SERVERPART_Y,
                    this.endObj.SERVERPART_X,
                    this.endObj.name,
                    (suc) => {
                      console.log(suc);
                    },
                    (err) => {
                      console.log(err);
                    }
                  );
                },
                (err) => {
                  uni.showToast({
                    title: err,
                    icon: "none",
                  });
                }
              );
            },
            (err) => {
              uni.showToast({
                title: err,
                icon: "none",
              });
            }
          );
        }
      }
    },
    // 跳转充换电app
    handleGoApp() {
      if (this.loginType === "min") {
        uni.navigateTo({
          url: "weixin://dl/officialaccounts",
        });
      } else if (this.loginType === "android") {
        var Intent = plus.android.importClass("android.content.Intent");
        var Uri = plus.android.importClass("android.net.Uri");
        var main = plus.android.runtimeMainActivity();
        var intent = new Intent(
          Intent.ACTION_VIEW,
          Uri.parse("your-app-scheme://")
        );
        main.startActivity(intent);
      }
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  min-height: 100vh;
  // background: #f6f7f8;
  background: #f0f5ff;
  box-sizing: border-box;
  padding: 12px 16px 24rpx;

  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .content {
    width: 100%;
    .trafficState {
      width: 100%;
      background: #ffffff;
      border-radius: 8rpx;
      border: 2rpx solid #f3f3f3;
      box-sizing: border-box;
      padding: 24px;
      .newPositionBox {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 8rpx 12rpx;
        border-radius: 8rpx;
        background: #fafafb;
        border: 1px solid #f6f6f8;
        .positionItem {
          width: 100%;
          display: flex;
          align-items: center;
          .itemLeft {
            width: calc(100% - 30rpx);
            .itemLeftItem {
              display: flex;
              align-items: center;
              .positionIcon {
                width: 20rpx;
                height: 20rpx;
                border-radius: 50%;
                margin-right: 20rpx;
              }
              .startObj {
                background: #0dc46e;
              }
              .endObj {
                background: #ef3737;
              }

              .positionBox {
                font-family: "PingFangSC";
                font-weight: 400;
                font-size: 30rpx;
                color: #130f05;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                padding: 16rpx 0;
                display: inline-block;
                width: calc(100% - 80rpx);
                border-bottom: 1px solid #d8d9da;
              }
              .noBorderBottom {
                border-bottom: 0px;
              }
            }
          }

          .itemRight {
            margin-left: 6rpx;
            .reachIcon {
              width: 24rpx;
              height: 24rpx;
              transform: rotate(-90deg);
            }
          }
        }
      }

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

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

        .startItem,
        .endItem {
          width: calc(((100% - 32px) / 2));
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 36rpx;
          color: #130f05;
          line-height: 48rpx;
          text-align: center;
          font-style: normal;
        }
      }
      .searchBtn {
        width: 100%;
        background: #ba922f;
        border-radius: 8rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 44rpx;
        text-align: justify;
        font-style: normal;
        padding: 9px 0;
        margin-top: 24px;
      }
    }

    .placeSearchListBox {
      width: 100%;
      margin-top: 12px;
      background: #ffffff;
      box-sizing: border-box;
      padding: 24rpx;
      .listItem {
        padding: 16rpx 0;
        border-bottom: 1px solid #f5f6f7;
        .topItem {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .topLeft {
            width: 80%;
            display: flex;
            align-items: center;
            .listIcon {
              width: 24rpx;
              height: 24rpx;
              margin-right: 8rpx;
            }
            .listName {
              width: 80%;
              display: inline-block;
              font-family: "PingFangSC";
              font-weight: 400;
              font-size: 28rpx;
              color: #130f05;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }

          .rightDistance {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
        }
        .bottom {
          width: 80%;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }

    .bottomBox {
      width: 100%;
      background: #ffffff;
      border-radius: 8rpx;
      border: 2rpx solid #f3f3f3;
      box-sizing: border-box;
      padding: 12px 16px;
      margin-top: 12px;
      .boxTop {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .leftTop {
          display: flex;
          align-items: center;
          .boldText {
            font-family: PingFangSC, PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #130f05;
            line-height: 44rpx;
            text-align: justify;
            font-style: normal;
          }
          .unit {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #130f05;
            line-height: 36rpx;
            text-align: right;
            font-style: normal;
          }
          .line {
            display: inline-block;
            width: 2rpx;
            height: 22rpx;
            background: #b8b7b4;
            margin: 0 12px;
          }
        }
        .rightTop {
          border-radius: 16px;
          border: 1px solid #ae8d3e;
          padding: 14rpx 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ba922f;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          display: flex;
          align-items: center;
          .navigationIcon {
            width: 24rpx;
            height: 24rpx;
            margin-right: 8rpx;
          }
        }
      }

      .roadConditions {
        width: 100%;
        margin-top: 8rpx;
        .roadTop {
          width: 100%;
          display: flex;
          align-items: center;
          .stateIcon {
            width: 18px;
            height: 18px;
            margin-right: 8rpx;
          }
          .stateText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            line-height: 32rpx;
            text-align: justify;
            font-style: normal;
          }
        }
        .progress {
          width: 100%;
          height: 10px;
          background: #bee4d2;
          border-radius: 6px;
          margin-top: 6px;
          position: relative;
          overflow: hidden;
          .have {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: #29c07a;
            border-radius: 6px;
          }
        }
      }

      .horizontal {
        width: 100%;
        height: 2px;
        background: #f3f3f3;
        margin: 20px 0 16px 0;
      }

      .serviceBox {
        margin-top: 32rpx;
        .serviceTitle {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
        .serviceList {
          margin-top: 8px;
          width: 100%;
          .serviceItem {
            // display: flex;
            // align-items: center;
            margin-bottom: 24rpx;
            border-bottom: 1px solid #f5f6f7;
            padding-bottom: 20rpx;
            .leftItem {
              width: 100%;
              // height: 144rpx;
              // width: calc(100% - 70px);
              display: flex;
              // align-items: center;
              align-items: flex-start;
              .leftImgBox {
                width: 144rpx;
                height: 144rpx;
                overflow: hidden;
                border-radius: 6rpx;
                margin-right: 20rpx;
                background: #f5f6f7;
                .leftImg {
                  width: 144rpx;
                  height: 144rpx;
                  background-repeat: no-repeat;
                  background-size: contain;
                  background-position: 50% 50%;
                  border-radius: 6rpx;
                }
              }
              .detailBox {
                width: calc(100% - 164rpx);
                // height: 144rpx;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                .detailTop {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .topLeft {
                    display: flex;
                    align-items: center;
                    .detailName {
                      display: inline-block;
                      max-width: 400rpx;
                      font-family: "PingFang SC", "Noto Sans CJK SC",
                        "Microsoft YaHei", sans-serif;
                      font-weight: 400;
                      font-size: 28rpx;
                      color: #130f05;
                      line-height: 40rpx;
                      text-align: left;
                      font-style: normal;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                    .detailState {
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      font-size: 22rpx;
                      color: #01a157;
                      line-height: 32rpx;
                      text-align: justify;
                      font-style: normal;
                      padding: 2rpx 3px;
                      background: #e9f8ee;
                      border-radius: 2rpx;
                      margin-left: 8rpx;
                    }
                  }
                  .topRight {
                    .chargeType {
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      font-size: 22rpx;
                      color: #ffffff;
                      line-height: 32rpx;
                      text-align: left;
                      font-style: normal;
                      padding: 2rpx 8rpx;
                      background: #ba922f;
                      border-radius: 4rpx 0rpx 0rpx 4rpx;
                    }
                    .chargeValue {
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      font-size: 24rpx;
                      color: #ba922f;
                      line-height: 36rpx;
                      text-align: left;
                      font-style: normal;
                      padding: 2rpx 8rpx;
                      border-radius: 0rpx 4rpx 4rpx 0rpx;
                      background: #f8f4ea;
                    }
                  }
                }
                .detailBottom {
                  width: 100%;
                  margin-top: 8rpx;
                  .distanceBox {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    .distanceLeft {
                      display: flex;
                      align-items: center;
                      width: 150rpx;
                      .distanceIcon {
                        width: 24rpx;
                        height: 24rpx;
                        margin-right: 4rpx;
                      }
                      .distanceNumber {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #716f69;
                        line-height: 36rpx;
                        text-align: left;
                        font-style: normal;
                      }
                    }

                    .line {
                      display: inline-block;
                      width: 2rpx;
                      height: 22rpx;
                      background: #e7e7e6;
                      margin: 0 12rpx;
                    }
                    .address {
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      font-size: 24rpx;
                      color: #716f69;
                      line-height: 36rpx;
                      text-align: left;
                      font-style: normal;
                      display: inline-block;
                      max-width: 250rpx;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  }

                  .typeList {
                    width: 100%;
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    margin-top: 16rpx;
                    .typeItem {
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      font-size: 24rpx;
                      color: #716f69;
                      line-height: 36rpx;
                      text-align: left;
                      font-style: normal;
                      padding: 4rpx 8rpx;
                      background: #f5f6f7;
                      border-radius: 4rpx;
                      margin-right: 12rpx;
                    }
                  }

                  // .label {
                  //   font-family: PingFangSC, PingFang SC;
                  //   font-weight: 400;
                  //   font-size: 24rpx;
                  //   color: #716f69;
                  //   line-height: 36rpx;
                  //   text-align: justify;
                  //   font-style: normal;
                  //   width: 100%;
                  //   display: -webkit-box; /* 必须设置 */
                  //   -webkit-box-orient: vertical; /* 垂直排列子元素 */
                  //   -webkit-line-clamp: 3; /* 限制显示的行数 */
                  //   overflow: hidden; /* 超出内容隐藏 */
                  //   text-overflow: ellipsis; /* 超出部分显示省略号 */
                  //   word-break: break-all; /* 强制换行，防止长单词溢出 */
                  // }
                  // .value {
                  //   font-family: PingFangSC, PingFang SC;
                  //   font-weight: 400;
                  //   font-size: 24rpx;
                  //   color: #130f05;
                  //   line-height: 36rpx;
                  //   text-align: right;
                  //   font-style: normal;
                  // }
                }

                .chargeBox {
                  width: 100%;
                  margin-top: 8rpx;
                  .chargeItem {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 12rpx;
                    .itemLeft {
                      display: flex;
                      align-items: center;
                      .imgIcon {
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 12rpx;
                      }
                      .chargeTypeName {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #130f05;
                        line-height: 40rpx;
                        text-align: left;
                        font-style: normal;
                      }
                    }
                    .itemRight {
                      background: #f5f6f7;
                      border-radius: 4rpx;
                      padding: 4rpx 12rpx;
                      display: flex;
                      align-items: center;
                      .emptyText {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #130f05;
                        line-height: 32rpx;
                        text-align: left;
                        font-style: normal;
                        margin-right: 4rpx;
                      }
                      .use {
                        font-family: DINAlternate, DINAlternate;
                        font-weight: bold;
                        font-size: 28rpx;
                        color: #130f05;
                        line-height: 32rpx;
                        text-align: left;
                        font-style: normal;
                        margin-right: 4rpx;
                      }
                      .sum {
                        font-family: DINAlternate, DINAlternate;
                        font-weight: bold;
                        font-size: 28rpx;
                        color: #716f69;
                        line-height: 32rpx;
                        text-align: left;
                        font-style: normal;
                      }
                    }
                    // width: 100%;
                    // padding: 8rpx;
                    // background: #f6f6f6;
                    // display: flex;
                    // align-items: center;
                    // justify-content: space-between;
                    // border-radius: 8rpx;
                    // box-sizing: border-box;
                    // padding: 0 16rpx;
                    // margin-bottom: 14rpx;
                    // .chargeItemLabel {
                    //   font-family: PingFangSC, PingFang SC;
                    //   font-weight: 400;
                    //   font-size: 24rpx;
                    //   color: #130f05;
                    //   line-height: 40rpx;
                    //   text-align: left;
                    //   font-style: normal;
                    // }
                    // .chargeItemValue {
                    //   font-family: PingFangSC, PingFang SC;
                    //   font-weight: 400;
                    //   font-size: 24rpx;
                    //   color: #130f05;
                    //   line-height: 36rpx;
                    //   text-align: left;
                    //   font-style: normal;
                    //   .empty {
                    //     font-family: DINAlternate, DINAlternate;
                    //     font-weight: bold;
                    //     font-size: 24rpx;
                    //     color: #130f05;
                    //     line-height: 36rpx;
                    //     text-align: left;
                    //     font-style: normal;
                    //     margin: 0 4rpx;
                    //   }
                    //   .sum {
                    //     font-family: DINAlternate, DINAlternate;
                    //     font-weight: bold;
                    //     font-size: 24rpx;
                    //     color: #716f69;
                    //     line-height: 36rpx;
                    //     text-align: left;
                    //     font-style: normal;
                    //   }
                    // }
                  }
                }
              }
            }
            .centerItem {
              width: 100%;
              box-sizing: border-box;
              padding: 0 8rpx 0 20rpx;
              margin-top: 12rpx;
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              .centerConfigItem {
                .configImg {
                  width: 40rpx;
                  height: 40rpx;
                  margin-right: 8rpx;
                }
              }
            }
            .bottomItem {
              width: 100%;
              box-sizing: border-box;
              padding: 0 8rpx 0 20rpx;
              margin-top: 24rpx;
              .chargeBox {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .chargeItem {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  .chargeIconBox {
                    width: 40rpx;
                    height: 40rpx;
                    .chargeIcon {
                      width: 40rpx;
                      height: 40rpx;
                    }
                  }
                  .chargeInfo {
                    margin-top: 8rpx;
                    display: flex;
                    align-items: center;
                    .empty {
                      font-family: "PingFangSC";
                      font-weight: 400;
                      font-size: 24rpx;
                      color: #130f05;
                      line-height: 36rpx;
                      text-align: left;
                      font-style: normal;
                      margin-right: 4rpx;
                    }
                    .emptyValue {
                      font-family: "DINAlternate";
                      font-weight: bold;
                      font-size: 32rpx;
                      color: #130f05;
                      line-height: 36rpx;
                      text-align: left;
                      font-style: normal;
                      margin-right: 4rpx;
                    }
                    .sum {
                      font-family: "DINAlternate";
                      font-weight: bold;
                      font-size: 32rpx;
                      color: #716f69;
                      line-height: 36rpx;
                      text-align: left;
                      font-style: normal;
                    }
                  }
                }
              }
            }
            .rightItem {
              width: 70px;
              height: 100%;
              display: flex;
              align-items: center;
              flex-direction: column;
              .navigationTop {
                border-radius: 16px;
                border: 1px solid #ae8d3e;
                padding: 14rpx 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #ba922f;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                display: flex;
                align-items: center;
                .navigationIcon {
                  width: 24rpx;
                  height: 24rpx;
                  margin-right: 8rpx;
                }
              }
              .longText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 20rpx;
                color: #787879;
                line-height: 28rpx;
                text-align: justify;
                font-style: normal;
              }
            }
          }
        }
      }
    }

    .goAppBox {
      margin-top: 24rpx;
      width: 100%;
      height: 120rpx;
      background: #ffffff;
      border-radius: 6rpx;
      box-sizing: border-box;
      padding: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .appLeft {
        display: flex;
        align-items: center;
        .goAppIcon {
          width: 72rpx;
          height: 72rpx;
          margin-right: 16rpx;
          border-radius: 50%;
        }
        .appName {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }

      .appRight {
        display: flex;
        align-items: center;
        .search {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #716f69;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
        }
        .searchIcon {
          width: 24rpx;
          height: 24rpx;
          margin-left: 4rpx;
        }
      }
    }
    .goTest {
      padding: 12px 0;
    }
  }

  .selectPointBox {
    width: 100%;
    height: 90vh;
    background: #fff;
    box-sizing: border-box;
    padding: 32rpx;
    .searchBox {
      width: 100%;
      height: 72rpx;
      background: #fff;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 10rpx #7f7f7f;
      box-sizing: border-box;
      padding: 12rpx;
      display: flex;
      align-items: center;
      .searchIcon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
      .inputBox {
        width: calc(100% - 117rpx);
      }
      .searchBtn {
        width: 85rpx;
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 28rpx;
        color: #4191ff;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
    }

    .filterBox {
      width: 100%;
      margin-top: 18rpx;
      display: flex;
      .filterItem {
        width: 25%;
        display: flex;
        align-items: center;
        .filterContent {
          width: 80%;
          border-radius: 32rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 24rpx;
          color: #130f05;
          line-height: 40rpx;
          font-style: normal;
          .imgIcon {
            width: 24rpx;
            height: 24rpx;
            margin-right: 8rpx;
          }
        }
        .service {
          background: #e4ebfd;
        }
        .gasStation {
          background: #d5ebf6;
        }
        .tollStation {
          background: #cff7d2;
        }
        .chargingStation {
          background: #ffebd2;
        }
      }
    }

    .listBox {
      width: 100%;
      height: calc(100% - 72rpx);
      margin-top: 18rpx;
      .listItem {
        padding: 16rpx 0;
        border-bottom: 1px solid #f5f6f7;
        .topItem {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .topLeft {
            width: 80%;
            display: flex;
            align-items: center;
            .listIcon {
              width: 24rpx;
              height: 24rpx;
              margin-right: 8rpx;
            }
            .listName {
              width: 80%;
              display: inline-block;
              font-family: "PingFangSC";
              font-weight: 400;
              font-size: 28rpx;
              color: #130f05;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }

          .rightDistance {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
        }
        .bottom {
          width: 80%;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }

    .listBox ::-webkit-scrollbar {
      display: none;
      width: 0;
    }
  }
}
</style>
