import React, { useEffect, useState } from 'react';
import { GetRoleUser } from '@/services/workflow/workflow';
import { Modal, Checkbox, notification, Empty, Divider } from 'antd';
const Undertaker = props => {
  const { onSubumit, handleCancel, visible, chooseUser } = props;
  const [checkedList, setCheckedList] = useState([]); // 选中的数据
  const [plainOptions, setPlainOptions] = useState([]); // 默认的的数据
  const [indeterminate, setIndeterminate] = useState(false); // 全选框的有选择但是没有全选的样式
  const [checkAll, setCheckAll] = useState(false); // 全选框全选样式
  const CheckboxGroup = Checkbox.Group;
  useEffect(() => {
    if (visible) {
      getData();
    } else {
      setCheckedList([]);
      setPlainOptions([]);
      setCheckAll(false);
      setIndeterminate(false);
    }
  }, [visible]);
  useEffect(() => {
    // 选中列表回显
    if (chooseUser && plainOptions.length > 0) {
      onChange(chooseUser.defaultUserId);
    }
  }, [plainOptions]);

  // 获取可选默认承办人数据
  const getData = () => {
    GetRoleUser({
      pageIndex: 1,
      pageSize: 1,
      roleId: chooseUser.roleId,
      Type: Number(chooseUser.type),
    }).then(res => {
      if (res.code === 0) {
        let data = res.data.data[0].userList.map(item => ({ value: item.id, label: item.name }));
        setPlainOptions(data);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };
  // 保存选择默认承办人
  const onSave = () => {
    let userName = [];
    let mapList = new Map();
    plainOptions.forEach(item => {
      mapList.set(item.value, item.label);
    });
    checkedList.forEach(item => {
      if (mapList.has(item)) {
        userName.push(mapList.get(item));
      }
    });
    onSubumit(userName.join(','), checkedList);
  };
  // 复选框全选监听
  const onCheckAllChange = e => {
    let allOptions = plainOptions.map(item => item.value);
    setCheckedList(e.target.checked ? allOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };
  // 复选框监听事件
  const onChange = list => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };
  return (
    <div>
      <Modal
        title="选择默认承办人"
        visible={visible}
        onOk={onSave}
        width={400}
        onCancel={handleCancel}
        maskClosable={false}
        destroyOnClose
      >
        <div>
          <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
            <span style={{ fontWeight: 700 }}>用户列表</span>
          </Checkbox>
          <Divider style={{ margin: '10px 0' }} />
          <div style={{ height: '380px', overflowY: 'scroll' }}>
            {plainOptions.length > 0 ? (
              <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="未有查找到用户" />
            )}
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default Undertaker;
