import { ConfigProvider, Select } from 'antd';
import classNames from 'classnames';
import { useMemo, useState } from 'react';
import styles from './index.less';
const TopSearch = () => {
  const [searchParams, setSearchParams] = useState({
    warn: '1',
  });
  const items = useMemo(() => {
    return [
      {
        key: '1',
        name: '当前预警',
        count: 12,
      },
      {
        key: '2',
        name: '今日预警',
        count: 0,
      },
      {
        key: '3',
        name: '全部预警',
        count: 0,
      },
    ];
  }, []);
  return (
    <div className={styles.container}>
      <div className={styles.searchTab}>
        {items?.map((item) => {
          return (
            <div
              className={styles.tabItem}
              onClick={() => {
                setSearchParams({ ...searchParams, warn: item.key });
              }}
              style={
                searchParams.warn === item?.key
                  ? { color: 'white', backgroundColor: 'rgb(46, 147, 255)' }
                  : {}
              }
            >
              {item.name}
              <span
                className={classNames(
                  {
                    [styles.acCount]: searchParams.warn === item?.key,
                  },
                  {
                    [styles.count]: searchParams.warn !== item?.key,
                  },
                )}
              >
                {item?.count}
              </span>
              个
            </div>
          );
        })}
      </div>
      <div className={styles.rWarp}>
        <ConfigProvider
          theme={{
            token: {
              borderRadius: 20,
              colorBorder: '#326fa7',
            },
            components: {
              Select: {
                selectorBg: 'rgb(50, 111, 167)',
              },
            },
          }}
        >
          <Select
            style={{ width: 157, height: 40 }}
            options={[{ value: '1', label: '等级1' }]}
            placeholder="全部等级"
            onChange={(e)=>{

            }}
          />
            <Select
            style={{ width: 157, height: 40 }}
            options={[{ value: '1', label: '等级1' }]}
            placeholder="全部等级"
            onChange={(e)=>{
                
            }}
          />
            <Select
            style={{ width: 157, height: 40 }}
            options={[{ value: '1', label: '等级1' }]}
            placeholder="全部等级"
            onChange={(e)=>{
                
            }}
          />
        </ConfigProvider>
      </div>
    </div>
  );
};
export default TopSearch;
