import React from "react";
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
import { Button, Card, Row, Col, Tree, Tooltip, Popconfirm, Spin } from "antd";
import Page from "@/components/Page";
import { getSysOrg, deleteSysOrg } from "@/service/sysorg";
import { arr2Tree } from "@/utils/array";
import useBool from "@/utils/hooks/useBool";
import Form from "./components/Form";

import styles from "./styles.module.less";

export default (props) => {
  const [loading, startLoading, stopLoading] = useBool();
  const [list, setList] = React.useState([]);
  const [current, setCurrernt] = React.useState({});
  const [parentId, setParentId] = React.useState();

  const [parentList, treeData] = React.useMemo(() => {
    const plist = [{ orgId: "-1", name: "根节点" }].concat(list);
    const [tree] = arr2Tree(
      (list || []).map((x) => ({
        title: x.name,
        key: x.orgId,
        parentId: x.parentId,
        raw: x,
      }))
    );
    return [plist, tree];
  }, [list]);

  const changeCurrent = (org) => {
    setCurrernt(org);
    setParentId(org?.orgPId || "-1");
  };

  const onSelect = (selectedKeys, e) => {
    changeCurrent(e.node.raw);
  };

  const onClick = (org) => {
    changeCurrent(org);
  };

  const onAdd = (parent = "-1") => {
    console.log(111)
    const a={}
    setParentId(parent);
    setCurrernt(a);
  };

  const onDelete = (org) => {
    deleteSysOrg(org.orgId).then(() => {
      queryList();
      // setList(list.filter((x) => x.orgId !== org.orgId));
    });
  };

  const queryList = React.useCallback(() => {
    startLoading();
    getSysOrg({ pageSize: 500 }).then((res) => {
      setList(res.records || []);
      stopLoading();
      // changeCurrent();
      // const list = [];
    });
  }, []);

  const onFormChange = () => {
    // 重新查一次数据
    queryList();
  };

  React.useEffect(() => {
    queryList();
  }, []);

  return (
    <Page>
      <Row gutter={24}    className={styles.treeRow}>
        <Col span={8} style={{ overflow: "hidden" }}>
          <Card
         
            title="单位"
            onSelect={onSelect}
            extra={
              <Button type="link" onClick={() => onAdd()}>
                新增
              </Button>
            }
          >
            <Spin spinning={loading}>
              <Tree
                height="100%"
                blockNode
                defaultExpandParent={true}
                treeData={treeData}
                // onSelect={onSelect}
                titleRender={(node) => (
                  <div
                    style={{ display: "flex" }}
                    onClick={(e) => e.stopPropagation()}
                  >
                    <div
                      style={{
                        lineHeight: "32px",
                        flex: 1,
                        width: 0,
                      }}
                      onClick={() => onClick(node.raw)}
                    >
                      <div
                        style={{
                          overflow: "hidden",
                          whiteSpace: "nowrap",
                          textOverflow: "ellipsis",
                        }}
                      >
                        {node.title}
                      </div>
                    </div>
                    <div style={{ width: "80px", flex: "none" }}>
                      <Tooltip title="新增子节点">
                        <Button
                          type="link"
                          icon={<PlusOutlined />}
                          onClick={() => onAdd(node.raw.orgId)}
                        ></Button>
                      </Tooltip>
                      <Tooltip title="删除节点">
                        <Popconfirm
                          title="确认进行删除操作?"
                          onConfirm={() => onDelete(node.raw)}
                        >
                          <Button
                            type="link"
                            danger
                            icon={<DeleteOutlined />}
                          ></Button>
                        </Popconfirm>
                      </Tooltip>
                    </div>
                  </div>
                )}
              />
            </Spin>
          </Card>
        </Col>
        <Col span={16}>
          {parentId && (
            <Card>
              <Form
                org={current}
                parentId={parentId}
                list={parentList}
                onChange={onFormChange}
              />
            </Card>
          )}
        </Col>
      </Row>
    </Page>
  );
};
