import { Input, Card, Select, Button, message } from "antd"
import { useEffect, useState } from 'react'
import { Form } from "antd";
import { history } from 'umi';
import ProCard from '@ant-design/pro-card'

const { Option } = Select
const goBack = () => {
  history.goBack()
}
const FormItem = Form.Item
export default (props) => {

  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)

  const formItemLayout = {
    //布局
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };

  const Submit = values => {
    setLoading(false)
    console.log("🚀 ~ file: index.jsx ~ line 21 ~ values", values)

  };

  return (
    <Card >
      <ProCard tabs={{ type: 'card' }} style={{ marginTop: '16px' }}
      >
        <ProCard.TabPane key={1} tab="设备管理">
          <Form {...formItemLayout} onFinish={Submit} form={form} >
            <FormItem label="设备ID" name="shopName" rules={[{ required: true, message: '请输入' }]}>
              <Input placeholder="请输入" style={{ width: '350px' }} />
            </FormItem>
            <FormItem label="设备号" name="title" rules={[{ required: true, message: '请输入' }]}>
              <Input placeholder="请输入" style={{ width: '350px' }} />
            </FormItem>
            <FormItem label=" " colon={false} >
              <Button type='default' onClick={() => goBack()} >返回</Button>
              <Button type='primary' loading={loading} htmlType="Submit" style={{ marginLeft: '4em' }}>保存</Button>
            </FormItem>
          </Form>
        </ProCard.TabPane>
      </ProCard>
    </Card>
  )
}