<template>
  <view class="main">
    <div class="mapBox">
      <map
        id="myMap"
        :longitude="longitude"
        :latitude="latitude"
        class="map"
        :scale="17"
        :show-location="true"
        :markers="markers"
      ></map>

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

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

      <view class="statusBox">
        <view class="statusItem">
          <view class="colorBox" style="background-color: #d81e06"></view>
          <!-- <image
          class="statusIcon"
          src="https://eshangtech.com/minTestImg/LXIcon.png"
        /> -->
          <text class="brandCharge">理想</text>
          <span class="empty">空</span>
          <span class="emptyValue">{{
            chargeData && chargeData.LXDetail ? chargeData.LXDetail.LXEmpty : 0
          }}</span>
          <span class="sum"
            >/{{
              chargeData && chargeData.LXDetail ? chargeData.LXDetail.LXSum : 0
            }}</span
          >
        </view>

        <view class="statusItem">
          <!-- <image
          class="statusIcon"
          src="https://eshangtech.com/minTestImg/WLIcon.png"
        /> -->
          <view class="colorBox" style="background-color: #f4ea2a"></view>
          <text class="brandCharge">蔚来</text>
          <span class="empty">空</span>
          <span class="emptyValue">{{
            chargeData && chargeData.WLDetail
              ? chargeData.WLDetail.WLEmpty
                ? chargeData.WLDetail.WLEmpty
                : 0
              : 0
          }}</span>
          <span class="sum"
            >/{{
              chargeData && chargeData.WLDetail
                ? chargeData.WLDetail.WLSum
                  ? chargeData.WLDetail.WLSum
                  : 0
                : 0
            }}</span
          >
        </view>

        <view class="statusItem">
          <!-- <image
          class="statusIcon"
          src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg"
        /> -->
          <view class="colorBox" style="background-color: #57d16e"></view>
          <text class="brandCharge">交控新能源</text>
          <span class="empty">空</span>
          <span class="emptyValue"
            >{{
              chargeData && chargeData.JKDetail
                ? chargeData.JKDetail.JKEmpty
                : 0
            }}
          </span>
          <span class="sum"
            >/{{
              chargeData && chargeData.JKDetail ? chargeData.JKDetail.JKSum : 0
            }}</span
          >
        </view>

        <view class="statusItem">
          <!-- <image
          class="statusIcon"
          src="https://eshangtech.com/minTestImg/stateGridIcon.png"
        /> -->
          <view class="colorBox" style="background-color: #ff9929"></view>
          <text class="brandCharge">国网</text>
          <span class="empty">空</span>
          <span class="emptyValue"
            >{{
              chargeData && chargeData.GWDetail
                ? chargeData.GWDetail.GWEmpty
                : 0
            }}
          </span>
          <span class="sum"
            >/{{
              chargeData && chargeData.GWDetail ? chargeData.GWDetail.GWSum : 0
            }}</span
          >
        </view>
      </view>

      <view class="serviceDetailBox" v-if="showChargeBox">
        <charge-box
          :serviceAreaList="currentServiceList"
          :pageType="'mapIndex'"
          @allChargeData="handleGetChargeData"
          @allLXDataList="handleLXAddMarker"
          @allJKDataList="handleJKAddMarker"
        />
      </view>
    </div>
  </view>
</template>

<script>
import ChargeBox from "../../components/chargeBox.vue";
export default {
  components: { ChargeBox },
  data() {
    return {
      longitude: "",
      latitude: "",
      seatInfo: {}, // 经纬度数据
      currentServiceObj: {}, // 当前选择的服务区
      currentServiceList: [], // 当前服务区的名称数组
      chargeData: {}, // 理想的数据
      markers: [], // 点位数据
      serviceList: [], // 所有服务区的数据
      searchText: "", // 搜索的内容
      showChargeBox: true,
      showListPage: false, // 是否显示列表页面
    };
  },
  onLoad() {
    let storgeList = uni.getStorageSync("serviceList");
    if (storgeList) {
      this.serviceList = JSON.parse(storgeList);
    }
    let nearService = uni.getStorageSync("nearService");
    if (nearService) {
      this.seatInfo = {
        longitude: nearService.SERVERPART_X,
        latitude: nearService.SERVERPART_Y,
      };
      // this.longitude = this.seatInfo.longitude;
      // this.latitude = this.seatInfo.latitude;
      this.longitude = 116.894166;
      this.latitude = 31.920213;
      this.currentServiceObj = nearService;
      // this.currentServiceList = [nearService.SERVERPART_NAME];
      this.currentServiceList = ["新桥服务区"];
    }
  },
  methods: {
    // 改变页面显示的内容
    handleChangePageType() {},
    // 搜索服务区的方法
    async handleConfirm() {
      this.showChargeBox = false;
      this.chaegeBoxList = [];
      let req = {
        // longitude: this.longitude,
        Province_Code: "340000",
        longitude: this.seatInfo.longitude,
        latitude: this.seatInfo.latitude,
        Serverpart_Name: this.searchText,
        ShowService: true,
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartList",
        req
      );
      let list = data.Result_Data.List;
      console.log("listlistlist", list);
      let obj = list[0];
      this.searchText = "";
      this.seatInfo = {
        longitude: obj.SERVERPART_X,
        latitude: obj.SERVERPART_Y,
      };
      this.longitude = this.seatInfo.longitude;
      this.latitude = this.seatInfo.latitude;
      this.currentServiceObj = obj;
      this.currentServiceList = [obj.SERVERPART_NAME];
      this.showChargeBox = true;
    },
    // 给理想的充电站标点
    handleLXAddMarker(e) {
      let stationList = e.res;

      let pointList = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          if (stationList && stationList.length > 0) {
            stationList.forEach((subItem) => {
              if (subItem.Address.indexOf(item.SERVERPART_NAME) !== -1) {
                const date = new Date();
                pointList.push({
                  id: date.getTime(), // 使用时间戳作为唯一ID
                  latitude: subItem.StationLat,
                  longitude: subItem.StationLng,
                  iconPath: "/static/home/redFixed.svg",
                  width: 30,
                  height: 30,
                  // label: {
                  //   // 文本标签
                  //   content: "",
                  //   color: "#3EC273",
                  //   fontSize: 14,
                  //   bgColor: "#ffffff",
                  //   borderRadius: 4,
                  //   padding: 5,
                  //   textAlign: "center",
                  // },
                });
              }
            });
          }
        });
      }
      this.markers = this.markers.concat(pointList);
    },
    // 给交控的充电站标点
    handleJKAddMarker(e) {
      console.log("交控的全部数据", e);
      let stationList = e.res;

      let pointList = [];
      if (this.serviceList && this.serviceList.length > 0) {
        this.serviceList.forEach((item) => {
          if (stationList && stationList.length > 0) {
            stationList.forEach((subItem) => {
              if (subItem.areaName.indexOf(item.SERVERPART_NAME) !== -1) {
                const date = new Date();
                pointList.push({
                  id: date.getTime(), // 使用时间戳作为唯一ID
                  latitude: subItem.lat,
                  longitude: subItem.lng,
                  iconPath: "/static/home/greenFixed.svg",
                  width: 30,
                  height: 30,
                });
              }
            });
          }
        });
      }
      this.markers = this.markers.concat(pointList);
    },
    // 拿到充电的全部的数据
    handleGetChargeData(e) {
      console.log("全部的充电数据", e);
      let obj = e.res[0];
      // 因为只返回一个服务区 所以直接e[0]就可以拿到服务区数据
      this.chargeData = obj;

      // this.markers = [
      //   {
      //     id: Number(obj.ServerPart_Id), // 使用时间戳作为唯一ID
      //     latitude: obj.SERVERPART_Y,
      //     longitude: obj.SERVERPART_X,
      //     width: 20,
      //     height: 30,
      //     label: {
      //       // 文本标签
      //       content: obj.name,
      //       color: "#3EC273",
      //       fontSize: 14,
      //       bgColor: "#ffffff",
      //       borderRadius: 4,
      //       padding: 5,
      //       textAlign: "center",
      //     },
      //   },
      // ];
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;
  position: relative;
  .mapBox {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    .map {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .topBox {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      box-sizing: border-box;
      padding: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .topRight {
        width: calc(100% - 240rpx);
        height: 72rpx;
        background: #fff;
        border-radius: 36rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        .searchIcon {
          width: 32rpx;
          height: 32rpx;
        }

        .searchText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #9fa1aa;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-left: 8rpx;
        }
      }
      .listBox {
        width: 180rpx;
        height: 72rpx;
        background: #fff;
        border-radius: 36rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        .listIcon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 12rpx;
        }
        .text {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 30rpx;
          color: #130f05;
          line-height: 36rpx;
          text-align: justify;
          font-style: normal;
        }
      }
    }
    .statusBox {
      box-sizing: border-box;
      padding: 16rpx;
      border-radius: 16rpx;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      position: absolute;
      top: 120rpx;
      left: 16rpx;
      z-index: 2;
      .statusItem {
        display: flex;
        align-items: center;
        padding: 8rpx 0;
        .colorBox {
          width: 18rpx;
          height: 18rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 16rpx;
        }
        .statusIcon {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 16rpx;
        }
        .brandCharge {
          font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
            sans-serif;
          font-weight: 400;
          font-size: 24rpx;
          color: #130f05;
          line-height: 40rpx;
          font-style: normal;
          display: inline-block;
          width: 120rpx;
          margin-right: 16rpx;
        }
        .empty {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 24rpx;
          color: #130f05;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          margin-right: 4rpx;
        }
        .emptyValue {
          font-family: "DINAlternate";
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          margin-right: 4rpx;
        }
        .sum {
          font-family: "DINAlternate";
          font-weight: 400;
          font-size: 28rpx;
          color: #716f69;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }
    .serviceDetailBox {
      width: calc(100% - 64rpx);
      box-sizing: border-box;
      padding: 16rpx;
      border-radius: 16rpx;
      position: absolute;
      left: 32rpx;
      bottom: 80rpx;
      z-index: 2;
      background: #fff;
    }
  }
}
</style>