<template>
  <div class="pictureOnMap">
    <TopTab />
    <div class="mainContentBox">
      <MapBox
        :initJson="`/static/libs/mapbox/style/wh_dhgx.json`"
        :loadCallback="loadCallback"
        @mapClick1="mapClick1"
      ></MapBox>
      <router-view></router-view>
      <recordPage></recordPage>
      <LayerControl></LayerControl>
      <inputSearch></inputSearch>
    </div>

    <el-dialog
      modal-class="pmpSitNewDialog"
      v-model="dialogConfig.visible"
      :append-to-body="true"
      style="height: 750px; width: 1200px"
      :destroy-on-close="true"
      :draggable="true"
      :z-index="999"
    >
      <DialogTabs
        :dataID="dialogConfig.dataID"
        :dataCode="dialogConfig.dataCode"
        :comIDs="dialogConfig.comIDs"
        :typeName="dialogConfig.typeName"
        :customComponents="dialogConfig.customData"
        :RefName="dialogConfig.RefName"
        :title="dialogConfig.title"
        :arrstcode="arrstcode"
        :arrid="arrid"
        :Getproperties="Getproperties"
        :Getmenuarr="Getmenuarr"
        @closeFun="closeFun"
      ></DialogTabs>
    </el-dialog>
  </div>
</template>
<script setup>
import line from "../../../public/static/libs/mapbox/json/line.json";
import point from "../../../public/static/libs/mapbox/json/point.json";
import { ref, reactive, onMounted, nextTick } from "vue";
import TopTab from "./TopTab/index.vue";
import MapBox from "../../components/Map/MapBox";
import bus from "@/bus";
import useUserStore from "@/store/modules/user";
import DialogTabs from "@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue";
import { drainageDispatchGetMenu } from "@/api/MonitorAssetsOnMap";
import recordPage from "@/views/voice/recordPage/index";
import usepartitionStore from "@/store/modules/partition";

import LayerControl from "@/views/pictureOnMap/LayerControl.vue";
import inputSearch from "@/views/pictureOnMap/inputSearch.vue";
import { FALSE } from "ol/functions";

const useStore = usepartitionStore();

const appStore = useUserStore();

const { proxy } = getCurrentInstance();
const Getproperties = ref({});
const Getmenuarr = ref([]);
const GetcomIDs = ref([]);
const dialogConfig = reactive({
  visible: false,
  dataID: "",
  dataCode: "",
  data: {},
  comIDs: [],
  customData: [],
  RefName: "",
  title: "详情",
  typeName: "",
});
const closediaMeth = () => {
  dialogConfig.visible = false;
};
// 站点数组
const arrstcode = ref([
  // 站点类型名称: 编码
  "outlet_water_level", // 排口流量
  "outlet_quality", // 排口水质
  "channel_quality", // 港渠水质
  "channel_water_level", // 港渠水位
  "lake_water_level", // 湖泊水位
  "waterlogging", // 渍水监测点（注意：这里编码没有后缀，可能是特例或故意为之）
  "rain", // 雨量站
  "rainwater_pipeline_quality", // 雨水管网水质
  "sewage_pipeline_quality", // 污水管网水质
  "rainwater_pipeline_quality_area", // 接驳口
  "rainwater_pipeline_water_level", // 雨水管网液位
  "reservoir_water_level", //水库水位
  "rainPumpStation", //雨水泵站
  "dirtyPumpStation", //污水泵站
  "sewageStation", //污水厂
  "gateStation", //闸门
]);
// 基本数据
const arrid = ref([
  "diversion_well_info", // 分流井
  "drainage_info", // 排水户
  "lake_info", // 湖泊
  "outlet_info", // 排口
  "port_channel_info", // 港渠
  "rain_water_pump_station_info", // 雨水泵站
  "region_info", // 分区信息
  "reservoir_info", // 水库
  "sewage_factory_info", // 污水处理厂
  "sewage_factory_station_info", //污水处理站
  "sewage_pump_station_info", // 污水泵站
  "storage_tank_info", // 调蓄池
  "water_gate_info", // 水闸
  "waterlogging_point_info", // 渍水点
  "water_region_info", // 水系汇水分区
  "storehouse", //物资仓库
  "dikeGood", //堤防备料
]);
// 基础数据
const switchStcode = (Name, type) => {
  if (type == "outlet_info") {
    pkClick(Getproperties.value);
  }
  console.log("GetcomIDs.value", GetcomIDs.value);

  if (arrid.value.includes(type)) {
    dialogConfig.visible = true;
    dialogConfig.dataCode = type;
    dialogConfig.comIDs = GetcomIDs.value;
    dialogConfig.title = Getproperties.value.name.split("\n")[0];
    dialogConfig.dataID = Getproperties.value.pid
      ? Getproperties.value.pid
      : Getproperties.value.id;
    dialogConfig.RefName = GetcomIDs.value.length ? GetcomIDs[0] : "";
  } else {
    return;
  }
};
// 类型弹框判断
const typecodeswitch = (type) => {
  if (diabox[type]) {
    // console.log('diabox[type]', diabox[type]);
    window[type + "_map"] = diabox[type]
      .filter((i) => i.geometry)
      .map((item, index) => {
        let coordinates = turf.getCoords(
          turf.center(Terraformer.WKT.parse(item.geometry))
        );
        const popup = new mapboxgl1.Popup({
          closeButton: false,
          closeOnClick: false,
        });
        popup
          .setLngLat(coordinates)
          .setDOMContent(document.getElementById(type + index))
          .addTo(newfiberMap.map);
        popup.coordinates = coordinates;
        return popup;
      });

    nextTick(() => {
      window[type + "_map"].forEach((i) => i._setOpacity(0));
    });
  }
};
const switchArr = () => {
  let typearr = [];
  for (var k in diabox) {
    typearr.push(k);
    appStore.MapData.map((item) => {
      if (item.pointType == k) {
        diabox[k] = item.data;
      }
    });
  }
  nextTick(() => {
    for (var k in typearr) {
      typecodeswitch(typearr[k]);
    }
  });
};

// 站点
const switchid = (Name, type, properties) => {
  if (arrstcode.value.includes(type)) {
    dialogConfig.visible = true;
    dialogConfig.dataCode = type;
    dialogConfig.dataID = Getproperties.value.stCode;

    dialogConfig.comIDs = GetcomIDs.value;
    dialogConfig.title = Getproperties.value.name.split("\n")[0];
    dialogConfig.RefName = GetcomIDs.value.length ? GetcomIDs.value[0].menuName : "";
  } else {
    return;
  }
};
// 智慧水务大脑一张图 特定大屏动态菜单
const specificFun = (type) => {
  // 监测预警模块弹框
  // value值 统一菜单类型
  //name值 特指智慧水务大脑获取的动态菜单类型
  let arr = [
    {
      name: "dp_zsfx", //渍水点
      value: "waterlogging",
    },
    {
      name: "dp_hhsq", //河湖水情
      value: "lake_water_level",
    },
    {
      name: "dp_bzgq", //泵站工情
      value: "rainPumpStation", //雨水泵站
    },
    {
      name: "dp_gwfx", //管网风险
      value: "rainwater_pipeline_water_level", //雨水管网液位
    },
    {
      name: "dp_gwfx", //管网风险
      value: "rainwater_pipeline_quality", //雨水管网水质
    },
    {
      name: "dp_gwfx", //接驳口
      value: "rainwater_pipeline_quality_area", //接驳口
    },
    {
      name: "dp_wsgwfx", //大屏污水管网风险分析弹框
      value: "sewage_pipeline_quality", //雨水管网水质
    },
    // {
    //   name: "dp_ysgwfx", //大屏雨水管网风险分析弹框
    //   value: "rainwater_pipeline_quality", //雨水管网水质
    // },
  ];
  return arr.find((item) => item.value == type)?.name || null;
};

// 获取动态弹框菜单
const GetBoxmenu = (Name, type) => {
  console.log("name", Name);
  console.log("type", type);
  GetcomIDs.value = [];
  let dataId = "";
  if (arrstcode.value.includes(type)) {
    dataId = Getproperties.value.stCode;
  }

  if (arrid.value.includes(type)) {
    dataId = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
  }
  console.log("dataId", dataId);
  if (!dataId) {
    //渍水调度
    if (type == "waterlog_point") {
      bus.emit("showZSdispatch", Getproperties.value);
    }
    // proxy.$modal.msgSuccess('');
    return;
  }
  // debugger;
  let params = {
    dataCode: specificFun(type) || type,
    scene: "basis_monitor",
    dataId: dataId,
  };
  drainageDispatchGetMenu(params).then((res) => {
    console.log("获得的菜单", res.data);
    Getmenuarr.value = res.data;
    if (res.data && res.data.length) {
      res.data.map((item) => {
        GetcomIDs.value.push(item.moduleName);
      });
    }

    nextTick(() => {
      switchStcode(Name, type);
      switchid(Name, type);
    });
  });
};

const pointandlineOpen = (type, properties) => {
  dialogConfig.visible = true;
  switch (type) {
    case "pipeline_info_text":
      dialogConfig.title = "管线信息";
      break;
    case "pipeline_info":
      dialogConfig.title = "管线信息";
      break;
    case "pipeline_point":
      dialogConfig.title = "管点信息";
      break;
    case "point":
      dialogConfig.title = "问题管线";
      break;
  }

  Getmenuarr.value = [
    {
      menuName: "管网信息",
      show: true,
      moduleName: "PointAndLine",
    },
  ];

  // dialogConfig.dataID = '0371000003';
  dialogConfig.comIDs = ["PointAndLine"];
  dialogConfig.RefName = "PointAndLine";
};
const loadCallback = () => {};
// 排口溯源
const pkClick = async (properties) => {
  // debugger;
  if (!properties.wellCode) return;
  let results = await upStreamAnalyse({ endPointNumber: properties.wellCode });
  let pipelines = results.data.pipelineInfoList
    .map((i) =>
      turf.feature(Terraformer.WKT.parse(i.geometrys), {
        ...i,
        area: i.pipelineType == "Rain" ? "雨水" : "污水",
      })
    )
    .map((i) =>
      i.properties.flowDirection == 0
        ? turf.lineString(turf.getCoords(i).reverse(), i.properties)
        : i
    );
  newfiberMap
    .getLayers()
    .filter((i) => i.newfiberId == "水系流向")[0]
    .getSource()
    .setData(turf.featureCollection(pipelines));
};

const a = (properties) => {
  const keys_ = ["雨水", "污水"];
  const keys = ["1_泵站", "1_污水处理厂", "分区流向", "分区流向1"];
  bus.emit("removeMapDatas", keys);
  newfiberMap
    .getLayers()
    .filter((i) => i.newfiberId == keys[3])[0]
    .getSource()
    .setData(turf.featureCollection([]));
  const key = properties.c_layer.includes(keys_[0]) ? keys_[0] : keys_[1];
  const nameKey = properties.name.substring(0, 2);
  let features = line.features.filter(
    (i) => i.properties.area.includes(key) && i.properties.name.includes(nameKey)
  );
  let features1 = point.features.filter(
    (i) => i.properties.area.includes(key) && i.properties.system.includes(nameKey)
  );
  let points = _.groupBy(features1, (a) => a.properties.type);
  features.forEach((i) => {
    i.properties.type = keys[2];
    i.properties.color = key == keys_[0] ? "rgba(21,127,176,1)" : "rgba(255,0,0,1)";
  });
  Object.keys(points).map((key) =>
    bus.emit("setGeoJSON", {
      json: turf.featureCollection(
        points[key].map((i) => ({
          type: i.type,
          geometry: i.geometry,
          properties: { ...i.properties, type: "1_" + key },
        }))
      ),
      key: "1_" + key,
    })
  );
  bus.emit("setGeoJSON", { json: turf.featureCollection(features), key: keys[2] });
  newfiberMap
    .getLayers()
    .filter((i) => i.newfiberId == keys[3])[0]
    .getSource()
    .setData(turf.featureCollection(features));
};

const mapClick1 = (lngLat, properties = {}, layerId) => {
  console.log("经纬度", lngLat);
  console.log("数据", properties);
  console.log("layerid", layerId);

  // 处理标注
  Getproperties.value = properties;
  let type = properties ? properties.type : "" || 1;
  let Name = properties ? properties.pointTypeName : "" || "";
  // Annotation(properties);
  console.log("1111", type, layerId);

  if (properties.layer == "排水分区") {
    // a(properties);

    // if (Getproperties.value.c_layer.includes('雨水分区_1')) {
    //   type = 'water_region_info';
    //   GetBoxmenu('雨水分区', type);
    // }

    // if (Getproperties.value.c_layer.includes('污水分区')) {
    //   type = 'region_info';
    //   GetBoxmenu('污水分区', type);
    // }

    return;
  }

  let layerIdarr = [
    "湖泊",
    "湖泊_text",
    "港渠",
    "港渠_text",
    "水库管理范围",
    "水库管理范围_text",
  ];
  let newsetarr = [
    { name: "湖泊", value: "lake_info" },
    { name: "湖泊_text", value: "lake_info" },
    { name: "港渠", value: "port_channel_info" },
    { name: "港渠_text", value: "port_channel_info" },
    { name: "水库管理范围", value: "reservoir_info" },
    { name: "水库管理范围_text", value: "reservoir_info" },
  ];
  if (layerIdarr.includes(layerId)) {
    type = newsetarr.find((item) => {
      return layerId == item.name;
    }).value;

    GetBoxmenu(layerId, type);

    return;
  }

  let arr = ["pipeline_point", "pipeline_info", "pipeline_info_text"];

  if (arr.includes(layerId)) {
    console.log("进了方法");
    pointandlineOpen(layerId);
    dialogConfig.dataCode = layerId;
  } else if (properties.type && properties.type == "问题管线") {
    pointandlineOpen("point");
    dialogConfig.dataCode = "point";
  } else {
    if (type) {
      GetBoxmenu(Name, type);
    }
  }
};

// 根据类型处理接口返回的标注内容
const AnnotationArr = ref([]);
const StringName = ref("");
const Annotation = (properties) => {
  if (properties.siteData && properties.siteData.length) {
    let arr = JSON.parse(properties.siteData);
    AnnotationArr.value = arr;
    console.log("数据", arr);
    let string = "";

    switch (properties.type) {
      case "rain":
        AnnotationArr.value = [
          { valueName: "监测时间", value: properties.recordTime },
          ...arr,
        ];
        break;
    }
    string = Methtion(string);
    console.log("数据", string);
  }
};

const Methtion = (StringName) => {
  if (AnnotationArr.value.length) {
    AnnotationArr.value.map((item) => {
      StringName += `${item.valueName}:${item.value}+'/n' `;
    });
    return StringName;
  }
};

const allScreen = () => {
  let domElement = document.documentElement;
  if (domElement.requestFullscreen) {
    domElement.requestFullscreen();
  } else if (domElement.mozRequestFullScreen) {
    domElement.mozRequestFullScreen();
  } else if (domElement.webkitRequestFullScreen) {
    domElement.webkitRequestFullScreen();
  }
};
const closeFun = (is) => {
  dialogConfig.visible = is;
};
function anotherMeht(item) {
  let properties = {};
  Getproperties.value.stCode = item.stCode || item.siteCode || item.lakeCode;
  Getproperties.value.dataCode = item.dataCode;
  Getproperties.value.wellCode = item.wellCode || item.dataName || item.pipeLine;
  Getproperties.value.id = item.id;
  Getproperties.value.gwMonitorId = item.gwMonitorId || item.id; //管网坡面
  Getproperties.value.dataId = item.dataId || "";
  Getproperties.value.stType = item.stType;

  Getproperties.value.geometry = item.geometry || item.geometrys || "";
  // Terraformer.WKT.convert(turf.point(item.lonLat.split(",").map(Number)).geometry);

  Getproperties.value.waterRegionCode = item.lakeCode || item.waterRegionCode; //河湖水情  查询水系分区详情
  Getproperties.value.GWDADataNow = item.GWDADataNow ? item.GWDADataNow : false;
  if (item.daterange) {
    Getproperties.value.daterange = item.daterange;
  } else {
    Getproperties.value.daterange = null;
  }
  console.log("Getproperties", Getproperties.value);
  if (arrstcode.value.includes(item.stType)) {
    properties.stCode = item.stCode;
  }

  if (arrid.value.includes(item.stType)) {
    properties.id = item.pid || item.id;
  }
  GetBoxmenu("", item.stType);
}

onMounted(() => {
  allScreen();
  useStore.getsewageData();
  bus.on("DynamicBus", (item) => {
    console.log("item", item);
    dialogConfig.RefName = item.RefName || "";
    dialogConfig.title = item.stName || item.name;
    // debugger;
    if (!!!item.NoPromise) {
      anotherMeht(item);
    } else {
      // 将不进行接口请求,直接写死弹窗内容
      dialogConfig.dataCode = item.type;
      Getmenuarr.value = item.Getmenuarr;
      dialogConfig.comIDs = item.comIDs;
      dialogConfig.dataID = item.pid ? item.pid : item.id;
      Getproperties.value.stCode = item.stCode;
      Getproperties.value.dataCode = item.dataCode;
      Getproperties.value.wellcode =
        item.wellCode || item.dataName || item.startPointNumber;
      Getproperties.value.id = item.relationId || item.id; //item.relationId监测告警的普通id
      Getproperties.value.dataId = item.dataId || "";
      Getproperties.value.stType = item.stType;
      Getproperties.value.geometry = item.geometry || item.geometrys;
      dialogConfig.visible = true;
    }
  });
  bus.on("closedia", (e) => {
    closediaMeth();
  });
  bus.on("changeData", (e) => {
    // switchArr();
  });
  // 部分公共弹窗需要使用一个查询时间,目前不确定后期有没有人使用同类型的弹窗,在此初始化,增加公共弹窗的兼容性
  // localStorage.setItem("JCFXDialogTimer", moment().format("YYYY-MM-DD"));
});

onBeforeUnmount(() => {
  bus.off("DynamicBus");
  bus.off("closedia");
  bus.off("changeData");
});
</script>
<style lang="scss">
@import "@/assets/styles/pictureOnMap.scss";
.pictureOnMap {
  width: 100%;
  height: 100%;
  background: url("@/assets/images/pictureOnMap/maxBgc.png") no-repeat center;
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;
  .mainContentBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    // &::before{
    //   content: '';
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   width: 100%;
    //   height: 100%;
    //   // background: radial-gradient(rgba(255, 255, 255, 0) 30%, #071542 100%);
    //   background: url("@/assets/images/pictureOnMap/bg.png") no-repeat;
    //   background-size: 100% 100%;
    //   /*设置径向渐变*/
    //   pointer-events: none;
    //   z-index:5;
    // }
  }
}
</style>