import React, { useMemo } from 'react';
import Icon from '../../Icon/index';

import '../g.scss';

function EventList(props: IEventLists) {
  const { list, change } = props;
  return (
    <div className="zl-ls-event-lists">
      {list?.map((item, index) => {
        return (
          <div
            className="zl-ls-event-list"
            onClick={() => {
              change?.( 'eventClick',item?.key,index);
            }}
          >
            <Icon name={`icon-${item?.type}`} style={{ marginRight: '4px' }} />
            <span className="zl-ls-event-list-index">事件{index + 1}:</span>
            <span className="zl-ls-event-list-title">{item?.title}</span>
            <span
              onClick={(e) => {
                e.stopPropagation();
                change?.(index, 'eventDel');
              }}
            >
              <Icon name="icon-icon_shanchu" style={{ marginLeft: '4px' }} />
            </span>
          </div>
        );
      })}
    </div>
  );
}

export default EventList;

export interface IEventLists {
  list: IEventList[];
  change?: Function;
}

export interface IEventList {
  title: string | number;
  type: string;
  key: string;
}