import React from 'react';

import { Space, Tag } from 'antd';

// eslint-disable-next-line import/no-cycle
import { FilterResult } from '../..';
import { InfoList } from '../../api';
import styles from '../../index.module.scss';

type Props = {
  data: FilterResult;
  onDel: (key: string | number) => void;
};
export default function ResultItem({ data, onDel }: Props) {
  return (
    <div className={styles.filterItem}>
      <div className={styles.filterItemTitle}>已选：</div>
      <div className={styles.filterItemMain}>
        <Space size={10}>
          {data.provinceId && (
            // Object.keys(data).map((key) => {
            //   //@ts-ignore
            //   let item = data[key]
            //   return (
            //     <Tag
            //       closable
            //       onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
            //         onDel(key)
            //       }}
            //       key={key}
            //     >
            //       {item?.name}
            //     </Tag>
            //   )
            // })
            <Tag
              closable
              onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
                onDel('provinceId');
              }}
              key={data.provinceId.id}
            >
              {data.provinceId.name}
            </Tag>
          )}
          {data.categoryId &&
            data.categoryId.map((item: InfoList, index) => {
              return (
                <Tag
                  closable
                  onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
                    onDel(item.id);
                  }}
                  key={item.name}
                >
                  {item?.name}
                </Tag>
              );
            })}
        </Space>
      </div>
    </div>
  );
}
