import React, { useState } from 'react'
import { Form, Input, InputNumber, message, Modal, Space, Upload, Image } from 'antd'
import { useModel } from 'umi'
import { RcFile } from 'antd/lib/upload'
import CropperImg from '../Cropper'
import { CloseCircleFilled} from '@ant-design/icons'
import './index.less'
import '../../../../pages/launchSystemV3/tencentAdPutIn/index.less'

/**新建非图文素材 */
let ImgsModal = React.memo((props: { isAll?: boolean }) => {

    /*****========STA=========*****/
    const { isAll } = props
    const [queryForm, setQueryForm] = useState<{ title: string, sort: number, fileSize: number, files: any[] }>({ title: '', sort: 0, fileSize: 0, files: [] })
    const [visible, setVisible] = useState<boolean>(false)
    const [file, setFile] = useState<any>(null)
    const { state, typeEnum, addFiles, offEditFile } = useModel(isAll ? 'useLaunchAdq.useBdMedia' : 'useLaunchAdq.useBdMediaPup')
    const { imgsVisrible, mediaType, actionItem, upLoadLoading } = state
    /*****========END=========*****/


    const handleOk = (e: any) => {
        e?.stopPropagation()
        if (queryForm?.files?.length > 0) {
            addFiles({ ...queryForm });
        } else {
            message.error('请上传素材')
        }
    }

    const clearHandle = (index: number) => {
        setQueryForm(() => ({ ...queryForm, files: queryForm.files.filter((item: any, i) => i !== index) }))
    }

    return <div>
        <Modal
            title={<strong>{(actionItem ? '编辑' : '批量新建') + typeEnum[mediaType as keyof typeof typeEnum]}</strong>}
            open={imgsVisrible}
            onOk={(e) => { handleOk(e) }}
            confirmLoading={upLoadLoading}
            onCancel={() => {
                offEditFile();
            }}
            width={700}
            destroyOnClose
            maskClosable={false}
            className='modalResetCss'
        >
            <Form
                name="basic"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                autoComplete="off"
                colon={false}
                labelAlign='left'
            >
                <Form.Item
                    label={<strong>图片名称</strong>}
                >
                    <Input value={queryForm.title} onChange={(e) => setQueryForm({ ...queryForm, title: e.target.value })} placeholder="请输入图片名称" />
                </Form.Item>
                {mediaType === 'IMG' && <Form.Item
                    label={<strong>图片大小</strong>}
                    tooltip="单位KB，0代表不填默认图片300KB；图片太大会压缩到此大小下"
                >
                    <InputNumber value={queryForm.fileSize} onChange={(e) => setQueryForm({ ...queryForm, fileSize: e || 0 })} placeholder="请输入图片大小" />
                </Form.Item>}
                <Form.Item
                    label={<strong>排序</strong>}
                    tooltip="数值越大越靠前"
                >
                    <InputNumber value={queryForm.sort} onChange={(e) => setQueryForm({ ...queryForm, sort: e || 0 })} placeholder="请输入排序" />
                </Form.Item>
                <Form.Item
                    label={<strong>{'上传' + typeEnum[mediaType as keyof typeof typeEnum]}</strong>}
                >
                    <Space direction='vertical'>
                        <Image.PreviewGroup>
                            <Space wrap>
                                {queryForm?.files?.map((item: any, index: number) => <div key={index} className='previewGroup'>
                                    <div className='clear' onClick={() => clearHandle(index)}><CloseCircleFilled /></div>
                                    <Image height={60} width={60} src={URL.createObjectURL(item)} className='imagePre'/>
                                </div>)}
                            </Space>
                        </Image.PreviewGroup>
                        <Space>
                            <Upload
                                listType="picture-card"
                                accept='image/gif,image/jpeg,image/png,image/jpg'
                                beforeUpload={(file: RcFile) => {
                                    return false
                                }}
                                multiple
                                fileList={[]}
                                onChange={(newFileList: any) => {
                                    console.log('newFileList-->', newFileList)
                                    let newFiles: any[] = queryForm.files
                                    newFiles.push(newFileList.file)
                                    setQueryForm({ ...queryForm, files: newFiles })
                                }}
                                style={{ marginRight: 0 }}
                            >
                                普通上传
                            </Upload>
                            <Upload
                                listType="picture-card"
                                accept='image/gif,image/jpeg,image/png,image/jpg'
                                beforeUpload={(file: RcFile) => {
                                    return false
                                }}
                                fileList={[]}
                                onChange={(newFileList: any) => {
                                    setFile(newFileList.file)
                                    setVisible(true)
                                }}
                            >
                                裁剪上传
                            </Upload>
                        </Space>
                    </Space>

                </Form.Item>
            </Form>
        </Modal>

        {/* 裁剪 */}
        {visible && <CropperImg visible={visible} onClose={() => setVisible(false)} file={file} onChange={(fileList: any[], file: any) => { 
            let newFiles: any[] = queryForm.files
            newFiles.push(file)
            setQueryForm({ ...queryForm, files: newFiles }); 
            setVisible(false) 
        }} />}
    </div>
})
export default React.memo(ImgsModal)