import React, { useState, useEffect } from 'react';
import { Modal, Tree, Row, Col, Checkbox } from 'antd';
import Enumerable from 'linq';

const MenuForm = (props) => {
  const [load, setLoad] = useState();
  const [checkedKeys, setCheckedKeys] = useState();
  const [indeterminate, setindeterminate] = useState(false);
  const [checkAll,setcheckAll] =  useState(false);
  useEffect(async () => {
    var arr = [];
    var filteredArr=[]
    Enumerable.from(props.values).forEach(t => {
      if(!t.isParentMenu){
        arr.push(t.id);
      }
      if(t.id !== null && typeof t.id !== "undefined"){
        filteredArr.push(t);
      }
    });
    setCheckedKeys(arr)
    var data =props.treeData;
    console.log("props.values",props.values)
    console.log("data",data)
    console.log("filteredArr",filteredArr)
    if(getTreeLength(data)===filteredArr.length){
      setcheckAll(true)
      setindeterminate(false);
    }else{
      setcheckAll(false);
      if(props.values.length==0){
        setindeterminate(false);
      }else{
        setindeterminate(true);
      }
      
    }
    setLoad(data);
  }, [props.modalVisible])
  function getTreeLength(tree) {
    let length = tree.length; // 初始化计算器为根节点的子节点数量
    
    for (let i = 0; i < tree.length; i++) {
        if (Array.isArray(tree[i].children)) { // 如果当前节点有子节点
            length += getTreeLength(tree[i].children); // 将子节点的长度加到计算器上
        }
    }
    
    return length;
}
  const onCheckAllChange = (e) => {
    if(!checkAll){
      var data=getAllIds(load,[]);
      setCheckedKeys(data)
      setcheckAll(true)
      setindeterminate(false);
    }else{
      setCheckedKeys([])
      setcheckAll(false)
      setindeterminate(false);
    }
   
  };

  function getAllIds(tree, result) {
    console.log(tree)
    //遍历树  获取id数组
    for (const i in tree) {
      result.push(tree[i].key); // 遍历项目满足条件后的操作
      if (tree[i].children) {
        //存在子节点就递归
        getAllIds(tree[i].children, result);
      }
    }
    return result;
  }
  var html = <Modal width={700}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title={'菜单分配'}
    okText="保存"
    cancelText="取消"
    visible={props.modalVisible}
    onOk={() => props.onSubmit(checkedKeys)}
    onCancel={() => props.onCancel()}
    maskClosable={false}>
    <Row>
      <Col span={12}>
      <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
        全选
      </Checkbox>
        <Tree treeData={load}
         onCheck={(keys, e) => {  
          if(getTreeLength(props.treeData)==keys.length){
            setcheckAll(true)
            setindeterminate(false);
          }else{
            setcheckAll(false)
            setindeterminate(true);
          }
            setCheckedKeys(keys) ;
         }}
         defaultExpandAll={false}
         checkedKeys={checkedKeys}
         checkable />
      </Col>
      {/* <Col span={12}>
        <div>
          已选菜单
          </div>
          {props.values == undefined ? '' : lbl()}
      </Col> */}

    </Row>
  </Modal>
  return html
};

export default MenuForm;
