<template>
  <div class="main">
    <scroll-view
      scroll-y
      class="chargeList"
      :style="{ height: `calc(100vh - 60px - ${bottomSafeArea}px)` }"
    >
      <view
        class="chargeboxComponents"
        v-if="chaegeBoxList && chaegeBoxList.length > 0"
      >
        <charge-box :serviceAreaList="chaegeBoxList" :pageType="'scanCode'" />
      </view>

      <view v-if="false">
        <view
          class="serviceItem"
          v-for="(item, index) in serviceList"
          :key="index"
          :style="{
            border: index + 1 === serviceList.length ? 'none' : '',
            marginBottom: index + 1 === serviceList.length ? '0' : '',
          }"
          @click="handleOpenDetail(item)"
        >
          <!-- paddingBottom: index + 1 === serviceList.length ? '0' : '', -->
          <view class="leftItem">
            <view class="leftImgBox">
              <view
                class="leftImg"
                :style="{
                  backgroundImage: `url(${
                    item.ImageLits && item.ImageLits.length > 0
                      ? item.ImageLits[0]
                      : '/static/images/discovery/defaultIcon.png'
                  })`,
                }"
              >
              </view>

              <!-- <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" @click.stop="handleToMap(item)">
                  <image
                    class="navigationIcon"
                    src="/static/images/home/map.png"
                  />
                </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_DISTANCE || "-" }}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>
              </view>

              <view class="chargeBox" v-if="false">
                <view class="chargeItem">
                  <view class="itemLeft">
                    <image
                      class="imgIcon"
                      src="https://eshangtech.com/minTestImg/lixiangIcon.png"
                    />
                    <span class="chargeTypeName">理想</span>
                  </view>
                  <view class="itemRight">
                    <span class="emptyText">空</span>
                    <span class="use">{{ item.LXDetail.LXEmpty || "0" }}</span>
                    <span class="sum">/{{ item.LXDetail.LXSum || "0" }}</span>
                  </view>
                </view>
                <view class="chargeItem">
                  <view class="itemLeft">
                    <image
                      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">
                    <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="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="/static/images/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>
      </view>
    </scroll-view>
    <div class="pageBottom" :style="{ height: 60 + bottomSafeArea + 'px' }">
      <div class="textBox" @click="handleScan">
        <image class="codeIcon" src="/static/images/home/scanCodeIcon.svg" />
        <span class="codeText">扫码充电</span>
      </div>
    </div>

    <uni-popup
      ref="popup"
      :show="isShow"
      :safe-area="false"
      @close="handleClosePopup"
      @maskClick="handleClosePopup"
    >
      <div class="popupDetailBox">
        <div class="popupTitle">
          <div class="closeIcon" @click="handleClosePopup">
            <image class="img" src="/static/images/home/closeIcon.svg" />
          </div>
          <div clsas="title">电桩详情</div>
          <div class="closeIcon"></div>
        </div>

        <div class="popupTab">
          <div
            :class="
              item.value === selectPopup ? 'tabItem selectTabItem' : 'tabItem'
            "
            v-for="(item, index) in popupTab"
            :key="index"
            @click="handleChangeSelectPopup(item.value)"
          >
            {{ item.label }}
            {{
              chargeDetailList &&
              chargeDetailList.length > 0 &&
              item.value === selectPopup
                ? `(${chargeDetailList.length})`
                : ""
            }}
          </div>
        </div>

        <scroll-view
          class="stationList"
          scroll-y
          :style="{
            height: `calc(100% - 108rpx - 56rpx - 24rpx - ${bottomSafeArea}px)`,
          }"
        >
          <div
            class="stationItem"
            v-for="(item, index) in chargeDetailList"
            :key="index"
          >
            <div
              class="leftItem"
              :style="{
                backgroundImage: `url(${
                  item.Status === 0 || item.Status === 255
                    ? 'https://eshangtech.com/minTestImg/offGrid.svg'
                    : item.Power >= 240
                    ? 'https://eshangtech.com/minTestImg/overfilling.svg'
                    : item.Power <= 130 && item.Power > 60
                    ? 'https://eshangtech.com/minTestImg/occupy.svg'
                    : item.Power < 60
                    ? 'https://eshangtech.com/minTestImg/idle.svg'
                    : ''
                })`,
              }"
            >
              <!-- item.Status === 0
                    ? '/static/images/home/offGrid.svg'
                    : item.Status === 1
                    ? '/static/images/home/idle.svg'
                    : item.Status === 2
                    ? '/static/images/home/idle.svg'
                    : item.Status === 3
                    ? '/static/images/home/idle.svg'
                    : item.Status === 4
                    ? '/static/images/home/occupy.svg'
                    : item.Status === 255
                    ? '/static/images/home/offGrid.svg'
                    : '' -->

              <div
                class="chargeType"
                :style="{
                  color:
                    item.Status === 0 || item.Status === 255
                      ? '#B8B7B4'
                      : item.Power >= 240
                      ? '#FF5959'
                      : item.Power <= 130 && item.Power > 60
                      ? '#FF8830'
                      : item.Power < 60
                      ? '#01BD8B'
                      : '',
                }"
              >
                {{
                  item.Status === 0
                    ? "离网"
                    : item.Status === 255
                    ? "故障"
                    : item.Power >= 240
                    ? "超充"
                    : item.Power <= 130 && item.Power > 60
                    ? "‌快充"
                    : "慢充"
                }}
              </div>
              <div
                v-if="item.Status !== 0 && item.Status !== 255"
                class="stausType"
                :style="{
                  color:
                    item.Power >= 240
                      ? '#FF5959'
                      : item.Power <= 130 && item.Power > 60
                      ? '#FF8830'
                      : item.Power < 60
                      ? '#01BD8B'
                      : '',
                }"
              >
                {{
                  item.Status === 2 || item.Status === 3 || item.Status === 4
                    ? "占用"
                    : item.Status === 1
                    ? "空闲"
                    : ""
                }}
              </div>
            </div>
            <div class="rightItem" @click="handleGoMin">
              <div class="messageBox">
                <span class="label">电桩编号</span>
                <span class="value">桩{{ item.ConnectorID || "" }}</span>
              </div>
              <div class="messageBox">
                <span class="label">额定电压</span>
                <span class="value"
                  >{{
                    item.VoltageLowerLimits
                      ? item.VoltageLowerLimits + "v"
                      : ""
                  }}{{
                    item.VoltageUpperLimits && item.VoltageLowerLimits
                      ? "-"
                      : ""
                  }}{{
                    item.VoltageUpperLimits ? `${item.VoltageUpperLimits}v` : ""
                  }}</span
                >
              </div>
              <div class="messageBox">
                <span class="label">最大功率</span>
                <span class="value">{{
                  item.Power ? item.Power + "kw" : ""
                }}</span>
              </div>

              <div class="noticeList">
                <div
                  class="noticeItem"
                  style="margin-right: 12rpx"
                  v-if="item.ConnectorType"
                >
                  {{
                    item.ConnectorType === 1
                      ? "家用插座"
                      : item.ConnectorType === 2
                      ? "交流接口插座"
                      : item.ConnectorType === 3
                      ? "交流接口插头"
                      : item.ConnectorType === 4
                      ? "直流接口插头"
                      : item.ConnectorType === 5
                      ? "无线充电座"
                      : ""
                  }}
                </div>
                <div class="noticeItem" v-if="item.NationalStandard">
                  {{
                    `国标${
                      item.NationalStandard === 1
                        ? "2001"
                        : item.NationalStandard === 2
                        ? "2015"
                        : ""
                    }`
                  }}
                </div>
              </div>
            </div>

            <div
              class="statusBox"
              v-if="item.Status === 2 || item.Status === 3 || item.Status === 4"
              :style="{
                color:
                  item.Power >= 240
                    ? '#FF5959'
                    : item.Power <= 130 && item.Power > 60
                    ? '#FF8830'
                    : item.Power < 60
                    ? '#01BD8B'
                    : '',
                backgroundColor:
                  item.Power >= 240
                    ? '#FFF1F1'
                    : item.Power <= 130 && item.Power > 60
                    ? '#FBF2EB'
                    : item.Power < 60
                    ? '#EAF4F1'
                    : '',
              }"
            >
              <image
                v-if="item.Status === 3"
                class="chargeIcon"
                :src="
                  item.Power >= 240
                    ? '/static/images/home/fast.svg'
                    : item.Power <= 130 && item.Power > 60
                    ? '/static/images/home/normal.svg'
                    : item.Power < 60
                    ? '/static/images/home/slow.svg'
                    : ''
                "
              />
              {{
                item.Status === 2
                  ? "占用"
                  : item.Status === 3
                  ? "充电中"
                  : item.Status === 4
                  ? "预约锁定"
                  : ""
              }}
            </div>
          </div>
        </scroll-view>
      </div>
    </uni-popup>
  </div>
</template>

<script>
import ChargeBox from "../../components/chargeBox.vue";
export default {
  components: { ChargeBox },
  data() {
    return {
      serviceList: [], // 最近的三个服务区的数据
      loginType: "", // 登录类型
      seatInfo: {}, // 经纬度数据
      phoneType: "", // 手机类型
      bottomSafeArea: 0, // 底部留白区域
      isShow: false,
      menu: {}, // 手机数据
      popupTab: [
        { label: "理想", value: 1 },
        { label: "交控新能源", value: 2 },
        { label: "国网", value: 3 },
      ], // 点开的服务区有哪几种充电的
      selectPopup: 1,
      serviceName: [], // 服务区名字数组
      chargeDetailList: [], // 悬浮框里面的详情数据
      nowCurrentObj: {}, // 当前点击选中的悬浮框的对象
      SERVERPART_TARGETOBJ: {},
      chaegeBoxList: [], // 组件要的服务区名称的数组
    };
  },
  onLoad() {
    // 拿到现在手机的数据
    let systemInfo = uni.getSystemInfoSync();
    console.log("systemInfo", systemInfo);
    if (systemInfo.osName === "ios") {
      this.phoneType = "ios";
      this.bottomSafeArea =
        systemInfo.screenHeight - systemInfo.safeArea.bottom;
    }
    console.log("this.bottomSafeArea", this.bottomSafeArea);

    let type = uni.getStorageSync("loginType");
    this.loginType = type;
    if (type === "min") {
      this.menu = uni.getMenuButtonBoundingClientRect();
      this.$forceUpdate();
    } else {
      this.menu = systemInfo.safeArea;
      this.$forceUpdate();
    }

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

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

    // 最近的三个服务区数据
    this.handleGetThreeList();
  },
  methods: {
    // 解服务区的一个枚举
    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;
    },
    handleChangeSelectPopup(value) {
      this.selectPopup = value;
      if (value === 1) {
        this.chargeDetailList = this.nowCurrentObj.LXInfoList;
      } else {
        this.chargeDetailList = [];
      }
    },
    handleToMap(obj) {
      if (this.loginType === "min") {
        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 {
        const addModule = uni.requireNativePlugin("AMapModule");
        addModule.auth(
          "d773aa156f8ca2160cfb06d5f117dacd",
          (suc) => {
            addModule.reg(
              (suc) => {
                addModule.navfrom(
                  this.seatInfo.latitude,
                  this.seatInfo.longitude,
                  "我的位置",
                  obj.latitude ? obj.latitude : obj.SERVERPART_Y,
                  obj.longitude ? obj.longitude : obj.SERVERPART_X,
                  obj.SERVERPART_NAME,
                  (suc) => {
                    console.log(suc);
                  },
                  (err) => {
                    console.log(err);
                  }
                );
              },
              (err) => {
                uni.showToast({
                  title: err,
                  icon: "none",
                });
              }
            );
          },
          (err) => {
            uni.showToast({
              title: err,
              icon: "none",
            });
          }
        );
      }
    },
    // 拿到最近的三个服务区数据
    async handleGetThreeList() {
      uni.showLoading({
        title: "查到附近的服务区...",
      });
      let req = {
        Province_Code: "340000",
        SPRegionType_ID: "72", // 以后数据补齐  这个注释上
        longitude: this.seatInfo.longitude,
        latitude: this.seatInfo.latitude,
        ShowService: true,
        PageIndex: 1,
        PageSize: 3, // 以后数据补齐 这个值变为3
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartList",
        req
      );
      uni.hideLoading();
      console.log("handleGetThreeListdata", data);
      let list = data.Result_Data.List;

      this.chaegeBoxList = ["新桥服务区", "丰乐服务区", "肥东服务区"];
      console.log("this.chaegeBoxList", this.chaegeBoxList);

      return;
      // 如果有数据的话
      if (list && list.length > 0) {
        // 以后数据补齐 直接等于list 不要等于res
        // name 数组必须是要的
        let res = [];
        let nameList = [];
        let service = [418, 416, 417];

        list.forEach((item) => {
          if (service.indexOf(item.SERVERPART_ID) !== -1) {
            let LXSum = 0; // 理想
            let WLSum = 0; // 蔚来
            let SunSum = 0; // 新能源
            let chargeAndReplaceSum = 0; // 国网

            if (item.RegionInfo && item.RegionInfo.length > 0) {
              item.RegionInfo.forEach((subItem) => {
                chargeAndReplaceSum += subItem.STATEGRIDCHARGE; // 国网
                SunSum += subItem.GACENERGYCHARGE; // 新能源
                WLSum += subItem.OTHERCHAGRE; // 蔚来
                LXSum += subItem.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,
            };
            res.push(item);
            nameList.push(item.SERVERPART_NAME.split("服务区")[0]);
          }
        });
        this.serviceName = nameList;
        this.serviceList = res;

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

        await this.handleGetChargeData();
        // await this.handleGetSunChargeData();
      } else {
        this.serviceList = [];
      }
    },

    // 生成随机数
    handleGetRandomData(max, min) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    // 拿到充电的理想数据
    async handleGetChargeData() {
      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 (this.serviceName && this.serviceName.length > 0) {
              this.serviceName.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;
        });
      }

      console.log("stationIds", stationIds);
      console.log("stationObj", stationObj);

      // 查询具体状态
      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 (this.serviceList && this.serviceList.length > 0) {
        let newRes = JSON.parse(JSON.stringify(this.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;
          }
        });

        this.serviceList = newRes;
        console.log("newRes", newRes);
      }

      // if (this.serviceList && this.serviceList.length > 0) {
      //   let newRes = JSON.parse(JSON.stringify(this.serviceList));
      //   newRes.forEach((item) => {
      //     let LXCharge = [];
      //     let sortName = item.SERVERPART_NAME.split("服务区")[0];
      //     if (newStationList && newStationList.length > 0) {
      //       newStationList.forEach((subItem) => {
      //         if (subItem.Address.indexOf(sortName) !== -1) {
      //           LXCharge.push(subItem);
      //         }
      //       });
      //       item.LXCharge = LXCharge;
      //     }
      //   });
      //   // 这一步已经将理想的数据塞进去了  然后就是自己汇总了
      //   console.log("newRes", newRes);

      //   newRes.forEach((item) => {
      //     // 理想数据的合计对象
      //     let LXObj = {};
      //     // 理想的合计充电桩
      //     let LXSum = 0;
      //     // 理想当前在充的电桩
      //     let LXHave = 0;
      //     if (item.LXCharge && item.LXCharge.length > 0) {
      //       item.LXCharge.forEach((subItem) => {
      //         if (subItem.EquipmentInfos && subItem.EquipmentInfos.length > 0) {
      //           subItem.EquipmentInfos.forEach((thirdItem) => {
      //             if (
      //               thirdItem.ConnectorInfos &&
      //               thirdItem.ConnectorInfos.length > 0
      //             ) {
      //               LXSum += thirdItem.ConnectorInfos.length;
      //               thirdItem.ConnectorInfos.forEach((fourthItem) => {
      //                 if(fourthItem.)
      //               });
      //             }
      //           });
      //         }
      //       });
      //     }
      //   });
      // }

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

      uni.hideLoading();
    },

    // 拿到阳光充电的数据
    async handleGetSunChargeData() {
      uni.showLoading({
        title: "查询阳光电源设备信息...",
      });
      const LiOperatorSecret = "tDbBTUSok8TCTjGS";
      const LiOperCode = "MA8PUMF89";
      const LiSigSecret = "PSyM5DrXRjM06a8C";
      const LiDataSecret = "tcqvnw1msfDEtVj9";
      const LiIV = "Uj3F6NWAov6j30tA";

      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://dev.suncharger.cn:8443//hlht/MA8PUMF89F/v2.0.0/query_token",
        data: JSON.stringify({
          OperatorID: OperatorID,
          OperatorSecret: LiOperatorSecret,
        }),
        id: 1,
        seq: "001",
        token: "",
      });
      console.log("tokenData", tokenData);
      // token的实际值
      let token = tokenData.Data.AccessToken;
      console.log("token", token);

      // 拿到所有站点的数据
      const allStationList = await this.$testApi.$post("/send", {
        url: "https://dev.suncharger.cn:8443//hlht/MA8PUMF89F/v2.0.0/query_stations_info",
        data: JSON.stringify({
          PageNo: 1,
          PageSize: 999,
        }),
        id: 1,
        seq: "002",
        token: token,
      });
      let stationList = allStationList.Data.StationInfos;
      console.log("stationList", stationList);

      //
      const stationInfo = await this.$testApi.$post("/send", {
        url: "https://dev.suncharger.cn:8443//hlht/MA8PUMF89F/v2.0.0/query_station_status",
        data: JSON.stringify({
          StationIDs: [""],
        }),
        id: 1,
        seq: "003",
        token: token,
      });
      console.log("stationInfo", stationInfo);

      uni.hideLoading();
    },

    // 打开对应的悬浮框
    handleOpenDetail(obj) {
      this.nowCurrentObj = obj;
      this.chargeDetailList = obj.LXInfoList;
      console.log("this.chargeDetailList", this.chargeDetailList);
      this.$refs.popup.open("bottom");
      this.isShow = true;
    },
    // 关闭悬浮框
    handleClosePopup() {
      this.$refs.popup.close();
      this.isShow = false;
      this.nowCurrentObj = {};
      this.chargeDetailList = [];
      this.popupTab = [
        { label: "理想", value: 1 },
        { label: "交控新能源", value: 2 },
        { label: "国网", value: 3 },
      ];
      this.selectPopup = 1;
    },

    // 跳转理想小程序
    handleGoMin() {
      uni.navigateToMiniProgram({
        appId: "wxefd5d8119561aaca",
        path: `/pages/electricity/pile/index?connectorId=81000251`,
        success(res) {
          // 打开成功
        },
      });
    },

    // 扫一扫
    handleScan() {
      uni.scanCode({
        success: function (res) {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  .chargeList {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 24rpx 32rpx;
    .chargeboxComponents {
      width: calc(100vw - 112rpx);
      background: #fff;
      padding: 24rpx;
    }

    .serviceItem {
      width: 100%;
      padding: 24rpx;
      box-sizing: border-box;
      // display: flex;
      // align-items: center;
      margin-bottom: 24rpx;
      border-bottom: 1px solid #f5f6f7;
      background: #ffffff;
      .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;
          }
          // .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: flex-start;
            // 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 {
              width: 64rpx;
              height: 64rpx;
              // position: absolute;
              // right: 24rpx;
              // top: 32rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #f8f4ea;
              border-radius: 50%;
              .navigationIcon {
                width: 24rpx;
                height: 24rpx;
              }
              // .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;
          //     //   }
          //     // }
          //   }
          // }
        }
      }
      .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;
        }
      }
    }
  }
  .chargeList ::-webkit-scrollbar {
    display: none;
  }

  .pageBottom {
    width: 100%;
    height: 120rpx;
    background: #ffffff;
    box-sizing: border-box;
    padding: 16rpx 40rpx 0;
    .textBox {
      width: 100%;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ba922f;
      .codeIcon {
        width: 35rpx;
        height: 35rpx;
        margin-right: 10rpx;
      }
      .codeText {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 44rpx;
        text-align: center;
        font-style: normal;
      }
    }
  }

  .popupDetailBox {
    width: 100vw;
    height: 95vh;
    background: #fff;
    box-sizing: border-box;
    padding: 0 32rpx;
    .popupTitle {
      width: 100%;
      height: 108rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .closeIcon {
        width: 32rpx;
        height: 32rpx;
        .img {
          width: 32rpx;
          height: 32rpx;
        }
      }
      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #130f05;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
    }

    .popupTab {
      width: 100%;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tabItem {
        width: calc((100% - 48rpx) / 3);
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #716f69;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        background: #f5f5f5;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8rpx 0;
        box-sizing: border-box;
      }
      .selectTabItem {
        background: #f8f4ea;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #ba922f;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }
    }

    .stationList {
      width: 100%;
      margin-top: 24rpx;
      .stationItem {
        width: 100%;
        box-sizing: border-box;
        padding: 32rpx;
        display: flex;
        align-items: center;
        background: #f9f9f9;
        margin-bottom: 24rpx;
        position: relative;
        .leftItem {
          width: 152rpx;
          height: 152rpx;
          margin-right: 24rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .chargeType {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #01bd8b;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }
          .stausType {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #01bd8b;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
          }
        }
        .rightItem {
          .messageBox {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;
            .label {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #716f69;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              margin-right: 16rpx;
            }
            .value {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #130f05;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
          }

          .noticeList {
            width: 100%;
            display: flex;
            align-items: center;
            .noticeItem {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              color: #130f05;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              padding: 0 10rpx;
              background: #eef0f6;
              border-radius: 4rpx;
            }
          }
        }

        .statusBox {
          border-radius: 0rpx 16rpx 0rpx 16rpx;
          padding: 10rpx 12rpx;
          position: absolute;
          right: 0;
          top: 0;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          display: flex;
          align-items: center;
          .chargeIcon {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
    }

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