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

const TopSearch = ({
  onSearch,
  defaultFetchParams,
}: {
  onSearch: (val: any) => void;
  defaultFetchParams: any;
}) => {
  const [searchParams, setSearchParams] = useState({ dateType:defaultFetchParams?.dateType|| 'all' });
  const { selectAreaId } = useModel('safetyAreaId');
  //预警数
  const { data: warnTotal } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-yjgl',
        data: {
          regionCode: selectAreaId,
        },
      }),
    {
      refreshDeps: [selectAreaId],
    },
  );

  const items = useMemo(() => {
    return [
      {
        key: 'month',
        name: '当前预警',
        count: warnTotal?.data?.data?.records?.[0]?.dqyjs ?? '--',
      },
      {
        key: 'today',
        name: '今日预警',
        count: warnTotal?.data?.data?.records?.[0]?.jryjs ?? '--',
      },
      {
        key: 'all',
        name: '全部预警',
        count: warnTotal?.data?.data?.records?.[0]?.qbyjs ?? '--',
      },
    ];
  }, [warnTotal]);

  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: '3', label: '红色风险' },
              { value: '2', label: '黄色风险' },
              { value: '4', label: '橙色风险' },
              { value: '1', label: '一般风险' },
            ]}
            placeholder="全部等级"
            allowClear
            defaultValue={defaultFetchParams?.risklevelid}
            onChange={(e) => {
              setSearchParams({ ...searchParams, risklevelid: e });
            }}
          />
          <Select
            style={{ width: 157, height: 40 }}
            options={[
              {
                value: '人工填报',
                label: '人工填报',
              },
              {
                value: '感知监测',
                label: '感知监测',
              },
            ]}
            placeholder="全部来源"
            allowClear
            onChange={(e) => {
              setSearchParams({ ...searchParams, dateSources: e });
            }}
          />
          <Select
            style={{ width: 157, height: 40 }}
            allowClear
            options={[
              { value: 1, label: '未处理' },
              { value: 2, label: '处置中' },
              { value: 3, label: '已解除' },
            ]}
            placeholder="全部状态"
            onChange={(e) => {
              setSearchParams({ ...searchParams, status: e });
            }}
          />
        </ConfigProvider>
      </div>
    </div>
  );
};
export default TopSearch;
