import React, { useEffect, useState } from 'react';
import { Modal, Input, Form, message, Select } from 'antd';
const { TextArea } = Input;
const ResourceCatalogModal = (props) => {
    const { resourceCatalog, onConfirm, onCancel, editData, organization } = props;
    const [form] = Form.useForm();
    useEffect(() => {
    }, []);
    const handleOk = () => {
        form.validateFields().then(values => {
            if (onConfirm) {
                if (editData.add) {
                    //新建
                    let exist = resourceCatalog.find(rc => rc.name === values.name);
                    if (exist) {
                        message.error('该资源目录名称已存在');
                        return false;
                    }
                    exist = resourceCatalog.find(rc => rc.code === values.code);
                    if (exist) {
                        message.error('该资源目录代码已存在');
                        return false;
                    }
                } else {//修改
                    let exist = resourceCatalog.find(rc => rc.name === values.name && rc.id != editData.record.id);
                    if (exist) {
                        message.error('该资源目录名称已存在');
                        return false;
                    }
                    exist = resourceCatalog.find(rc => rc.code === values.code && rc.id != editData.record.id);
                    if (exist) {
                        message.error('该资源目录代码已存在');
                        return false;
                    }
                }
                onConfirm(values)
            }
        })
    }
    const validatorNull = (rule, value, getFieldValue, validateFields) => {
        if (!value || !value.trim().length) {
            return Promise.reject(new Error(`${rule.field === 'name' ? '名称' : '代码'}不可空字符串`));
        }
        return Promise.resolve();
    }
    return (
        <Modal title={editData.title} open={true} destroyOnClose
            okText='确定' width={800}
            onOk={() => handleOk(null)}
            onCancel={onCancel}>
            <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} initialValues={editData.record || {}}>
                {editData.child ? <Form.Item
                    label='上级目录'
                    name='parentName'
                >
                    <Input disabled style={{ width: '90%' }} />
                </Form.Item> : null}
                <Form.Item
                    label='名称'
                    name='name'
                    rules={[{ required: true, message: '' }, { max: 50, message: `名称不超过50个字符` },
                    ({ getFieldValue, validateFields }) => ({
                        validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields) }
                    })]}>
                    <Input style={{ width: '90%' }} placeholder={`请输入名称`} />
                </Form.Item>
                <Form.Item
                    label='代码'
                    name='code'
                    rules={[{ required: true, message: '' }, { max: 50, message: `代码不超过50个字符` },
                    ({ getFieldValue, validateFields }) => ({
                        validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields) }
                    })]}>
                    <Input style={{ width: '90%' }} placeholder={`请输入代码`} />
                </Form.Item>

                <Form.Item
                    label='机构'
                    name='orgId'
                    disabled={editData?.orgId}
                    rules={[{ required: true, message: '' }]}
                >
                    <Select style={{ width: '90%' }} placeholder={`请输入代码`} >
                        {
                            organization?.map(s => (<Select.Option value={s.id}>{s.name}</Select.Option>))
                        }
                    </Select>
                </Form.Item>

                <Form.Item
                    label='描述'
                    name='description'
                    rules={[{ max: 255, message: `描述不超过255个字符` }]}>
                    <TextArea rows={4} style={{ width: '90%' }} placeholder={`请输入描述`} />
                </Form.Item>
            </Form>
        </Modal>
    )
}
export default ResourceCatalogModal;