import {Button, Checkbox, DatePicker, Form, Input, Space, Switch, Tag} from "antd-mobile";
import ParentTask from "../../components/ParentTask";
import React from "react";
import dayjs from "dayjs";
import {CloseCircleFill} from "antd-mobile-icons";
import {useLocation, useNavigate, useOutletContext} from "react-router-dom";
const now = new Date()
const DetailSearchContext = () => {
    // 使用Outlet,传值修改标题
    const {setTitle} = useOutletContext();
    setTitle("搜索查询")
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const [visible, setVisible] = React.useState(false);
    const location = useLocation();
    console.log("DetailSearchContext",location);
    const {search,updateSearch} = location.state;
    console.log("DetailSearchContext.search",search)
    return (
        <Form
            form={form}
            layout='horizontal'
            onFinish={(values)=>{
                // navigate("/home/todo", { state: { search: values } })
                // 根据values处理search
                // updateSearch()
                navigate("/home/todo")
            }}
            footer={
                <Button block type='submit' color='primary' size='large'>
                    搜索
                </Button>
            }
        >
            <ParentTask form={form}/>
            <Form.Item
                name='name'
                label='任务信息'
            >
                <Input onChange={console.log} placeholder='任务信息'/>
            </Form.Item>

            <Form.Item name='state' label='任务状态' required>
                <Checkbox.Group>
                    <Space direction='vertical'>
                        <Checkbox value='8'><Tag color='danger'>未开始</Tag></Checkbox>
                        <Checkbox value='9'><Tag color='warning'>进行中</Tag></Checkbox>
                        <Checkbox value='7'><Tag color='success'>已完成</Tag></Checkbox>
                        <Checkbox value='10'><Tag color='success'>未完成</Tag></Checkbox>
                        <Checkbox value='6'><Tag>已关闭</Tag></Checkbox>
                    </Space>
                </Checkbox.Group>
            </Form.Item>
            <Form.Item name='priority' label='任务优先级'>
                <Checkbox.Group>
                    <Space direction='vertical'>
                        <Checkbox value='3'><Tag color='danger'>紧急重要</Tag></Checkbox>
                        <Checkbox value='2'><Tag color='warning'>不紧急重要</Tag></Checkbox>
                        <Checkbox value='1'><Tag>紧急不重要</Tag></Checkbox>
                        <Checkbox value='0'><Tag color='success'>不紧急不重要</Tag></Checkbox>
                    </Space>
                </Checkbox.Group>
            </Form.Item>
            <Form.Item noStyle
                       shouldUpdate={(prevValues, curValues) =>
                           prevValues.todoDay !== curValues.todoDay
                       }
            >
                {({ getFieldValue, setFieldsValue }) => (
                    <Form.Item
                        name='todoDay'
                        trigger='onConfirm'
                        label='TODO日'
                        help='期望开始时间和期望结束时间包含当日时间段'
                        arrow={
                            getFieldValue('todoDay') ? (
                                <CloseCircleFill
                                    style={{
                                        color: 'var(--adm-color-light)',
                                        fontSize: 14,
                                    }}
                                    onClick={e => {
                                        e.stopPropagation()
                                        setFieldsValue({ todoDay: null })
                                    }}
                                />) : true

                        }
                        onClick={() => {
                            setVisible(true)
                        }}
                    >
                        <DatePicker
                            visible={visible}
                            onClose={() => {
                                setVisible(false)
                            }}
                        >
                            {value =>
                                value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
                            }
                        </DatePicker>
                    </Form.Item>
                )}
            </Form.Item>
            <Form.Item
                name='delivery'
                label='延期任务'
                childElementPosition='right'
            >
                <Switch defaultChecked={true}/>
            </Form.Item>
        </Form>)
}
export default DetailSearchContext;