import React, { useState, useEffect } from 'react';
import { Form, Select, Modal, Input, TreeSelect } from 'antd';
import { connect } from 'dva'
const { Option } = Select;
const { TreeNode } = TreeSelect;

function ExecutionModal(props) {
  const { visible, onOk, onClose, form, currentItem, loading, depUserTree, dispatch } = props;

  const handleOk = () => {
    form.validateFields((err, {managerID, contractStatus}) => {
      if (err) return;
      const [exe_manager_id,dep_id] = managerID.split("||")
      dispatch({
        type: 'approval/startExecution',
        payload: {
          project_code_id: currentItem.id,
          with_contract: Number(contractStatus),
          dep_id: Number(dep_id),
          exe_manager_id: Number(exe_manager_id),
        },
        callback: () => onOk(),
      })
    });
  };

  const onChangeManager = (id,e) => {
    console.log(id)
  }

  const renderUserSelectTreeNodes = data => {
    return data.map(item => {
      if (item.children) {
        return (
          <TreeNode
            title={item.title}
            key={item.key}
            value={item.manage || item.value}
            dataRef={item}
            selectable={item.selectable}
          >
            {renderUserSelectTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return (
        <TreeNode
          title={item.title}
          key={item.ID}
          value={item.manage || item.value}
          selectable={item.selectable}
        />
      );
    });
  };

  return (
    <Modal
      title="转执行"
      confirmLoading={loading}
      maskClosable={false}
      destroyOnClose
      visible={visible}
      onCancel={onClose}
      onOk={handleOk}
    >
      <Form labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}>
        <Form.Item label="项目经理">
          {form.getFieldDecorator('managerID', {
            rules: [
              {
                required: true,
                message: '请选择项目经理',
              },
            ],
          })(
            <TreeSelect
              showSearch
              allowClear
              style={{ width: '100%' }}
              placeholder="请选择项目经理"
              multiple={false}
              filterTreeNode={(input, option) => {
                return option.props.title === input;
              }}
              onChange={onChangeManager}
            >
              {renderUserSelectTreeNodes(depUserTree)}
            </TreeSelect>
          )}
        </Form.Item>

        <Form.Item label="合同状态">
          {form.getFieldDecorator('contractStatus', {
            rules: [{ required: true, message: '请选择合同状态' }],
          })(
            <Select style={{ width: '100%' }}>
              <Option key={0}>无合同</Option>
              <Option key={1}>有合同</Option>
            </Select>
          )}
        </Form.Item>
      </Form>
    </Modal>
  );
}
export default connect()(Form.create()(ExecutionModal));