import React from 'react'
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    Space,
    Checkbox, Selector, Tag, Radio
} from 'antd-mobile'
import ParentTask from "../ParentTask";
import DatePickerItem from "../DataPickerItem"
import "./index.css"
export default () => {
    const now = new Date()
    const onFinish = (values) => {
        Dialog.alert({
            content: <pre>{JSON.stringify(values, null, 2)}</pre>,
        })
    }
    return (
        <>
            <Form
                layout='horizontal'
                onFinish={onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >
                <ParentTask/>
                <Form.Item
                    name='name'
                    label='任务名称'
                    rules={[{required: true, message: '任务名称不能为空'}]}
                >
                    <Input onChange={console.log} placeholder='任务名称'/>
                </Form.Item>
                <Form.Item name='address' label='任务描述' help='详情地址'>
                    <TextArea
                        placeholder='请输入地址'
                        maxLength={100}
                        rows={2}
                        showCount
                    />
                </Form.Item>
                <Form.Item name='state' label='任务状态' required>
                    <Radio.Group>
                        <Space direction='vertical'>
                            <Radio value='1'><Tag color='danger'>未开始</Tag></Radio>
                            <Radio value='2'><Tag color='warning'>进行中</Tag></Radio>
                            <Radio value='3'><Tag color='success'>已完成</Tag></Radio>
                            <Radio value='4'><Tag>已关闭</Tag></Radio>
                        </Space>
                    </Radio.Group>
                </Form.Item>
                <Form.Item name='priority' label='任务优先级'>
                    <Radio.Group>
                        <Space direction='vertical'>
                            <Radio value='1'><Tag color='danger'>紧急重要</Tag></Radio>
                            <Radio value='2'><Tag color='warning'>不紧急重要</Tag></Radio>
                            <Radio value='3'><Tag>紧急不重要</Tag></Radio>
                            <Radio value='4'><Tag color='success'>不紧急不重要</Tag></Radio>
                        </Space>
                    </Radio.Group>
                </Form.Item>
                <DatePickerItem fieldName={"expectedStartTime"} labelName={"预计开始时间"}/>
                <DatePickerItem fieldName={"expectedEndTime"} labelName={"预计结束时间"}/>
                <DatePickerItem fieldName={"actualStartTime"} labelName={"实际开始时间"}/>
                <DatePickerItem fieldName={"actualEndTime"} labelName={"实际结束时间"}/>
            </Form>
        </>
    )
}