import { useAjax } from "@/Hook/useAjax"
import { updateMaterialApi } from "@/services/adqV3/cloudNew"
import { Button, Card, Form, Input, message, Modal, Space } from "antd"
import React from "react"


interface Props {
    initialValues: any
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}

/**
 * 修改文件
 * @returns 
 */
const UpdateFile: React.FC<Props> = ({ visible, onChange, onClose, initialValues }) => {

    /******************************/
    const [form] = Form.useForm();
    
    const updateMaterial = useAjax((params) => updateMaterialApi(params))
    /******************************/

    const handleOk = (values: any) => {
        console.log(values)
        updateMaterial.run({ ...values, id: initialValues.id }).then(res => {
            if (res) {
                message.success('修改成功')
                onChange?.()
            }
        })
    }

    return <Modal
        title={<strong>{'修改素材'}</strong>}
        open={visible}
        onCancel={onClose}
        footer={null}
        className="modalResetCss"
        bodyStyle={{ padding: '0 0 40px', position: 'relative', borderRadius: '0 0 8px 8px' }}
        maskClosable={false}
        width={600}
    >
        <Form
            form={form}
            name="newFolder"
            labelAlign='left'
            labelCol={{ span: 4 }}
            layout="horizontal"
            colon={false}
            style={{ backgroundColor: '#f1f4fc', maxHeight: 650, overflow: 'hidden', overflowY: 'auto', padding: '10px', borderRadius: '0 0 8px 8px' }}
            scrollToFirstError={{
                behavior: 'smooth',
                block: 'center'
            }}
            onFinishFailed={({ errorFields }) => {
                message.error(errorFields?.[0]?.errors?.[0])
            }}
            onFinish={handleOk}
            initialValues={initialValues}
        >
            <Card className="cardResetCss">
                <Form.Item name="materialName" label={<strong>素材名称</strong>} required={false} rules={[{ required: true, message: '请输入素材名称!' }]}>
                    <Input placeholder="文件夹名称" />
                </Form.Item>
                <Form.Item name="description" label={<strong>备注</strong>}>
                    <Input.TextArea placeholder="备注" />
                </Form.Item>
            </Card>
            <Form.Item className="submit_pull">
                <Space>
                    <Button onClick={onClose}>取消</Button>
                    <Button type="primary" htmlType="submit" loading={updateMaterial.loading} className="modalResetCss">
                        确定
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(UpdateFile)