import React, { useState, useEffect } from 'react';
import { Tree, Popconfirm, message } from 'antd';
import { user } from '@pms/console';
import { MinusCircleOutlined } from '@ant-design/icons';
import AddPositionModal from '../AddPositionModal';
import { getTree, del } from '@/services/position';

//循環(huán)
const loop = (data, key, callback) => {
  data.forEach((item, index, arr) => {
    if (item.positionId === key) {
      return callback(item, index, arr);
    }
    if (item.childNode.length > 0) {
      return loop(item.childNode, key, callback);
    }
  });
};

// 判斷被移動的節(jié)點與目標節(jié)點的父節(jié)點是否一致，不可跨父節(jié)點移動
const isDescendant = (node, target, dropPosition?) => {
  console.log('node?.parentId !== target?.parentId', node?.pos, target, dropPosition);
  if ((node.childNode || []).length > 0 && node.expanded && dropPosition === 0) {
    console.log(123132);
    if (node?.pos === '0-0') return true;
    if (node?.parentId !== target?.parentId) return true;
    return false;
  }
};

const DragTree = (props) => {
  const [treeData, setTreeData] = useState([]);
  const [selectedTreeKeys, setSelectTreeKeys] = useState(''); // 設(shè)置選中樹節(jié)點

  const getTreeData = async () => {
    const res = await getTree({});
    if (res?.success) {
      setTreeData(res?.data);
      setSelectTreeKeys(res?.data?.[0]?.childNode?.[0]?.childNode?.[0]?.positionId);
    }
  };

  //刪除
  const handleDel = (nodeData) => {
    del({
      id: nodeData?.id,
    }).then((res) => {
      if (res.success) {
        message.success(`刪除成功`);
        getTreeData();
      } else {
        message.warning(res.errorMsg);
      }
    });
  };

  useEffect(() => {
    getTreeData();
  }, []);

  //點擊拖拽
  const onDrop = (info) => {
    const dragKey = info.dragNode.key; //被拖拽節(jié)點的key
    const dropKey = info.node.key; //被拖拽節(jié)點要移動到的目標key
    const dropPos = info.node.pos.split('-');
    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); //被拖拽節(jié)點要移動到的目標index(子節(jié)點第一個index從0開始)
    const data = [...treeData];

    const isSameLevel = (a, b) => {
      const aLevel = a.props.pos.split('-').length;
      const bLevel = b.props.pos.split('-').length;
      console.log('isSameLevel',aLevel,bLevel)
      return aLevel === bLevel;
    };

    const isSameParent = (a, b) => {
      const aLevel = a.props.pos.split('-');
      const bLevel = b.props.pos.split('-');
      console.log('isSameParent',aLevel,bLevel)
      aLevel.pop();
      bLevel.pop();
      return aLevel.join('') === bLevel.join('');
    };

    const isDropToFirst = (a, b) => {
      const aLevel = a.props.pos.split('-');
      const bLevel = b.props.pos.split('-');
      console.log('isDropToFirst',aLevel,bLevel)
      aLevel.pop();
      return aLevel.join('') === bLevel.join('');
    };

    const dragNode = info.dragNode;
    const dropNode = info.node;
    const canDrop = (isDropToFirst(dragNode, dropNode) || (isSameParent(dragNode, dropNode) && isSameLevel(dragNode, dropNode))&&info.dropToGap) ;
    if (!canDrop) {
      return;
    }

    let dragObj; //拿到被拖拽的節(jié)點數(shù)據(jù)
    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1); //將被拖拽的節(jié)點從data中刪除
      dragObj = item;
    });

    if (!info.dropToGap) {
      loop(data, dropKey, (item) => {
        item.childNode = item.childNode || [];
        // 將被拖拽的節(jié)點插入到目標節(jié)點上面
        item.childNode.unshift(dragObj);
      });
    } else {
      let ar; //拿到拖拽完成后的數(shù)據(jù)結(jié)構(gòu)
      let i; //拿到被拖拽節(jié)點的index
      loop(data, dropKey, (item, index, arr) => {
        ar = arr;
        i = index;
      });
      if (dropPosition === -1) {
        ar.splice(i!, 0, dragObj!);
      } else {
        ar?.splice(i! + 1, 0, dragObj!);
      }
    }
    //修改tree的數(shù)據(jù)
    setTreeData(data);
  };

  //節(jié)點
  const TitleNode = (props) => {
    const { nodeData } = props;
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          width: '150px',
          alignItems: 'center',
        }}
        onClick={() => {
          if (nodeData?.childNode?.length > 0) return; //父級節(jié)點不可選中
          setSelectTreeKeys(nodeData?.positionId);
        }}
      >
        <span>{nodeData?.positionName}</span>
      </div>
    );
  };

  return (
    treeData?.length > 0 && (
      <Tree
        selectedKeys={selectedTreeKeys ? [selectedTreeKeys] : []}
        defaultExpandAll
        draggable
        blockNode
        onDrop={onDrop}
        treeData={treeData}
        fieldNames={{
          title: 'positionName',
          key: 'positionId',
          children: 'childNode',
        }}
        titleRender={(nodeData: any) => <TitleNode nodeData={nodeData} />}
      />
    )
  );
};

export default DragTree;