import React, { createElement, useState, useEffect, Component } from 'react';
import { Form, NumberPicker, Grid } from '@alifd/next';
import './index.scss';

const FormItem = Form.Item;
const { Row, Col } = Grid;

interface CardModeSetterProps {}

const CardModeSetter = (props) => {
  const { onChange, value, initialValue } = props;
  console.log(props);

  const [formData, setFormData] = useState(value || initialValue);

  const InputChange = (value, type) => {
    const data = {
      ...formData,
      [type]: value,
    };
    setFormData(data);
    onChange(data);
  };

  return (
    <div className="cardmode">
      <Row>
        <Col span="12">
          <NumberPicker
            className="cardmode-numpiker"
            label="PC端"
            value={formData.pc}
            onChange={(e) => InputChange(e, 'pc')}
          />
        </Col>
        <Col span="12">
          <NumberPicker
            className="cardmode-numpiker"
            label="移动端"
            value={formData.mobile}
            onChange={(e) => InputChange(e, 'mobile')}
          />
        </Col>
      </Row>
    </div>
  );
};

export default class extends Component<CardModeSetterProps> {
  render() {
    return <CardModeSetter {...this.props} />;
  }
}