/* eslint-disable quotes */
/* eslint-disable comma-dangle */
/* eslint-disable semi */
/* eslint-disable space-before-function-paren */
/* eslint-disable no-unused-vars */
import leftNavsData from "./pc/leftNavsData";
import openlayerData from "./openlayerData";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";

import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import { Icon, Style } from "ol/style.js";

window.labelLayer = null;
window.divIcon = null;
window.divIcononces = null;

function updateUrl(url) {
  if (url.indexOf("http://172.18.4.135:9000/zhxy") != -1) {
    url = url.replace(
      "http://172.18.4.135:9000/zhxy",
      "https://fkxt.jxstnu.edu.cn/changjing/gminio/zhxy"
    );
  }
  return url;
}

const popupParams = {
  state: {
    ...leftNavsData.state,
    popupBgUrl: null,
    pupupQRUrl: null,
    terminus: null,
    startingPoint: null,
    pointPosition: null,
    stateName: null,
    siteName: null,
    telephone: null,
    introduceText: null,
    detailsPopup: false,
    panoramaUrl: null,
    panoramaPopup: false,
    monitorUrl: null,
    monitorPopup: false,
    // 图集
    popupImgAtlas: [],
    teachList: [],
    liveList: [],
    addTagPopup: false,
    addTagPosition: null,

    // labelLayer: null, // 自定义标签图层
    addSignList: true,
    myviewer: null,
    nowlabelLayerData: {},
    labelLayerDataShow: false,

    closeMapClick: false, // 关闭地图点击，防止新增标签误触
  },
  mutations: {
    ...leftNavsData.mutations,
    SET_POPUPBGURL(state, popupBgUrl) {
      if (!popupBgUrl) {
        return;
      }
      state.popupBgUrl = popupBgUrl;
    },
    SET_POPUPQRURL(state, pupupQRUrl) {
      state.pupupQRUrl = pupupQRUrl;
    },
    SET_TERMINUS(state, terminus) {
      state.terminus = terminus;
    },
    SET_STARTINGPOINT(state, startingPoint) {
      state.startingPoint = startingPoint;
    },
    SET_POINTPOSITION(state, pointPosition) {
      state.pointPosition = pointPosition;
    },
    SET_STATENAME(state, stateName) {
      state.stateName = stateName;
    },
    SET_SITENAME(state, siteName) {
      state.siteName = siteName;
    },
    SET_TELEPHONE(state, telephone) {
      state.telephone = telephone;
    },
    SET_INTRODUCETEXT(state, introduceText) {
      state.introduceText = introduceText;
    },
    SET_PANORAMAURL(state, panoramaUrl) {
      state.panoramaUrl = panoramaUrl;
    },
    SET_PANORAMAPOPUP(state, panoramaPopup) {
      state.panoramaPopup = panoramaPopup;
    },
    SET_MONITORURL(state, monitorUrl) {
      state.monitorUrl = monitorUrl;
    },
    SET_MONITORPOPUP(state, monitorPopup) {
      state.monitorPopup = monitorPopup;
    },
    SET_DETAILSPOPUP(state, detailsPopup) {
      state.detailsPopup = detailsPopup;
    },
    SET_POPUPIMGATLAS(state, popupImgAtlas) {
      state.popupImgAtlas = popupImgAtlas;
    },
    SET_TEACHLIST(state, teachList) {
      state.teachList = teachList;
    },
    SET_LIVELIST(state, liveList) {
      state.liveList = liveList;
    },

    SET_ADDTAGPOPUP(state, addTagPopup) {
      state.addTagPopup = addTagPopup;
    },

    SET_ADDTAGPOSITION(state, addTagPosition) {
      state.addTagPosition = addTagPosition;
    },
    initLabelLayer(state, val) {
      if (!window.labelLayer) {
        window.labelLayer = new global.DC.HtmlLayer("labelLayer");
        val.addLayer(window.labelLayer);
      }
      state.myviewer = val;
    },

    clearLabelLayerIcon(state, val) {
      if (window.labelLayer) {
        window.labelLayer.clear();
      }
    },
    openLabelLayer(state, val) {
      if (val.show) {
        state.nowlabelLayerData = val.data;
        state.labelLayerDataShow = true;
      } else {
        state.nowlabelLayerData = {};
        state.labelLayerDataShow = false;
      }
    },
    CLEAR_ALL(state, param) {
      state.siteName = param;
      state.introduceText = param;
      state.telephone = param;
      state.panoramaUrl = param;
      state.monitorUrl = param;
      state.popupBgUrl = param;
      state.teachList = [];
      state.liveList = [];
    },
    set_closeMapClick(state, val) {
      state.closeMapClick = val;
    },
  },
  actions: {
    ...leftNavsData.actions,

    setOurDataInPoput({ state, commit, dispatch }, value) {
      // 弹窗使用方法
      commit("CLEAR_ALL", null);
      commit("SET_MONITORPOPUP", false);
      commit("SET_PANORAMAPOPUP", false);
      commit("SET_STATENAME", value.item.mechanismname);
      commit("SET_PANORAMAURL", value.item.panoramaurl);
      commit("SET_INTRODUCETEXT", value.item.introduce);
      var imgArr = [];
      if (value.item.tpurl) {
        imgArr = value.item.tpurl.split(",");
      }

      imgArr = imgArr.map((item) => updateUrl(item));

      commit("SET_POPUPBGURL", imgArr[0]);
      commit("SET_POPUPIMGATLAS", imgArr);
      commit("SET_POPUPQRURL", value.item.codeurl);
      commit("SET_POINTPOSITION", [
        Number(value.lng),
        Number(value.lat),
        Number(0),
        Number(0),
        Number(-90),
        Number(0),
      ]);
      commit("SET_DETAILSPOPUP", true);
    },

    pcMoveView({ state, commit, dispatch }, val) {
      openlayerData.state.openlayers.map2D
        .getView()
        .setCenter([val.jd, val.wd]);
      openlayerData.state.openlayers.map2D
        .getView()
        .setResolution(val.resolution);
    },

    pcFlyView({ state, commit, dispatch }, val) {
      openlayerData.state.openlayers.map2D
        .getView()
        .setCenter([val.jd, val.wd]);
      openlayerData.state.openlayers.map2D
        .getView()
        .setResolution(0.00009517844023321122);
    },

    addLabelLayerIcon({ state, commit, dispatch }, val) {
      const list = val.list;
      if (val.clear) {
        //     window.labelLayer.remove();
        window.labelLayer.clear();
      }
      if (val.add) {
        // 刷新列表
        state.addSignList = !state.addSignList;
        return;
      }
      for (const i in list) {
        window.divIcononces = new global.DC.DivIcon(
          new global.DC.Position(Number(list[i].jd), Number(list[i].wd), 0),
          `
                              <div class="tag-entitys-box">
                                  <div class="tag-content">
                                      ${list[i].name}
                                  </div>
                                  <div class="tag-angle-content">
                                      <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                                  </div>
                              </div>
                          `
        );
        // 订阅事件
        window.divIcononces.on(global.DC.MouseEventType.CLICK, (e) => {
          if (state.pinchFlag == true) {
            return;
          }

          // return;
          // 定制化窗体
          // const position = e.position
          const lntLat = [e.overlay._position._lng, e.overlay._position._lat];
          var box = new global.DC.DivForms(global.viewer, {
            domId: "labelLayerid",
            position: [
              global.DC.Transform.transformWGS84ToCartesian(
                new global.DC.Position(
                  Number(lntLat[0]),
                  Number(lntLat[1]),
                  Number(0)
                )
              ),
            ],
          });
          global.viewer.camera.setView({
            // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
            // fromDegrees()方法，将经纬度和高程转换为世界坐标
            destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
              lntLat[0],
              lntLat[1],
              950.0
            ),
            orientation: {
              // 指向
              heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
              // 视角
              pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
              roll: 0.0,
            },
          });
          commit("openLabelLayer", {
            show: true,
            data: list[i],
          });
        });
        window.labelLayer.addOverlay(window.divIcononces);
      }
    },

    addLabelLayerIconMobelUse({ state, commit, dispatch }, val) {
      if (window.labelLayer) {
        window.labelLayer.getSource().clear();
      } else {
        window.labelLayer = new VectorLayer({
          // 图标图层
          zIndex: 32,
          source: new VectorSource(),
        });
        openlayerData.state.openlayers.map2D.addLayer(window.labelLayer);
      }

      // state.myviewer = val.mviewer
      if (val.clear) {
        //     window.labelLayer.remove();
        window.labelLayer.getSource().clear();
      }

      const iconFeature = new Feature({
        geometry: new Point([Number(val.data.jd), Number(val.data.wd)]),
      });

      iconFeature.setStyle(
        new Style({
          cursor: "pointer",

          image: new Icon({
            scale: 30 / 48,
            src: "/changjing/img/icon/location.png",
            // 设置图标偏移
            anchor: [24, 24],
            // X方向单位：分数
            anchorXUnits: "pixels",
            // Y方向单位：像素
            anchorYUnits: "pixels",
          }),
        })
      );

      window.labelLayer.getSource().addFeature(iconFeature);
    },

    removeLabelLayerIconMobelUse({ state, commit, dispatch }, val) {
      window.labelLayer.getSource().clear();
    },
  },
};

export default popupParams;