import React from 'react';
import { Row, Form, Select, InputNumber, Switch, Input, Slider } from 'antd';
import styles from './index.less';

const { Option } = Select;
const TableLayoutFormItems = (props) => {
  const { defaultTableWidth, defaultTableHeight } = props;
  return <>
    <Form.Item
      label="宽度"
      name="width"
      initialValue={defaultTableWidth}
    >
      <Slider/>
    </Form.Item>
    <Form.Item
      label="高度"
      name="height"
      initialValue={defaultTableHeight}
    >
      <Slider/>
    </Form.Item>
    <Form.Item
      label="标题"
      name="title"
      rules={[
        {
          required: true,
          message: '标题必填',
        },
      ]}
    >
      <Input/>
    </Form.Item>
  </>;
};
const OthersFormItems = () => {
  return <>
    <Form.Item label="标题" name="text">
      <Input/>
    </Form.Item>
    <Form.Item label="字体大小" name="fontSize" initialValue={14}>
      <InputNumber/>
    </Form.Item>
    <Form.Item
      label="字体颜色"
      name="fontColor"
      initialValue={'#000000'}
    >
      <Input type="color" style={{ width: 70 }}/>
    </Form.Item>
    <Row className={styles.commonTitle}>y轴配置</Row>
    <Form.Item label="轴1名称" name="yAxisName">
      <Input/>
    </Form.Item>
    <Form.Item label="轴2名称" name="yAxisName2">
      <Input/>
    </Form.Item>
    <Row className={styles.commonTitle}>其他配置</Row>
    <Form.Item
      label="图例位置"
      name="legendPosition"
      initialValue={'right'}
    >
      <Select>
        <Option value="left">左</Option>
        <Option value="center">中</Option>
        <Option value="right">右</Option>
      </Select>
    </Form.Item>

    <Form.Item label="图表布局">
      <Form.Item label="左" name="left" initialValue={20}>
        <InputNumber/>
      </Form.Item>
      <Form.Item label="右" name="right" initialValue={20}>
        <InputNumber/>
      </Form.Item>
      <Form.Item label="上" name="top" initialValue={20}>
        <InputNumber/>
      </Form.Item>
      <Form.Item label="下" name="bottom" initialValue={20}>
        <InputNumber/>
      </Form.Item>
    </Form.Item>
    <Form.Item
      label="数据缩放"
      name="showDataZoom"
      valuePropName="checked"
    >
      <Switch/>
    </Form.Item>
  </>;
};
export {
  OthersFormItems, TableLayoutFormItems,
};
