import { Input, InputNumber, Modal, Tag } from 'antd'
import React, { useMemo } from 'react'
import { useModel } from 'umi'
import '../../../../pages/launchSystemV3/tencentAdPutIn/index.less'

/**新建文件夹,修改非图文素材名称 */
function FileModal(props: { isAll?: boolean }) {
    const { isAll } = props
    const { state, set, addFolder, nameOk, offEditFile } = useModel(isAll ? 'useLaunchAdq.useBdMedia' : 'useLaunchAdq.useBdMediaPup')
    const { fileVisible, actionItem, fileName, sort } = state
    const { state: { selectWx }, initSelectWx } = useModel('useOperating.useWxGroupList')//公众号筛选

    const title = useMemo(() => {
        if (actionItem?.folder) {
            return '编辑文件夹'
        }
        switch (actionItem?.fileType) {
            case 'IMG':
                return '编辑图片';
            case 'VIDEO':
                return '编辑视频';
        }
        return '新建文件夹'
    }, [actionItem])

    return <Modal
        open={fileVisible}
        destroyOnClose
        onOk={(e) => { actionItem ? nameOk(selectWx) : addFolder(); initSelectWx() }}
        onCancel={() => { offEditFile(); initSelectWx() }}
        width={500}
        title={<strong>{title}</strong>}
        closable={false}
        className='modalResetCss'
    >
        <Tag color='warning'>数值越大越靠前</Tag>
        <div style={{ display: 'flex', flexFlow: 'row', marginBottom: 10, alignItems: 'center', marginTop: 10 }}>
            <label style={{ width: '15%', fontWeight: 'bold' }}>排序</label>
            <InputNumber
                style={{ width: '100%' }}
                value={sort}
                placeholder='请输入序号, 数值越大越靠前'
                onChange={(e) => {
                    set({ sort: e || 0 })
                }}
            />
        </div>

        {<div style={{ display: 'flex', flexFlow: 'row', marginBottom: 10, alignItems: 'center' }}>
            <label style={{ width: '15%', fontWeight: 'bold' }}>名称</label>
            <Input
                value={fileName}
                allowClear
                placeholder='请输入名称'
                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                    set({ fileName: event.target.value })
                }}
            />
        </div>}
    </Modal>
}
export default React.memo(FileModal)