import React, {useState} from 'react';
import { createForm } from 'rc-form';
import Upload from 'rc-upload';
import {DatePicker, List, WhiteSpace, WingBlank, Picker, Checkbox, Modal} from "antd-mobile";

import axiosRequest from "../../../utils/request";
import MailA from '../../../components/Adjunct/MailA'
import AddGood from './AddGood'
import './index.less'

const Item = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;
const alert = Modal.alert;

const Send = (props) => {
    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 [upload, setUpload] = useState([]);
    const uploaderProps = {
        multiple: true,
        beforeUpload(file) {
            const newUpload = [...upload, file];
            setUpload(newUpload);
            return false
        }
    };
    const uploadDelete = uid => {
        const newData = [...upload];
        const Index = newData.findIndex(item => item.uid === uid);
        Index > -1 && newData.splice(Index, 1);
        setUpload(newData)
    };

    /*添加、删除物品*/
    const [goods, setGoods] = useState([]);
    const [visible, setVisible] = useState(false);
    const [sGood, setSGood] = useState([]);
    const checkGood = (index, checked) => {
        const newData = [...sGood];
        const Index = sGood.findIndex(item => item.id === index);
        checked ? newData.push(goods[index]) : newData.splice(Index, 1);
        setSGood(newData)
    };
    const addGoods = (values) => {
        const newGood = [...goods, values];
        const newGoods = newGood.map((item, index) => ({...item, id: index, checked: false}));
        setGoods(newGoods)
    };
    const selectAll = (checked) => {
        setSGood(checked ? goods : [])
    };
    const deleteGood = () => {
        alert('删除记录', '确定删除选中的记录', [
            { text: '取消'},
            { text: '确认',
                onPress: () =>{
                    const ids = sGood.map(item => item.id);
                    const result = goods.filter(item => ids.indexOf(item.id) < 0);
                    setGoods(result);
                    setSGood([]);
                }
            },
        ])


    };
    const getGoodInfo = (index, e) => {
        e.preventDefault();
        const newGoods =  [...goods];
        newGoods[index].checked = !newGoods[index].checked;
        setGoods(newGoods)
    }

    return (
        <div>
            <form>
                <List className="send-content">
                    <Picker data={district} cols={1} {...getFieldProps('ss1')}>
                        <List.Item arrow="horizontal">申请人</List.Item>
                    </Picker>

                    <DatePicker className="send-date-style"{...getFieldProps('endtime')}>
                        <List.Item arrow="horizontal">申请日期</List.Item>
                    </DatePicker>
                    <DatePicker className="send-date-style"{...getFieldProps('endtime2')}>
                        <List.Item arrow="horizontal">申请科室</List.Item>
                    </DatePicker>
                    <List.Item extra={
                        <div className="good-btn-content">
                            <div className="good-btn mr-12 c-primary" onClick={() => setVisible(true)}>添加</div>
                            <div className={`good-btn ${sGood.length > 0 ? 'c-orange' : 'c-gray'}`} onClick={setGoods.length > 0 && deleteGood}>删除</div>
                        </div>
                    }>申请物品</List.Item>
                    {goods.length > 0 && (<Item onChange={(val) => selectAll(val.target.checked)}>全选</Item>)}
                    {goods.length > 0 && goods.map((item, index) => (
                        <AgreeItem className="mt-10" key={index} checked={sGood.findIndex(item => item.id === index) > -1} onChange={(val) => checkGood(index, val.target.checked)}>
                            <div className="good-item-box" onClick={(e) => getGoodInfo(index, e)}>
                                <div className="good-item-content">
                                    品名：{item.name || ''}
                                    <img src="/img/rarrow.png" alt="" className={`icon18 ${item.checked ? 'icon-checked' : 'icon-unchecked'}`}/>
                                </div>
                                {item.checked && (
                                    <div>
                                        <div className="good-item-content">领取人：{item.name || ''}</div>
                                        <div className="good-item-content">申请数量：{item.name || ''}</div>
                                        <div className="good-item-content">实际发放数量：{item.name || ''}</div>
                                    </div>
                                )}
                            </div>
                        </AgreeItem>
                    ))}

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

export default createForm()(Send);
