import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import Uploads from '$components/Uploads';
import { Input, Modal, Form, Button, message, Select } from 'antd';
import { getProjectGraph, createGraph, updateGraph } from '../../actions/graph';

const DisclosureModal = (props) => {
    const { dispatch, onCancel, projectId, pictureInfo, getData } = props;
    let files = pictureInfo ? [{ storageUrl: pictureInfo.graph }] : []
    const [form] = Form.useForm();
    const [editUrl, setEditUrl] = useState(files);
    //初始化表单数据
    const getinitialValues = () => {
        if (pictureInfo) {
            return { files: 1 };
        }
        return {}
    };

    useEffect(() => {
    }, []);

    const handleOk = () => {
        form.validateFields().then(values => {
            let data = {
                projectId: projectId,
                graph: editUrl[0]?.storageUrl,
            }
            if (pictureInfo) {//更新
                dispatch(updateGraph(pictureInfo.id, data)).then(_ => {
                    getData()
                });
            } else {//新增
                dispatch(createGraph(data)).then(_ => {
                    getData();
                });
            }
            onCancel()
        })
    }

    const vsjunct = (params) => {
        if (params.length) {
            let appendix = []
            for (let p of params) {
                appendix.push({
                    fName: p.name,
                    size: p.size,
                    fileSize: p.size,
                    storageUrl: p.storageUrl,//必须有storageUrl
                })
            }
            setEditUrl(appendix)
        } else {
            setEditUrl([])
        }
    }

    return (
        <Modal title='添加布设图' visible={true} destroyOnClose
            onCancel={onCancel} onOk={handleOk}>
            <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} initialValues={getinitialValues()}>
                <Form.Item label="布设图" name='files'
                    rules={[{ required: true, message: '请上传布设图' }]}>
                    <Uploads
                        className='upload'
                        listType='card'
                        uploadType='project'
                        maxFilesNum={1}
                        maxFileSize={10}
                        isQiniu={true}
                        onChange={vsjunct}
                        fileTypes={["png", "jpeg", "jpg"]}
                        value={editUrl}
                        defaultValue={editUrl}
                    />
                </Form.Item>
                <Form.Item style={{ paddingLeft: '17%' }}>
                    <div style={{ color: '#999', width: 460 }}>说明：附件格式为png、jpeg、jpg，大小不超过10MB</div>
                </Form.Item>
            </Form>
        </Modal>
    )
}

function mapStateToProps(state) {
    const { auth, global } = state;
    return {
        user: auth.user,
        actions: global.actions,
    }
}

export default connect(mapStateToProps)(DisclosureModal);