import React, { useEffect } from 'react';
import { Button, Select, Form, Input, message, DatePicker } from 'antd';
import { useNavigate } from 'react-router-dom';


const MovieForm = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate()
  // 提交并登录
  const onFinish = (values) => {
    values.regTime = values.regTime.format('YYYY-MM-DD') // 日期控件返回的是日期对象，需要转换！！！
    console.log(values)
  };


  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const [form] = Form.useForm()
  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };
  return (
    <div>
      <Form
        name="basic"
        form={form}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 16 }}
        style={{ flex: '0 0 600px', maxWidth: 600, padding: '50px 30px 30px 60px', borderRadius: 8 }}
        initialValues={{  }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="片名"
          name="movieName"
          rules={[{ required: true, message: '请输入片名' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="主演"
          name="star"
        >
          <Select
            mode="tags"
            style={{ width: '100%' }}
            placeholder="Tags Mode"
            onChange={handleChange}
            options={[]}
          />
        </Form.Item>
        <Form.Item
          label="地区"
          name="address"
        >
          <Select
            showSearch={true}
            style={{ width: '100%' }}
            onChange={handleChange}
            options={[{
              value: '123',
              label: '123',
            },
            {
              value: '885',
              label: '885',
            }]}
          />
        </Form.Item>

        <Form.Item
          label="上映时间"
          name="regTime"
        >
          <DatePicker style={{width: '100%'}}/>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 5, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
      { contextHolder }
    </div>
  )
};

export default MovieForm;