<script setup lang="ts">
import "./index.less";
// @ts-ignore
import anhuiLine from "./component/anhuiLine";
// @ts-ignore
import yunanLine from "./component/yunanLine";
import { HeatmapLayer, LineLayer, Marker, PointLayer, Scene } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
import { nextTick, onMounted, reactive, ref, watch } from "vue";
import {
  getFieldEnumTree,
  getFieldGetFieEnumList,
  handleGetBaiDuTrafficInfo,
  handleGetDecryptString,
  handleGetGDNearServiceList,
  handleGetMapConfigByProvinceCode,
  handleGetMonthlySPINCAnalysis,
  handleGetNearServiceList,
  handleGetPeriodWarningList,
  handleGetProvinceVehicleTreeList,
  handleGetServerpartList,
  handleGetTransactionDetailList,
} from "./service";
import { handlegetServerConnec } from "../newService";
import { ElLoading, ElMessage } from "element-plus";
// @ts-ignore
import RobotDialogueBox from "./component/RobotDialogueBox.vue";
// @ts-ignore
import RightSearchBox from "./component/RightSearchBox.vue";
// @ts-ignore
import RightDetail from "./component/rightDetail.vue";
// @ts-ignore
import detailText from "./component/detailText";
// @ts-ignore
import RealBox from "./component/realBox.vue";
// @ts-ignore
import RevenueRate from "./component/RevenueRate.vue";
// @ts-ignore
import BusyRanking from "./component/BusyRanking.vue";

import moment from "moment";
import { useRoute } from "vue-router";
import {
  formatNumber,
  formatNumberData,
  formatNumberTo,
  parseThousandSeparatedNumber,
} from "../../options/serveice";

// 配色方案一
let colorList1 = [
  "#4F83FA",
  "#A39BFF",
  "#63B6FC",
  "#88DFB2",
  "#88C3BF",
  "#d9dcf3",
];
// 配色方案二
let colorList2 = [
  "#627FFF",
  "#F6976F",
  "#FFDC84",
  "#63B6FC",
  "#73D6A3",
  "#B4E6E3",
];
// 每个省份的 地图默认中心点位置设置
let mapCenter: any = {
  "340000": [117.455467, 31.856928], // 安徽
  "510000": [104.07, 30.67], // 四川
  "520000": [106.71, 26.58], // 贵州
  "530000": [102.8329, 24.88], // 云南
};

// 地图实例
const scene = ref<any>();
// 对话框的实例
const RobotDialogueBoxRef = ref();
// 右侧的选择实例
const RightSearchBoxRef = ref();
// 右侧详情抽屉
const RightDetailRef = ref();
// 顶部实时数据的组件
const RealBoxRef = ref();
// 营收区域的组件实例
const revenueRateRef = ref();
// 繁忙度排名的实例
const BusyRankingRef = ref();
// 悬浮框实例
const hoverPoint = ref<any>();
// 所有服务区的数据
let defaultServerPartList = reactive<any>([]);
// 服务区类型的枚举
let ServerpartTypeObj = reactive<any>({});
// 判断是否有加载效果
const isShowLoading = ref<boolean>(false);
// 当前选中的服务区
const currentServerPartDetail = ref<any>();
// 搜索选中的服务区id
let searchSelectServerPartId = reactive<any>([]);
// 当前右侧选中的查询类型
let nowSelectId = ref<string>("");
// 全部服务区的id集合
let allServerPartIdList = reactive<any>([]);
// 是否显示右侧的服务区详情
let showRightDetail = ref<boolean>(false);
// 关于省份的解密 即一些相关数据的带入
let baseInfoObj = ref<any>();
// 实时钱的数据对象
let realMoney = reactive<any>({});
// 片区对应的颜色
let SPREGIONTYPECOLOR = ref<any>();
// 机器人是否显示
let isShowAi = ref<boolean>(false);
// 服务区详情是否显示了
let isShowDetail = ref<boolean>(false);
// 显示实时营收的组件
let isShowRealData = ref<boolean>(false);
// 不同片区的标点颜色数组
let SPREGIONTYPECOLORList = reactive<any>([]);
// 实时经营数据的列表
let realRevenueList = reactive<any>([]);
// 当前到了第几批第五个
let nowFifthIndex = ref<number>(0);
// 地图的实时营收悬浮框
let mapTimer: any;

const route = useRoute();
console.log("route", route);
const pageType = ref(route.params.id); // 获取查询参数 id
// if (route.params.id === "16684D3D52B39939") {
//   baseInfoObj.value.ProvinceCode = "340000";
// } else if (route.params.id === "FACB05FA9FFFC126") {
//   baseInfoObj.value.ProvinceCode = "530000";
// }
// console.log("pageType", pageType);

onMounted(async () => {
  const loadingInstance = ElLoading.service({
    fullscreen: true,
    background: "#00000080",
    text: "数据加载中...",
  });
  // 先解密地址栏的内容
  const data = await handleGetMapConfigByProvinceCode({
    ProvinceCode: pageType.value,
  });
  baseInfoObj.value = data;
  localStorage.setItem("baseInfoObj", JSON.stringify(data));

  scene.value = new Scene({
    id: "map",
    map: new GaodeMap({
      pitch: 0,
      mapStyle: "amap://styles/dark",
      center: mapCenter[baseInfoObj.value.ProvinceCode],
      // baseInfoObj.value.ProvinceCode === "340000"
      //   ? [117.455467, 31.856928]
      //   : baseInfoObj.value.ProvinceCode === "530000"
      //   ? [102.8329, 24.88]
      //   : [117.455467, 31.856928],
      zoom: 6,
      minZoom: 5.5,
      token: "edb93fe4f1b3d313128b82082c5b3877",
      mapConfig: {
        logoVisible: false,
      },
    }),
  });

  // 请求枚举
  await handleGetEnumeration();
  console.log("ServerpartTypeObj", ServerpartTypeObj);

  // 请求到所有的服务区
  await handleGetAllService();
  // 给服务区标上点
  handleAllServiceMarkedPoint();
  // 标出安徽省的边界
  handleGetAnHuiBoundary();
  // 服务区实时数据
  // handleGetRealServiceList();

  hoverPoint.value = handlePointHover();

  loadingInstance.close();
});

// 几个小方框的数据 一起调用的方法
const handleSmallBoxData = async () => {
  revenueRateRef.value.handleGetData();
  await BusyRankingRef.value.handleGetBusyRank();
};

// 标出安徽省的边界
const handleGetAnHuiBoundary = () => {
  const blurLine = new LineLayer();
  blurLine.name = "blurLine";
  // 边界线数据
  let provinceObj: any = anhuiLine;
  let list: any = provinceObj[baseInfoObj.value.ProvinceCode];
  console.log("handleGetAnHuiBoundary", list);
  // let list: any =
  //   baseInfoObj.value.ProvinceCode === "340000"
  //     ? anhuiLine
  //     : baseInfoObj.value.ProvinceCode === "530000"
  //     ? yunanLine
  //     : [];
  blurLine.source(list).size(1).style({
    opacity: 0.6,
    sourceColor: "#b6cad7",
    targetColor: "#b6cad7",
    linearDir: "horizontal",
  });
  scene.value.addLayer(blurLine);
};

// 请求拿到所有服务区数据
const handleGetAllService = async () => {
  const req: any = {
    Province_Code: baseInfoObj.value.ProvinceCode || "340000",
    ShowWeather: true, // 显示天气
  };
  const data = await handleGetServerpartList(req);
  let str: string = "";
  console.log("data312312321321321", data);
  if (data && data.length > 0) {
    let res: any = [];
    let allId: any = [];
    let SPREGIONTYPETYPELIST: any = {};
    // 属性值为具体的颜色
    let SPREGIONTYPETYPEObj: any = {};
    // 片区名称对应的 颜色数组 用于放在中间底部的
    let SPREGIONTYPECOLORLIST: any = [];
    let typeID: number = 0;
    data.forEach((item: any) => {
      if (item.SPREGIONTYPE_ID) {
        if (
          SPREGIONTYPETYPELIST[item.SPREGIONTYPE_ID] ||
          SPREGIONTYPETYPELIST[item.SPREGIONTYPE_ID] === 0
        ) {
          item.SPREGIONTYPETYPE = SPREGIONTYPETYPELIST[item.SPREGIONTYPE_ID];
        } else {
          SPREGIONTYPETYPELIST[item.SPREGIONTYPE_ID] = typeID;
          item.SPREGIONTYPETYPE = typeID;
          SPREGIONTYPETYPEObj[item.SPREGIONTYPE_ID] = colorList1[typeID];
          SPREGIONTYPECOLORLIST.push({
            label: item.SPREGIONTYPE_NAME,
            value: colorList1[typeID],
          });
          typeID += 1;
        }

        if (item.SPREGIONTYPE_ID !== 89 && item.SPREGIONTYPE_ID) {
          res.push(item);
          allId.push(item.SERVERPART_ID.toString());
        }
      }
      if (str) {
        str += `
        ${item.SERVERPART_NAME} ${item.SERVERPART_ID}`;
      } else {
        str = `${item.SERVERPART_NAME} ${item.SERVERPART_ID}`;
      }
    });
    defaultServerPartList = res;
    allServerPartIdList = allId;
    console.log("allId", allId.toString());

    SPREGIONTYPECOLORList = SPREGIONTYPECOLORLIST;
    SPREGIONTYPECOLOR.value = SPREGIONTYPETYPEObj;
  }
  return data;
};

// 给所有服务区标上圆点
const handleAllServiceMarkedPoint = async () => {
  // 先判断有没有服务区 没有就去请求 有就直接拿
  let list: any = [];
  if (defaultServerPartList && defaultServerPartList.length > 0) {
    list = defaultServerPartList;
  } else {
    list = await handleGetAllService();
  }

  // 标点
  const pointLayer = new PointLayer({});
  pointLayer.name = "pointLayer";
  pointLayer.source(list, {
    parser: {
      type: "json",
      x: "SERVERPART_X",
      y: "SERVERPART_Y",
    },
  });
  pointLayer.shape("circle");
  pointLayer.size(8);
  pointLayer.color("SPREGIONTYPETYPE", (value) => {
    return colorList1[value];
    // return Number(value || 0) === 65 ||
    //   Number(value || 0) === 45 ||
    //   Number(value || 0) === 47
    //   ? "#34B6B7"
    //   : "#CEF8D6";
  });
  pointLayer.style({
    opacity: 0.6,
  });
  pointLayer.on("mousemove", (ev: any) => {
    const detail: any = ev.feature;
    hoverPoint.value.style.top = `${ev.y + 5}px`;
    hoverPoint.value.style.left = `${ev.x + 5}px`;
    hoverPoint.value.style.display = "block";
    hoverPoint.value.innerHTML = `<div>
      <div>${detail?.SERVERPART_NAME || ""}${
      detail?.SERVERPART_TYPE
        ? `（${
            ServerpartTypeObj ? ServerpartTypeObj[detail?.SERVERPART_TYPE] : ""
          }）`
        : ""
    }</div>
    ${
      // 天气
      nowSelectId.value && nowSelectId.value.indexOf("1") !== -1
        ? `
      <div style="background-color: black; color: white; border-radius: 5px; font-size: 14px; border: none;box-shadow: none;">
        <div>天气情况：</div>
            <div>${"今天"}${detail.weatherModel.DAY_WEATHER}转${
            detail.weatherModel.NIGHT_WEATHER
          }，气温${detail.weatherModel.NIGHT_AIR_TEMPERATURE}℃~${
            detail.weatherModel.DAY_AIR_TEMPERATURE
          }℃</div>
            <div>${"明天"}${detail.tmwWeatherModel.DAY_WEATHER}转${
            detail.tmwWeatherModel.NIGHT_WEATHER
          }，气温${detail.tmwWeatherModel.NIGHT_AIR_TEMPERATURE}℃~${
            detail.tmwWeatherModel.DAY_AIR_TEMPERATURE
          }℃</div>
      </div>
      `
        : ``
    }
    ${
      // 路况
      (nowSelectId.value && nowSelectId.value.indexOf("2") !== -1) ||
      detail.roadConditions
        ? `
      <div style="max-height: 250px;overflow-y: auto">
        <div>实时路况（${moment().format("YY月DD日 HH点mm分")}）：</div>
        <div>${
          detail?.roadConditions?.EXPRESSWAY_NAME
            ? detail?.roadConditions?.EXPRESSWAY_NAME + "："
            : ""
        }${
            detail?.roadConditions?.evaluation.status === 1
              ? "双向畅通"
              : detail?.roadConditions?.evaluation.status === 2
              ? "双向缓行"
              : detail?.roadConditions?.evaluation.status === 3
              ? "双向拥堵"
              : ""
          }</div>
      </div>
      `
        : ""
    }
    ${
      // 热力图
      nowSelectId.value && nowSelectId.value.indexOf("3") !== -1
        ? `<div>${moment().format("YYYY年MM月")}对客销售累计：${formatNumber(
            detail?.revenueData / 10000
          )}万元</div>`
        : ""
    }
    ${
      // 车辆归属地
      nowSelectId.value &&
      nowSelectId.value.indexOf("4") !== -1 &&
      detail.provinceListTooltip &&
      detail.provinceListTooltip.length > 0
        ? `<div>
        ${detail.provinceListTooltip
          .map(
            (item: any) =>
              `<div>${moment(moment().startOf("y")).format(
                "YYYY年MM月"
              )}至${moment().format("YYYY年MM月")}${
                detail?.SERVERPART_NAME || ""
              }总入区车流：${formatNumber(item.TotalCount || 0)}
                ${
                  item.children?.length > 0
                    ? `<div>${item.children
                        .map(
                          (subItem: any) =>
                            `<div>${
                              subItem.ProvinceOrCityName
                            }：占比：${formatNumber(
                              (subItem.TotalCount / item.TotalCount) * 100
                            )}%， Top3：
                ${
                  subItem.children && subItem.children.length > 0
                    ? `<span>
                ${subItem.children
                  .map((thirdItem: any, thirdIndex: number) => {
                    return thirdItem.ProvinceOrCityName !== "其他"
                      ? `${thirdItem.ProvinceOrCityName}、`
                      : "";
                  })
                  .join("")}
                </span>`
                    : ""
                }</div>`
                        )
                        .join("")}
            </div>`
                    : ""
                }
        </div>`
          )
          .join("")}
    </div>`
        : ""
    }
    ${
      // 经营业态
      nowSelectId.value && nowSelectId.value.indexOf("5") !== -1
        ? `<div>
      ${detail?.tradeType || ""}${
            detail?.shopName ? `：${detail?.shopName}` : ""
          }
      </div>`
        : ""
    }
    ${
      // 预警类型
      nowSelectId.value && nowSelectId.value.indexOf("6") !== -1
        ? `<div>
      ${detail?.waringText || ""}
      </div>`
        : ""
    }
    ${
      // 服务区繁忙程度
      nowSelectId.value && nowSelectId.value.indexOf("8") !== -1
        ? `<div>对客销售：${
            detail.AVR_TICKET > 30
              ? "繁忙"
              : detail.AVR_TICKET > 15 && detail.AVR_TICKET < 30
              ? "良好"
              : "空闲"
          }
      </div>`
        : ""
    }
      
    </div>`;
  });

  // 鼠标移出
  pointLayer.on("mouseout", (ev: any) => {
    hoverPoint.value.style.display = "none";
  });

  // 点击事件
  pointLayer.on("click", (e) => {
    console.log("e", e);
    handleClickPointLayer(e.feature);
  });

  // 鼠标取消点击
  pointLayer.on("unclick", () => {
    handleChangeToDefault();
  });

  scene.value.addLayer(pointLayer);
};

// 点击服务区圆点触发的事件
const handleClickPointLayer = async (detail: any) => {
  // 给当前选中的服务区存储值
  currentServerPartDetail.value = detail;
  // 地图上出现选中服务区的效果
  handleAddSelect(detail);
  // 先清空现有的全部图层
  handleDeleteNoDefault(RightSearchBoxRef.value.selectFilterList);
  // 查看右边选中了哪些 调用在新的上面
  let nowSelect: string = RightSearchBoxRef.value.selectFilterList;
  console.log("nowSelect", nowSelect);

  await handleChangeMapShow(nowSelect, false);
  // 右侧的详情抽屉
  if (nowSelect.indexOf("99") !== -1) {
    showRightDetail.value = false;
  } else {
    showRightDetail.value = true;
  }
  // 用户判断实时数据的右侧详情是否显示的判断
  isShowDetail.value = true;
  // // 对话框上方是否选中了
  //   let selectTab: any = RobotDialogueBoxRef.value.selectTab;
  //   RobotDialogueBoxRef.value.handleClickTab(selectTab);
};

// 给服务区圆点加上选中效果
const handleAddSelect = (detail: any) => {
  let allLayers: any = scene.value.getLayers();

  // 判断是否是预警时候的点击
  let isWarning: boolean = false;
  if (allLayers && allLayers.length > 0) {
    allLayers.forEach((item: any) => {
      if (item.name === "warningLayer") {
        isWarning = true;
      }
    });
  }

  let current: any = handleGetThisLayer("lightPointLayer");

  if (current) {
    scene.value.removeLayer(current);
  }

  const lightPointLayer = new PointLayer({});
  lightPointLayer.name = "lightPointLayer";
  lightPointLayer.shape("circle");
  lightPointLayer.size(15);
  lightPointLayer.color("#efff19");
  lightPointLayer.style({
    opacity: 0.6,
  });
  lightPointLayer.source([detail], {
    parser: {
      type: "json",
      x: "SERVERPART_X",
      y: "SERVERPART_Y",
    },
  });
  scene.value.addLayer(lightPointLayer);

  if (isWarning) {
    console.log("detailisWarning", detail);
    RightDetailRef.value.handleScrollProjectList(detail.warningShop);
  }
};

// 点击垃圾桶 清除选中效果
const handleDeleteSelect = () => {
  handleDeleteLayer("lightPointLayer");
  handleDeleteLayer("nearServiceList");
  currentServerPartDetail.value = undefined;
};

// 取消服务区选中等效果的实现方法
const handleChangeToDefault = () => {
  // 清除当前选中的服务区值
  currentServerPartDetail.value = undefined;
  // 取消搜索选中的服务区
  searchSelectServerPartId = [];
  // 取消点击时要清除的图层名称列表
  const list: any = ["lightPointLayer", "searchPointLayerText"];
  list.forEach((item: any) => {
    let current: any = handleGetThisLayer(item);
    if (current) {
      scene.value.removeLayer(current);
    }
  });
  // 将进入搜索状态的服务区正常圆点 变回正常颜色
  let current: any = handleGetThisLayer("pointLayer");
  current.color("SPREGIONTYPETYPE", (value: number) => {
    return colorList1[value];
    // return Number(value || 0) === 65 ||
    //   Number(value || 0) === 45 ||
    //   Number(value || 0) === 47
    //   ? "#34B6B7"
    //   : "#CEF8D6";
  });
  current.render();
};

// 鼠标移入点触发的事件
const handlePointHover = () => {
  const el = document.createElement("div");
  el.style.background = "#000";
  el.style.color = "#fff";
  el.style.position = "absolute";
  el.style.padding = "10px";
  el.style.borderRadius = "10px";
  el.style.zIndex = "9999";
  el.style.transition = "0.5s";
  el.style.display = "none";
  const wrap: any = document.getElementById("map");
  wrap.appendChild(el);
  return el;
};

// 需要调用的枚举方法
const handleGetEnumeration = async () => {
  const ServerpartTypeList = await getFieldEnumTree({
    FieldExplainField: "SERVERPART_TYPE",
  });
  console.log("ServerpartTypeList", ServerpartTypeList);
  const typeObj: any = {};
  if (ServerpartTypeList && ServerpartTypeList.length > 0) {
    ServerpartTypeList.forEach((item: any) => {
      typeObj[item.value] = item.label;
    });
  }
  ServerpartTypeObj = typeObj;
};

// 给传入的服务区 标上高亮点
// 判断当前是否已经存在高亮图层 如果存在的话 就改变值 不用重新添加图层
const handleLightServerpart = (infoList: any) => {
  let current: any = handleGetThisLayer("searchPointLayerText");
  let idList: any = infoList.split(",");
  // infoList.forEach((item: any) => {
  //   idList.push(item.SERVERPART_ID);
  // });
  console.log("idList", idList);
  searchSelectServerPartId = idList;
  let searchRes: any = [];
  defaultServerPartList.forEach((item: any) => {
    if (idList.indexOf(item.SERVERPART_ID.toString()) !== -1) {
      searchRes.push(item);
    }
  });
  console.log("searchRes", searchRes);

  // 删除原有的 添加新的
  if (current) {
    scene.value.removeLayer(current);
  }

  let searchPointLayerText = new PointLayer({
    zIndex: 9,
  });
  searchPointLayerText.name = "searchPointLayerText";
  searchPointLayerText.source(searchRes, {
    parser: {
      type: "json",
      x: "SERVERPART_X",
      y: "SERVERPART_Y",
    },
  });
  searchPointLayerText.shape("circle");
  searchPointLayerText.size(8);
  searchPointLayerText.color("#fdff3d");
  searchPointLayerText.style({
    opacity: 0.7, // 透明度
  });
  // searchPointLayerText.on("mousemove", (ev: any) => {
  //   const detail: any = ev.feature;
  //   hoverPoint.value.style.top = `${ev.y}px`;
  //   hoverPoint.value.style.left = `${ev.x}px`;
  //   hoverPoint.value.style.display = "block";
  //   hoverPoint.value.innerHTML = `<div>
  //     <div>${detail?.SERVERPART_NAME || ""}</div>
  //   </div>`;
  // });
  // // 鼠标移出
  // searchPointLayerText.on("mouseout", (ev: any) => {
  //   hoverPoint.value.style.display = "none";
  // });
  scene.value.addLayer(searchPointLayerText);
};

// 传入服务区id 在地图上出现一个选中的效果 且 id只能传入一个服务区
const handleSelectedServerpart = (id: any) => {
  if (defaultServerPartList && defaultServerPartList.length > 0) {
    let seletObj: any = {};
    defaultServerPartList.forEach((item: any) => {
      if (item.SERVERPART_ID === id) {
        seletObj = item;
      }
    });
  }
};

// 查找当前全部图层中是否有传入的图层名称 有的话 输出图层数据
const handleGetThisLayer = (name: string) => {
  let res: any;
  let allLayers: any = scene.value.getLayers();
  if (allLayers && allLayers.length > 0) {
    allLayers.forEach((item: any) => {
      if (item.name === name) {
        res = item;
      }
    });
  }
  if (res) {
    return res;
  }
};

// 进入搜索状态 改变现在的服务区点位颜色 全部变成灰色
const handleEnterySearch = () => {
  let current: any = handleGetThisLayer("pointLayer");
  current.color("#dededd");
  current.render();
};

// 添加天气效果
const handleAddWeather = () => {
  console.log("defaultServerPartList", defaultServerPartList);
  defaultServerPartList.forEach((item: any) => {
    if (item.weatherModel) {
      if (item.weatherModel.DAY_WEATHER_PIC) {
        const el = document.createElement("div");
        el.style.width = "32px";
        el.style.height = "24px";
        el.style.paddingBottom = "4px";
        el.style.textAlign = "center";

        // 创建并插入 <img> 元素
        const img = document.createElement("img");
        img.src = item.weatherModel.DAY_WEATHER_PIC;
        img.style.width = "15px";
        img.style.height = "15px";
        img.style.borderRadius = "50%"; // 圆形图片（可选）
        // img.title = item.DAY_WEATHER
        el.appendChild(img);
        const marker = new Marker({ element: el }).setLnglat([
          item.SERVERPART_X,
          item.SERVERPART_Y,
        ] as any);
        if (currentServerPartDetail.value) {
          if (
            item.SERVERPART_ID === currentServerPartDetail.value.SERVERPART_ID
          ) {
            scene.value.addMarker(marker);
          }
        } else if (
          searchSelectServerPartId &&
          searchSelectServerPartId.length > 0
        ) {
          if (
            searchSelectServerPartId.indexOf(item.SERVERPART_ID.toString()) !==
            -1
          ) {
            scene.value.addMarker(marker);
          }
        } else {
          scene.value.addMarker(marker);
        }
      }
    }
  });
};

// 遍历给实况车流图层的赋值
const handleSetCarData = async (
  id: any,
  roadTestList: any,
  featuresList: any
) => {
  let selectObj: any = {};
  let selectRoad: any = {};

  // 从服务区的道路名称的那个数组里面 取到现在的这个服务区数据
  if (roadTestList && roadTestList.length > 0) {
    roadTestList.forEach((item: any) => {
      if (item.SERVERPART_ID.toString() === id) {
        selectObj = item;
      }
    });
  }
  let data: any = {};
  let roadItem: any = {};
  let roadReq: any = {
    RoadName: selectObj.EXPRESSWAY_NAME || "",
    CityName: selectObj.SERVERPART_ADDRESS || "",
  };
  data = await handleGetBaiDuTrafficInfo(roadReq);
  let roadRes: any = JSON.parse(data);
  if (roadRes.status == 2) {
    let roadReq: any = {
      RoadName: selectObj.SERVERPART_NAME || "",
      CityName: selectObj.SERVERPART_ADDRESS || "",
    };
    data = await handleGetBaiDuTrafficInfo(roadReq);
    roadItem = JSON.parse(data);
  } else {
    roadItem = roadRes;
  }

  // let roadReq: any = {};
  // let heightWay: any = [
  //   366, 803, 381, 756, 708, 646, 805, 710, 476, 694, 714, 490, 658, 819, 659,
  //   811, 716, 499, 941, 652, 943, 513, 510, 600, 707, 592, 706,
  // ];

  // if (heightWay.indexOf(Number(selectObj.SERVERPART_ID)) === -1) {
  //   roadReq = {
  //     RoadName: selectObj.SERVERPART_NAME || "",
  //     CityName: selectObj.SERVERPART_ADDRESS || "",
  //   };
  // } else {
  //   roadReq = {
  //     RoadName: selectObj.EXPRESSWAY_NAME || "",
  //     CityName: selectObj.SERVERPART_ADDRESS || "",
  //   };
  // }

  // const data = await handleGetBaiDuTrafficInfo(roadReq);
  // let roadItem: any = JSON.parse(data);
  if (featuresList && featuresList.length > 0) {
    featuresList.forEach((item: any) => {
      if (item.properties.SERVERPART_ID.toString() === id) {
        item.properties.expediteNumber =
          roadItem.status === 0 ? roadItem.evaluation.status : null;
        selectRoad = item;
      }
    });
  }
  // 给服务区的鼠标移入点位显示的内容
  if (defaultServerPartList && defaultServerPartList.length > 0) {
    defaultServerPartList.forEach((item: any) => {
      if (item.SERVERPART_ID === selectObj.SERVERPART_ID) {
        nextTick(() => {
          item.roadConditions = {
            ...selectObj,
            ...roadItem,
          };
          console.log("item", item);
          console.log("defaultServerPartList", defaultServerPartList);
          let allLayers: any = scene.value.getLayers();
          if (allLayers && allLayers.length > 0) {
            let obj: any = {};
            allLayers.forEach((item: any) => {
              if (item.name === "pointLayer") {
                obj = item;
              }
            });
            if (obj) {
              obj.setData(defaultServerPartList);
            }
          }
        });
      }
    });
  }

  if (selectRoad) {
    return selectRoad;
  }
  return {};
};

// 拿到实况车流数据
const hanleGetRealTrafficData = async (id: any) => {
  let roadList: any = JSON.parse(JSON.stringify(detailText.lineData));
  roadList = roadList[baseInfoObj.value.ProvinceCode.toString()];
  let roadTestList: any = JSON.parse(JSON.stringify(detailText.roadTest));
  roadTestList = roadTestList[baseInfoObj.value.ProvinceCode.toString()];

  let onceRoadList: any = {
    type: "FeatureCollection",
    features: [],
  };
  let featuresList: any = roadList.features;
  let list: any = [];

  for (let i = 0; i < id.length; i++) {
    // 如果现在选择的右边查询内容 没有实时车况的选中 那就不显示
    if (nowSelectId.value.indexOf("2") === -1) {
      return;
    }
    const selectRoad = await handleSetCarData(
      id[i],
      roadTestList,
      featuresList
    );
    // if (i > 0) {
    //   return;
    // }
    list.push(selectRoad);
    onceRoadList.features = list;

    let allLayers: any = scene.value.getLayers();

    let haveList: any = allLayers.filter(
      (item: any) => item.name === "lineLayerOnce"
    );

    if (haveList && haveList.length > 0) {
      let obj: any = haveList[0];
      nextTick(() => {
        scene.value.removeLayer(obj);
        const lineLayer = new LineLayer({
          zIndex: 11,
        });
        lineLayer.name = `lineLayerOnce`;
        lineLayer
          .size(3) // 线条宽度
          .shape("line") // 线条形状
          .color("expediteNumber", (value) => {
            // 根据 expediteNumber 动态设置颜色
            if (value === 1) {
              return "#35cf66"; // 绿色
            } else if (value === 2) {
              return "#c99c1c"; // 黄色
            } else if (value === 3 || value === 4) {
              return "#e64a4a"; // 红色
            } else {
              return "transparent"; // 灰色
            }
          })
          .style({
            opacity: 1, // 透明度
          });
        lineLayer.source(onceRoadList); // 设置数据源为 GeoJSON
        scene.value.addLayer(lineLayer); // 将线图层添加到场景中
      });
    } else {
      const lineLayer = new LineLayer({
        zIndex: 11,
      });
      lineLayer.name = `lineLayerOnce`;
      lineLayer
        .size(3) // 线条宽度
        .shape("line") // 线条形状
        .color("expediteNumber", (value) => {
          // 根据 expediteNumber 动态设置颜色
          if (value === 1) {
            return "#35cf66"; // 绿色
          } else if (value === 2) {
            return "#c99c1c"; // 黄色
          } else if (value === 3 || value === 4) {
            return "#e64a4a"; // 红色
          } else {
            return "transparent"; // 灰色
          }
        })
        .style({
          opacity: 1, // 透明度
        });
      lineLayer.source(onceRoadList); // 设置数据源为 GeoJSON
      scene.value.addLayer(lineLayer); // 将线图层添加到场景中
    }
  }
};

// 实况车流
const handleGetRealTraffic = async () => {
  let roadList: any = JSON.parse(JSON.stringify(detailText.lineData));
  roadList = roadList[baseInfoObj.value.ProvinceCode.toString()];
  let roadTestList: any = JSON.parse(JSON.stringify(detailText.roadTest));
  roadTestList = roadTestList[baseInfoObj.value.ProvinceCode.toString()];

  console.log("roadList", roadList);
  console.log("roadTestList", roadTestList);

  // 单个服务区查询的车流实况的最后结果 可以直接传入图层当数据
  let onceRoadList: any = {
    type: "FeatureCollection",
    features: [],
  };
  let featuresList: any = roadList.features;
  console.log("featuresList", featuresList);
  console.log("currentServerPartDetail.value", currentServerPartDetail.value);
  // 选中
  if (currentServerPartDetail.value) {
    await hanleGetRealTrafficData([
      currentServerPartDetail.value.SERVERPART_ID.toString(),
    ]);
  } else if (searchSelectServerPartId && searchSelectServerPartId.length > 0) {
    // 查询高亮
    console.log("searchSelectServerPartId", searchSelectServerPartId);
    await hanleGetRealTrafficData(searchSelectServerPartId);
  } else {
    // 默认全部
    await hanleGetRealTrafficData(allServerPartIdList);
  }
};

// 传入名字清除图层
const handleDeleteLayer = (name: string) => {
  let allLayers: any = scene.value.getLayers();
  if (allLayers && allLayers.length > 0) {
    allLayers.forEach((item: any) => {
      if (item.name === name) {
        scene.value.removeLayer(item);
      }
    });
  }
};

// 清空一些非默认图层
const handleDeleteNoDefault = (nowSelect: string) => {
  if (nowSelect) {
    if (nowSelect.indexOf("1") === -1) {
      scene.value.removeAllMarkers();
    }
    if (nowSelect.indexOf("2") === -1) {
      handleDeleteLayer("lineLayerOnce");
    }
    if (nowSelect.indexOf("3") === -1) {
      handleDeleteLayer("heatmapLayer");
    }
    if (nowSelect.indexOf("4") === -1) {
      handleDeleteLayer("enterCarPoint");
      handleDeleteLayer("enterLine");
    }
    if (nowSelect.indexOf("5") === -1) {
      handleDeleteLayer("BUSINESS_TRADELayer");
    }
    if (nowSelect.indexOf("6") === -1) {
      handleDeleteLayer("warningLayer");
    }
    if (nowSelect.indexOf("8") === -1) {
      isShowRealData.value = false;
      clearInterval(mapTimer);
    }
  } else {
    console.log("22222", defaultServerPartList);
    scene.value.removeAllMarkers();
    handleDeleteLayer("lineLayerOnce");
    handleDeleteLayer("heatmapLayer");
    handleDeleteLayer("enterCarPoint");
    handleDeleteLayer("enterLine");
    handleDeleteLayer("warningLayer");
    handleDeleteLayer("BUSINESS_TRADELayer");
    // handleChangeToDefault();
    isShowRealData.value = false;
    // 变回正常颜色
    let current: any = handleGetThisLayer("pointLayer");
    current.color("SPREGIONTYPETYPE", (value: number) => {
      return colorList1[value];
    });
    current.render();
    clearInterval(mapTimer);
  }
};

// 更新服务区点数据的方法
const handleUpdateMapPoint = () => {
  let allLayers: any = scene.value.getLayers();
  if (allLayers && allLayers.length > 0) {
    let obj: any = {};
    allLayers.forEach((item: any) => {
      if (item.name === "pointLayer") {
        obj = item;
      }
    });
    if (obj) {
      obj.setData(defaultServerPartList);
    }
  }
};

// 营收热力的方法
const handleGetServerpartRevenue = async () => {
  const revenueReq: any = {
    calcType: 2,
    pushProvinceCode: baseInfoObj.value.ProvinceCode || "340000",
    curYear: moment().format("YYYY"),
    compareYear: moment().subtract(1, "year").format("YYYY"),
    StatisticsDate: moment().format("YYYY-MM-DD"),
    StatisticsMonth: moment().format("YYYYMM"),
  };
  const revenueData: any = await handleGetMonthlySPINCAnalysis(revenueReq);
  const revenueObj: any = {};
  if (revenueData && revenueData.length > 0) {
    revenueData.forEach((item: any) => {
      revenueObj[item.ServerpartId] = item.RevenueINC.curYearData;
    });
  }
  if (defaultServerPartList && defaultServerPartList.length > 0) {
    nextTick(() => {
      defaultServerPartList.forEach((item: any) => {
        item.revenueData = revenueObj[item.SERVERPART_ID]
          ? revenueObj[item.SERVERPART_ID]
          : "";
        item.lng = item.SERVERPART_X;
        item.lat = item.SERVERPART_Y;
      });
      handleUpdateMapPoint();
      console.log("defaultServerPartList", defaultServerPartList);
      let filteredData: any = [];
      defaultServerPartList.forEach((item: any) => {
        if (item.lng && item.lat && item.revenueData !== "") {
          filteredData.push(item);
        }
      });
      console.log("filteredData", filteredData);

      const heatmapLayer = new HeatmapLayer({
        zIndex: 11,
      })
        .source(defaultServerPartList, {
          parser: {
            type: "json",
            x: "lng", // 指定经度字段
            y: "lat", // 指定纬度字段
          },
        })
        .size("revenueData", [0, 1]) // 根据值映射热力点大小
        .shape("heatmap") // 指定热力图的形状
        .style({
          intensity: 5, // 控制强度
          radius: 20, // 控制点半径
          opacity: 0.8, // 图层透明度
          rampColors: {
            colors: ["#0e5a7e", "#63B8FF", "#FFF68F", "#FF6347", "#FF4500"], // 颜色梯度
            positions: [0, 0.25, 0.5, 0.75, 1], // 对应颜色的位置
          },
        });
      heatmapLayer.name = "heatmapLayer";
      scene.value.addLayer(heatmapLayer);
    });
  }
};

// 车辆归属地
const handleGetCarComeForm = async () => {
  const enterReq: any = {
    serverPartId: currentServerPartDetail.value.SERVERPART_ID,
    statisticsStartMonth: moment(moment().startOf("y")).format("YYYYMM"),
    statisticsEndMonth: moment(moment()).format("YYYYMM"),
    rankNum: 3,
  };
  const enterData: any = await handleGetProvinceVehicleTreeList(enterReq);
  console.log("enterData", enterData);
  let provinceListTooltip: any = [];
  let provinceList: any = [];
  if (enterData && enterData.length > 0) {
    let children: any = [];
    let obj: any = {};
    enterData.forEach((item: any) => {
      obj = JSON.parse(JSON.stringify(item));
      if (item.children && item.children.length > 0) {
        item.children.forEach((subItem: any, subIndex: number) => {
          if (subIndex <= 4) {
            provinceList.push(subItem);
            children.push(subItem);
          }
        });
      }
      obj.children = children;
      provinceListTooltip.push(obj);
    });
  }

  nextTick(() => {
    if (defaultServerPartList && defaultServerPartList.length > 0) {
      defaultServerPartList.forEach((item: any) => {
        if (
          item.SERVERPART_ID.toString() ===
          currentServerPartDetail.value.SERVERPART_ID.toString()
        ) {
          item.provinceListTooltip = provinceListTooltip;
        }
      });
      handleUpdateMapPoint();
    }
  });

  let homeCarList: any = [];
  if (provinceList && provinceList.length > 0) {
    provinceList.forEach((item: any) => {
      let list: any = [];
      if (item.children && item.children.length > 0) {
        item.children.forEach((subItem: any, subIndex: number) => {
          if (subIndex <= 2) {
            list.push(subItem);
          }
        });
      }
      item.children = list;
      homeCarList.push(item);
    });
  }
  let featuresList: any = [];
  let enterPointList: any = [];
  let cityCoordinate: any = detailText.cityCoordinate;
  if (homeCarList && homeCarList.length > 0) {
    homeCarList.forEach((item: any) => {
      if (item.children && item.children.length > 0) {
        item.children.forEach((subItem: any) => {
          enterPointList.push({
            label: subItem.ProvinceOrCityName + "市",
            SERVERPART_X: cityCoordinate[subItem.ProvinceOrCityName + "市"]
              ? cityCoordinate[subItem.ProvinceOrCityName + "市"][0]
              : [],
            SERVERPART_Y: cityCoordinate[subItem.ProvinceOrCityName + "市"]
              ? cityCoordinate[subItem.ProvinceOrCityName + "市"][1]
              : [],
          });

          featuresList.push({
            type: "Feature",
            geometry: {
              type: "LineString",
              coordinates: [
                cityCoordinate[subItem.ProvinceOrCityName + "市"]
                  ? cityCoordinate[subItem.ProvinceOrCityName + "市"]
                  : [], // 起点
                cityCoordinate[currentServerPartDetail.value.SERVERPART_NAME]
                  ? cityCoordinate[
                      currentServerPartDetail.value.SERVERPART_NAME
                    ]
                  : [], // 终点
              ],
            },
            properties: {
              value: subItem.TotalCount, // 可以映射成动画效果
            },
          });
        });
      }
    });
  }

  const enterLineData: any = {
    type: "FeatureCollection",
    features: featuresList,
  };

  const enterLine = new LineLayer({})
    .source(enterLineData)
    .size(2) // 设置线条宽度
    .shape("line") // 线条类型
    .color("value", ["#93cdf8", "#77c0f6"]) // 根据值映射颜色// ['#a1c4fd', '#2193b0', '#1565c0']
    .style({
      opacity: 0.8, // 设置透明度
      lineType: "dash", // 虚线样式
      dashArray: [5, 5], // 虚线间隔
    })
    .animate({
      interval: 1, // 动画间隔
      duration: 2, // 每条线条动画持续时间
      trailLength: 0.5, // 轨迹长度
    });
  enterLine.name = "enterLine";
  scene.value.addLayer(enterLine);

  // 给车辆的出发点 也打上圆点图层
  const enterPoint = new PointLayer({
    zIndex: 9,
  });
  enterPoint.name = "enterCarPoint";

  enterPoint.source(enterPointList, {
    parser: {
      type: "json",
      x: "SERVERPART_X",
      y: "SERVERPART_Y",
    },
  });
  enterPoint.shape("circle");
  enterPoint.size(8);
  enterPoint.color("#58b1f5");
  scene.value.addLayer(enterPoint);
};

// 拿到经营业态
const handleGetBusinessFormat = async () => {
  await RobotDialogueBoxRef.value.handleGetBusinessTrade();
  let formData: any = RightSearchBoxRef.value.form;
  console.log("formData", formData);
  const req: any = {
    BusinessTrade: formData?.BUSINESS_TRADE.toString(),
    ShowNormal: true,
    PeriodState: 1,
    DataType: 3,
  };
  const tradeData = await handleGetPeriodWarningList(req);
  console.log("tradeData", tradeData);
  // 拿到所有查询的业态所对应的服务区
  const obj: any = {};
  // 搜索的业态包含的服务区
  const shopObj: any = {};
  // 拿到门店的id
  let shopIdObj: any = {};
  if (tradeData && tradeData.length > 0) {
    console.log("tradeData3232", tradeData);

    tradeData.forEach((item: any) => {
      if (item.children && item.children.length > 0) {
        item.children.forEach((subItem: any) => {
          if (subItem.children && subItem.children.length > 0) {
            subItem.children.forEach((thirdItem: any) => {
              if (obj[thirdItem.SERVERPART_ID]) {
                const old: any = obj[thirdItem.SERVERPART_ID];
                old.push(thirdItem.BUSINESS_TRADE);
                obj[thirdItem.SERVERPART_ID] = old;
              } else {
                const list: any = [thirdItem.BUSINESS_TRADE];
                obj[thirdItem.SERVERPART_ID] = list;
              }
              if (thirdItem.children && subItem.children.length > 0) {
                let shopName: string = "";
                let shopIdList: any = [];
                thirdItem.children.forEach((fourthItem: any) => {
                  if (shopName) {
                    shopName += `, ${fourthItem.SERVERPARTSHOP_NAME} `;
                  } else {
                    shopName = `${fourthItem.SERVERPARTSHOP_NAME} `;
                  }
                  if (fourthItem?.SERVERPARTSHOP_ID) {
                    let list: any = fourthItem?.SERVERPARTSHOP_ID.split(",");
                    if (list && list.length > 0) {
                      list.forEach((item: any) => {
                        shopIdList.push(item);
                      });
                    }
                  }
                });
                shopObj[thirdItem.SERVERPART_ID] = shopName;
                shopIdObj[thirdItem.SERVERPART_ID] = shopIdList;
              }
            });
          }
        });
      }
    });
  }
  let BusinessTradeIdsObj: any =
    RightSearchBoxRef.value.selectBusinessTradeIdsObj;
  console.log("BusinessTradeIdsObj", BusinessTradeIdsObj);
  console.log("obj", obj);

  nextTick(() => {
    defaultServerPartList.forEach((item: any) => {
      if (obj[item.SERVERPART_ID] && obj[item.SERVERPART_ID].length > 0) {
        const newObj: any = JSON.parse(JSON.stringify(item));
        let str: string = "";
        const tradeList: any = obj[item.SERVERPART_ID];
        tradeList.forEach((subItem: any) => {
          if (str) {
            str += `、${BusinessTradeIdsObj[subItem]} `;
          } else {
            str = BusinessTradeIdsObj[subItem];
          }
        });
        item.tradeType = str;
        if (shopObj[item.SERVERPART_ID]) {
          item.shopName = shopObj[item.SERVERPART_ID];
        }
        if (shopIdObj[item.SERVERPART_ID]) {
          item.shopIdList = shopIdObj[item.SERVERPART_ID];
        }
      }
    });
    handleUpdateMapPoint();
  });

  console.log("defaultServerPartList", defaultServerPartList);

  const tradeRes: any = [];
  defaultServerPartList.forEach((item: any) => {
    if (obj[item.SERVERPART_ID] && obj[item.SERVERPART_ID].length > 0) {
      const newObj: any = JSON.parse(JSON.stringify(item));
      let str: string = "";
      const tradeList: any = obj[item.SERVERPART_ID];
      tradeList.forEach((item: any) => {
        if (str) {
          str += `、${BusinessTradeIdsObj[item]} `;
        } else {
          str = BusinessTradeIdsObj[item];
        }
      });
      newObj.tradeType = str;
      if (shopObj[item.SERVERPART_ID]) {
        newObj.shopName = shopObj[item.SERVERPART_ID];
      }
      if (shopIdObj[item.SERVERPART_ID]) {
        newObj.shopIdList = shopIdObj[item.SERVERPART_ID];
      }
      tradeRes.push(newObj);
    }
  });
  console.log("tradeRes", tradeRes);

  const BUSINESS_TRADELayer = new PointLayer({
    zIndex: 10,
  });
  BUSINESS_TRADELayer.name = "BUSINESS_TRADELayer";
  BUSINESS_TRADELayer.source(tradeRes, {
    parser: {
      type: "json",
      x: "SERVERPART_X",
      y: "SERVERPART_Y",
    },
  });
  BUSINESS_TRADELayer.shape("circle");
  BUSINESS_TRADELayer.size(8);
  BUSINESS_TRADELayer.color("#1890ff");
  scene.value.addLayer(BUSINESS_TRADELayer);
};

// 预警类型
const handleWarningData = async () => {
  console.log("currentServerPartDetail", currentServerPartDetail);
  nextTick(() => {
    if (currentServerPartDetail.value) {
      RobotDialogueBoxRef.value.handleSelectWarning();
    } else {
      RobotDialogueBoxRef.value.handleSetWarningData();
    }
  });
};

// 对预警类型的地图进行操作
const handleWarningMap = async (warningData: any) => {
  let waringObj: any = RobotDialogueBoxRef.value.descObjRef;
  console.log("waringObj", waringObj);

  let warningRes: any = [];
  // 拿到所有查询的业态所对应的服务区
  const obj: any = {};
  // 拿到所有查询到的预警类型对应的门店
  let shopIdObj: any = {};
  console.log("warningData2", warningData);

  if (warningData && warningData.length > 0) {
    warningData.forEach((item: any) => {
      if (obj[item.SERVERPART_ID] && obj[item.SERVERPART_ID].length > 0) {
        const old: any = obj[item.SERVERPART_ID];
        old.push(item);
      } else {
        obj[item.SERVERPART_ID] = [item];
      }

      if (
        shopIdObj[item.SERVERPART_ID] &&
        shopIdObj[item.SERVERPART_ID].length > 0
      ) {
        const old: any = shopIdObj[item.SERVERPART_ID];
        let list: any = item.SERVERPARTSHOP_ID.split(",");
        if (list && list.length > 0) {
          list.forEach((subItem: any) => {
            old.push(subItem);
          });
        }
      } else {
        let res: any = [];
        let list: any = item.SERVERPARTSHOP_ID.split(",");
        if (list && list.length > 0) {
          list.forEach((subItem: any) => {
            res.push(subItem);
          });
        }
        shopIdObj[item.SERVERPART_ID] = res;
      }
    });
  }

  nextTick(() => {
    defaultServerPartList.forEach((item: any) => {
      if (obj[item.SERVERPART_ID] && obj[item.SERVERPART_ID].length > 0) {
        let str: string = "";
        const tradeList: any = obj[item.SERVERPART_ID];
        // tradeList 是一个服务区的全部预警数据 可能存在多个类型 文字输出时需要根据类型输出 所以要分类
        let resList: any = [];
        let typeList: any = [];
        tradeList.forEach((item: any) => {
          if (typeList.indexOf(item.WARNING_TYPE) === -1) {
            typeList.push(item.WARNING_TYPE);
          }
        });
        typeList.forEach((item: any) => {
          let itemStr: string = "";
          tradeList.forEach((subItem: any) => {
            if (subItem.WARNING_TYPE === item) {
              if (itemStr) {
                itemStr += `、${subItem.SERVERPARTSHOP_NAME}`;
              } else {
                itemStr = `${waringObj[subItem.WARNING_TYPE]}：${
                  subItem.SERVERPARTSHOP_NAME
                } `;
              }
            }
          });
          if (str) {
            str += itemStr + ";";
          } else {
            str = itemStr + ";";
          }
        });

        if (
          shopIdObj[item.SERVERPART_ID] &&
          shopIdObj[item.SERVERPART_ID].length > 0
        ) {
          item.warningShop = shopIdObj[item.SERVERPART_ID];
        }
        item.waringText = str;
      }
    });
    handleUpdateMapPoint();
  });

  console.log("obj33222", obj);
  console.log("defaultServerPartList333444", defaultServerPartList);

  defaultServerPartList.forEach((item: any) => {
    if (obj[item.SERVERPART_ID] && obj[item.SERVERPART_ID].length > 0) {
      const newObj: any = JSON.parse(JSON.stringify(item));
      let str: string = "";
      const tradeList: any = obj[item.SERVERPART_ID];
      // tradeList 是一个服务区的全部预警数据 可能存在多个类型 文字输出时需要根据类型输出 所以要分类
      let resList: any = [];
      let typeList: any = [];
      tradeList.forEach((item: any) => {
        if (typeList.indexOf(item.WARNING_TYPE) === -1) {
          typeList.push(item.WARNING_TYPE);
        }
      });
      typeList.forEach((item: any) => {
        let itemStr: string = "";
        tradeList.forEach((subItem: any) => {
          if (subItem.WARNING_TYPE === item) {
            if (itemStr) {
              itemStr += `、${subItem.SERVERPARTSHOP_NAME}; `;
            } else {
              itemStr = `${waringObj[subItem.WARNING_TYPE]}：${
                subItem.SERVERPARTSHOP_NAME
              } `;
            }
          }
        });
        if (str) {
          str += itemStr;
        } else {
          str = itemStr;
        }
      });

      if (
        shopIdObj[item.SERVERPART_ID] &&
        shopIdObj[item.SERVERPART_ID].length > 0
      ) {
        newObj.warningShop = shopIdObj[item.SERVERPART_ID];
      }
      newObj.waringText = str;
      warningRes.push(newObj);
    }
  });

  console.log("warningRes", warningRes);
  console.log("defaultServerPartList", defaultServerPartList);

  const warningLayer = new PointLayer({
    zIndex: 10,
  });
  warningLayer.name = "warningLayer";
  warningLayer.source(warningRes, {
    parser: {
      type: "json",
      x: "SERVERPART_X",
      y: "SERVERPART_Y",
    },
  });
  warningLayer.shape("circle");
  warningLayer.size(8);
  warningLayer.color("#ff3a02");
  scene.value.addLayer(warningLayer);
};

// 根据右侧的选择列表 来对地图进行操作  onlyChange  如果true的话 只改变值 不调用方法
const handleChangeMapShow = async (nowSelect: string, onlyChange: boolean) => {
  // 清空没有值的图层
  handleDeleteNoDefault(nowSelect);
  console.log("nowSelect", nowSelect);
  nowSelectId.value = nowSelect;
  if (onlyChange) {
    return;
  }

  // 有值 根据值来判断显示的内容
  if (nowSelect) {
    if (nowSelect.indexOf("1") !== -1) {
      // 添加天气锚点
      handleAddWeather();
    }
    if (nowSelect.indexOf("2") !== -1) {
      // 实况车流
      await handleGetRealTraffic();
    }
    if (nowSelect.indexOf("3") !== -1) {
      const loadingInstance = ElLoading.service({
        fullscreen: true,
        background: "#00000080",
        text: "数据加载中...",
      });
      // 营收热力
      await handleGetServerpartRevenue();
      loadingInstance.close();
    }
    if (nowSelect.indexOf("4") !== -1) {
      const loadingInstance = ElLoading.service({
        fullscreen: true,
        background: "#00000080",
        text: "数据加载中...",
      });
      // 车辆归属地
      await handleGetCarComeForm();
      loadingInstance.close();
    }
    if (nowSelect.indexOf("5") !== -1) {
      // 经营业态
      await handleGetBusinessFormat();
    }
    if (nowSelect.indexOf("6") !== -1) {
      const loadingInstance = ElLoading.service({
        fullscreen: true,
        background: "#00000080",
        text: "数据加载中...",
      });
      // 预警类型
      await handleWarningData();
      loadingInstance.close();
    }
    if (nowSelect.indexOf("7") !== -1) {
      // 清空
      nowSelectId.value = "";
      handleDeleteNoDefault(nowSelectId.value);
    }
    if (nowSelect.indexOf("8") !== -1) {
      isShowRealData.value = true;
      // nextTick(async () => {
      //   if (baseInfoObj?.value.ShowRevenueGraphic) {
      //     // 拿到实时营收
      //     await RealBoxRef.value.handleGetRealMoney(
      //       baseInfoObj.value.ProvinceId
      //     );
      //     // 几个小框的数据
      //     await handleSmallBoxData();
      //   }
      // });
      nextTick(async () => {
        // 服务区繁忙
        handleServiceBusy();
        // 服务区实时营收数据
        handleGetRealServiceList();
      });
    }
    if (nowSelect.indexOf("99") !== -1) {
      handleCloseRightDetail();
      // 标记出附近的服务区
      handleNearServiceList();
    }
  }
};

// 服务区繁忙
const handleServiceBusy = async () => {
  // 是否有显示服务区繁忙的
  if (baseInfoObj?.value.ShowRevenueGraphic) {
    let list: any = BusyRankingRef.value.busyList;
    // if (list && list.length > 0) {
    // } else {
    //   const loadingInstance = ElLoading.service({
    //     fullscreen: true,
    //     background: "#00000080",
    //     text: "数据加载中...",
    //   });
    //   list = await revenueRateRef.value.handleGetBusyRank();
    //   loadingInstance.close();
    // }
    console.log("listhandleServiceBusy", list);
    let obj: any = {};
    if (list && list.length > 0) {
      list.forEach((item: any) => {
        obj[item.SERVERPART_ID] = item.AVR_TICKET;
      });
    }
    if (defaultServerPartList && defaultServerPartList.length > 0) {
      defaultServerPartList.forEach((item: any) => {
        if (obj[item.SERVERPART_ID] || obj[item.SERVERPART_ID] === 0) {
          item.AVR_TICKET = obj[item.SERVERPART_ID];
        }
      });
    }
    console.log("defaultServerPartList", defaultServerPartList);

    // 将进入搜索状态的服务区正常圆点 变回正常颜色
    let current: any = handleGetThisLayer("pointLayer");
    console.log("current", current);

    current.setData(defaultServerPartList);
    current.color("AVR_TICKET", (value: number) => {
      return value >= 30
        ? "#E64218"
        : value > 15 && value < 30
        ? "#EFE271"
        : "#1BAAE6";
      //    return value >= 30
      // ? "#f53232"
      // : value > 15 && value < 30
      // ? "#0fdb5c"
      // : "#2876EB";
    });
    current.render();
  }
};

// 服务区巡检的实际方法
const handleAreaInspection = async (i: number) => {
  let list = [];
  if (defaultServerPartList && defaultServerPartList.length > 0) {
    let firstObj: any = {};
    let otherList: any = [];
    defaultServerPartList.forEach((item: any) => {
      if (item.SERVERPART_ID === 416) {
        firstObj = item;
      } else {
        otherList.push(item);
      }
    });
    list = otherList;
    list.unshift(firstObj);
  }

  if (i < list.length) {
    //  i 为当前执行到第几项的索引
    currentServerPartDetail.value = list[i];
    // 先给上一次的图层 添加清除
    handleDeleteNoDefault("");
    // 每次巡检前 把 悬浮框先给隐藏起来
    hoverPoint.value.style.display = "none";
    // 给当前索引的服务区 加上选中的效果
    handleAddSelect(currentServerPartDetail.value);
    console.log(i, currentServerPartDetail.value);
    // 图层样式添加
    await handleChangeMapShow("1,2,4", false);
    // 拿到 经营数据 在营商家
    let answerData: any =
      await RobotDialogueBoxRef.value.handleInspectionQuestions(
        `${currentServerPartDetail.value.SERVERPART_NAME}经营数据`
      );
    let merchantData: any =
      await RobotDialogueBoxRef.value.handleInspectionQuestions(
        `${currentServerPartDetail.value.SERVERPART_NAME}在营商家`
      );
    console.log("answerData3213123", answerData);

    // 其他要显示的文字
    let otherObj: any = {
      businessText: answerData
        .replace(/"/g, "'")
        .replace(/{{(.*?)}}/g, (_: any, expression: any) => {
          try {
            // 使用 eval 执行模板字符串中的 JavaScript 表达式
            // 注意：eval 存在安全风险，实际使用中需小心。
            return eval(expression.trim()); // 执行并返回结果
          } catch (error) {
            console.error("错误：", error);
            return ""; // 出现错误时返回空字符串
          }
        }),
      merchantText: merchantData
        .replace(/"/g, "'")
        .replace(/{{(.*?)}}/g, (_: any, expression: any) => {
          try {
            // 使用 eval 执行模板字符串中的 JavaScript 表达式
            // 注意：eval 存在安全风险，实际使用中需小心。
            return eval(expression.trim()); // 执行并返回结果
          } catch (error) {
            console.error("错误：", error);
            return ""; // 出现错误时返回空字符串
          }
        }),
    };

    nextTick(async () => {
      currentServerPartDetail.value = defaultServerPartList[i];
      let nowDetail: any = JSON.parse(JSON.stringify(defaultServerPartList[i]));
      // 对话框样式内容添加
      RobotDialogueBoxRef.value.handleInspectionDialogueBox(
        nowDetail,
        otherObj
      );
    });
  } else {
    RobotDialogueBoxRef.value.closeInspection();
  }

  // for (let i = 0; i < defaultServerPartList.length; i++) {
  //   const loadingInstance = ElLoading.service({
  //     fullscreen: true,
  //     background: "#00000080",
  //     text: "数据加载中...",
  //   });

  //   loadingInstance.close();
  // }
};

// 隐藏悬浮框
const handleHiddenSuspended = () => {
  hoverPoint.value.style.display = "none";
};

// 关闭右侧服务区详情
const handleCloseRightDetail = () => {
  showRightDetail.value = false;
};

// 机器人是否显示的状态
const handleShowAi = (value: boolean) => {
  isShowAi.value = value;
};

// 右侧详情是否显示
const handleShowDetail = (value: boolean) => {
  isShowDetail.value = value;
};

// 判断是不是对话框 新增了右侧的查询项
const handleChangeRightFilterInDialogue = (id?: string) => {
  RightSearchBoxRef.value.handleChangeFilterNoWatch(id);
};

// 请求服务区的实时数据  每个服务区上面加个div显示的那种
const handleGetRealServiceList = async () => {
  const req: any = {
    ProvinceCode: baseInfoObj.value.ProvinceCode,
  };
  const data = await handleGetTransactionDetailList(req);
  console.log("handleGetRealServiceList", data);
  realRevenueList = data;
  let list: any = handleShowRevenuePoint(data);
  console.log("listdadasd", list);
  let bigIndex: number = list.length;

  // 根据顺序 显示每组五个的锚点div  每10秒更新一次
  // 定时器 ID，用于清除定时器
  console.log("bigIndex", bigIndex);

  handleShowMapPoint(list[nowFifthIndex.value]);
  nowFifthIndex.value++;
  mapTimer = setInterval(() => {
    if (bigIndex <= nowFifthIndex.value) {
      nowFifthIndex.value = 0;
    }
    scene.value.removeAllMarkers();
    handleShowMapPoint(list[nowFifthIndex.value]);
    nowFifthIndex.value++;
  }, 10000);
};
// 根据顺序 显示每组五个的锚点div  每10秒更新一次
const handleShowMapPoint = async (list: any) => {
  console.log("list", list);
  console.log("defaultServerPartList", defaultServerPartList);
  let detailObj: any = {};
  if (list && list.length > 0) {
    list.forEach((item: any) => {
      detailObj[item.Serverpart_ID] = item;
    });
  }

  console.log("detailObj", detailObj);
  defaultServerPartList.forEach((item: any) => {
    if (detailObj[item.SERVERPART_ID]) {
      let obj = detailObj[item.SERVERPART_ID];
      item.realRevenueDetail = obj;
      const el = document.createElement("div");
      el.style.maxWidth = "20rem";
      el.style.boxSizing = "border-box";
      el.style.padding = "6px";
      el.style.background = "rgba(56, 56, 56, 0.8)";
      el.style.borderRadius = "8px";
      el.style.color = "#fff";
      el.style.fontSize = "1rem";

      // 根据列表数据 写innerHTML的字符串
      let listStr: string = "";
      if (obj.TimeList && obj.TimeList.length > 0) {
        if (obj.TimeList && obj.TimeList.length > 1) {
          obj.TimeList = obj.TimeList.slice(0, 1);
        }

        obj.TimeList.forEach((subItem: any) => {
          let smallStr: string = "";
          if (subItem.sellList && subItem.sellList.length > 0) {
            subItem.sellList.forEach((thirdItem: any) => {
              if (smallStr) {
                smallStr += `,${thirdItem.CommodityName}：${thirdItem.SellCount}件`;
              } else {
                smallStr = `${thirdItem.CommodityName}：${thirdItem.SellCount}件`;
              }
            });
          }
          let shop: string = `<div style="white-space: wrap;">${subItem.ServerpartShop_Name}：${smallStr}</div>`;
          listStr += shop;
        });
      }

      el.innerHTML = `<div  style="white-space: wrap;">${obj.Serverpart_Name}</div><div style="white-space: wrap;">实时交易金额：${obj.CurRevenueAmount}元</div>${listStr}`;
      const marker = new Marker({ element: el }).setLnglat([
        item.SERVERPART_X,
        item.SERVERPART_Y,
      ] as any);
      scene.value.addMarker(marker);
    } else {
      item.realRevenueDetail = undefined;
    }
  });

  // return;

  // defaultServerPartList.forEach((item: any) => {
  //   if (item.weatherModel) {
  //     if (item.weatherModel.DAY_WEATHER_PIC) {
  //       const el = document.createElement("div");
  //       el.style.width = "32px";
  //       el.style.height = "24px";
  //       el.style.paddingBottom = "4px";
  //       el.style.textAlign = "center";

  //       // 创建并插入 <img> 元素
  //       const img = document.createElement("img");
  //       img.src = item.weatherModel.DAY_WEATHER_PIC;
  //       img.style.width = "15px";
  //       img.style.height = "15px";
  //       img.style.borderRadius = "50%"; // 圆形图片（可选）
  //       // img.title = item.DAY_WEATHER
  //       el.appendChild(img);
  //       const marker = new Marker({ element: el }).setLnglat([
  //         item.SERVERPART_X,
  //         item.SERVERPART_Y,
  //       ] as any);
  //       if (currentServerPartDetail.value) {
  //         if (
  //           item.SERVERPART_ID === currentServerPartDetail.value.SERVERPART_ID
  //         ) {
  //           scene.value.addMarker(marker);
  //         }
  //       } else if (
  //         searchSelectServerPartId &&
  //         searchSelectServerPartId.length > 0
  //       ) {
  //         if (
  //           searchSelectServerPartId.indexOf(item.SERVERPART_ID.toString()) !==
  //           -1
  //         ) {
  //           scene.value.addMarker(marker);
  //         }
  //       } else {
  //         scene.value.addMarker(marker);
  //       }
  //     }
  //   }
  // });
};
// 根据当前的有了的实时营收数组 按照五个 五个一组的顺序 在地图上进行标出div
const handleShowRevenuePoint = (list: any) => {
  // nowFifthIndex
  if (list && list.length > 0) {
    let newList: any = JSON.parse(JSON.stringify(list));
    console.log("newList", newList);
    // 将数组分为每5个元素为一组
    let paginated = [];
    for (let i = 0; i < newList.length; i += 5) {
      paginated.push(newList.slice(i, i + 5));
    }
    return paginated;
  }
};

// 标记出附近的服务区
const handleNearServiceList = async () => {
  handleCloseRightDetail();
  console.log("fdsjfhds");
  console.log("dsadas", currentServerPartDetail);
  if (currentServerPartDetail.value) {
    const req: any = {
      PageIndex: 1,
      PageSize: 100,
      SearchParameter: {
        SERVERPART_IDS: currentServerPartDetail.value.SERVERPART_ID,
      },
    };
    const data = await handleGetGDNearServiceList(req);
    let current: any = handleGetThisLayer("nearServiceList");
    console.log("data3212", data);
    let list: any = [];
    if (data && data.length > 0) {
      data.forEach((item: any) => {
        if (item.children && item.children.length > 0) {
          item.children.forEach((subItem: any) => {
            // 判断是否同省 且 id有 说明是驿达的
            if (subItem.HASPROVINCE) {
              if (subItem.SERVERPART_ID) {
                subItem.showType = 1;
              } else {
                subItem.showType = 2;
              }
            } else {
              subItem.showType = 3;
            }

            list.push(subItem);
          });
        }
        list.push(item);
      });
    }
    // 删除原有的 添加新的
    if (current) {
      scene.value.removeLayer(current);
    }
    let nearServiceList = new PointLayer({
      zIndex: 100,
    });
    nearServiceList.name = "nearServiceList";
    nearServiceList.source(list, {
      parser: {
        type: "json",
        x: "SERVERPART_X",
        y: "SERVERPART_Y",
      },
    });
    nearServiceList.shape("circle");
    nearServiceList.size(8);
    // nearServiceList.color("#F70000");
    nearServiceList.color("showType", (value: number) => {
      // showType
      //  1  同省驿达 2 同省非驿达  3 外省
      return value === 1 ? "#F5F6F7" : value === 2 ? "#fdff3d" : "#F70000";

      // value === null
      //   ? "#fdff3d"
      //   : value > 0 && value < 1000
      //   ? "#F5F6F7"
      //   : "#F70000";
      // value > 0 && value < 1000 ? "#F5F6F7" : "#fdff3d" : "#F70000";
    });
    nearServiceList.style({
      opacity: 0.7, // 透明度
    });

    nearServiceList.on("mousemove", (ev: any) => {
      const detail: any = ev.feature;
      hoverPoint.value.style.top = `${ev.y + 5}px`;
      hoverPoint.value.style.left = `${ev.x + 5}px`;
      hoverPoint.value.style.display = "block";
      hoverPoint.value.innerHTML = `<div>
        <div>${detail?.SERVERPART_NAME || ""}</div>
        <div>直线距离：${detail.SELECT_DISTANCE || ""}km</div>
        <div>路线距离：${detail.REAL_DISTANCE || ""}km</div>
      </div>`;
    });
    nearServiceList.on("mouseout", (ev: any) => {
      hoverPoint.value.style.display = "none";
    });

    scene.value.addLayer(nearServiceList);
  } else {
    ElMessage({
      message: "请先选择服务区！",
      type: "warning",
    });
  }
};
</script>

<template>
  <div id="map" class="mapBox">
    <div class="RobotBox" v-if="baseInfoObj?.ShowAIQA">
      <RobotDialogueBox
        ref="RobotDialogueBoxRef"
        @handleLightServerpart="handleLightServerpart"
        @handleEnterySearch="handleEnterySearch"
        @handleWarningMap="handleWarningMap"
        @handleAreaInspection="handleAreaInspection"
        @handleHiddenSuspended="handleHiddenSuspended"
        @handleShowAi="handleShowAi"
        @handleChangeRightFilterInDialogue="handleChangeRightFilterInDialogue"
        :currentServerPartDetail="currentServerPartDetail"
        :allServerPartIdList="allServerPartIdList"
      />
    </div>

    <div
      class="rightSearchBox"
      :style="{ right: showRightDetail ? 'calc(25% + 8px)' : '16px' }"
    >
      <RightSearchBox
        ref="RightSearchBoxRef"
        @handleChangeMapShow="handleChangeMapShow"
        @handleDeleteSelect="handleDeleteSelect"
        @handleHiddenSuspended="handleHiddenSuspended"
        @handleNearServiceList="handleNearServiceList"
        :currentServerPartDetail="currentServerPartDetail"
      />
    </div>
    <div
      class="serverpartDetail"
      :style="{ right: showRightDetail ? '0' : '-25%' }"
    >
      <!-- v-if="showRightDetail" -->
      <RightDetail
        ref="RightDetailRef"
        :currentServerPartDetail="currentServerPartDetail"
        @handleCloseRightDetail="handleCloseRightDetail"
        @handleShowDetail="handleShowDetail"
      />
    </div>

    <!-- 实时营收的box -->
    <div
      class="realBox"
      v-show="
        isShowAi || isShowDetail
          ? false
          : baseInfoObj?.ShowRevenueGraphic && isShowRealData
          ? true
          : false
      "
    >
      <!-- v-if="baseInfoObj?.ShowRevenueGraphic && isShowAi || isShowDetail" -->
      <RealBox
        ref="RealBoxRef"
        :show="
          isShowAi || isShowDetail
            ? false
            : baseInfoObj?.ShowRevenueGraphic && isShowRealData
            ? true
            : false
        "
      />
    </div>

    <!-- 片区图例 -->
    <div
      class="areaListLegend"
      v-if="SPREGIONTYPECOLORList && SPREGIONTYPECOLORList.length > 0"
    >
      <div
        class="areaItem"
        v-for="(item, index) in SPREGIONTYPECOLORList"
        :key="index"
      >
        <span class="color" :style="{ background: item.value }"></span>
        <span class="text">{{ item.label }}</span>
      </div>
    </div>

    <!-- 区域营收占比 -->
    <div
      class="revenueRate"
      v-show="
        isShowAi || isShowDetail
          ? false
          : baseInfoObj?.ShowRevenueGraphic && isShowRealData
          ? true
          : false
      "
    >
      <RevenueRate
        ref="revenueRateRef"
        :SPREGIONTYPECOLOR="SPREGIONTYPECOLOR"
        :show="
          isShowAi || isShowDetail
            ? false
            : baseInfoObj?.ShowRevenueGraphic && isShowRealData
            ? true
            : false
        "
      />
    </div>

    <!-- 消费金额趋势图 -->
    <div
      class="BusyRanking"
      v-show="
        isShowAi || isShowDetail
          ? false
          : baseInfoObj?.ShowRevenueGraphic && isShowRealData
          ? true
          : false
      "
    >
      <BusyRanking
        ref="BusyRankingRef"
        :show="
          isShowAi || isShowDetail
            ? false
            : baseInfoObj?.ShowRevenueGraphic && isShowRealData
            ? true
            : false
        "
        @handleServiceBusy="handleServiceBusy"
      />
    </div>
  </div>
</template>