import React from 'react';
import { Form, Select, DatePicker, Button } from 'antd';
import dayjs from 'dayjs';

const { Option } = Select;
const { MonthPicker } = DatePicker;

function SearchForm(props) {
  const { form, onSearch, typeList, project, loading } = props;
  const formItemLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 18 },
  };
  // const handleSearch = () => {
  //   form.validateFields((error, values) => {
  //     if (error) return;
  //     var weekOfday = dayjs(values.time).format('E'); //计算指定日期是这周第几天
  //     var last_monday = dayjs(values.time)
  //       .subtract(weekOfday - 1, 'days')
  //       .format('YYYY-MM-DD'); //周一日期
  //     var last_sunday = dayjs(values.time)
  //       .add(7 - weekOfday, 'days')
  //       .format('YYYY-MM-DD'); //周日日期

  //     onSearch({
  //       s_time: last_monday,
  //       e_time: last_sunday,
  //       parent_id: values.type,
  //       project_id: values.project,
  //     });
  //   });
  // };

  const handleChange = (data) => {
    var month = dayjs(data).month(); //计算指定日期是这周第几天
    var start = dayjs(data).date(1).format('YYYY-MM-DD'); //本月第一天
    var end = dayjs(data)
      .month(month + 1)
      .date(0)
      .format('YYYY-MM-DD'); //本月最后一天

    onSearch({
      s_time: start,
      e_time: end,
    });
  };

  return (
    <Form layout="inline" {...formItemLayout}>
      {/* <Form.Item label="分类">
        {form.getFieldDecorator('type', {
          rules: [
            {
              require: true,
              message: '请选择分类',
            },
          ],
        })(
          <Select style={{ width: 200 }}>
            {typeList.map(item => (
              <Option key={item.id + ''}>{item.name}</Option>
            ))}
          </Select>
        )}
      </Form.Item>
      {form.getFieldValue('type') == 3 && (
        <Form.Item label="项目">
          {form.getFieldDecorator('project', {
            initialValue: String(project[0].ID),
          })(
            <Select style={{ width: 200 }}>
              {project.map(item => (
                <Option key={String(item.ID)}>{item.Name}</Option>
              ))}
            </Select>
          )}
        </Form.Item>
      )} */}

      <Form.Item label="时间">
        {form.getFieldDecorator(
          'time',
          {},
        )(
          <MonthPicker
            onChange={(data) => handleChange(data)}
            placeholder="选择月份"
          />,
        )}
      </Form.Item>
      {/* <Form.Item>
        <Button type="primary" loading={loading} onClick={handleSearch}>
          查询
        </Button>
      </Form.Item> */}
    </Form>
  );
}

export default Form.create()(SearchForm);