import React from 'react';
import MemberItem from '../member-item';
import Empty from '../empty';
import { findMemberIndex, isIncludeMember, fillMemberChildren } from '../../utils/utils';
import './index.scss';

class UilessMemberList extends React.Component {
  onChange = async (member, role, isAdd) => {
    const { multiple, currentValue, setIndexState, isCustomData } = this.props;
    if (multiple) { // 批量提交
      const newValue = [...currentValue];
      if (isAdd) { // 勾选成员
        if (isIncludeMember(newValue, member)) return;
        if (isCustomData) {
          newValue.push(member);
        } else {
          setIndexState('stateLoading', true);
          newValue.push(await fillMemberChildren(member));
          setIndexState('stateLoading', false);
        }
      } else { // 反勾选
        newValue.splice(findMemberIndex(newValue, member), 1);
      }
      this.props.setIndexState('currentValue', newValue);
    } else { // 即刻提交
      if (isCustomData) {
        this.props.onChange([member], role.value);
        return;
      }
      this.props.onChange([await fillMemberChildren(member)], role && role.value);
    }
  }

  render() {
    const { title, data, style } = this.props;
    return (
      <div className="uiless-member-list" style={style}>
        {
          title &&
          <div className="uiless-member-list-title">
            {title}
          </div>
        }
        {
          data.length > 0 && data.map((item) => <MemberItem key={item._id} member={item} {...this.props} onChange={this.onChange} />)
        }
        {
          data.length === 0 && <Empty />
        }
      </div>
    );
  }
}

export default UilessMemberList;