import { getMarkerList, updateInfo } from '@/views/largeScreen/components/api';
import { initMapData } from './initMapData';
import { useTreeNode } from './treeNode';
import app from '@/main';
export const useTree = () => {
  const rightMenuRef: any = ref(); //右键菜单的实例
  const { cusNodeIcon, getSelectedNodes, cusSelectNode, nodeType } = useTreeNode();
  const urlParams = new URLSearchParams(new URL(window.location.href).search);
  const projectIdTwo = urlParams.get('projectId');
  const treeObj = ref(); //树形的实例
  // 树的数据
  const zNodes = ref([
    {
      id: 1,
      parentId: 0,
      sourceName: '111',
      isShow: true,
      sourceType: 'directory',
      params: ''
    }
  ]);
  const nodes: any = ref([]);
  /**
   * 显示、定位右键菜单组件并返回菜单数组
   */
  const showRightMenu = (event: any, treeObj: any) => {
    const selectedNodes = getSelectedNodes(treeObj);
    let arr: any = [];
    // 右键菜单的宽高
    const rightMenuHeight = window.getComputedStyle(window['$']('#rMenu')[0]).getPropertyValue('height');
    const rightMenuWidth = window.getComputedStyle(window['$']('#rMenu')[0]).getPropertyValue('width');
    const getNumber = (string: any) => {
      return Number(string.replace('px', ''));
    };
    console.log('event', event);
    console.log('右键菜单的宽高');
    console.log(getNumber(rightMenuHeight));
    console.log(getNumber(rightMenuWidth));
    let x = Math.abs(event.clientX - window['$']('.treeBox')[0].getBoundingClientRect().left);
    let y = Math.abs(event.clientY - window['$']('.treeBox')[0].getBoundingClientRect().top);
    y += document.body.scrollTop + 20;
    x += document.body.scrollLeft + 40;
    const bodyWidth = window['$']('body')?.width() || 0;
    const bodyHeight = window['$']('body')?.height() || 0;
    if (event.screenX + getNumber(rightMenuWidth) + 40 > bodyWidth) {
      x = bodyWidth - getNumber(rightMenuWidth) - window['$']('.treeBox')[0].getBoundingClientRect().left;
    }
    if (event.screenY + getNumber(rightMenuHeight) + 20 > bodyHeight) {
      y = (bodyHeight - window['$']('.treeBox')[0].getBoundingClientRect().top) / 2;
    }
    window['$']('#rMenu').css({
      top: y + 'px',
      left: x + 'px',
      visibility: 'visible'
    });
    console.log('selectedNodes', selectedNodes);
    if (Object.prototype.toString.call(selectedNodes) === '[object Array]' && selectedNodes.length > 1) {
      arr = ['del'];
    } else {
      if (selectedNodes.length == 0) arr = ['addDirectory'];
      else {
        try {
          arr = nodeType[selectedNodes[0].sourceType].rightMenus;
        } catch (e) {
          console.log('e', e);
          arr = [];
        }
      }
    }
    return arr;
  };
  /**
   * 用于捕获zTree上鼠标按键按下后的事件回调函数
   * @param event
   * @param treeId
   * @param treeNode
   */
  const onMouseDown = (event: MouseEvent, treeId: string, treeNode: any) => {
    const isShift = event.shiftKey;
    const isCtrl = event.ctrlKey;
    if ((!isShift && !isCtrl) || !treeNode) {
      nodes.value = [];
    }
    if (treeNode) {
      //判断是否是图层文件
      if (isCtrl) {
        const isSelected = window['treeObj'].getSelectedNodes().some((node: any) => node.id === treeNode.id);
        if (isSelected) {
          // 如果节点已选中，则取消选中
          nodes.value = nodes.value.filter((node: any) => node.id !== treeNode.id);
        } else {
          // 如果节点未选中，则添加到选中列表
          nodes.value.push(treeNode);
        }
      }
    } else {
      window['treeObj'].cancelSelectedNode();
      window['$']('#rMenu')[0].style.visibility = 'hidden';
    }
  };
  /**
   * 树形节点右键点击
   * @param event 事件对象
   * @param treeId 树形结构id
   * @param treeNode 鼠标右键点击时所在节点的 JSON 数据对象
   */
  const onRightClick = (event: MouseEvent, treeId: string, treeNode: any) => {
    event.preventDefault();
    console.log('treeObj', treeObj);
    const selectNodes = getSelectedNodes(treeObj.value);
    let isnewSelect = true; //是否为新选中
    selectNodes.forEach((item: any) => {
      if (treeNode && item.id == treeNode.id) isnewSelect = false;
    });
    if (!event.ctrlKey && (selectNodes.length < 2 || isnewSelect)) cusSelectNode(treeObj.value, treeNode);
    const menus = showRightMenu(event, treeObj.value);
    console.log('menus', menus);
    // if (menus.length == 0) {
    //   return;
    // }
    nextTick(() => {
      rightMenuRef.value.initMenus(menus, treeNode);
    });
  };
  /**
   * 捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
   * @param event
   * @param treeId
   * @param treeNode
   */
  const onCheck = async (event: any, treeId: any, treeNode: any) => {
    console.log(treeNode, 'treeNode');
    const parentNode = treeNode.getParentNode();

    let params = treeNode.params;
    if (typeof treeNode.params === 'string') {
      params = JSON.parse(treeNode.params);
    }
    let entityObject;
    if (treeNode.sourceType == 'pressModel') {
      // const params = JSON.parse(treeNode.params);
      const id = treeNode.id + '_' + params.modelId;
      const data = (window as any).pressModelMap.get(id);
      data.isShow = treeNode.isShow;
      entityObject = (window as any).pressModelEntities.get(treeNode.id);

      if (!entityObject && treeNode.isShow) {
        const entity = window['Earth1'].entityMap.get(params.modelId).entity;
        entityObject = new window['YJ'].Analysis.Flat(window['Earth1'], entity, {
          positions: params.positions,
          height: params.height,
          name: treeNode.sourceName
        })(window as any).pressModelEntities.set(treeNode.id, entityObject);
      }
    } else {
      entityObject = window['Earth1'].entityMap.get(treeNode.id);
    }
    if (entityObject) {
      entityObject.show = treeNode.isShow;
    } else {
      // 需要深拷贝
      const params = JSON.parse(treeNode.params);
      const params2 = JSON.stringify(params);
      initMapData(treeNode.sourceType, JSON.parse(params2), treeNode.id).then((res) => {
        entityObject = window['Earth1'].entityMap.get(res.id);
        entityObject.show = treeNode.isShow;
      });
    }
    // entityObject.show = treeNode.isShow;
    treeNode.sourceType != 'pressModel' && (params.show = treeNode.isShow);
    const params2 = {
      'id': treeNode.id,
      params: params,
      'isShow': treeNode.isShow ? 1 : 0
    };
    updateInfo(params2).then((res) => {
      if (res.code == 200) app.config.globalProperties.$message.success('操作成功');
    });

    // 如果当前节点有父节点，检查所有子节点状态
    if (parentNode) {
      checkChildNodes(parentNode);
    }

    // 检查子节点状态，更新父节点
    function checkChildNodes(parentNode) {
      const children = parentNode.children;
      if (!children || children.length === 0) return;

      // 检查是否所有子节点都未被选中
      let allUnchecked = true;
      for (let i = 0; i < children.length; i++) {
        const childNode = children[i];
        // 如果有任何一个子节点被选中，则父节点不应被取消
        if (childNode.isShow) {
          allUnchecked = false;
          break;
        }
      }

      // 如果所有子节点都未被选中，且父节点当前是选中状态，则取消父节点选择
      if (allUnchecked && parentNode.isShow) {
        window['treeObj'].checkNode(parentNode, false, true);

        // 递归检查上一级父节点
        const grandParent = parentNode.getParentNode();
        if (grandParent) {
          checkChildNodes(grandParent);
        }
      }
    }
  };
  /**
   * 树形节点左键双击
   * @param event 事件对象
   * @param treeId 树形结构id
   * @param treeNode 鼠标右键点击时所在节点的 JSON 数据对象
   */
  const onDblClick = (event: MouseEvent, treeId: string, treeNode: any) => {
    console.log('treeNode', treeNode);
    if (treeNode.params && typeof treeNode.params === 'string') {
      treeNode.params = JSON.parse(treeNode.params);
    }

    let entityObject;
    if (treeNode.sourceType == 'pressModel') {
      entityObject = (window as any).pressModelEntities.get(treeNode.id);
    } else if (treeNode.sourceType === 'roam') {
      app.config.globalProperties.$message.warning('单击鼠标右键可结束当前漫游');
      window['YJ'].Global.FlyRoam.flyTo(window['Earth1'], treeNode.params.points);
      return;
    } else {
      entityObject = window['Earth1'].entityMap.get(treeNode.id);
    }
    console.log('entityObject', entityObject);
    entityObject.flyTo();
  };
  //树的配置项
  const setting = {
    edit: {
      enable: true,
      showRemoveBtn: false,
      showRenameBtn: false,
      drag: {
        isMove: true,
        isCopy: false
      }
    },
    check: {
      enable: true,
      nocheckInherit: false,
      chkboxType: { Y: 'ps', N: 's' }
    },
    view: {
      selectedMulti: true
      // autoCancelSelected: true
    },
    data: {
      key: {
        //zdatas数据中表示节点name的属性key
        name: 'sourceName',
        checked: 'isShow'
      },
      simpleData: {
        enable: true,
        idKey: 'id',
        pIdKey: 'parentId',
        nameKey: 'sourceName'
      }
    },
    callback: {
      onMouseDown: onMouseDown,
      onRightClick: onRightClick,
      // onClick: onClick,
      // onDrop: onDrop,
      // beforeDrop: beforeDrop,
      onCheck: onCheck,
      onDblClick: onDblClick
    }
  };

  const initTreeCallBack = () => {
    const arr = ['ArcgisWXImagery', 'ArcgisBLUEImagery', 'ArcgisLWImagery', 'GDLWImagery', 'GDWXImagery', 'GDSLImagery', 'layer'];
    const layers: any = [];
    console.log("window['Earth1']", window['Earth1']);
    if (window['Earth1']) {
      for (let i = 0; i < zNodes.value.length; i++) {
        if (zNodes.value[i].sourceType === 'directory') {
          continue;
        }
        const params = JSON.parse(zNodes.value[i].params || '{}');
        const detail = JSON.parse(zNodes.value[i]['detail'] || '{}');
        if (!params.id) {
          params.id = zNodes.value[i].id;
        }
        if (!params.name) {
          params.name = zNodes.value[i].sourceName;
        }
        if (arr.includes(zNodes.value[i].sourceType)) {
          layers.push({
            sourceType: zNodes.value[i].sourceType,
            params: { ...detail, ...params }
          });
        } else {
          if (zNodes.value[i].isShow) initMapData(zNodes.value[i].sourceType, { ...detail, ...params }, null);
        }
      }
      layers.sort((obj1, obj2) => {
        return obj1.params.layerIndex - obj2.params.layerIndex;
      });
      console.log(layers, 'layers');
      for (let i = 0; i < layers.length; i++) {
        // if (layers[i].sourceType == null) layers[i].sourceType = 'tileset';
        initMapData(layers[i].sourceType, layers[i].params, null);
      }
    }
  };
  const initTree = async (selector: string = '#treeDemo') => {
    const res = await getMarkerList();
    if (res.code == 200) {
      res.data.sort((a: any, b: any) => {
        if (a.treeIndex && b.treeIndex) {
          return a.treeIndex - b.treeIndex;
        }
        if (a.treeIndex) {
          return -1;
        }
        if (b.treeIndex) {
          return 1;
        }
        return 0;
      });
      for (let i = res.data.length - 1; i >= 0; i--) {
        res.data[i].icon = await cusNodeIcon(res.data[i]);
        res.data[i].class = 'xxxx';
        res.data[i].className = 'xxxx';
      }
      zNodes.value = [...res.data];
      // console.log('getMarkerList·res', zNodes.value);
      // 初始化树
      treeObj.value = window['$'].fn.zTree.init(window['$'](selector), setting, zNodes.value);
      window['treeObj'] = treeObj.value;
      initTreeCallBack();
    }

  };
  return {
    initTree,
    setting,
    rightMenuRef
  };
};