import React, { useState, useCallback, useEffect } from "react";
import { Card, Row, Col, Radio, Spin, Layout, Button } from "@ttk/component";
import { Tree } from "antd";
import { useActions, useData, useCommit } from "@ttk/app-loader";
export default function TabsPage(props) {
  const commit = useCommit();
  const actions = useActions(props);
  const treeData = useData([props, "treeData"]).toJS();
  const onLoadData = async (treeNode) => {
    const children = treeNode.props.dataRef.children;
    if (children !== undefined && children && children.length > 0) return;
    return await actions.getTreeChildrenData(treeNode.props.dataRef);
  };
  const renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <Tree.TreeNode
            title={item.name}
            key={item.functioinId}
            isLeaf={item.subNodeFlag === "0"}
            dataRef={item}
          >
            {renderTreeNodes(item.children)}
          </Tree.TreeNode>
        );
      }
      return (
        <Tree.TreeNode
          title={item.name}
          key={item.functioinId}
          isLeaf={item.subNodeFlag === "0"}
          dataRef={item}
        />
      );
    });
  };
  function close() {
    commit([props, "showModal"], { type: "showYyqx", data: false });
  }
  return (
    <Card className="ttk-card-form" bordered={false}>
      <Spin spinning={false} delay={50}>
        <Layout className="content">
          <Card
            bordered={true}
            style={{ marginBottom: 10 }}
            title="菜单树权限"
            size="small"
          >
            {treeData && (
              <Tree
                defaultExpandParent={true}
                isLeaf={false}
                defaultExpandedKeys={["0", "1"]}
                loadData={onLoadData}
              >
                {renderTreeNodes(treeData)}
              </Tree>
            )}
          </Card>
          <Row>
            <Col
              className="form-footer"
              span={24}
              style={{ textAlign: "center" }}
            >
              <Button onClick={close} style={{ marginRight: 8 }}>
                取消
              </Button>
              <Button type="primary" _visible="true" onClick={close}>
                确定
              </Button>
            </Col>
          </Row>
        </Layout>
      </Spin>
    </Card>
  );
}
