import React, {useState, useEffect} from 'react';
import {WhiteSpace, WingBlank, Modal, Button, List, InputItem, DatePicker, Toast} from 'antd-mobile'
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
import Document from 'react-document-title'
import axiosRequest from '../../../utils/request';
import '../index.less'
import { createForm } from 'rc-form';
import moment from 'moment'

const DateCalendar = (props) => {
    // const [value, onChange] = useState(new Date());

    useEffect(() => {
       getDate()
    }, []);
    const [data, setData] = useState([])
    const getDate = () => {
        const upaccount = localStorage.getItem('upaccount');
        axiosRequest({
            method: 'post',
            url: '/idtAppServiceV6/application/interfaces/getMyRc.jsp',
            body: {upaccount},
        }).then(res => {
            setData(res);
        });
    }


    const [visible, setVisible] = useState(false);
    const [editVisible, setEditVisible] = useState(false);
    const {getFieldProps} = props.form;

    const onSubmit = () => {
        props.form.validateFields({ force: true }, (error) => {
            if (!error) {
                const values = props.form.getFieldsValue();
                values.starttime = moment(values.starttime).format("YYYY-MM-DD HH:mm:ss");
                values.endtime = moment(values.endtime).format("YYYY-MM-DD HH:mm:ss");
                values.upaccount = localStorage.getItem('upaccount');
                axiosRequest({
                    method: 'post',
                    url: '/idtAppServiceV6/application/interfaces/addCalendar.jsp',
                    body: values,
                }).then(res => {
                    Toast.success('添加成功');
                    getDate();
                    onReset()
                });
            }
        });
    };
    const onReset = () => {
        setEditVisible(false);
        props.form.resetFields();
    };
    //自定义日历组件
    const [selectedDays, setSelectedDays] = useState(new Date(moment()));
    const modifiers = {birthday: [new Date(2020,5,2), new Date(2020,5,3)]};
    const WEEKDAYS_LONG = {
        zh: ['周日', '周一', '周二', '周三', '周四', '周五', '周六',]
    };
    const WEEKDAYS_SHORT = {
        zh: ['日', '一', '二', '三', '四', '五', '六'],
    };
    const MONTHS = {
        zh: ['01 月', '02 月', '03 月', '04 月', '05 月', '06 月', '07 月', '08 月', '09 月', '10 月', '11 月', '12 月'],
    };
    const FIRST_DAY = { zh: 0 };
    function formatDay(d, locale = 'zh') {
        return `${WEEKDAYS_LONG[locale][d.getDay()]}, ${d.getDate()} ${
            MONTHS[locale][d.getMonth()]
            } ${d.getFullYear()}`;
    }
    function formatMonthTitle(d, locale = 'zh') {
        return `${d.getFullYear()} 年 ${MONTHS[locale][d.getMonth()]} `;
    }
    function formatWeekdayShort(i, locale = 'zh') {
        return WEEKDAYS_SHORT[locale][i];
    }
    function formatWeekdayLong(i, locale = 'zh') {
        return WEEKDAYS_SHORT[locale][i];
    }
    function getFirstDayOfWeek(locale = 'zh') {
        return FIRST_DAY[locale];
    }
    const localeUtils = {
        formatDay,
        formatMonthTitle,
        formatWeekdayShort,
        formatWeekdayLong,
        getFirstDayOfWeek,
    };

    //查看详情
    // const dateSelect = (day) => {
    //     axiosRequest({
    //         method: 'post',
    //         url: '/idtAppServiceV6/application/interfaces/getMyRcList.jsp',
    //         body: {},
    //     }).then(res => {
    //         console.log(res)
    //     });
    // };

    // const dateDelete = (day) => {
    //     axiosRequest({
    //         method: 'post',
    //         url: '/idtAppServiceV6/application/interfaces/deleteGRRC.jsp',
    //         body: {uuid: ''},
    //     }).then(res => {
    //         getDate();
    //         setVisible(false)
    //     });
    // };

    const [dateInfo, setDateInfo] = useState({});
    const openInfo = (item) => {
        setDateInfo(item)
        setVisible(true)
    };


    return (
        <Document title="待办">
            <WingBlank>
                <WhiteSpace/>
                <div className="auto-day-picker">
                    <DayPicker
                        locale="zh"
                        localeUtils={localeUtils}
                        modifiers={modifiers}
                        selectedDays={selectedDays}
                        onDayClick={(day) => setSelectedDays(day)}
                    />
                </div>
                <WhiteSpace/>
                <div className="date-todo-card">
                    {data.map((item, index) => (
                        <div key={index} className="date-todo-item" onClick={(item) => openInfo(item)}>
                            <div>出差携带物资</div>
                            <div>
                                <p>8:00</p>
                                <p>8:30</p>
                            </div>
                        </div>
                    ))}
                </div>
                <Modal
                    className="date-modal"
                    visible={editVisible}
                    transparent
                    onClose={() => setEditVisible(false)}
                >
                    <form>
                        <List>
                            <InputItem
                                {...getFieldProps('subject')}
                                placeholder="请输入标题"
                            >输入标题</InputItem>
                            <DatePicker
                                {...getFieldProps('starttime', {rules: [{ required: true, message: '必须选择开始日期' }],})}
                            >
                                <List.Item>选择开始日期</List.Item>
                            </DatePicker>
                            <DatePicker
                                {...getFieldProps('endtime', {rules: [{ required: true, message: '必须选择开始日期' }]})}
                            >
                                <List.Item>选择结束日期</List.Item>
                            </DatePicker>
                        </List>
                        <div className="modal-form-footer">
                            <Button className="date-button mr-12 bg-gray" inline onClick={onReset}>取消</Button>
                            <Button className="date-button" inline type="primary" onClick={onSubmit}>保存日程</Button>
                        </div>
                    </form>
                </Modal>
                <Modal
                    className="date-modal"
                    visible={visible}
                    transparent
                    onClose={() => setVisible(false)}
                >
                    <List className="date-info">
                        <InputItem disabled={true} extra={dateInfo.subject}>标题</InputItem>
                        <InputItem disabled={true} extra={dateInfo.starttime}>开始日期</InputItem>
                        <InputItem disabled={true} extra={dateInfo.endtime}>结束日期</InputItem>
                    </List>
                </Modal>
                <div className="event-footer">
                    <div className="event-footer-button" onClick={() => setEditVisible(true)}>添加日程</div>
                </div>

            </WingBlank>

        </Document>
    );
};

export default createForm()(DateCalendar);
