import React, { useState, useEffect } from 'react';
import { Form, Modal, TreeSelect, Table, Button, Input, Tabs } from 'antd';
import { connect } from 'dva';
const { TreeNode } = TreeSelect;
const { TabPane } = Tabs;

//状态
const STATUS = [
  { value: 1, label: '售前' },
  { value: 2, label: '执行' },
  { value: 4, label: '运营' },
  { value: 6, label: '质保' },
];

function MemberModal(props) {
  const { visible, onClose, currentItem, loading, depUserTree, dataSource, dispatch } = props;
  const [type, setType] = useState('1');
  const [form] = Form.useForm();
  const [currentMember, setCurrentMember] = useState({});

  const columns = [
    {
      title: '工号',
      dataIndex: 'UserName',
    },
    {
      title: '姓名',
      dataIndex: 'CName',
    },
    {
      title: '手机号码',
      dataIndex: 'Mobile',
    },
    {
      title: '操作',
      //移除按钮，此处应传入当前成员的数据
      render: member =>
        member.ID != currentItem.author &&
        member.ID != currentItem.LeaderId &&
        member.ID != currentItem.wty_manager_id &&
        member.ID != currentItem.opt_manager_id && <a onClick={() => onDelete(member)}>移除</a>,
    },
  ];

  const onDelete = item => {
    Modal.confirm({
      title: '移除成员',
      content: '是否确认从项目中移除该成员',
      okText: '移除',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'approval/deleteMember',
          payload: { project_code_id: currentItem.id, user_id: item.ID, flow_id: Number(type) },
        });
      },
    });
  };

  const handleAddMember = () => {
    form.validateFields().then(({ memberID }) => {
      dispatch({
        type: 'approval/addMember',
        payload: {
          project_code_id: currentItem.id,
          user_id: Number(memberID.split('||')[0]),
          flow_id: Number(type),
        },
        callback: () => {
          form.resetFields();
        },
      });
    });
    // form.resetFields();
  };

  const handleChange = type => {
    setType(type);
    dispatch({
      type: 'approval/queryMember',
      payload: { project_code_id: currentItem.id, flow_id: Number(type) },
    });
  };

  useEffect(() => {
    if (currentItem?.id) {
      handleChange('1');
    }
  }, [currentItem]);

  return (
    <Modal
      title="成员管理"
      confirmLoading={loading}
      maskClosable={false}
      destroyOnClose
      visible={visible}
      onCancel={() => {
        form.resetFields();
        setType('1');
        onClose();
      }}
      footer={null}
      width="70%"
    >
      <Tabs defaultActiveKey="1" activeKey={type} onChange={type => handleChange(type)}>
        {STATUS.map(
          item =>
            currentItem.flow_id >= item.value && (
              <TabPane tab={item.label} key={item.value}></TabPane>
            )
        )}
      </Tabs>
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 10 }}
        width="100%"
        style={{ marginBottom: 20 }}
        layout="inline"
        form={form}
      >
        <Form.Item
          label="添加成员"
          name="memberID"
          initialValue={null}
          rules={[{ required: true, message: '请选择成员' }]}
        >
          <TreeSelect
            showSearch
            allowClear
            style={{ width: 240 }}
            placeholder="请选择项目成员"
            multiple={false}
            treeData={depUserTree}
            filterTreeNode={(input, option) => {
              return option.props.title === input;
            }}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" loading={loading} onClick={handleAddMember}>
            添加
          </Button>
        </Form.Item>
      </Form>
      <Table columns={columns} loading={loading} dataSource={dataSource} pagination={false} />
    </Modal>
  );
}

export default connect()(MemberModal);
