import { App, Card, Form, Input, Modal, Space } from "antd"
import React, { useEffect } from "react"
import MaterialMould from "../../components/materialMould";
import { useAjax } from "@/Hook/useAjax";
import { addMsgTemplateApi } from "../../API/weMaterial/weMaterial";
import InputTag, { TagProps } from "./inputTag";
import dayjs from 'dayjs'

interface Props {
    isPersonal: '1' | '0'
    visible?: boolean
    onClose?: () => void
    value?: any
    onChange?: () => void
}
/**
 * 新增素材
 * @returns 
 */
const AddEditSc: React.FC<Props> = ({ onChange, isPersonal, value, visible, onClose }) => {

    /*****************************/
    const { message } = App.useApp();
    const [form] = Form.useForm();

    const addMsgTemplate = useAjax((params) => addMsgTemplateApi(params))
    /*****************************/

    useEffect(() => {
        if (value && Object.keys(value).length > 0) {
            form.setFieldsValue({ ...value })
        }
    }, [value])

    const handleOk = () => {
        form.validateFields().then(valid => {
            let { mediaTagIds, mediaTitle, ...data } = valid
            let params = { ...data, isPersonal, mediaTitle: mediaTitle || `上传于${dayjs().format('YYYY-MM-DD HH:mm:ss')}` }
            if (mediaTagIds && mediaTagIds?.length > 0) {
                params.mediaTagIds = mediaTagIds.map((item: TagProps) => item.tagId)
            }
            addMsgTemplate.run({ ...params, sourceSystem: 1 }).then(res => {
                if (res) {
                    message.success('新增成功')
                    onChange?.()
                    form.resetFields()
                }
            })
        }).catch(err => {})
    }

    return <>
        <Modal
            open={visible}
            title="新增素材"
            onCancel={() => onClose?.()}
            onOk={() => handleOk()}
            width={900}
            confirmLoading={addMsgTemplate.loading}
        >
            <Form
                form={form}
                name="control-hooks"
                labelAlign='left'
                labelCol={{ span: 2 }}
                initialValues={{}}
                colon={false}
            >
                <Space direction="vertical" style={{ width: '100%' }}>
                    <Card title="基本信息">
                        <Form.Item name="mediaTitle" label="素材标题">
                            <Input placeholder="请输入素材标题" />
                        </Form.Item>
                        <Form.Item name="mediaTagIds" label="素材标签">
                            <InputTag />
                        </Form.Item>
                    </Card>
                    <Card title="内容">
                        <Form.Item name="mediaContentDTOList" label="发送内容" rules={[{ required: true, message: '请设置内容!' }]}>
                            <MaterialMould dataNum={9} />
                        </Form.Item>
                    </Card>
                </Space>
            </Form>
        </Modal>
    </>
}


export default React.memo(AddEditSc)