import { useAjax } from "@/Hook/useAjax"
import { copyWritingApi } from "@/services/adqV3/global"
import { Form, Input, message, Modal } from "antd"
import React from "react"
import '../../tencentAdPutIn/index.less'


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

/**
 * 文案操作
 * @param param0 
 * @returns 
 */
const ModifyCopyWriting: React.FC<Props> = ({ visible, initialValues, onClose, onChange }) => {

    /******************************/
    const [form] = Form.useForm()

    const copyWriting = useAjax((params) => copyWritingApi(params))
    /******************************/

    const handleOk = () => {
        form.validateFields().then(valid => {
            console.log(valid)
            let params = JSON.parse(JSON.stringify(valid))
            if (params?.contentList) {
                params.contentList = params?.contentList?.split(/[,，\n\s]+/ig).filter((item: any) => item)
            }
            if (initialValues?.id) {
                params.id = initialValues.id
            }
            copyWriting.run(params).then(res => {
                if (res) {
                    message.success(initialValues?.id ? '修改成功' : '新增成功')
                    onChange?.()
                }
            })
        })
    }

    return <Modal
        title={<strong>{initialValues?.id ? '修改文案' : '新增文案'}</strong>}
        open={visible}
        onCancel={onClose}
        className="modalResetCss"
        onOk={handleOk}
        confirmLoading={copyWriting.loading}
    >
        <Form
            name="basicCopyWriting"
            form={form}
            layout='vertical'
            autoComplete="off"
            initialValues={initialValues || {

            }}
        >
            <Form.Item label={<strong>分类</strong>} name="category" rules={[{ required: true, message: '请输入文案分类!' }]}>
                <Input placeholder="请输入文案分类" allowClear />
            </Form.Item>

            {initialValues?.id ? <Form.Item label={<strong>文案</strong>} name="content" rules={[{ required: true, message: '请输入文案!' }]}>
                <Input allowClear placeholder="请输入文案" />
            </Form.Item> : <Form.Item label={<strong>文案</strong>} name="contentList" rules={[{ required: true, message: '请输入文案!' }]}>
                <Input.TextArea
                    placeholder="请输入文案(多个，,空格换行)"
                    allowClear
                    rows={6}
                />
            </Form.Item>}
        </Form>
    </Modal>
}

export default React.memo(ModifyCopyWriting)