import { useModel } from 'umi'
import { Modal, Button, Form, Select, message, Space } from 'antd'
import { SelectValue } from 'antd/es/select'
import React, { useCallback, useEffect, useState } from "react"
const { Option } = Select

type Props = {
    visible: boolean,
    // handleOk: () => void
    hideModal: () => void,
    editData?: any,
    ajax: any,
    dataType: string
}

function AddTitle(props: Props) {
    let { visible, hideModal, editData, ajax, dataType: typeData } = props

    const [queryForm, setQueryForm] = useState<any>({ content: '', labelIds: [], type: 1, dataType: '' })
    const { addContents, getLabels, editContents, dataLable } = useModel('useLaunch.useMaterial')
    useEffect(() => {
        if (editData && typeof editData === 'object' && Object.keys(editData).length > 0) {
            let { content, labelIds, type, id } = editData
            setQueryForm({ content, labelIds:labelIds || [], type, id })
        }
    }, [editData])
    useEffect(() => {
        getLabels.run({ pageNum: 1, pageSize: 200 })
    }, [])
    /** 上传创意 确定  */
    const handleOk = useCallback(() => {
        let { labelIds, id } = queryForm
        if (labelIds.length === 0) { message.error('请选择标签') }
        dataLable.run({ labelIds: labelIds?.toString(), id, name: 'tagContent' }).then(res => {
            setQueryForm({ title: '', labelIds: [], type: 1 })
            hideModal()
            ajax?.refresh()
        })

    }, [queryForm])
    return <Modal visible={visible} title="修改标签" onOk={handleOk} onCancel={hideModal}
        footer={
            <>
                <Space>
                    <Button onClick={hideModal}>取消</Button>
                    <Button type="primary" onClick={handleOk} loading={addContents?.loading || editContents?.loading}>{editData && typeof editData === 'object' && Object.keys(editData).length > 0 ? '修改' : '新增'}</Button>
                </Space>
            </>
        }
    >
        <Form labelCol={{ span: 4 }}>
            {/* <Form.Item >
                <TextArea
                    disabled={editData && typeof editData === 'object' && Object.keys(editData).length > 0}
                    value={queryForm.title}
                    placeholder="请输入标题"
                    autoSize={{ minRows: 1, maxRows: 3 }}
                    onChange={(e) => { setQueryForm({ ...queryForm, title: e.target.value }) }}
                />
            </Form.Item>
            <Form.Item >
                <TextArea
                    disabled={editData && typeof editData === 'object' && Object.keys(editData).length > 0}
                    value={queryForm.content}
                    placeholder="请输入文案"
                    autoSize={{ minRows: 4, maxRows: 6 }}
                    onChange={(e) => { setQueryForm({ ...queryForm, content: e.target.value }) }}
                />
            </Form.Item> */}

            <Form.Item label="标签">
                <Select value={queryForm.labelIds} onChange={(value: SelectValue) => { setQueryForm({ ...queryForm, labelIds: value }) }} placeholder="选择标签" mode="tags">
                    {getLabels?.data?.records.map((item: any) => (<Option value={item?.id} key={item?.id}>{item?.label}</Option>))}
                </Select>
            </Form.Item>
            {/* <Form.Item label="类型">
                <Select value={queryForm.type} onChange={(value: SelectValue)=>{setQueryForm({...queryForm, type: value})}} placeholder="选择类型" disabled={editData && typeof editData === 'object' && Object.keys(editData).length > 0}>
                    <Option value={1}>标题</Option>
                    <Option value={2}>文案</Option>
                </Select>
            </Form.Item> */}
            {/* <Form.Item label="数据类型">
                <Select value={queryForm.dataType} disabled={editData && typeof editData === 'object' && Object.keys(editData).length > 0 && typeData === 'all'} onChange={(value: SelectValue) => { setQueryForm({ ...queryForm, dataType: value }) }} placeholder="选择数据类型">
                    <Option value='personal' disabled={editData && typeof editData === 'object' && Object.keys(editData).length > 0 && typeData === 'group'}>个人</Option>
                    <Option value='group'>公司云共享</Option>
                    <Option value='all'>个人云共享</Option>
                </Select>
            </Form.Item> */}
        </Form>
    </Modal>
}

export default React.memo(AddTitle)