import React, { useEffect }from 'react';
import styles from './index.less';
import { Tree } from 'antd';


// const treeData = [
//   {
//     title: 'LIFE用户管理',
//     key: 'A',
//     children: [
//       {title: '查看LIFE用户',key: '2'},
//       { title: '编辑LIFE用户', key: '3' },
//       { title: '添加业主档案', key: '4' },
//       {title: '注销业主档案',key: '5'},
//     ],
//   },
//   { title: '数据中心', key: '1' },
//   {
//     title: '服务商管理',
//     key: 'B',
//     children: [
//       {title: '查看服务商',key: '6'},
//       { title: '编辑服务商', key: '7' },
//       { title: '添加服务商', key: '8' },
//       {title: '注销服务商',key: '9'},
//     ],
//   },
//   {
//     title: '物业费管理',
//     key: 'C',
//     children: [
//       {title: '查看物业费记录',key: '10'},
//       { title: '添加物业费记录', key: '11' },
//     ],
//   },
//   {
//     title: '物业管理', w
//     key: 'D',
//     children: [
//       {title: '查看物业服务',key: '12'},
//       { title: '编辑物业服务', key: '13' },
//       { title: '注销物业服务', key: '14' },
//     ],
//   },
//   {
//     title: '订单管理',
//     key: 'E',
//     children: [
//       {title: '查看订单',key: '15'},
//       { title: '编辑订单', key: '16' },
//     ],
//   },
//   {
//     title: '合同管理',
//     key: 'F',
//     children: [
//       {title: '查看合同',key: '17'},
//       { title: '编辑合同', key: '18' },
//       { title: '添加合同', key: '19'},
//     ],
//   },
//   {
//     title: '小区管理',
//     key: 'G',
//     children: [
//       {title: '查看小区',key: '20'},
//       { title: '编辑小区', key: '21' },
//       { title: '添加小区', key: '22' },
//     ],
//   },
//   { title: '访客记录', key: '26' },
//   {
//     title: '预订设施',
//     key: 'H',
//     children: [
//       {title: '查看预定服务',key: '27'},
//       { title: '编辑预定服务', key: '28' },
//       { title: '添加预定服务', key: '29' },
//     ],
//   },
//   {
//     title: '后台管理',
//     key: 'I',
//     children: [
//       {title: '查看后台账号',key: '30'},
//       { title: '配置后台账号', key: '31' },
//     ],
//   },
// ];

const treeData = [
  {
    title: 'Life user management',
    key: 'A',
    children: [
      {title: 'View life users',key: '2'},
      { title: 'Edit life user', key: '3' },
      { title: 'Add owner file', key: '4' },
      {title: 'Cancellation of owner files',key: '5'},
    ],
  },
  { title: 'Data center', key: '1' },
  {
    title: 'Service provider management',
    key: 'B',
    children: [
      {title: 'View service provider',key: '6'},
      { title: 'Editorial service provider', key: '7' },
      { title: 'Add service provider', key: '8' },
      {title: 'Cancellation of service provider',key: '9'},
    ],
  },
  {
    title: 'Property management',
    key: 'C',
    children: [
      {title: 'View property fee records',key: '10'},
      { title: 'Add property fee record', key: '11' },
    ],
  },
  {
    title: 'Estate management',
    key: 'D',
    children: [
      {title: 'View property services',key: '12'},
      { title: 'Edit property services', key: '13' },
      { title: 'Cancellation of property services', key: '14' },
    ],
  },
  {
    title: 'Order management',
    key: 'E',
    children: [
      {title: 'View order',key: '15'},
      { title: 'Edit order', key: '16' },
    ],
  },
  {
    title: 'Contract management',
    key: 'F',
    children: [
      {title: 'View contract',key: '17'},
      { title: 'Edit contract', key: '18' },
      { title: 'Add contract', key: '19'},
    ],
  },
  {
    title: 'Community management',
    key: 'G',
    children: [
      {title: 'View community',key: '20'},
      { title: 'Edit community', key: '21' },
      { title: 'Add cell', key: '22' },
    ],
  },
  { title: 'Visitor record', key: '26' },
  {
    title: 'Booking facilities',
    key: 'H',
    children: [
      {title: 'View booking services',key: '27'},
      { title: 'Edit booking service', key: '28' },
      { title: 'Add booking service', key: '29' },
    ],
  },
  {
    title: 'Back-stage management',
    key: 'I',
    children: [
      {title: 'View background account',key: '30'},
      { title: 'Configure background account', key: '31' },
    ],
  },
];

const TreeAction = (props:any) => {

  const {value,onChange}=props
  const onSelect = (selectedKeys:any, info:any) => {
    // console.log('selected', selectedKeys, info);
  };
  useEffect(()=>{
    onChange([
      '2',  '3',  '4',  '5',  '1',
      '6',  '7',  '8',  '9',  '10',
      '11', '12', '13', '14', '15',
      '16', '17', '18', '19', '20',
      '21', '22', '26', '27', '28',
      '29', '30', '31'
    ])
  },[])
  const onCheck = (checkedKeys:any, info:any) => {
    const checklist = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
    var array=new Array()
    checkedKeys.map((items:any, index:any) => {
      var nothave=true
      checklist.map((check, i) => {
        if (items == check) {
          nothave=false
        }
      })
      if (nothave) {
        array.push(items)
      }
    })
    // props.onSubmit(array)
    onChange(array)
  };
  
  return (
    <>
      <Tree checkable defaultExpandedKeys={[]} defaultSelectedKeys={[]} defaultCheckedKeys={['A','B','C','D','E','F','G','H','I','1','26']}
        onSelect={onSelect}
        onCheck={onCheck}
        treeData={treeData}/>
    </>
  );

};

export default TreeAction;
