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 QualityOperateModal(props) {
  const {
    visible,
    onOk,
    onClose,
    currentItem,
    loading,
    depUserTree,
    dispatch,
    qualityOperate,
  } = props;
  const [form] = Form.useForm();

  const handleOk = () => {
    form.validateFields().then(({ managerID }) => {
      const [manager_id, dep_id] = managerID.split('||');
      let params = {};
      params.type = qualityOperate ? 'approval/startOperate' : 'approval/startQuality';
      params.payload = {
        project_code_id: currentItem.id,
        dep_id: Number(dep_id),
      };
      qualityOperate
        ? (params.payload.opt_manager_id = Number(manager_id))
        : (params.payload.wty_manager_id = Number(manager_id));
      dispatch({
        ...params,
        callback: () => onOk(),
      });
    });
  };

  return (
    <Modal
      title={qualityOperate ? '转运营' : '转质保'}
      confirmLoading={loading}
      maskClosable={false}
      destroyOnClose
      visible={visible}
      onCancel={onClose}
      onOk={handleOk}
    >
      <Form labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} form={form}>
        <Form.Item
          label={qualityOperate ? '运营经理' : '质保经理'}
          name="managerID"
          rules={[
            { required: true, message: qualityOperate ? '请选择运营经理' : '请选择质保经理' },
          ]}
        >
          <TreeSelect
            showSearch
            allowClear
            style={{ width: '100%' }}
            placeholder={qualityOperate ? '请选择运营经理' : '请选择质保经理'}
            multiple={false}
            filterTreeNode={(input, option) => {
              return option.props.title === input;
            }}
            treeData={depUserTree}
          ></TreeSelect>
        </Form.Item>
      </Form>
    </Modal>
  );
}
export default connect()(QualityOperateModal);