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: 5, label: '运营' },
  { value: 6, label: '质保' },
];

function MemberRender(props) {
  const {
    visible,
    onClose,
    isEdit = false,
    currentItem,
    loading,
    depUserTree,
    member: 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 (
    <>
      <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>
      {isEdit && (
        <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} />
    </>
  );
}

export default connect(({ approval, user, loading }) => ({
  currentUser: user.currentUser,
  loading: loading.models.approval,
  depUserTree: approval.depUserTree,
  member: approval.member,
}))(MemberRender);