import { Col, Form, Input, Modal, Row } from 'antd';
import React from 'react';
import { createStyles } from 'antd-style';

const { TextArea } = Input;
const FormItem = Form.Item;
const useStyles = createStyles(({ css }) => ({
  formStyle: css`
     .ant-form-item-label {
       width: 100px !important;
     }
  `,
  modalStyle: css`
    .ant-modal-body {
      padding: 20px 0;
    }
    .ant-modal-footer {
      .ant-btn:nth-child(1) {
        width: 73px;
        height: 36px;
        border-radius: 4px;
        opacity: 1;
        background: #EBF4FF;
        box-sizing: border-box;
        border: 1px solid #B8D8FF;
        color: #177FFF;
      }
      .ant-btn:nth-child(2) {
        width: 73px;
        height: 36px;
        border-radius: 4px;
        opacity: 1;

        background: #80B9FF;
      }
    }
  `,
}));
const KnowledgeUpdateForm = (props) => {
    const { styles } = useStyles();
    const [form] = Form.useForm();

    const { handleUpdate, open, handleUpdateModalVisible, values } = props;

    React.useEffect(() => {
        form.setFieldsValue({
            description: props.values.description,
            id: props.values.id,
            title: props.values.title,
        });
    }, []);

    const handleLocalUpdate = () => {
        form.validateFields()
            .then((fieldsValue) => {
                handleUpdate({ ...values, ...fieldsValue });
            })
            .catch(() => {});
    };

    return (
        <Modal afterClose={() => handleUpdateModalVisible()} className={styles.modalStyle} destroyOnClose  onCancel={() => handleUpdateModalVisible(false, values)}  onOk={() => handleLocalUpdate()}  open={open} title="编辑知识库">
            <Form className={styles.formStyle} form={form}>
                <Row gutter={{ lg: 24, md: 8, xl: 48 }}>
                    <Col md={24} sm={24}>
                        <FormItem label="知识库名称" name="title" rules={[{ message: '请输入！', min: 1, required: true }]}>
                            <Input placeholder="请输入" />
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={{ lg: 24, md: 8,xl: 48 }}>
                    <Col md={24} sm={24}>
                        <FormItem label="知识库描述" name="description" rules={[{ message: '请输入！', min: 1,  required: false }]}>
                           <TextArea maxLength={255} placeholder="请输入"  rows={4} />
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    );
};

export default KnowledgeUpdateForm;
