import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Form, Input, Select, DatePicker, InputNumber, Button, Modal } from 'antd';
import { unitList } from '../containers/assess'
import { getAssess, delAssess, editAssess } from '../actions/assess';
import moment from 'moment';
import { getRoadadministration, addRoadadministration, delRoadadministration, modifyRoadadministration } from '../actions/luzheng';
// import Uploads from "../../../../components/Upload/index"
// import Uploads from '../../../components/Upload/index'
import Uploads from './uploads'
const { Option } = Select;

const LuzhengModel = ({ editData, check, visible, onCancel, dispatch }) => {
    const [form] = Form.useForm();
    // console.log(editData,'editData')
    return (
        <Modal
            title="路政信息"
            open={visible}
            visible={visible}
            cancelButtonProps={{
                disabled: check,
            }}
            footer={!check ? [
                <Button key="submit" type="primary" onClick={() => {
                    if (check) {
                        return onCancel()
                    }
                    form.validateFields().then(values => {
                        if (editData) {
                            dispatch(modifyRoadadministration(editData?.id, {
                                ...values
                            })).then(res => {
                                if (res.success) {
                                    onCancel()
                                }
                            })
                        } else {
                            dispatch(addRoadadministration({
                                ...values,
                            })).then(res => {
                                if (res.success) {
                                    onCancel()
                                }
                            })
                        }

                    })
                }}>
                    确定
                </Button>,
                <Button onClick={onCancel}>
                    取消
                </Button>
            ] : null}
            onOk={() => {
                if (check) {
                    return onCancel()
                }
                form.validateFields().then(values => {
                    if (editData) {
                        dispatch(modifyRoadadministration(editData?.id, {
                            ...values
                        })).then(res => {
                            if (res.success) {
                                onCancel()
                            }
                        })
                    } else {
                        dispatch(addRoadadministration({
                            ...values,
                        })).then(res => {
                            if (res.success) {
                                onCancel()
                            }
                        })
                    }

                })
            }}
            onCancel={() => {
                onCancel()
            }}
        >
            <Form
                form={form}
                initialValues={editData ? {
                    ...editData,
                    enforcementdate: moment(editData.enforcementdate)
                } : {}}
                disabled={check}
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 18,
                }}
            >
                <Form.Item name="enforcementdate" label="执法日期" rules={[{ required: true, message: '请填写' }]}>
                    {/* <Select>
                        {
                            unitList.map(item => (
                                <Option value={item} key={item} />
                            ))
                        }
                    </Select> */}
                    <DatePicker />
                </Form.Item>

                <Form.Item name="roadname" label="执法道路" rules={[{ required: true, message: '请填写' }, { max: 100, message: '不可超过一百个字符' }]}>
                    <Input />
                </Form.Item>

                <Form.Item name="enforcementreslt" label="执法成果" rules={[{ required: true, message: '请填写' }, { max: 100, message: '不可超过一百个字符' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="picfile" label="执法图片">
                    <Uploads
                        maxFilesNum={3}
                        fileTypes={['png', 'jpg', 'jpeg']}
                        maxFileSize={200}
                        fileList={editData?.picfile}
                        listType={'picture-card'}
                        isedit={editData ? true : false}
                    />
                </Form.Item>
            </Form>
        </Modal>
    );
};

function mapStateToProps(state) {
    const { auth, assess } = state
    return {
        user: auth.user,
        assess: assess.data || []
    }
}
export default connect(mapStateToProps)(LuzhengModel);