//图表弹窗
import ChartModule from '@/components/ManagementPage/chartModule';
import { Button, Col, DatePicker, Form, Modal, Row } from 'antd';
import dayjs from 'dayjs';
const FormItem = Form.Item;
function chartModal(props) {
  const {
    visible,
    form,
    yName,
    xData,
    dataList,
    typeList,
    onChange,
    onSearch,
    title = '详情',
    onCancel,
    sTimeInitialValue,
    eTimeInitialValue,
    type = true, //true 显示 false 隐藏时间查询
  } = props;
  const handleSearch = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      console.log(fieldsValue);
      onSearch?.({
        s_time: dayjs(fieldsValue.start_date).format('YYYY-MM-DD'),
        e_time: dayjs(fieldsValue.end_date).format('YYYY-MM-DD'),
      });
    });
  };
  return (
    <Modal
      visible={visible}
      destroyOnClose
      footer={false}
      onCancel={onCancel}
      title={title}
      width="90%"
    >
      {type && (
        <Form
          layout="inline"
          // labelAlign="left"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
        >
          <Row gutter={24}>
            <Col span={10}>
              <FormItem label="开始时间">
                {form.getFieldDecorator('start_date', {
                  initialValue: sTimeInitialValue || dayjs().subtract(1, 'M'),
                })(
                  <DatePicker
                    inputReadOnly
                    allowClear={false}
                    placeholder="选择开始日期"
                  />,
                )}
              </FormItem>
            </Col>
            <Col span={10}>
              <FormItem label="结束时间">
                {form.getFieldDecorator('end_date', {
                  initialValue: eTimeInitialValue || dayjs(),
                })(
                  <DatePicker
                    inputReadOnly
                    allowClear={false}
                    placeholder="选择结束日期"
                  />,
                )}
              </FormItem>
            </Col>
            <Col span={2}>
              <Button
                onClick={() => {
                  handleSearch();
                }}
                type="primary"
              >
                查询
              </Button>
            </Col>
          </Row>
        </Form>
      )}
      <div style={{ height: 400, marginTop: 20 }}>
        <ChartModule
          yName={yName}
          xData={xData}
          dataList={dataList}
          typeList={typeList}
          onChange={onChange}
        ></ChartModule>
      </div>
    </Modal>
  );
}

export default Form.create()(chartModal);
