import services from '@/services';
import { useRequest, useUpdateEffect } from 'ahooks';
import { ConfigProvider, Select } from 'antd';
import classNames from 'classnames';
import { useEffect, useMemo, useState } from 'react';
import styles from './index.less';

const TopSearch = ({ onSearch }: { onSearch: (val: any) => void }) => {
  const [searchParams, setSearchParams] = useState({dateType:'all'});
  
 
  const { data: sourceOption } = useRequest(
    services.CityRiskApi.eventSourceTypeSelect,
  );
  const { data } = useRequest(
    services.CityRiskApi.statisticalEventPc,
  );
  const items = useMemo(() => {
    return [
      {
        key: 'month',
        name: '当前预警',
        count: data?.data?.monthEventTotal,
      },
      {
        key: 'today',
        name: '今日预警',
        count: data?.data?.todayEventTotal,
      },
      {
        key: 'all',
        name: '全部预警',
        count: data?.data?.historyEventTotal,
      },
    ];
  }, [data]);
  useUpdateEffect(() => {
    onSearch(searchParams);
  }, [searchParams]);

  return (
    <div className={styles.container}>
      <div className={styles.searchTab}>
        {items?.map((item) => {
          return (
            <div
              className={styles.tabItem}
              onClick={() => {
                setSearchParams({ ...searchParams, dateType: item.key });
              }}
              style={
                searchParams?.dateType === item?.key
                  ? { color: 'white', backgroundColor: 'rgb(46, 147, 255)' }
                  : {}
              }
            >
              {item.name}
              <span
                className={classNames(
                  {
                    [styles.acCount]: searchParams?.dateType === item?.key,
                  },
                  {
                    [styles.count]: searchParams?.dateType !== 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: '红色风险', label: '红色风险' },
              { value: '黄色风险', label: '黄色风险' },
              { value: '橙色风险', label: '橙色风险' },
              { value: '一般风险', label: '一般风险' },
            ]}
            placeholder="全部等级"
            allowClear
            onChange={(e) => {
              setSearchParams({ ...searchParams, riskLevelCode: e });
            }}
          />
          <Select
            style={{ width: 157, height: 40 }}
            options={sourceOption?.data?.map((item) => ({
              ...item,
              value: item?.VALUE,
              label:item?.name
            }))}
            placeholder="全部来源"
            allowClear
            onChange={(e) => {
              setSearchParams({ ...searchParams, source: e });
            }}
          />
          <Select
            style={{ width: 157, height: 40 }}
            allowClear
            options={[
              { value: '升级为预警', label: '升级为预警' },
              { value: '已消除', label: '已消除' },
              { value: '处置中', label: '处置中' },
            ]}
            placeholder="全部状态"
            onChange={(e) => {
              setSearchParams({ ...searchParams, disposalStatus: e });
            }}
          />
        </ConfigProvider>
      </div>
    </div>
  );
};
export default TopSearch;
