//搜索模块
//入参：
//onSearch({s_time, e_time}) 搜索函数
//onExport 导出函数
//defaultValue dayjs[] 默认值, 不传则为1天
//type 分类样式: 1为分行展示, 2为一行展示, 3不包含"近一月"、"近一周"、"近一天"按钮
import { Button, DatePicker, Form } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import styles from './ManagementPage.less';

function SearchModule(props) {
  const {
    onSearch,
    onExport,
    style,
    defaultValue = [dayjs().subtract(1, 'day'), dayjs()],
    type,
    backBtn,
  } = props;

  const [form] = Form.useForm();
  const [searchType, setSearchType] = useState(type);

  useEffect(() => {
    if (type == 1 || type == 2) window.addEventListener('resize', resize);
    resize();
    return () => {
      window.removeEventListener('resize', resize);
    };
  });

  const handleSearch = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      onSearch?.({
        s_time: dayjs(fieldsValue.start_date).format('YYYY-MM-DD 00:00:00'),
        e_time: dayjs(fieldsValue.end_date).format('YYYY-MM-DD 23:59:59'),
      });
    });
  };

  const searchTime = (type) => {
    form.setFieldsValue({
      start_date: dayjs().subtract(1, type),
      end_date: dayjs(),
    });
    onSearch?.({
      s_time: dayjs().subtract(1, type).format('YYYY-MM-DD 00:00:00'),
      e_time: dayjs().format('YYYY-MM-DD 23:59:59'),
    });
  };

  const resize = () => {
    if (document.documentElement.clientWidth > 1200) setSearchType(2);
    else setSearchType(1);
  };

  return (
    <div className={styles[`searchWrapper${searchType}`]} style={style}>
      <Form
        layout="inline"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        className={styles[`searchDate${searchType}`]}
      >
        <Form.Item
          label="开始时间"
          name="start_date"
          initialValue={defaultValue[0]}
        >
          <DatePicker
            inputReadOnly
            allowClear={false}
            placeholder="选择开始日期"
            className={styles.datePicker}
          />
        </Form.Item>
        <Form.Item
          label="结束时间"
          name="end_date"
          initialValue={defaultValue[1]}
        >
          <DatePicker
            inputReadOnly
            allowClear={false}
            placeholder="选择结束日期"
            className={styles.datePicker}
          />
        </Form.Item>
      </Form>
      <div className={styles[`searchBtnWrapper${searchType}`]}>
        <div>
          {type != 3 && (
            <>
              <Button
                type="primary"
                onClick={() => searchTime('day')}
                className={styles.searchBtn}
              >
                近一天
              </Button>
              <Button
                type="primary"
                onClick={() => searchTime('week')}
                className={styles.searchBtn}
              >
                近一周
              </Button>
              <Button
                type="primary"
                onClick={() => searchTime('month')}
                className={styles.searchBtn}
              >
                近一月
              </Button>
            </>
          )}
          <Button
            type="primary"
            onClick={handleSearch}
            className={styles.searchBtn}
          >
            查询
          </Button>
        </div>
        {onExport && (
          <div className={styles.exportBtn}>
            <Button
              type="primary"
              onClick={() => {
                form.validateFields((err, fieldsValue) => {
                  if (err) return;
                  onExport(
                    dayjs(fieldsValue.start_date).format('YYYY-MM-DD 00:00:00'),
                    dayjs(fieldsValue.end_date).format('YYYY-MM-DD 23:59:59'),
                  );
                });
              }}
            >
              导出
            </Button>
            {backBtn}
          </div>
        )}
      </div>
    </div>
  );
}

export default SearchModule;
