import { DatePicker } from 'antd';
import { useState } from 'react';
import Tabs from '../../../components/TopSarch/Tabs';
import styles from './index.less';
const { RangePicker } = DatePicker;
const TopSarch = ({
  onChange,
  items,
  defaultKey,
}: {
  onChange: (val: any) => void;
  items?: any[];
  defaultKey: string;
}) => {
  const [active, setActive] = useState(defaultKey);
  const [dateVal,setDateVal]=useState()
  return (
    <div className={styles.container}>
      <Tabs
        active={active}
        setActive={setActive}
        style={{
          background: 'transparent',
          height: '30px',
        }}
        itemStyle={{
          borderRadius: '25px',
          background: 'rgba(7, 50, 93, 0.8)',
          fontSize: '16px',
          marginLeft: 8,
        }}
        onChange={(e) => {
          setDateVal(null)
          if (e === 'today') {
            onChange({
              dateType: 'today',
            });
          }
          if (e === 'monthly') {
            onChange({
              dateType: 'monthly',
            });
          }
          if (e === 'yearly') {
            onChange({
              dateType: 'yearly',
            });
          }
        }}
        itemkey={'key'}
        items={
          items || [
            {
              key: 'today',
              label: '今日',
            },
            {
              key: 'monthly',
              label: '本月',
            },
            {
              key: 'yearly',
              label: '本年',
            },
          ]
        }
      />
      <div className={styles.rangWarp}>
        <RangePicker
        value={dateVal}
          onChange={(e) => {
            console.log(e);
            setDateVal(e)
            if (e?.length) {
              setActive('custom')
              onChange({
                dateType: 'custom',
                startTime: e[0].format('YYYY-MM-DD'),
                endTime: e[1].format('YYYY-MM-DD'),
              });
            }
          }}
        />
      </div>
    </div>
  );
};

export default TopSarch;
