import { Tree } from '@btri-ui/base';

import React from 'react';
const treeData = [
  {
    title: '第一层1',
    key: '1',
    level: 1,
    children: [
      {
        title: '第二层1',
        key: '1-1',
        level: 2,
        children: [
          {
            title: '第三层1',
            key: '1-1-1',
            level: 3,
          },
          {
            title: '第三层2',
            key: '1-1-2',
            level: 3,
          },
        ],
      },
      {
        title: '第二层2',
        key: '1-2',
        level: 2,
        children: [
          {
            title: '第三层1',
            key: '1-2-1',
            level: 3,
          },
          {
            title: '第三层2',
            key: '1-2-2',
            level: 3,
          },
        ],
      },
    ],
  },
  {
    title: '第一层2',
    key: '2',
    level: 1,
    children: [
      {
        title: '第二层1',
        key: '2-1',
        level: 2,
        children: [
          {
            title: '第三层1',
            key: '2-1-1',
            level: 3,
          },
          {
            title: '第三层2',
            key: '2-1-2',
            level: 3,
          },
        ],
      },
      {
        title: '第二层',
        key: '2-2',
        level: 2,
      },
    ],
  },
];
// 随机大小写字母或数字
function getRandomChar() {
  const chars =
    '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  return chars[Math.floor(Math.random() * chars.length)];
}

const App = () => {
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };
  const onTreeDataChange = (data) => {
    console.log('onTreeDataChange', data);
  };

  const deleteable = {
    show: true,
    beforeDelete: (node) => {
      return new Promise((resolve) => {
        console.log('beforeDelete', node);
        setTimeout(() => {
          resolve(true);
        }, 10);
      });
    },
    afterDelete: (node) => {
      console.log('afterDelete', node);
    },
  };
  const editable = {
    show: true,
    beforeEnterEditMode: (node) => {
      return new Promise((resolve) => {
        console.log('beforeEnterEditMode', node);
        setTimeout(() => {
          resolve(true);
        }, 10);
      });
    },
    afterEnterEditMode: (node) => {
      console.log('afterEnterEditMode', node);
    },
    beforeExitEditMode: (node) => {
      return new Promise((resolve) => {
        console.log('beforeExitEditMode', node);
        setTimeout(() => {
          resolve(true);
        }, 10);
      });
    },
    afterExitEditMode: (node) => {
      console.log('afterExitEditMode', node);
    },
  };
  const addable = {
    show: (node) => {
      return node.level < 3;
    },
    beforeAdd: (node) => {
      return new Promise((resolve) => {
        console.log('beforeAdd', node);
        setTimeout(() => {
          resolve({
            key: `${getRandomChar()}-${getRandomChar()}-${getRandomChar()}-${getRandomChar()}`,
            title: `新节点-${getRandomChar()}`,
            level: node.level + 1,
          });
        }, 10);
      });
    },
    afterAdd: (node) => {
      console.log('afterAdd', node);
    },
  };

  return (
    <Tree
      onCheck={onCheck}
      treeData={treeData}
      onTreeDataChange={onTreeDataChange}
      deleteable={deleteable}
      editable={editable}
      addable={addable}
      selectable={false}
    />
  );
};

export default App;