import React, { useState, useEffect } from 'react';
import { Modal, Tree, Row, Col, List,Tag } from 'antd';
import api from './service';
import Enumerable from 'linq';

const MenuForm = (props) => {
  const [load, setLoad] = useState();
  const [selectedRowsState, setSelectedRows] = useState();
  const [checkedKeys, setCheckedKeys] = useState();
  useEffect(async () => {
    var arr = [];
    Enumerable.from(props.values).forEach(t => {
      arr.push(t.id);
    });
    setCheckedKeys(arr)
    var ret = await api.SelectTree();
    var data = Enumerable.from(ret.data).toArray();
    setLoad(data);
  }, [props.modalVisible])

  const lbl = () => {
    var arr = [];
    Enumerable.from(props.values).forEach(t => {
      arr.push(<Tag style={{ width: 68, margin: 'Center' }} color="processing">{t.name}</Tag>);
    });
    return arr;
  }

  var html = <Modal width={700}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title={'菜单分配'}
    visible={props.modalVisible}
    onOk={() => props.onSubmit(checkedKeys)}
    onCancel={() => props.onCancel()}
    maskClosable={false}>
    <Row>
      <Col span={12}>
        <Tree treeData={load}
         onCheck={(keys, e) => { setCheckedKeys(keys) }}
         defaultExpandAll={true}
         checkedKeys={checkedKeys}
         checkable />
      </Col>
      <Col span={12}>
        <div>
          已选菜单
          </div>
          {props.values == undefined ? '' : lbl()}
      </Col>

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

export default MenuForm;
