<template>
  <view class="main">
    <view class="content">
      <view class="trafficState">
        <view class="positionBox">
          <view class="startItem" @click="handleChangeService(startObj)">{{
            startObj.name || ""
          }}</view>
          <image
            class="reachIcon"
            src="/static/images/home/reachIcon.png"
            @click="handleChangeStartEnd"
          />
          <view class="endItem" @click="handleChangeService(endObj)">{{
            endObj.name || ""
          }}</view>
        </view>
        <view class="searchBtn" @click="handleTrafficSearch">路况查询</view>
      </view>

      <!-- 下面的信息 -->
      <view class="bottomBox">
        <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(currentService)">
            <image
              class="navigationIcon"
              src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png"
            />
            导航
          </view>
        </view>

        <view class="roadConditions">
          <view class="roadTop">
            <image
              class="stateIcon"
              src="/static/images/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 class="serviceList">
            <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">
                  <image
                    class="leftImg"
                    :src="
                      item.ImageLits && item.ImageLits.length > 0
                        ? item.ImageLits[0]
                        : '/static/images/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="/static/images/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">
                    <view class="chargeItem">
                      <view class="itemLeft">
                        <img
                          class="imgIcon"
                          src="/static/images/home/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">
                        <img
                          class="imgIcon"
                          src="/static/images/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">
                        <img
                          class="imgIcon"
                          src="/static/images/home/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="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>

      <!-- 充换电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="/static/images/home/rightArrow.png" />
        </div>
      </view>

      <view class="goTest" @click="handleGoTest" v-if="loginType !== 'min'">
        <span>跳转测试页面</span>
      </view>
      <!-- <view>{{ JSON.stringify(userInfo) }}</view> -->
    </view>
  </view>
</template>

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

export default {
  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: "",
    };
  },
  onLoad() {
    let type = uni.getStorageSync("loginType");
    this.loginType = type;
    console.log("type", type);

    if (this.loginType !== "min") {
      this.myTest = uni.requireNativePlugin("AMapModule");
      // this.myTest.openTest("回调回来了", (res) => {
      //   console.log("单次回调：", res);
      // });

      console.log("this.myTest", this.myTest);
      const Context = plus.android.importClass("android.content.Context");
      const appContext = plus.android
        .runtimeMainActivity()
        .getApplicationContext();
      this.context = appContext;

      console.log("1");
      this.handleGetPermission();
      console.log("2");

      let privacyRes = this.handleGetGoDePrivacy();
      console.log("privacyRes", privacyRes);

      if (privacyRes) {
        console.log("4", addModule);
        this.myTest.reg(
          (suc) => {
            console.log(suc);
          },
          (err) => {
            console.log(err);
          }
        );
        console.log("5");
      }
    }

    let _this = this;
    if (type === "min") {
      handleHavePointInMin().then((res) => {
        _this.handleGetOnLoad();
      });
    } else if (type === "android") {
      handleHavePointInApp().then((res) => {});
    } else {
      hanldeHavePointInIos();
    }
    // 拿到枚举
    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.endPointObj = {
          ...res,
          longitude: res.SERVERPART_X,
          latitude: res.SERVERPART_Y,
          name: res.SERVERPART_NAME,
        };
        this.seatInfo = JSON.parse(uni.getStorageSync("seatInfo"));
        this.userObj = {
          ...this.userObj,
          longitude: this.seatInfo.longitude,
          latitude: this.seatInfo.latitude,
        };
        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 userInfo = uni.getStorageSync("userInfo");
    this.userInfo = userInfo;
  },
  methods: {
    // 随机给充电桩数据
    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;
        });
      }
      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() {
      let middleObj = this.endObj;
      this.endObj = JSON.parse(JSON.stringify(this.startObj));
      this.startObj = middleObj;
    },

    // 获取权限
    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() {
      uni.navigateTo({
        url: "/pages/serviceDetail/test",
      });
      // 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");

      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 end = `${this.endObj.longitude},${this.endObj.latitude}`;
      // 拿到途径点的所有坐标
      let routePoint = "";

      // 拿到当前位置 跟服务区的距离
      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;

      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}&strategy=0`,
          method: "GET",
          success(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}`);
        });
      }
      // 途径的服务区
      let serviceAreaList = [];
      if (serverInfo.cityCoordinate && newAreaList && newAreaList.length > 0) {
        for (let key in serverInfo.cityCoordinate) {
          if (
            newAreaList.indexOf(serverInfo.cityCoordinate[key]) !== -1 &&
            key !== this.endObj.SERVERPART_NAME
          ) {
            serviceAreaList.push(key);
          }
        }
      }

      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;
              if (subItem.RegionInfo && subItem.RegionInfo.length > 0) {
                subItem.RegionInfo.forEach((thirdItem) => {
                  LIAUTOCHARGESum += Number(thirdItem.LIAUTOCHARGE || 0);
                  STATEGRIDCHARGESum += Number(thirdItem.STATEGRIDCHARGE || 0);
                  GACENERGYCHARGESum += Number(thirdItem.GACENERGYCHARGE || 0);
                });
              }
              subItem.LiXiang = LIAUTOCHARGESum;
              subItem.Sun = STATEGRIDCHARGESum;
              subItem.chargeAndReplaceSum = GACENERGYCHARGESum;

              // 理想的随机百分比
              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;
        }
      }

      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);

      uni.hideLoading();
    },
    // 转成几时几分
    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) {
      if (obj.SERVERPART_ID) {
        uni.navigateTo({ url: "/pages/newMap/index/index" });
      }
    },
    // 跳转去地图
    handleToMap(obj) {
      // console.log("this.loginType", this.loginType);

      // if (this.loginType === "min") {
      //   uni.navigateTo({
      //     url: "/pages/thirdParty/gaodeLoad",
      //   });
      // }

      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);
        },
      });
    },
    // 跳转充换电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;
  .content {
    width: 100%;
    .trafficState {
      width: 100%;
      background: #ffffff;
      border-radius: 8rpx;
      border: 2rpx solid #f3f3f3;
      box-sizing: border-box;
      padding: 24px;
      .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;
      }
    }

    .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: 4px;
                margin-right: 10px;
                .leftImg {
                  width: 100%;
                  height: 100%;
                }
              }
              .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: PingFangSC, PingFang SC;
                      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;
                    //   }
                    // }
                  }
                }
              }
            }
            .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;
    }
  }
}
</style>
