import { Store } from "antd/es/form/interface";
import "./org_chart.less";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import { orgData } from "./org_config";
import PoverDetail from "./poverDetail";
const OrgChartSelf = (props: Store) => {
  const { depStore } = props;
  const [detail, setDetail] = useState(false);
  useEffect(() => {
    depStore.getOrg().then((res) => {
      // setOrgData(res.data.record)
      // setOrgData(orgData);
    });
  }, [depStore]);

  const getArrayDepth = (arr) => {
    let maxDepth = 0;
    let maxUser = 0;
    function dfs(currentArr, currentDepth) {
      currentDepth++;
      for (let i = 0; i < currentArr.length; i++) {
        if (Array.isArray(currentArr[i].children)) {
          dfs(currentArr[i].children, currentDepth);
        } else {
          maxUser = Math.max(maxUser, currentArr[i].users.length);
          maxDepth = Math.max(maxDepth, currentDepth);
        }
      }
    }
    dfs(arr, 0);
    return maxUser;
  };

  // 示例代码
  // const arr = [[1, 2, [3, 4]], [[5], 6], 7];
  // console.log(getArrayDepth(arr));  // 输出: 3

  const dc = (v) => {
    let max = getArrayDepth(orgData);
    if (v.depId === 1) {
      return 70 * max - 40;
    }
    if (v.children.length > 0) {
      return v.children?.length * 70 - 40;
    }
  };
  const lf = (v) => {
    let max = getArrayDepth(orgData);
    if (v.depId === 1) {
      return -30 * max + 20;
    }
    if (v.children?.length > 0) {
      return -30 * v.children?.length + 10;
    }
  };
  const renderTree = (list: Array<any>) => {
    return (
      <>
        {detail ? (
          <div style={{height:"600px",overflowX:"auto",color:"#fff"}} onClick={() => {
            setDetail(false)
          }}>
            <PoverDetail />
          </div>
        ) : (
          <div className="orgsBox">
            {list?.map((v, _) => {
              if (v.children) {
                return (
                  <div key={v.dep_name} className="orgs">
                    {v.depId !== 2 ? (
                      <span
                        style={{
                          display: "inline-block",
                          width: "20px",
                          marginLeft: 15,
                          color: "#fff",
                        }}
                      >
                        {v.dep_name}
                      </span>
                    ) : null}
                    {v.depId === 1 ? (
                      <div className="userNameCont">
                        {v.users?.map((v1, _) => {
                          console.log(v1);
                          return (
                            <div key={v1.user_name} className="userNmaeBox">
                              <img
                                height={60}
                                style={{
                                  border: "1px solid #fff",
                                  backgroundColor: "#fff",
                                }}
                                width={50}
                                src={v1.headImg} 
                                alt=""
                              />
                              <span className="userNmae">{v1.user_name}</span>
                            </div>
                          );
                        })}
                      </div>
                    ) : (
                      v.users?.map((v1, _) => {
                        return (
                          <div key={v1.user_name} className="userNmaeBox">
                            <img
                              height={60}
                              style={{
                                border: "1px solid #fff",
                                backgroundColor: "#fff",
                              }}
                              width={50}
                              src="https://pic.aigexing.net/uploads/5/1253/3721116011/92968290915/8785297.jpg"
                              alt=""
                            />
                            <span className="userNmae">{v1.user_name}</span>
                          </div>
                        );
                      })
                    )}
                    {v.depId !== 2 ? (
                      <div className="lineBox" style={{ width: 80 }}>
                        <div className={"linLeft" + v.depId}></div>
                        <div
                          className={"linRight linRight" + v.depId}
                          style={{ width: dc(v), right: lf(v) }}
                        ></div>
                      </div>
                    ) : null}
                    {renderTree(v.children)}
                  </div>
                );
              }
              return (
                <div
                  className="userNameCont node"
                  key={v.dep_name}
                  style={{ paddingLeft: 20, display: "flex" }}
                >
                  {v.users?.map((v1, _) => {
                    return (
                      <div
                        key={v1.user_name}
                        className="userNmaeBox"
                        onClick={() => {
                          setDetail(true);
                        }}
                      >
                        <img
                          height={60}
                          style={{
                            border: "1px solid #fff",
                            backgroundColor: "#fff",
                          }}
                          width={50}
                          src="https://pic.aigexing.net/uploads/5/1253/3721116011/92968290915/8785297.jpg"
                          alt=""
                        />
                        <span className="userNmae">{v1.user_name}</span>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
        )}
      </>
    );
  };
  return <div className="org_sc">{renderTree(orgData)}</div>;
};

// export default OrgChartSelf;
export default inject("depStore")(observer(OrgChartSelf));
