import React, {useState, useEffect} from 'react';
import { createForm } from 'rc-form';
import axiosRequest from "../../../utils/request";
import {DatePicker, List, TextareaItem, WhiteSpace, WingBlank, Picker, InputItem} from "antd-mobile";
import MailA from '../../../components/Adjunct/MailA'
import Upload from 'rc-upload';
import './index.less'
import queryString from "query-string";

const Send = (props) => {
    const [searchValue, setSearchValue] = useState({});
    useEffect(() => {
        const query = queryString.parse(props.location.search);
        let search = {};
        if (Object.keys(query).length > 0) {
            const data = JSON.parse(localStorage.getItem('search'));
            search =  {...data, ...query}
        }
        setSearchValue(search);
        localStorage.removeItem('search')
    }, []);
    const {getFieldProps} = props.form;

    const onSubmit = () => {
        props.form.validateFields({ force: true }, (error) => {
            if (!error) {
                const values = props.form.getFieldsValue();
                console.log(values);
                axiosRequest({
                    method: 'post',
                    url: '/idtAppServiceV6/application/interfaces/addCalendar.jsp',
                    body: values,
                }).then(res => {});
            }
        });
    };

    const district = [
        {label: '111', value: '111'}
    ];

    const [upload2, setUpload2] = useState([]);

    const uploaderProps2 = {
        multiple: true,
        beforeUpload(file) {
            const newUpload = [...upload2, file];
            setUpload2(newUpload);
            return false
        }
    };
    const uploadDelete2 = uid => {
        const newData = [...upload2];
        const Index = newData.findIndex(item => item.uid === uid);
        Index > -1 && newData.splice(Index, 1);
        setUpload2(newData)
    };

    const CustomChildren = ({ extra, onClick }) => (
        <div onClick={onClick} className="time-meeting">
            <span>{extra}</span>
        </div>
    );

    const getPlace = () => {
        // saveValue()
    };
    const getPeople = () => {
        // saveValue()
    };
    const saveValue = values => {
        localStorage.setItem('search', JSON.stringify(values))
    }
    return (
        <div>
            <form>
                <List className="send-content">
                    <InputItem {...getFieldProps('s1')}>会议标题</InputItem>
                    <DatePicker mode="date" className="send-date-style" {...getFieldProps('endtime', {initialValue: setSearchValue.endtime})}>
                        <List.Item arrow="horizontal">会议日期</List.Item>
                    </DatePicker>
                    <List.Item className="auto-flex-2" extra={
                       <div className="pos-aline auto-time-select">
                           <DatePicker mode="time" className="send-date-style" {...getFieldProps('endtime', {initialValue: setSearchValue.endtime22})}>
                               <CustomChildren/>
                           </DatePicker>
                           -
                           <DatePicker mode="time" className="send-date-style" {...getFieldProps('endtime22', {initialValue: setSearchValue.endtime22})}>
                               <CustomChildren/>
                           </DatePicker>
                       </div>
                    }>会议时间</List.Item>
                    <List.Item className="auto-flex" extra={
                        <div>
                            <div className="meet-select-btn">选择会议地点</div>
                        </div>
                    }>会议地点</List.Item>
                    <InputItem {...getFieldProps('s3')}>参加人数</InputItem>
                    <Picker data={district} cols={1} {...getFieldProps('ss1', {preserve: true})}>
                        <List.Item arrow="horizontal">会议类别</List.Item>
                    </Picker>
                    <InputItem {...getFieldProps('s3')}>预约单位</InputItem>
                    <DatePicker mode="date" className="send-date-style" {...getFieldProps('endtime2', {preserve: true})}>
                        <List.Item arrow="horizontal">预约时间</List.Item>
                    </DatePicker>
                    <List.Item extra="11111">预约人</List.Item>
                    <InputItem {...getFieldProps('s3s')}>联系方式</InputItem>

                    <List.Item className="auto-flex" extra={
                        <div>
                            <div className="meet-select-btn">选择参会人员</div>
                        </div>
                    }>参会人员</List.Item>

                    <TextareaItem
                        title="备注"
                        placeholder="请输入备注"
                        {...getFieldProps('_mail_editor_text')}
                        rows={4}
                    />

                    {/*附件*/}
                    <div className="am-textarea-label upload-title">附件：</div>
                    <WingBlank>
                        {upload2.length > 0 && upload2.map((item, index) => (
                            <MailA key={index} data={item} onDelete={uploadDelete2}/>
                        ))}
                    </WingBlank>
                    <Upload className="auto-upload" {...uploaderProps2}>
                        <a className="auto-upload">上传附件 +</a>
                    </Upload>
                    <WhiteSpace/>
                </List>
                <div className="event-footer">
                    <div className="event-footer-button" onClick={onSubmit}>发送</div>
                </div>
            </form>
        </div>
    );
};

export default createForm()(Send);
